v13.4.2

fix(repo): no changes to commit
v13.4.1
2026-04-08 08:29:30 +00:00 · 2026-04-08 08:29:30 +00:00 · 2026-04-08 08:28:00 +00:00 · 2026-04-08 08:28:00 +00:00 · 2026-04-08 08:24:55 +00:00 · 2026-04-08 08:24:55 +00:00
80 changed files with 5299 additions and 2704 deletions
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,257 @@
 # Changelog

+## 2026-04-08 - 13.4.2 - fix(repo)
+no changes to commit
+
+
+## 2026-04-08 - 13.4.1 - fix(repo)
+no changes to commit
+
+
+## 2026-04-08 - 13.4.0 - feat(web-ui)
+reorganize dashboard views into grouped navigation with new email, access, and network subviews
+
+- Restructures the ops dashboard and router to use grouped top-level sections with subviews for overview, network, email, access, and security.
+- Adds dedicated Email Security and API Tokens views and exposes Remote Ingress and VPN under Network subnavigation.
+- Updates refresh and initial view handling to work with nested subviews, including remote ingress and VPN refresh behavior.
+- Moves overview, configuration, email, API token, and remote ingress components into feature directories and standardizes shared view styling.
+
+## 2026-04-08 - 13.3.0 - feat(web-ui)
+reorganize network and security views into tabbed subviews with route-aware navigation
+
+- add URL-based subview support in app state and router for network and security sections
+- group routes, source profiles, network targets, and target profiles under the network view with tab navigation
+- split security into dedicated overview, blocked IPs, authentication, and email security subviews
+- update configuration navigation to deep-link directly to the network routes subview
+
+## 2026-04-08 - 13.2.2 - fix(project)
+no changes to commit
+
+
+## 2026-04-08 - 13.2.1 - fix(project)
+no changes to commit
+
+
+## 2026-04-08 - 13.2.0 - feat(ops-ui)
+add column filters to operations tables across admin views
+
+- Enable table column filters for API tokens, certificates, network requests, top IPs, backends, network targets, remote ingress edges, security views, source profiles, target profiles, and VPN clients.
+- Improves filtering and exploration of operational data throughout the admin interface without changing backend behavior.
+
+## 2026-04-08 - 13.1.3 - fix(certificate-handler)
+preserve wildcard coverage during forced certificate renewals and propagate renewed certs to sibling domains
+
+- add deriveCertDomainName helper to match shared ACME certificate identities across wildcard and subdomain routes
+- pass includeWildcard when force-renewing certificates so renewed certs keep wildcard SAN coverage for sibling subdomains
+- persist renewed certificate data to all sibling route domains that share the same cert identity and clear cached certificate status entries
+- add regression tests for certificate domain derivation and force-renew wildcard handling
+
+## 2026-04-07 - 13.1.2 - fix(deps)
+bump @serve.zone/catalog to ^2.12.3
+
+- Updates @serve.zone/catalog from ^2.12.0 to ^2.12.3 in package.json
+
+## 2026-04-07 - 13.1.1 - fix(deps)
+bump catalog-related dependencies to newer patch and minor releases
+
+- update @design.estate/dees-catalog from ^3.66.0 to ^3.67.1
+- update @serve.zone/catalog from ^2.11.2 to ^2.12.0
+
+## 2026-04-07 - 13.1.0 - feat(vpn,target-profiles,migrations)
+add startup data migrations, support scoped VPN route allow entries, and rename target profile hosts to ips
+
+- runs smartmigration at startup before configuration is loaded and adds a migration for target profile targets from host to ip
+- changes VPN client routing to always force traffic through SmartProxy while allowing direct target bypasses from target profiles
+- supports domain-scoped VPN ipAllowList entries for vpnOnly routes based on matching target profile domains
+- updates certificate reprovisioning to reapply routes so renewed certificates are loaded into the running proxy
+- removes the forceDestinationSmartproxy VPN client option from API, persistence, manager, and web UI
+
+## 2026-04-06 - 13.0.11 - fix(routing)
+serialize route updates and correct VPN-gated route application
+
+- RouteConfigManager now serializes concurrent applyRoutes calls to prevent overlapping SmartProxy updates and stale route overwrites.
+- VPN-only routes deny access until VPN state is ready, then re-apply routes after VPN clients load or change to refresh ipAllowLists safely.
+- Certificate provisioning retries now go through RouteConfigManager when available so the full merged route set is reapplied consistently.
+- Reference resolution now expands network targets with multiple hosts into multiple route targets.
+- Adds rollback when VPN client persistence fails, enforces unique target profile names, and fixes maxConnections parsing in the source profiles UI.
+
+## 2026-04-06 - 13.0.10 - fix(repo)
+no changes to commit
+
+
+## 2026-04-06 - 13.0.9 - fix(repo)
+no changes to commit
+
+
+## 2026-04-06 - 13.0.8 - fix(ops-view-vpn)
+show target profile names in VPN forms and load profile candidates for autocomplete
+
+- fetch target profiles when the VPN operations view connects so profile data is available in the UI
+- replace comma-separated target profile ID inputs with a restricted autocomplete list based on available target profiles
+- map stored target profile IDs to profile names for table and detail displays, while resolving selected names back to IDs on save
+
+## 2026-04-06 - 13.0.7 - fix(vpn,target-profiles)
+refresh VPN client security when target profiles change and include profile target IPs in direct destination allow-lists
+
+- Adds direct target IP resolution from target profiles so forced SmartProxy clients can bypass rewriting for explicit profile targets.
+- Refreshes running VPN client security policies after target profile updates or deletions to keep destination access rules in sync.
+
+## 2026-04-05 - 13.0.6 - fix(certificates)
+resolve base-domain certificate lookups and route profile list inputs
+
+- Look up ACME certificate metadata by base domain first, with fallback to the exact domain, so subdomain certificate status and deletion work reliably.
+- Trigger certificate reprovisioning through SmartProxy routes and clear cached status before refresh, including force-renew cache invalidation handling.
+- Replace comma-separated target profile form fields with list inputs and route suggestions for domains, targets, and route references.
+
+## 2026-04-05 - 13.0.5 - fix(ts_web)
+replace custom section heading component with dees-heading across ops views
+
+- updates all operations dashboard views to use <dees-heading level="2"> for section titles
+- removes the unused shared ops-sectionheading component export and source file
+- bumps UI and data layer dependencies to compatible patch/minor releases
+
+## 2026-04-05 - 13.0.4 - fix(deps)
+bump @push.rocks/smartdata and @push.rocks/smartdb to the latest patch releases
+
+- Updates @push.rocks/smartdata from ^7.1.4 to ^7.1.5
+- Updates @push.rocks/smartdb from ^2.5.2 to ^2.5.4
+
+## 2026-04-05 - 13.0.3 - fix(deps)
+bump @push.rocks/smartdb to ^2.5.2
+
+- Updates @push.rocks/smartdb from ^2.5.1 to ^2.5.2 in package.json.
+
+## 2026-04-05 - 13.0.2 - fix(deps)
+bump smartdata, smartdb, and catalog dependencies
+
+- updates @push.rocks/smartdata from ^7.1.3 to ^7.1.4
+- updates @push.rocks/smartdb from ^2.4.1 to ^2.5.1
+- updates @serve.zone/catalog from ^2.11.1 to ^2.11.2
+
+## 2026-04-05 - 13.0.1 - fix(deps)
+bump @design.estate/dees-catalog and @push.rocks/smartdb dependencies
+
+- updates @design.estate/dees-catalog from ^3.55.6 to ^3.59.1
+- updates @push.rocks/smartdb from ^2.3.1 to ^2.4.1
+
+## 2026-04-05 - 13.0.0 - BREAKING CHANGE(vpn)
+replace tag-based VPN access control with source and target profiles
+
+- Renames Security Profiles to Source Profiles across APIs, persistence, route metadata, tests, and UI.
+- Adds TargetProfile management, storage, API handlers, and dashboard views to define VPN-accessible domains, targets, and route references.
+- Replaces route-level vpn configuration with vpnOnly and switches VPN clients from serverDefinedClientTags to targetProfileIds for access resolution.
+- Updates route application and VPN AllowedIPs generation to derive client access from matching target profiles instead of tags.
+
+## 2026-04-04 - 12.10.0 - feat(routes)
+add TLS configuration controls for route create and edit flows
+
+- Adds TLS mode and certificate selection to the route create and edit dialogs, including support for custom PEM key/certificate input.
+- Allows route updates to explicitly remove nested TLS settings by treating null action properties as deletions during route patch merging.
+- Bumps @design.estate/dees-catalog to ^3.55.6 and @serve.zone/catalog to ^2.11.1.
+
+## 2026-04-04 - 12.9.4 - fix(deps)
+bump @push.rocks/smartdb to ^2.3.1
+
+- updates the @push.rocks/smartdb dependency from ^2.1.1 to ^2.3.1
+
+## 2026-04-04 - 12.9.3 - fix(route-management)
+include stored VPN routes in domain resolution and align programmatic route types with dcrouter configs
+
+- Scans enabled stored/programmatic routes for VPN domain matches when resolving client access domains.
+- Replaces generic smartproxy route typings with IDcRouterRouteConfig across route management and stored route models.
+- Updates @push.rocks/smartproxy to ^27.4.0.
+
+## 2026-04-04 - 12.9.2 - fix(config-ui)
+handle missing HTTP/3 config safely and standardize overview section headings
+
+- Prevents route augmentation logic from failing when HTTP/3 configuration is undefined by using optional chaining.
+- Updates the operations overview to use dees-heading components for activity, email, DNS, RADIUS, and VPN section headings.
+- Bumps @push.rocks/smartproxy from ^27.2.0 to ^27.3.1.
+
+## 2026-04-04 - 12.9.1 - fix(monitoring)
+update SmartProxy and use direct connection protocol metrics access
+
+- bump @push.rocks/smartproxy from ^27.1.0 to ^27.2.0
+- replace fallback any-based access with direct frontend and backend protocol metric calls in MetricsManager
+
+## 2026-04-04 - 12.9.0 - feat(monitoring)
+add frontend and backend protocol distribution metrics to network stats
+
+- Expose frontend and backend protocol distribution data in monitoring metrics, stats responses, and shared interfaces.
+- Render protocol distribution donut charts in the ops network view using the new stats fields.
+- Preserve existing stored certificate IDs when updating certificate records by domain.
+- Bump @design.estate/dees-catalog to ^3.55.5 for the new chart component support.
+
+## 2026-04-04 - 12.8.1 - fix(ops-view-routes)
+correct route form dropdown selection handling for security profiles and network targets
+
+- Update route edit and create forms to use selectedOption for dropdowns backed by the newer dees-catalog version
+- Normalize submitted dropdown values to extract option keys before storing securityProfileRef and networkTargetRef
+- Refresh documentation to reflect expanded stats coverage for network, RADIUS, and VPN metrics
+
+## 2026-04-03 - 12.8.0 - feat(certificates)
+add force renew option for domain certificate reprovisioning
+
+- pass an optional forceRenew flag through certificate reprovision requests from the UI to the ops handler
+- use smartacme forceRenew support and return renewal-specific success messages
+- update the SmartAcme dependency to version ^9.4.0
+
+## 2026-04-03 - 12.7.0 - feat(opsserver)
+add RADIUS and VPN metrics to combined ops stats and overview dashboards, and stream live log buffer entries in follow mode
+
+- Expose RADIUS and VPN sections in the combined stats API and shared TypeScript interfaces
+- Populate frontend app state and overview tiles with RADIUS authentication, session, traffic, and VPN client metrics
+- Replace simulated follow-mode log events with real log buffer tailing and timestamp-based incremental streaming
+- Use commit metadata for reported server version instead of a hardcoded value
+
+## 2026-04-03 - 12.6.6 - fix(deps)
+bump @design.estate/dees-catalog to ^3.52.3
+
+- Updates @design.estate/dees-catalog from ^3.52.2 to ^3.52.3 in package.json
+
+## 2026-04-03 - 12.6.5 - fix(deps)
+bump @design.estate/dees-catalog to ^3.52.2
+
+- Updates the @design.estate/dees-catalog dependency from ^3.52.0 to ^3.52.2 in package.json.
+
+## 2026-04-03 - 12.6.4 - fix(deps)
+bump @design.estate/dees-catalog to ^3.52.0
+
+- Updates the @design.estate/dees-catalog dependency from ^3.51.2 to ^3.52.0 in package.json.
+
+## 2026-04-03 - 12.6.3 - fix(deps)
+bump @types/node and @design.estate/dees-catalog patch versions
+
+- updates @types/node from ^25.5.1 to ^25.5.2
+- updates @design.estate/dees-catalog from ^3.51.1 to ^3.51.2
+
+## 2026-04-03 - 12.6.2 - fix(deps)
+bump @design.estate/dees-catalog to ^3.51.1
+
+- Updates @design.estate/dees-catalog from ^3.51.0 to ^3.51.1 in package.json
+
+## 2026-04-03 - 12.6.1 - fix(repo)
+no changes to commit
+
+
+## 2026-04-03 - 12.6.0 - feat(certificates)
+add confirmation before force renewing valid certificates from the certificate actions menu
+
+- Expose the Reprovision action in the certificate context menu
+- Prompt for confirmation when reprovisioning a certificate that is still valid
+- Update dees-catalog and @types/node dependencies
+
+## 2026-04-03 - 12.5.2 - fix(repo)
+no changes to commit
+
+
+## 2026-04-03 - 12.5.1 - fix(ops-view-network)
+centralize traffic chart timing constants for consistent rolling window updates
+
+- Defines shared constants for the chart window, update interval, and maximum buffered data points
+- Replaces hardcoded traffic history sizes and timer intervals with derived values across initialization, history loading, and live updates
+- Keeps the chart rolling window configuration aligned with the in-memory traffic buffer
+
 ## 2026-04-02 - 12.5.0 - feat(ops-view-routes)
 add priority support and list-based domain editing for routes

--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@serve.zone/dcrouter",
  "private": false,
-  "version": "12.5.0",
+  "version": "13.4.2",
  "description": "A multifaceted routing service handling mail and SMS delivery functions.",
  "type": "module",
  "exports": {
@@ -27,7 +27,7 @@
    "@git.zone/tsrun": "^2.0.2",
    "@git.zone/tstest": "^3.6.3",
    "@git.zone/tswatch": "^3.3.2",
-    "@types/node": "^25.5.0"
+    "@types/node": "^25.5.2"
  },
  "dependencies": {
    "@api.global/typedrequest": "^3.3.0",
@@ -35,38 +35,39 @@
    "@api.global/typedserver": "^8.4.6",
    "@api.global/typedsocket": "^4.1.2",
    "@apiclient.xyz/cloudflare": "^7.1.0",
-    "@design.estate/dees-catalog": "^3.50.2",
+    "@design.estate/dees-catalog": "^3.68.0",
    "@design.estate/dees-element": "^2.2.4",
    "@push.rocks/lik": "^6.4.0",
    "@push.rocks/projectinfo": "^5.1.0",
    "@push.rocks/qenv": "^6.1.3",
-    "@push.rocks/smartacme": "^9.3.1",
-    "@push.rocks/smartdata": "^7.1.3",
-    "@push.rocks/smartdb": "^2.1.1",
+    "@push.rocks/smartacme": "^9.5.0",
+    "@push.rocks/smartdata": "^7.1.7",
+    "@push.rocks/smartdb": "^2.6.2",
    "@push.rocks/smartdns": "^7.9.0",
    "@push.rocks/smartfs": "^1.5.0",
    "@push.rocks/smartguard": "^3.1.0",
    "@push.rocks/smartjwt": "^2.2.1",
-    "@push.rocks/smartlog": "^3.2.1",
+    "@push.rocks/smartlog": "^3.2.2",
    "@push.rocks/smartmetrics": "^3.0.3",
+    "@push.rocks/smartmigration": "1.1.1",
    "@push.rocks/smartmta": "^5.3.1",
    "@push.rocks/smartnetwork": "^4.5.2",
    "@push.rocks/smartpath": "^6.0.0",
    "@push.rocks/smartpromise": "^4.2.3",
-    "@push.rocks/smartproxy": "^27.1.0",
+    "@push.rocks/smartproxy": "^27.5.0",
    "@push.rocks/smartradius": "^1.1.1",
    "@push.rocks/smartrequest": "^5.0.1",
    "@push.rocks/smartrx": "^3.0.10",
    "@push.rocks/smartstate": "^2.3.0",
    "@push.rocks/smartunique": "^3.0.9",
-    "@push.rocks/smartvpn": "1.19.1",
+    "@push.rocks/smartvpn": "1.19.2",
    "@push.rocks/taskbuffer": "^8.0.2",
-    "@serve.zone/catalog": "^2.11.0",
+    "@serve.zone/catalog": "^2.12.3",
    "@serve.zone/interfaces": "^5.3.0",
    "@serve.zone/remoteingress": "^4.15.3",
    "@tsclass/tsclass": "^9.5.0",
    "@types/qrcode": "^1.5.6",
-    "lru-cache": "^11.2.7",
+    "lru-cache": "^11.3.2",
    "qrcode": "^1.5.4",
    "uuid": "^13.0.0"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/readme.md
+++ b/readme.md
@@ -25,7 +25,7 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community
 - [Remote Ingress](#remote-ingress)
 - [VPN Access Control](#vpn-access-control)
 - [Certificate Management](#certificate-management)
- [Storage & Caching](#storage--caching)
+- [Storage & Database](#storage--database)
 - [Security Features](#security-features)
 - [OpsServer Dashboard](#opsserver-dashboard)
 - [API Client](#api-client)
--- a/test/test.cert-renewal.ts
+++ b/test/test.cert-renewal.ts
@@ -0,0 +1,196 @@
+import { tap, expect } from '@git.zone/tstest/tapbundle';
+import { deriveCertDomainName } from '../ts/opsserver/handlers/certificate.handler.js';
+
+// ──────────────────────────────────────────────────────────────────────────────
+// deriveCertDomainName — pure helper that mirrors smartacme's certmatcher.
+// Used by the force-renew sibling-propagation logic to identify which routes
+// share a single underlying ACME certificate.
+// ──────────────────────────────────────────────────────────────────────────────
+
+tap.test('deriveCertDomainName collapses 3-level subdomain to base', async () => {
+  expect(deriveCertDomainName('outline.task.vc')).toEqual('task.vc');
+  expect(deriveCertDomainName('pr.task.vc')).toEqual('task.vc');
+  expect(deriveCertDomainName('mtd.task.vc')).toEqual('task.vc');
+});
+
+tap.test('deriveCertDomainName returns base domain unchanged for 2-level domain', async () => {
+  expect(deriveCertDomainName('task.vc')).toEqual('task.vc');
+  expect(deriveCertDomainName('example.com')).toEqual('example.com');
+});
+
+tap.test('deriveCertDomainName strips wildcard prefix', async () => {
+  expect(deriveCertDomainName('*.task.vc')).toEqual('task.vc');
+  expect(deriveCertDomainName('*.example.com')).toEqual('example.com');
+});
+
+tap.test('deriveCertDomainName collapses subdomain and wildcard to same identity', async () => {
+  // This is the core property: outline.task.vc and *.task.vc must yield
+  // the same cert identity, otherwise sibling propagation cannot work.
+  const subdomain = deriveCertDomainName('outline.task.vc');
+  const wildcard = deriveCertDomainName('*.task.vc');
+  expect(subdomain).toEqual(wildcard);
+});
+
+tap.test('deriveCertDomainName returns undefined for 4+ level domains', async () => {
+  // Matches smartacme's "deeper domains not supported" behavior.
+  expect(deriveCertDomainName('a.b.task.vc')).toBeUndefined();
+  expect(deriveCertDomainName('one.two.three.example.com')).toBeUndefined();
+});
+
+tap.test('deriveCertDomainName returns undefined for malformed inputs', async () => {
+  expect(deriveCertDomainName('vc')).toBeUndefined();
+  expect(deriveCertDomainName('')).toBeUndefined();
+});
+
+// ──────────────────────────────────────────────────────────────────────────────
+// CertificateHandler.reprovisionCertificateDomain — verify the includeWildcard
+// option is forwarded to smartAcme.getCertificateForDomain on force renew.
+//
+// This is the regression test for Bug 1: previously the call passed only
+// `{ forceRenew: true }`, causing the re-issued cert to drop the wildcard SAN
+// and break every sibling subdomain.
+// ──────────────────────────────────────────────────────────────────────────────
+
+import { CertificateHandler } from '../ts/opsserver/handlers/certificate.handler.js';
+
+// Build a minimal stub of OpsServer + DcRouter that satisfies CertificateHandler.
+// We only need: viewRouter.addTypedHandler / adminRouter.addTypedHandler (no-op),
+// dcRouterRef.smartProxy.routeManager.getRoutes(), dcRouterRef.smartAcme,
+// dcRouterRef.findRouteNamesForDomain, dcRouterRef.certificateStatusMap.
+function makeStubOpsServer(opts: {
+  routes: Array<{ name: string; domains: string[] }>;
+  smartAcmeStub: { getCertificateForDomain: (domain: string, options: any) => Promise<any> };
+}) {
+  const captured: { typedHandlers: any[] } = { typedHandlers: [] };
+  const router = {
+    addTypedHandler(handler: any) { captured.typedHandlers.push(handler); },
+  };
+
+  const routes = opts.routes.map((r) => ({
+    name: r.name,
+    match: { domains: r.domains, ports: 443 },
+    action: { type: 'forward', tls: { certificate: 'auto' } },
+  }));
+
+  const dcRouterRef: any = {
+    smartProxy: {
+      routeManager: { getRoutes: () => routes },
+    },
+    smartAcme: opts.smartAcmeStub,
+    findRouteNamesForDomain: (domain: string) =>
+      routes.filter((r) => r.match.domains.includes(domain)).map((r) => r.name),
+    certificateStatusMap: new Map<string, any>(),
+    certProvisionScheduler: null,
+    routeConfigManager: null,
+  };
+
+  const opsServerRef: any = {
+    viewRouter: router,
+    adminRouter: router,
+    dcRouterRef,
+  };
+
+  return { opsServerRef, dcRouterRef, captured };
+}
+
+tap.test('reprovisionCertificateDomain passes includeWildcard=true for non-wildcard domain', async () => {
+  const calls: Array<{ domain: string; options: any }> = [];
+
+  const { opsServerRef, dcRouterRef } = makeStubOpsServer({
+    routes: [
+      { name: 'outline-route', domains: ['outline.task.vc'] },
+      { name: 'pr-route', domains: ['pr.task.vc'] },
+      { name: 'mtd-route', domains: ['mtd.task.vc'] },
+    ],
+    smartAcmeStub: {
+      getCertificateForDomain: async (domain: string, options: any) => {
+        calls.push({ domain, options });
+        // Return a cert object shaped like SmartacmeCert
+        return {
+          id: 'test-id',
+          domainName: 'task.vc',
+          created: Date.now(),
+          validUntil: Date.now() + 90 * 24 * 60 * 60 * 1000,
+          privateKey: '-----BEGIN PRIVATE KEY-----\nfake\n-----END PRIVATE KEY-----',
+          publicKey: '-----BEGIN CERTIFICATE-----\nfake\n-----END CERTIFICATE-----',
+          csr: '',
+        };
+      },
+    },
+  });
+
+  // Override updateRoutes/applyRoutes to no-op so the test doesn't try to talk to a real proxy
+  dcRouterRef.smartProxy.updateRoutes = async () => {};
+
+  // Construct handler — registerHandlers will run and register typed handlers on our stub router.
+  const handler = new CertificateHandler(opsServerRef);
+
+  // Invoke the private reprovision method directly. The Bug 1 fix is verified
+  // by inspecting the captured smartAcme call options regardless of whether
+  // sibling propagation succeeds (it relies on a real DB for ProxyCertDoc).
+  await (handler as any).reprovisionCertificateDomain('outline.task.vc', true);
+
+  // Sibling propagation may fail because ProxyCertDoc.findByDomain needs a real DB.
+  // The Bug 1 fix is verified by the captured smartAcme call regardless.
+  expect(calls.length).toBeGreaterThanOrEqual(1);
+  expect(calls[0].domain).toEqual('outline.task.vc');
+  expect(calls[0].options).toEqual({ forceRenew: true, includeWildcard: true });
+});
+
+tap.test('reprovisionCertificateDomain passes includeWildcard=false for wildcard domain', async () => {
+  const calls: Array<{ domain: string; options: any }> = [];
+
+  const { opsServerRef, dcRouterRef } = makeStubOpsServer({
+    routes: [
+      { name: 'wildcard-route', domains: ['*.task.vc'] },
+    ],
+    smartAcmeStub: {
+      getCertificateForDomain: async (domain: string, options: any) => {
+        calls.push({ domain, options });
+        return {
+          id: 'test-id',
+          domainName: 'task.vc',
+          created: Date.now(),
+          validUntil: Date.now() + 90 * 24 * 60 * 60 * 1000,
+          privateKey: '-----BEGIN PRIVATE KEY-----\nfake\n-----END PRIVATE KEY-----',
+          publicKey: '-----BEGIN CERTIFICATE-----\nfake\n-----END CERTIFICATE-----',
+          csr: '',
+        };
+      },
+    },
+  });
+
+  dcRouterRef.smartProxy.updateRoutes = async () => {};
+
+  const handler = new CertificateHandler(opsServerRef);
+  await (handler as any).reprovisionCertificateDomain('*.task.vc', true);
+
+  expect(calls.length).toBeGreaterThanOrEqual(1);
+  expect(calls[0].domain).toEqual('*.task.vc');
+  expect(calls[0].options).toEqual({ forceRenew: true, includeWildcard: false });
+});
+
+tap.test('reprovisionCertificateDomain does not call smartAcme when forceRenew is false', async () => {
+  const calls: Array<{ domain: string; options: any }> = [];
+
+  const { opsServerRef, dcRouterRef } = makeStubOpsServer({
+    routes: [{ name: 'outline-route', domains: ['outline.task.vc'] }],
+    smartAcmeStub: {
+      getCertificateForDomain: async (domain: string, options: any) => {
+        calls.push({ domain, options });
+        return {} as any;
+      },
+    },
+  });
+
+  dcRouterRef.smartProxy.updateRoutes = async () => {};
+
+  const handler = new CertificateHandler(opsServerRef);
+  await (handler as any).reprovisionCertificateDomain('outline.task.vc', false);
+
+  // forceRenew=false should NOT call getCertificateForDomain — it just triggers
+  // applyRoutes and lets the cert provisioning pipeline handle it.
+  expect(calls.length).toEqual(0);
+});
+
+export default tap.start();
--- a/test/test.reference-resolver.ts
+++ b/test/test.reference-resolver.ts
@@ -1,13 +1,13 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
 import { ReferenceResolver } from '../ts/config/classes.reference-resolver.js';
-import type { ISecurityProfile, INetworkTarget, IRouteMetadata } from '../ts_interfaces/data/route-management.js';
+import type { ISourceProfile, INetworkTarget, IRouteMetadata } from '../ts_interfaces/data/route-management.js';
 import type { IRouteConfig } from '@push.rocks/smartproxy';

 // ============================================================================
 // Helpers: access private maps for direct unit testing without DB
 // ============================================================================

-function injectProfile(resolver: ReferenceResolver, profile: ISecurityProfile): void {
+function injectProfile(resolver: ReferenceResolver, profile: ISourceProfile): void {
  (resolver as any).profiles.set(profile.id, profile);
 }

@@ -15,7 +15,7 @@ function injectTarget(resolver: ReferenceResolver, target: INetworkTarget): void
  (resolver as any).targets.set(target.id, target);
 }

-function makeProfile(overrides: Partial<ISecurityProfile> = {}): ISecurityProfile {
+function makeProfile(overrides: Partial<ISourceProfile> = {}): ISourceProfile {
  return {
    id: 'profile-1',
    name: 'STANDARD',
@@ -72,14 +72,14 @@ tap.test('should list empty profiles and targets initially', async () => {
  expect(resolver.listTargets().length).toEqual(0);
 });

-// ---- Security profile resolution ----
+// ---- Source profile resolution ----

-tap.test('should resolve security profile onto a route', async () => {
+tap.test('should resolve source profile onto a route', async () => {
  const profile = makeProfile();
  injectProfile(resolver, profile);

  const route = makeRoute();
-  const metadata: IRouteMetadata = { securityProfileRef: 'profile-1' };
+  const metadata: IRouteMetadata = { sourceProfileRef: 'profile-1' };

  const result = resolver.resolveRoute(route, metadata);

@@ -87,7 +87,7 @@ tap.test('should resolve security profile onto a route', async () => {
  expect(result.route.security!.ipAllowList).toContain('192.168.0.0/16');
  expect(result.route.security!.ipAllowList).toContain('10.0.0.0/8');
  expect(result.route.security!.maxConnections).toEqual(1000);
-  expect(result.metadata.securityProfileName).toEqual('STANDARD');
+  expect(result.metadata.sourceProfileName).toEqual('STANDARD');
  expect(result.metadata.lastResolvedAt).toBeTruthy();
 });

@@ -98,7 +98,7 @@ tap.test('should merge inline route security with profile security', async () =>
      maxConnections: 5000,
    },
  });
-  const metadata: IRouteMetadata = { securityProfileRef: 'profile-1' };
+  const metadata: IRouteMetadata = { sourceProfileRef: 'profile-1' };

  const result = resolver.resolveRoute(route, metadata);

@@ -117,7 +117,7 @@ tap.test('should deduplicate IP lists during merge', async () => {
      ipAllowList: ['192.168.0.0/16', '127.0.0.1'],
    },
  });
-  const metadata: IRouteMetadata = { securityProfileRef: 'profile-1' };
+  const metadata: IRouteMetadata = { sourceProfileRef: 'profile-1' };

  const result = resolver.resolveRoute(route, metadata);

@@ -128,13 +128,13 @@ tap.test('should deduplicate IP lists during merge', async () => {

 tap.test('should handle missing profile gracefully', async () => {
  const route = makeRoute();
-  const metadata: IRouteMetadata = { securityProfileRef: 'nonexistent-profile' };
+  const metadata: IRouteMetadata = { sourceProfileRef: 'nonexistent-profile' };

  const result = resolver.resolveRoute(route, metadata);

  // Route should be unchanged
  expect(result.route.security).toBeUndefined();
-  expect(result.metadata.securityProfileName).toBeUndefined();
+  expect(result.metadata.sourceProfileName).toBeUndefined();
 });

 // ---- Profile inheritance ----
@@ -161,7 +161,7 @@ tap.test('should resolve profile inheritance (extendsProfiles)', async () => {
  injectProfile(resolver, extendedProfile);

  const route = makeRoute();
-  const metadata: IRouteMetadata = { securityProfileRef: 'extended-profile' };
+  const metadata: IRouteMetadata = { sourceProfileRef: 'extended-profile' };

  const result = resolver.resolveRoute(route, metadata);

@@ -170,7 +170,7 @@ tap.test('should resolve profile inheritance (extendsProfiles)', async () => {
  expect(result.route.security!.ipAllowList).toContain('160.79.104.0/21');
  // maxConnections from base (extended doesn't override)
  expect(result.route.security!.maxConnections).toEqual(500);
-  expect(result.metadata.securityProfileName).toEqual('EXTENDED');
+  expect(result.metadata.sourceProfileName).toEqual('EXTENDED');
 });

 tap.test('should detect circular profile inheritance', async () => {
@@ -190,7 +190,7 @@ tap.test('should detect circular profile inheritance', async () => {
  injectProfile(resolver, profileB);

  const route = makeRoute();
-  const metadata: IRouteMetadata = { securityProfileRef: 'circular-a' };
+  const metadata: IRouteMetadata = { sourceProfileRef: 'circular-a' };

  // Should not infinite loop — resolves what it can
  const result = resolver.resolveRoute(route, metadata);
@@ -232,7 +232,7 @@ tap.test('should handle missing target gracefully', async () => {
 tap.test('should resolve both profile and target simultaneously', async () => {
  const route = makeRoute();
  const metadata: IRouteMetadata = {
-    securityProfileRef: 'profile-1',
+    sourceProfileRef: 'profile-1',
    networkTargetRef: 'target-1',
  };

@@ -247,7 +247,7 @@ tap.test('should resolve both profile and target simultaneously', async () => {
  expect(result.route.action.targets![0].port).toEqual(443);

  // Both names recorded
-  expect(result.metadata.securityProfileName).toEqual('STANDARD');
+  expect(result.metadata.sourceProfileName).toEqual('STANDARD');
  expect(result.metadata.networkTargetName).toEqual('INFRA');
 });

@@ -268,7 +268,7 @@ tap.test('should skip resolution when no metadata refs', async () => {
 tap.test('should be idempotent — resolving twice gives same result', async () => {
  const route = makeRoute();
  const metadata: IRouteMetadata = {
-    securityProfileRef: 'profile-1',
+    sourceProfileRef: 'profile-1',
    networkTargetRef: 'target-1',
  };

@@ -288,7 +288,7 @@ tap.test('should find routes by profile ref (sync)', async () => {
    id: 'route-a',
    route: makeRoute({ name: 'route-a' }),
    enabled: true,
-    metadata: { securityProfileRef: 'profile-1' },
+    metadata: { sourceProfileRef: 'profile-1' },
  });
  storedRoutes.set('route-b', {
    id: 'route-b',
@@ -300,7 +300,7 @@ tap.test('should find routes by profile ref (sync)', async () => {
    id: 'route-c',
    route: makeRoute({ name: 'route-c' }),
    enabled: true,
-    metadata: { securityProfileRef: 'profile-1', networkTargetRef: 'target-1' },
+    metadata: { sourceProfileRef: 'profile-1', networkTargetRef: 'target-1' },
  });

  const profileRefs = resolver.findRoutesByProfileRefSync('profile-1', storedRoutes);
@@ -320,7 +320,7 @@ tap.test('should get profile usage for a specific profile ID', async () => {
    id: 'route-x',
    route: makeRoute({ name: 'my-route' }),
    enabled: true,
-    metadata: { securityProfileRef: 'profile-1' },
+    metadata: { sourceProfileRef: 'profile-1' },
  });

  const usage = resolver.getProfileUsageForId('profile-1', storedRoutes);
--- a/test/test.security-profiles-api.ts
+++ b/test/test.security-profiles-api.ts
@@ -39,13 +39,13 @@ tap.test('should login as admin', async () => {
 });

 // ============================================================================
-// Security Profile endpoints (graceful fallbacks when resolver unavailable)
+// Source Profile endpoints (graceful fallbacks when resolver unavailable)
 // ============================================================================

 tap.test('should return empty profiles list when resolver not initialized', async () => {
-  const req = new TypedRequest<interfaces.requests.IReq_GetSecurityProfiles>(
+  const req = new TypedRequest<interfaces.requests.IReq_GetSourceProfiles>(
    TEST_URL,
-    'getSecurityProfiles'
+    'getSourceProfiles'
  );

  const response = await req.fire({
@@ -57,9 +57,9 @@ tap.test('should return empty profiles list when resolver not initialized', asyn
 });

 tap.test('should return null for single profile when resolver not initialized', async () => {
-  const req = new TypedRequest<interfaces.requests.IReq_GetSecurityProfile>(
+  const req = new TypedRequest<interfaces.requests.IReq_GetSourceProfile>(
    TEST_URL,
-    'getSecurityProfile'
+    'getSourceProfile'
  );

  const response = await req.fire({
@@ -71,9 +71,9 @@ tap.test('should return null for single profile when resolver not initialized',
 });

 tap.test('should return failure for create profile when resolver not initialized', async () => {
-  const req = new TypedRequest<interfaces.requests.IReq_CreateSecurityProfile>(
+  const req = new TypedRequest<interfaces.requests.IReq_CreateSourceProfile>(
    TEST_URL,
-    'createSecurityProfile'
+    'createSourceProfile'
  );

  const response = await req.fire({
@@ -87,9 +87,9 @@ tap.test('should return failure for create profile when resolver not initialized
 });

 tap.test('should return empty profile usage when resolver not initialized', async () => {
-  const req = new TypedRequest<interfaces.requests.IReq_GetSecurityProfileUsage>(
+  const req = new TypedRequest<interfaces.requests.IReq_GetSourceProfileUsage>(
    TEST_URL,
-    'getSecurityProfileUsage'
+    'getSourceProfileUsage'
  );

  const response = await req.fire({
@@ -170,9 +170,9 @@ tap.test('should return empty target usage when resolver not initialized', async
 // ============================================================================

 tap.test('should reject unauthenticated profile requests', async () => {
-  const req = new TypedRequest<interfaces.requests.IReq_GetSecurityProfiles>(
+  const req = new TypedRequest<interfaces.requests.IReq_GetSourceProfiles>(
    TEST_URL,
-    'getSecurityProfiles'
+    'getSourceProfiles'
  );

  try {
--- a/test_watch/devserver.ts
+++ b/test_watch/devserver.ts
@@ -29,13 +29,13 @@ const devRouter = new DcRouter({
        name: 'vpn-internal-app',
        match: { ports: [18080], domains: ['internal.example.com'] },
        action: { type: 'forward', targets: [{ host: 'localhost', port: 5000 }] },
-        vpn: { enabled: true },
+        vpnOnly: true,
      },
      {
        name: 'vpn-eng-dashboard',
        match: { ports: [18080], domains: ['eng.example.com'] },
        action: { type: 'forward', targets: [{ host: 'localhost', port: 5001 }] },
-        vpn: { enabled: true, allowedServerDefinedClientTags: ['engineering'] },
+        vpnOnly: true,
      },
    ] as any[],
  },
@@ -44,9 +44,9 @@ const devRouter = new DcRouter({
    enabled: true,
    serverEndpoint: 'vpn.dev.local',
    clients: [
-      { clientId: 'dev-laptop', serverDefinedClientTags: ['engineering', 'dev'], description: 'Developer laptop' },
-      { clientId: 'ci-runner', serverDefinedClientTags: ['engineering', 'ci'], description: 'CI/CD pipeline' },
-      { clientId: 'admin-desktop', serverDefinedClientTags: ['admin'], description: 'Admin workstation' },
+      { clientId: 'dev-laptop', description: 'Developer laptop' },
+      { clientId: 'ci-runner', description: 'CI/CD pipeline' },
+      { clientId: 'admin-desktop', description: 'Admin workstation' },
    ],
  },
  dbConfig: { enabled: true },
--- a/ts/00_commitinfo_data.ts
+++ b/ts/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@serve.zone/dcrouter',
-  version: '12.5.0',
+  version: '13.4.2',
  description: 'A multifaceted routing service handling mail and SMS delivery functions.'
 }
--- a/ts/classes.dcrouter.ts
+++ b/ts/classes.dcrouter.ts
@@ -15,13 +15,16 @@ import { StorageBackedCertManager } from './classes.storage-cert-manager.js';
 import { CertProvisionScheduler } from './classes.cert-provision-scheduler.js';
 // Import unified database
 import { DcRouterDb, type IDcRouterDbConfig, CacheCleaner, ProxyCertDoc, AcmeCertDoc } from './db/index.js';
+// Import migration runner and app version
+import { createMigrationRunner } from '../ts_migrations/index.js';
+import { commitinfo } from './00_commitinfo_data.js';

 import { OpsServer } from './opsserver/index.js';
 import { MetricsManager } from './monitoring/index.js';
 import { RadiusServer, type IRadiusServerConfig } from './radius/index.js';
 import { RemoteIngressManager, TunnelManager } from './remoteingress/index.js';
 import { VpnManager, type IVpnManagerConfig } from './vpn/index.js';
-import { RouteConfigManager, ApiTokenManager, ReferenceResolver, DbSeeder } from './config/index.js';
+import { RouteConfigManager, ApiTokenManager, ReferenceResolver, DbSeeder, TargetProfileManager } from './config/index.js';
 import { SecurityLogger, ContentScanner, IPReputationChecker } from './security/index.js';
 import { type IHttp3Config, augmentRoutesWithHttp3 } from './http3/index.js';

@@ -180,8 +183,8 @@ export interface IDcRouterOptions {

  /**
   * VPN server configuration.
-   * Enables VPN-based access control: routes with vpn.enabled are only
-   * accessible from VPN clients. Supports WireGuard + native (WS/QUIC) transports.
+   * Enables VPN-based access control: routes with vpnOnly are only
+   * accessible from VPN clients whose TargetProfile matches. Supports WireGuard + native (WS/QUIC) transports.
   */
  vpnConfig?: {
    /** Enable VPN server (default: false) */
@@ -197,7 +200,7 @@ export interface IDcRouterOptions {
    /** Pre-defined VPN clients created on startup */
    clients?: Array<{
      clientId: string;
-      serverDefinedClientTags?: string[];
+      targetProfileIds?: string[];
      description?: string;
    }>;
    /** Destination routing policy for VPN client traffic.
@@ -274,6 +277,7 @@ export class DcRouter {
  public routeConfigManager?: RouteConfigManager;
  public apiTokenManager?: ApiTokenManager;
  public referenceResolver?: ReferenceResolver;
+  public targetProfileManager?: TargetProfileManager;

  // Auto-discovered public IP (populated by generateAuthoritativeRecords)
  public detectedPublicIp: string | null = null;
@@ -430,7 +434,15 @@ export class DcRouter {
              // failed silently (SmartProxy doesn't emit certificate-failed for this path).
              // Calling updateRoutes() re-triggers provisionCertificatesViaCallback internally,
              // which calls certProvisionFunction again — now with smartAcmeReady === true.
-              if (this.smartProxy) {
+              if (this.routeConfigManager) {
+                // Go through RouteConfigManager to get the full merged route set
+                // and serialize via the route-update mutex (prevents stale overwrites)
+                logger.log('info', 'Re-triggering certificate provisioning via RouteConfigManager');
+                this.routeConfigManager.applyRoutes().catch((err: any) => {
+                  logger.log('warn', `Failed to re-trigger cert provisioning: ${err?.message || err}`);
+                });
+              } else if (this.smartProxy) {
+                // No RouteConfigManager (DB disabled) — re-send current routes to trigger cert provisioning
                if (this.certProvisionScheduler) {
                  this.certProvisionScheduler.clear();
                }
@@ -465,16 +477,23 @@ export class DcRouter {
            this.referenceResolver = new ReferenceResolver();
            await this.referenceResolver.initialize();

+            // Initialize target profile manager
+            this.targetProfileManager = new TargetProfileManager();
+            await this.targetProfileManager.initialize();
+
            this.routeConfigManager = new RouteConfigManager(
              () => this.getConstructorRoutes(),
              () => this.smartProxy,
              () => this.options.http3,
              this.options.vpnConfig?.enabled
-                ? (tags?: string[]) => {
-                    if (tags?.length && this.vpnManager) {
-                      return this.vpnManager.getClientIpsForServerDefinedTags(tags);
+                ? (route: import('../ts_interfaces/data/remoteingress.js').IDcRouterRouteConfig, routeId?: string) => {
+                    if (!this.vpnManager || !this.targetProfileManager) {
+                      // VPN not ready yet — deny all until re-apply after VPN starts
+                      return [];
                    }
-                    return [this.options.vpnConfig?.subnet || '10.8.0.0/24'];
+                    return this.targetProfileManager.getMatchingClientIps(
+                      route, routeId, this.vpnManager.listClients(),
+                    );
                  }
                : undefined,
              this.referenceResolver,
@@ -504,6 +523,7 @@ export class DcRouter {
            this.routeConfigManager = undefined;
            this.apiTokenManager = undefined;
            this.referenceResolver = undefined;
+            this.targetProfileManager = undefined;
          })
          .withRetry({ maxRetries: 2, baseDelayMs: 1000 }),
      );
@@ -758,6 +778,19 @@ export class DcRouter {

    await this.dcRouterDb.start();

+    // Run any pending data migrations before anything else reads from the DB.
+    // This must complete before ConfigManagers loads profiles.
+    const migration = await createMigrationRunner(this.dcRouterDb.getDb(), commitinfo.version);
+    const migrationResult = await migration.run();
+    if (migrationResult.stepsApplied.length > 0) {
+      logger.log('info',
+        `smartmigration: ${migrationResult.currentVersionBefore ?? 'fresh'} → ${migrationResult.currentVersionAfter} ` +
+        `(${migrationResult.stepsApplied.length} step(s) applied in ${migrationResult.totalDurationMs}ms)`,
+      );
+    } else if (migrationResult.wasFreshInstall) {
+      logger.log('info', `smartmigration: fresh install stamped to ${migrationResult.currentVersionAfter}`);
+    }
+
    // Start the cache cleaner for TTL-based document cleanup
    const cleanupIntervalMs = (dbConfig.cleanupIntervalHours || 1) * 60 * 60 * 1000;
    this.cacheCleaner = new CacheCleaner(this.dcRouterDb, {
@@ -1025,15 +1058,9 @@ export class DcRouter {
        });
      });

-      this.smartProxy.on('certificate-renewed', (event: plugins.smartproxy.ICertificateIssuedEvent) => {
-        logger.log('info', `Certificate renewed for ${event.domain} via ${event.source}, expires ${event.expiryDate}`);
-        const routeNames = this.findRouteNamesForDomain(event.domain);
-        this.certificateStatusMap.set(event.domain, {
-          status: 'valid', routeNames,
-          expiryDate: event.expiryDate, issuedAt: new Date().toISOString(),
-          source: event.source,
-        });
-      });
+      // Note: smartproxy v27.5.0 emits only 'certificate-issued' and 'certificate-failed'.
+      // Renewals come through 'certificate-issued' (with optional isRenewal? in the payload).
+      // The vestigial 'certificate-renewed' event from common-types.ts is never emitted.

      this.smartProxy.on('certificate-failed', (event: plugins.smartproxy.ICertificateFailedEvent) => {
        logger.log('error', `Certificate failed for ${event.domain} (${event.source}): ${event.error}`);
@@ -1068,7 +1095,10 @@ export class DcRouter {
          if (!expiryDate) {
            try {
              const cleanDomain = entry.domain.replace(/^\*\.?/, '');
-              const certDoc = await AcmeCertDoc.findByDomain(cleanDomain);
+              const domParts = cleanDomain.split('.');
+              const baseDomain = domParts.length > 2 ? domParts.slice(-2).join('.') : cleanDomain;
+              const certDoc = await AcmeCertDoc.findByDomain(baseDomain)
+                || (baseDomain !== cleanDomain ? await AcmeCertDoc.findByDomain(cleanDomain) : null);
              if (certDoc?.validUntil) {
                expiryDate = new Date(certDoc.validUntil).toISOString();
              }
@@ -2137,36 +2167,38 @@ export class DcRouter {
      bridgeIpRangeStart: this.options.vpnConfig.bridgeIpRangeStart,
      bridgeIpRangeEnd: this.options.vpnConfig.bridgeIpRangeEnd,
      onClientChanged: () => {
-        // Re-apply routes so tag-based ipAllowLists get updated
-        this.routeConfigManager?.applyRoutes();
+        // Re-apply routes so profile-based ipAllowLists get updated
+        // (serialized by RouteConfigManager's mutex — safe as fire-and-forget)
+        this.routeConfigManager?.applyRoutes().catch((err) => {
+          logger.log('warn', `Failed to re-apply routes after VPN client change: ${err?.message || err}`);
+        });
      },
-      getClientAllowedIPs: async (clientTags: string[]) => {
+      getClientDirectTargets: (targetProfileIds: string[]) => {
+        if (!this.targetProfileManager) return [];
+        return this.targetProfileManager.getDirectTargetIps(targetProfileIds);
+      },
+      getClientAllowedIPs: async (targetProfileIds: string[]) => {
        const subnet = this.options.vpnConfig?.subnet || '10.8.0.0/24';
        const ips = new Set<string>([subnet]);

-        // Check routes for VPN-gated tag match and collect domains
-        const routes = this.options.smartProxyConfig?.routes || [];
-        const domainsToResolve = new Set<string>();
-        for (const route of routes) {
-          const dcRoute = route as import('../ts_interfaces/data/remoteingress.js').IDcRouterRouteConfig;
-          if (!dcRoute.vpn?.enabled) continue;
+        if (!this.targetProfileManager) return [...ips];

-          const routeTags = dcRoute.vpn.allowedServerDefinedClientTags;
-          if (!routeTags?.length || clientTags.some(t => routeTags.includes(t))) {
-            // Collect domains from this route
-            const domains = (route.match as any)?.domains;
-            if (Array.isArray(domains)) {
-              for (const d of domains) {
-                // Strip wildcard prefix for DNS resolution (*.example.com → example.com)
-                domainsToResolve.add(d.replace(/^\*\./, ''));
-              }
-            }
-          }
+        const routes = (this.options.smartProxyConfig?.routes || []) as import('../ts_interfaces/data/remoteingress.js').IDcRouterRouteConfig[];
+        const storedRoutes = this.routeConfigManager?.getStoredRoutes() || new Map();
+
+        const { domains, targetIps } = this.targetProfileManager.getClientAccessSpec(
+          targetProfileIds, routes, storedRoutes,
+        );
+
+        // Add target IPs directly
+        for (const ip of targetIps) {
+          ips.add(`${ip}/32`);
        }

        // Resolve DNS A records for matched domains (with caching)
-        for (const domain of domainsToResolve) {
-          const resolvedIps = await this.resolveVpnDomainIPs(domain);
+        for (const domain of domains) {
+          const stripped = domain.replace(/^\*\./, '');
+          const resolvedIps = await this.resolveVpnDomainIPs(stripped);
          for (const ip of resolvedIps) {
            ips.add(`${ip}/32`);
          }
@@ -2179,9 +2211,9 @@ export class DcRouter {
    await this.vpnManager.start();

    // Re-apply routes now that VPN clients are loaded — ensures hardcoded routes
-    // get correct tag-based ipAllowLists (not possible during setupSmartProxy since
+    // get correct profile-based ipAllowLists (not possible during setupSmartProxy since
    // VPN server wasn't ready yet)
-    this.routeConfigManager?.applyRoutes();
+    await this.routeConfigManager?.applyRoutes();
  }

  /** Cache for DNS-resolved IPs of VPN-gated domains. TTL: 5 minutes. */
@@ -2199,6 +2231,11 @@ export class DcRouter {
      const { promises: dnsPromises } = await import('dns');
      const ips = await dnsPromises.resolve4(domain);
      this.vpnDomainIpCache.set(domain, { ips, expiresAt: Date.now() + 5 * 60 * 1000 });
+      // Evict oldest entries if cache exceeds 1000 entries
+      if (this.vpnDomainIpCache.size > 1000) {
+        const firstKey = this.vpnDomainIpCache.keys().next().value;
+        if (firstKey) this.vpnDomainIpCache.delete(firstKey);
+      }
      return ips;
    } catch (err) {
      logger.log('warn', `VPN: Failed to resolve ${domain} for AllowedIPs: ${(err as Error).message}`);
--- a/ts/classes.storage-cert-manager.ts
+++ b/ts/classes.storage-cert-manager.ts
@@ -29,9 +29,9 @@ export class StorageBackedCertManager implements plugins.smartacme.ICertManager
    let doc = await AcmeCertDoc.findByDomain(cert.domainName);
    if (!doc) {
      doc = new AcmeCertDoc();
+      doc.id = cert.id;
      doc.domainName = cert.domainName;
    }
-    doc.id = cert.id;
    doc.created = cert.created;
    doc.privateKey = cert.privateKey;
    doc.publicKey = cert.publicKey;
--- a/ts/config/classes.reference-resolver.ts
+++ b/ts/config/classes.reference-resolver.ts
@@ -1,8 +1,8 @@
 import * as plugins from '../plugins.js';
 import { logger } from '../logger.js';
-import { SecurityProfileDoc, NetworkTargetDoc, StoredRouteDoc } from '../db/index.js';
+import { SourceProfileDoc, NetworkTargetDoc, StoredRouteDoc } from '../db/index.js';
 import type {
-  ISecurityProfile,
+  ISourceProfile,
  INetworkTarget,
  IRouteMetadata,
  IStoredRoute,
@@ -12,7 +12,7 @@ import type {
 const MAX_INHERITANCE_DEPTH = 5;

 export class ReferenceResolver {
-  private profiles = new Map<string, ISecurityProfile>();
+  private profiles = new Map<string, ISourceProfile>();
  private targets = new Map<string, INetworkTarget>();

  // =========================================================================
@@ -38,7 +38,7 @@ export class ReferenceResolver {
    const id = plugins.uuid.v4();
    const now = Date.now();

-    const profile: ISecurityProfile = {
+    const profile: ISourceProfile = {
      id,
      name: data.name,
      description: data.description,
@@ -51,17 +51,17 @@ export class ReferenceResolver {

    this.profiles.set(id, profile);
    await this.persistProfile(profile);
-    logger.log('info', `Created security profile '${profile.name}' (${id})`);
+    logger.log('info', `Created source profile '${profile.name}' (${id})`);
    return id;
  }

  public async updateProfile(
    id: string,
-    patch: Partial<Omit<ISecurityProfile, 'id' | 'createdAt' | 'createdBy'>>,
+    patch: Partial<Omit<ISourceProfile, 'id' | 'createdAt' | 'createdBy'>>,
  ): Promise<{ affectedRouteIds: string[] }> {
    const profile = this.profiles.get(id);
    if (!profile) {
-      throw new Error(`Security profile '${id}' not found`);
+      throw new Error(`Source profile '${id}' not found`);
    }

    if (patch.name !== undefined) profile.name = patch.name;
@@ -71,7 +71,7 @@ export class ReferenceResolver {
    profile.updatedAt = Date.now();

    await this.persistProfile(profile);
-    logger.log('info', `Updated security profile '${profile.name}' (${id})`);
+    logger.log('info', `Updated source profile '${profile.name}' (${id})`);

    // Find routes referencing this profile
    const affectedRouteIds = await this.findRoutesByProfileRef(id);
@@ -85,7 +85,7 @@ export class ReferenceResolver {
  ): Promise<{ success: boolean; message?: string }> {
    const profile = this.profiles.get(id);
    if (!profile) {
-      return { success: false, message: `Security profile '${id}' not found` };
+      return { success: false, message: `Source profile '${id}' not found` };
    }

    // Check usage
@@ -101,7 +101,7 @@ export class ReferenceResolver {
    }

    // Delete from DB
-    const doc = await SecurityProfileDoc.findById(id);
+    const doc = await SourceProfileDoc.findById(id);
    if (doc) await doc.delete();
    this.profiles.delete(id);

@@ -110,24 +110,24 @@ export class ReferenceResolver {
      await this.clearProfileRefsOnRoutes(affectedIds);
      logger.log('warn', `Force-deleted profile '${profile.name}'; cleared refs on ${affectedIds.length} route(s)`);
    } else {
-      logger.log('info', `Deleted security profile '${profile.name}' (${id})`);
+      logger.log('info', `Deleted source profile '${profile.name}' (${id})`);
    }

    return { success: true };
  }

-  public getProfile(id: string): ISecurityProfile | undefined {
+  public getProfile(id: string): ISourceProfile | undefined {
    return this.profiles.get(id);
  }

-  public getProfileByName(name: string): ISecurityProfile | undefined {
+  public getProfileByName(name: string): ISourceProfile | undefined {
    for (const profile of this.profiles.values()) {
      if (profile.name === name) return profile;
    }
    return undefined;
  }

-  public listProfiles(): ISecurityProfile[] {
+  public listProfiles(): ISourceProfile[] {
    return [...this.profiles.values()];
  }

@@ -137,7 +137,7 @@ export class ReferenceResolver {
      usage.set(profile.id, []);
    }
    for (const [routeId, stored] of storedRoutes) {
-      const ref = stored.metadata?.securityProfileRef;
+      const ref = stored.metadata?.sourceProfileRef;
      if (ref && usage.has(ref)) {
        usage.get(ref)!.push({ id: routeId, routeName: stored.route.name || routeId });
      }
@@ -151,7 +151,7 @@ export class ReferenceResolver {
  ): Array<{ id: string; routeName: string }> {
    const routes: Array<{ id: string; routeName: string }> = [];
    for (const [routeId, stored] of storedRoutes) {
-      if (stored.metadata?.securityProfileRef === profileId) {
+      if (stored.metadata?.sourceProfileRef === profileId) {
        routes.push({ id: routeId, routeName: stored.route.name || routeId });
      }
    }
@@ -280,7 +280,7 @@ export class ReferenceResolver {

  /**
   * Resolve references for a single route.
-   * Materializes security profile and/or network target into the route's fields.
+   * Materializes source profile and/or network target into the route's fields.
   * Returns the resolved route and updated metadata.
   */
  public resolveRoute(
@@ -289,33 +289,34 @@ export class ReferenceResolver {
  ): { route: plugins.smartproxy.IRouteConfig; metadata: IRouteMetadata } {
    const resolvedMetadata: IRouteMetadata = { ...metadata };

-    if (resolvedMetadata.securityProfileRef) {
-      const resolvedSecurity = this.resolveSecurityProfile(resolvedMetadata.securityProfileRef);
+    if (resolvedMetadata.sourceProfileRef) {
+      const resolvedSecurity = this.resolveSourceProfile(resolvedMetadata.sourceProfileRef);
      if (resolvedSecurity) {
-        const profile = this.profiles.get(resolvedMetadata.securityProfileRef);
+        const profile = this.profiles.get(resolvedMetadata.sourceProfileRef);
        // Merge: profile provides base, route's inline values override
        route = {
          ...route,
          security: this.mergeSecurityFields(resolvedSecurity, route.security),
        };
-        resolvedMetadata.securityProfileName = profile?.name;
+        resolvedMetadata.sourceProfileName = profile?.name;
        resolvedMetadata.lastResolvedAt = Date.now();
      } else {
-        logger.log('warn', `Security profile '${resolvedMetadata.securityProfileRef}' not found during resolution`);
+        logger.log('warn', `Source profile '${resolvedMetadata.sourceProfileRef}' not found during resolution`);
      }
    }

    if (resolvedMetadata.networkTargetRef) {
      const target = this.targets.get(resolvedMetadata.networkTargetRef);
      if (target) {
+        const hosts = Array.isArray(target.host) ? target.host : [target.host];
        route = {
          ...route,
          action: {
            ...route.action,
-            targets: [{
-              host: target.host as string,
+            targets: hosts.map((h) => ({
+              host: h,
              port: target.port,
-            }],
+            })),
          },
        };
        resolvedMetadata.networkTargetName = target.name;
@@ -335,7 +336,7 @@ export class ReferenceResolver {
  public async findRoutesByProfileRef(profileId: string): Promise<string[]> {
    const docs = await StoredRouteDoc.findAll();
    return docs
-      .filter((doc) => doc.metadata?.securityProfileRef === profileId)
+      .filter((doc) => doc.metadata?.sourceProfileRef === profileId)
      .map((doc) => doc.id);
  }

@@ -349,7 +350,7 @@ export class ReferenceResolver {
  public findRoutesByProfileRefSync(profileId: string, storedRoutes: Map<string, IStoredRoute>): string[] {
    const ids: string[] = [];
    for (const [routeId, stored] of storedRoutes) {
-      if (stored.metadata?.securityProfileRef === profileId) {
+      if (stored.metadata?.sourceProfileRef === profileId) {
        ids.push(routeId);
      }
    }
@@ -367,10 +368,10 @@ export class ReferenceResolver {
  }

  // =========================================================================
-  // Private: security profile resolution with inheritance
+  // Private: source profile resolution with inheritance
  // =========================================================================

-  private resolveSecurityProfile(
+  private resolveSourceProfile(
    profileId: string,
    visited: Set<string> = new Set(),
    depth: number = 0,
@@ -396,7 +397,7 @@ export class ReferenceResolver {
    // Resolve parent profiles first (top-down, later overrides earlier)
    if (profile.extendsProfiles?.length) {
      for (const parentId of profile.extendsProfiles) {
-        const parentSecurity = this.resolveSecurityProfile(parentId, new Set(visited), depth + 1);
+        const parentSecurity = this.resolveSourceProfile(parentId, new Set(visited), depth + 1);
        if (parentSecurity) {
          baseSecurity = this.mergeSecurityFields(baseSecurity, parentSecurity);
        }
@@ -453,7 +454,7 @@ export class ReferenceResolver {
  // =========================================================================

  private async loadProfiles(): Promise<void> {
-    const docs = await SecurityProfileDoc.findAll();
+    const docs = await SourceProfileDoc.findAll();
    for (const doc of docs) {
      if (doc.id) {
        this.profiles.set(doc.id, {
@@ -469,7 +470,7 @@ export class ReferenceResolver {
      }
    }
    if (this.profiles.size > 0) {
-      logger.log('info', `Loaded ${this.profiles.size} security profile(s) from storage`);
+      logger.log('info', `Loaded ${this.profiles.size} source profile(s) from storage`);
    }
  }

@@ -494,8 +495,8 @@ export class ReferenceResolver {
    }
  }

-  private async persistProfile(profile: ISecurityProfile): Promise<void> {
-    const existingDoc = await SecurityProfileDoc.findById(profile.id);
+  private async persistProfile(profile: ISourceProfile): Promise<void> {
+    const existingDoc = await SourceProfileDoc.findById(profile.id);
    if (existingDoc) {
      existingDoc.name = profile.name;
      existingDoc.description = profile.description;
@@ -504,7 +505,7 @@ export class ReferenceResolver {
      existingDoc.updatedAt = profile.updatedAt;
      await existingDoc.save();
    } else {
-      const doc = new SecurityProfileDoc();
+      const doc = new SourceProfileDoc();
      doc.id = profile.id;
      doc.name = profile.name;
      doc.description = profile.description;
@@ -550,8 +551,8 @@ export class ReferenceResolver {
      if (doc?.metadata) {
        doc.metadata = {
          ...doc.metadata,
-          securityProfileRef: undefined,
-          securityProfileName: undefined,
+          sourceProfileRef: undefined,
+          sourceProfileName: undefined,
        };
        doc.updatedAt = Date.now();
        await doc.save();
--- a/ts/config/classes.route-config-manager.ts
+++ b/ts/config/classes.route-config-manager.ts
@@ -12,16 +12,50 @@ import type { IDcRouterRouteConfig } from '../../ts_interfaces/data/remoteingres
 import { type IHttp3Config, augmentRouteWithHttp3 } from '../http3/index.js';
 import type { ReferenceResolver } from './classes.reference-resolver.js';

+/** An IP allow entry: plain IP/CIDR or domain-scoped. */
+export type TIpAllowEntry = string | { ip: string; domains: string[] };
+
+/**
+ * Simple async mutex — serializes concurrent applyRoutes() calls so the Rust engine
+ * never receives rapid overlapping route updates that can churn UDP/QUIC listeners.
+ */
+class RouteUpdateMutex {
+  private locked = false;
+  private queue: Array<() => void> = [];
+
+  async runExclusive<T>(fn: () => Promise<T>): Promise<T> {
+    await new Promise<void>((resolve) => {
+      if (!this.locked) {
+        this.locked = true;
+        resolve();
+      } else {
+        this.queue.push(resolve);
+      }
+    });
+    try {
+      return await fn();
+    } finally {
+      this.locked = false;
+      const next = this.queue.shift();
+      if (next) {
+        this.locked = true;
+        next();
+      }
+    }
+  }
+}
+
 export class RouteConfigManager {
  private storedRoutes = new Map<string, IStoredRoute>();
  private overrides = new Map<string, IRouteOverride>();
  private warnings: IRouteWarning[] = [];
+  private routeUpdateMutex = new RouteUpdateMutex();

  constructor(
    private getHardcodedRoutes: () => plugins.smartproxy.IRouteConfig[],
    private getSmartProxy: () => plugins.smartproxy.SmartProxy | undefined,
    private getHttp3Config?: () => IHttp3Config | undefined,
-    private getVpnAllowList?: (tags?: string[]) => string[],
+    private getVpnClientIpsForRoute?: (route: IDcRouterRouteConfig, routeId?: string) => TIpAllowEntry[],
    private referenceResolver?: ReferenceResolver,
    private onRoutesApplied?: (routes: plugins.smartproxy.IRouteConfig[]) => void,
  ) {}
@@ -83,7 +117,7 @@ export class RouteConfigManager {
  // =========================================================================

  public async createRoute(
-    route: plugins.smartproxy.IRouteConfig,
+    route: IDcRouterRouteConfig,
    createdBy: string,
    enabled = true,
    metadata?: IRouteMetadata,
@@ -123,7 +157,7 @@ export class RouteConfigManager {
  public async updateRoute(
    id: string,
    patch: {
-      route?: Partial<plugins.smartproxy.IRouteConfig>;
+      route?: Partial<IDcRouterRouteConfig>;
      enabled?: boolean;
      metadata?: Partial<IRouteMetadata>;
    },
@@ -132,7 +166,18 @@ export class RouteConfigManager {
    if (!stored) return false;

    if (patch.route) {
-      stored.route = { ...stored.route, ...patch.route } as plugins.smartproxy.IRouteConfig;
+      const mergedAction = patch.route.action
+        ? { ...stored.route.action, ...patch.route.action }
+        : stored.route.action;
+      // Handle explicit null to remove nested action properties (e.g., tls: null)
+      if (patch.route.action) {
+        for (const [key, val] of Object.entries(patch.route.action)) {
+          if (val === null) {
+            delete (mergedAction as any)[key];
+          }
+        }
+      }
+      stored.route = { ...stored.route, ...patch.route, action: mergedAction } as IDcRouterRouteConfig;
    }
    if (patch.enabled !== undefined) {
      stored.enabled = patch.enabled;
@@ -346,60 +391,60 @@ export class RouteConfigManager {
  // =========================================================================

  public async applyRoutes(): Promise<void> {
-    const smartProxy = this.getSmartProxy();
-    if (!smartProxy) return;
+    await this.routeUpdateMutex.runExclusive(async () => {
+      const smartProxy = this.getSmartProxy();
+      if (!smartProxy) return;

-    const enabledRoutes: plugins.smartproxy.IRouteConfig[] = [];
+      const enabledRoutes: plugins.smartproxy.IRouteConfig[] = [];

-    const http3Config = this.getHttp3Config?.();
-    const vpnAllowList = this.getVpnAllowList;
+      const http3Config = this.getHttp3Config?.();
+      const vpnCallback = this.getVpnClientIpsForRoute;

-    // Helper: inject VPN security into a route if vpn.enabled is set
-    const injectVpn = (route: plugins.smartproxy.IRouteConfig): plugins.smartproxy.IRouteConfig => {
-      if (!vpnAllowList) return route;
-      const dcRoute = route as IDcRouterRouteConfig;
-      if (!dcRoute.vpn?.enabled) return route;
-      const allowList = vpnAllowList(dcRoute.vpn.allowedServerDefinedClientTags);
-      const mandatory = dcRoute.vpn.mandatory === true; // defaults to false
-      return {
-        ...route,
-        security: {
-          ...route.security,
-          ipAllowList: mandatory
-            ? allowList
-            : [...(route.security?.ipAllowList || []), ...allowList],
-        },
+      // Helper: inject VPN security into a vpnOnly route
+      const injectVpn = (route: plugins.smartproxy.IRouteConfig, routeId?: string): plugins.smartproxy.IRouteConfig => {
+        if (!vpnCallback) return route;
+        const dcRoute = route as IDcRouterRouteConfig;
+        if (!dcRoute.vpnOnly) return route;
+        const vpnEntries = vpnCallback(dcRoute, routeId);
+        const existingEntries = route.security?.ipAllowList || [];
+        return {
+          ...route,
+          security: {
+            ...route.security,
+            ipAllowList: [...existingEntries, ...vpnEntries],
+          },
+        };
      };
-    };

-    // Add enabled hardcoded routes (respecting overrides, with fresh VPN injection)
-    for (const route of this.getHardcodedRoutes()) {
-      const name = route.name || '';
-      const override = this.overrides.get(name);
-      if (override && !override.enabled) {
-        continue; // Skip disabled hardcoded route
-      }
-      enabledRoutes.push(injectVpn(route));
-    }
-
-    // Add enabled programmatic routes (with HTTP/3 and VPN augmentation)
-    for (const stored of this.storedRoutes.values()) {
-      if (stored.enabled) {
-        let route = stored.route;
-        if (http3Config && http3Config.enabled !== false) {
-          route = augmentRouteWithHttp3(route, { enabled: true, ...http3Config });
+      // Add enabled hardcoded routes (respecting overrides, with fresh VPN injection)
+      for (const route of this.getHardcodedRoutes()) {
+        const name = route.name || '';
+        const override = this.overrides.get(name);
+        if (override && !override.enabled) {
+          continue; // Skip disabled hardcoded route
        }
        enabledRoutes.push(injectVpn(route));
      }
-    }

-    await smartProxy.updateRoutes(enabledRoutes);
+      // Add enabled programmatic routes (with HTTP/3 and VPN augmentation)
+      for (const stored of this.storedRoutes.values()) {
+        if (stored.enabled) {
+          let route = stored.route;
+          if (http3Config?.enabled !== false) {
+            route = augmentRouteWithHttp3(route, { enabled: true, ...http3Config });
+          }
+          enabledRoutes.push(injectVpn(route, stored.id));
+        }
+      }

-    // Notify listeners (e.g. RemoteIngressManager) of the merged route set
-    if (this.onRoutesApplied) {
-      this.onRoutesApplied(enabledRoutes);
-    }
+      await smartProxy.updateRoutes(enabledRoutes);

-    logger.log('info', `Applied ${enabledRoutes.length} routes to SmartProxy (${this.storedRoutes.size} programmatic, ${this.overrides.size} overrides)`);
+      // Notify listeners (e.g. RemoteIngressManager) of the merged route set
+      if (this.onRoutesApplied) {
+        this.onRoutesApplied(enabledRoutes);
+      }
+
+      logger.log('info', `Applied ${enabledRoutes.length} routes to SmartProxy (${this.storedRoutes.size} programmatic, ${this.overrides.size} overrides)`);
+    });
  }
 }
--- a/ts/config/classes.target-profile-manager.ts
+++ b/ts/config/classes.target-profile-manager.ts
@@ -0,0 +1,428 @@
+import * as plugins from '../plugins.js';
+import { logger } from '../logger.js';
+import { TargetProfileDoc, VpnClientDoc } from '../db/index.js';
+import type { ITargetProfile, ITargetProfileTarget } from '../../ts_interfaces/data/target-profile.js';
+import type { IDcRouterRouteConfig } from '../../ts_interfaces/data/remoteingress.js';
+import type { IStoredRoute } from '../../ts_interfaces/data/route-management.js';
+
+/**
+ * Manages TargetProfiles (target-side: what can be accessed).
+ * TargetProfiles define what resources a VPN client can reach:
+ * domains, specific IP:port targets, and/or direct route references.
+ */
+export class TargetProfileManager {
+  private profiles = new Map<string, ITargetProfile>();
+
+  // =========================================================================
+  // Lifecycle
+  // =========================================================================
+
+  public async initialize(): Promise<void> {
+    await this.loadProfiles();
+  }
+
+  // =========================================================================
+  // CRUD
+  // =========================================================================
+
+  public async createProfile(data: {
+    name: string;
+    description?: string;
+    domains?: string[];
+    targets?: ITargetProfileTarget[];
+    routeRefs?: string[];
+    createdBy: string;
+  }): Promise<string> {
+    // Enforce unique profile names
+    for (const existing of this.profiles.values()) {
+      if (existing.name === data.name) {
+        throw new Error(`Target profile with name '${data.name}' already exists (id: ${existing.id})`);
+      }
+    }
+
+    const id = plugins.uuid.v4();
+    const now = Date.now();
+
+    const profile: ITargetProfile = {
+      id,
+      name: data.name,
+      description: data.description,
+      domains: data.domains,
+      targets: data.targets,
+      routeRefs: data.routeRefs,
+      createdAt: now,
+      updatedAt: now,
+      createdBy: data.createdBy,
+    };
+
+    this.profiles.set(id, profile);
+    await this.persistProfile(profile);
+    logger.log('info', `Created target profile '${profile.name}' (${id})`);
+    return id;
+  }
+
+  public async updateProfile(
+    id: string,
+    patch: Partial<Omit<ITargetProfile, 'id' | 'createdAt' | 'createdBy'>>,
+  ): Promise<void> {
+    const profile = this.profiles.get(id);
+    if (!profile) {
+      throw new Error(`Target profile '${id}' not found`);
+    }
+
+    if (patch.name !== undefined) profile.name = patch.name;
+    if (patch.description !== undefined) profile.description = patch.description;
+    if (patch.domains !== undefined) profile.domains = patch.domains;
+    if (patch.targets !== undefined) profile.targets = patch.targets;
+    if (patch.routeRefs !== undefined) profile.routeRefs = patch.routeRefs;
+    profile.updatedAt = Date.now();
+
+    await this.persistProfile(profile);
+    logger.log('info', `Updated target profile '${profile.name}' (${id})`);
+  }
+
+  public async deleteProfile(
+    id: string,
+    force?: boolean,
+  ): Promise<{ success: boolean; message?: string }> {
+    const profile = this.profiles.get(id);
+    if (!profile) {
+      return { success: false, message: `Target profile '${id}' not found` };
+    }
+
+    // Check if any VPN clients reference this profile
+    const clients = await VpnClientDoc.findAll();
+    const referencingClients = clients.filter(
+      (c) => c.targetProfileIds?.includes(id),
+    );
+
+    if (referencingClients.length > 0 && !force) {
+      return {
+        success: false,
+        message: `Profile '${profile.name}' is in use by ${referencingClients.length} VPN client(s). Use force=true to delete.`,
+      };
+    }
+
+    // Delete from DB
+    const doc = await TargetProfileDoc.findById(id);
+    if (doc) await doc.delete();
+    this.profiles.delete(id);
+
+    if (referencingClients.length > 0) {
+      // Remove profile ref from clients
+      for (const client of referencingClients) {
+        client.targetProfileIds = client.targetProfileIds?.filter((pid) => pid !== id);
+        client.updatedAt = Date.now();
+        await client.save();
+      }
+      logger.log('warn', `Force-deleted target profile '${profile.name}'; removed refs from ${referencingClients.length} client(s)`);
+    } else {
+      logger.log('info', `Deleted target profile '${profile.name}' (${id})`);
+    }
+
+    return { success: true };
+  }
+
+  public getProfile(id: string): ITargetProfile | undefined {
+    return this.profiles.get(id);
+  }
+
+  public listProfiles(): ITargetProfile[] {
+    return [...this.profiles.values()];
+  }
+
+  /**
+   * Get which VPN clients reference a target profile.
+   */
+  public async getProfileUsage(profileId: string): Promise<Array<{ clientId: string; description?: string }>> {
+    const clients = await VpnClientDoc.findAll();
+    return clients
+      .filter((c) => c.targetProfileIds?.includes(profileId))
+      .map((c) => ({ clientId: c.clientId, description: c.description }));
+  }
+
+  // =========================================================================
+  // Direct target IPs (bypass SmartProxy)
+  // =========================================================================
+
+  /**
+   * For a set of target profile IDs, collect all explicit target IPs.
+   * These IPs bypass the SmartProxy forceTarget rewrite — VPN clients can
+   * connect to them directly through the tunnel.
+   */
+  public getDirectTargetIps(targetProfileIds: string[]): string[] {
+    const ips = new Set<string>();
+    for (const profileId of targetProfileIds) {
+      const profile = this.profiles.get(profileId);
+      if (!profile?.targets?.length) continue;
+      for (const t of profile.targets) {
+        ips.add(t.ip);
+      }
+    }
+    return [...ips];
+  }
+
+  // =========================================================================
+  // Core matching: route → client IPs
+  // =========================================================================
+
+  /**
+   * For a vpnOnly route, find all enabled VPN clients whose assigned TargetProfile
+   * matches the route. Returns IP allow entries for injection into ipAllowList.
+   *
+   * Entries are domain-scoped when a profile matches via specific domains that are
+   * a subset of the route's wildcard. Plain IPs are returned for routeRef/target matches
+   * or when profile domains exactly equal the route's domains.
+   */
+  public getMatchingClientIps(
+    route: IDcRouterRouteConfig,
+    routeId: string | undefined,
+    clients: VpnClientDoc[],
+  ): Array<string | { ip: string; domains: string[] }> {
+    const entries: Array<string | { ip: string; domains: string[] }> = [];
+    const routeDomains: string[] = (route.match as any)?.domains || [];
+
+    for (const client of clients) {
+      if (!client.enabled || !client.assignedIp) continue;
+      if (!client.targetProfileIds?.length) continue;
+
+      // Collect scoped domains from all matching profiles for this client
+      let fullAccess = false;
+      const scopedDomains = new Set<string>();
+
+      for (const profileId of client.targetProfileIds) {
+        const profile = this.profiles.get(profileId);
+        if (!profile) continue;
+
+        const matchResult = this.routeMatchesProfileDetailed(route, routeId, profile, routeDomains);
+        if (matchResult === 'full') {
+          fullAccess = true;
+          break; // No need to check more profiles
+        }
+        if (matchResult !== 'none') {
+          for (const d of matchResult.domains) scopedDomains.add(d);
+        }
+      }
+
+      if (fullAccess) {
+        entries.push(client.assignedIp);
+      } else if (scopedDomains.size > 0) {
+        entries.push({ ip: client.assignedIp, domains: [...scopedDomains] });
+      }
+    }
+
+    return entries;
+  }
+
+  /**
+   * For a given client (by its targetProfileIds), compute the set of
+   * domains and target IPs it can access. Used for WireGuard AllowedIPs.
+   */
+  public getClientAccessSpec(
+    targetProfileIds: string[],
+    allRoutes: IDcRouterRouteConfig[],
+    storedRoutes: Map<string, IStoredRoute>,
+  ): { domains: string[]; targetIps: string[] } {
+    const domains = new Set<string>();
+    const targetIps = new Set<string>();
+
+    // Collect all access specifiers from assigned profiles
+    for (const profileId of targetProfileIds) {
+      const profile = this.profiles.get(profileId);
+      if (!profile) continue;
+
+      // Direct domain entries
+      if (profile.domains?.length) {
+        for (const d of profile.domains) {
+          domains.add(d);
+        }
+      }
+
+      // Direct target IP entries
+      if (profile.targets?.length) {
+        for (const t of profile.targets) {
+          targetIps.add(t.ip);
+        }
+      }
+
+      // Route references: scan constructor routes
+      for (const route of allRoutes) {
+        if (this.routeMatchesProfile(route as IDcRouterRouteConfig, undefined, profile)) {
+          const routeDomains = (route.match as any)?.domains;
+          if (Array.isArray(routeDomains)) {
+            for (const d of routeDomains) {
+              domains.add(d);
+            }
+          }
+        }
+      }
+
+      // Route references: scan stored routes
+      for (const [storedId, stored] of storedRoutes) {
+        if (!stored.enabled) continue;
+        if (this.routeMatchesProfile(stored.route as IDcRouterRouteConfig, storedId, profile)) {
+          const routeDomains = (stored.route.match as any)?.domains;
+          if (Array.isArray(routeDomains)) {
+            for (const d of routeDomains) {
+              domains.add(d);
+            }
+          }
+        }
+      }
+    }
+
+    return {
+      domains: [...domains],
+      targetIps: [...targetIps],
+    };
+  }
+
+  // =========================================================================
+  // Private: matching logic
+  // =========================================================================
+
+  /**
+   * Check if a route matches a profile (boolean convenience wrapper).
+   */
+  private routeMatchesProfile(
+    route: IDcRouterRouteConfig,
+    routeId: string | undefined,
+    profile: ITargetProfile,
+  ): boolean {
+    const routeDomains: string[] = (route.match as any)?.domains || [];
+    const result = this.routeMatchesProfileDetailed(route, routeId, profile, routeDomains);
+    return result !== 'none';
+  }
+
+  /**
+   * Detailed match: returns 'full' (plain IP, entire route), 'scoped' (domain-limited),
+   * or 'none' (no match).
+   *
+   * - routeRefs / target matches → 'full' (explicit reference = full access)
+   * - domain match where profile domains are a subset of route wildcard → 'scoped'
+   * - domain match where domains are identical or profile is a wildcard → 'full'
+   */
+  private routeMatchesProfileDetailed(
+    route: IDcRouterRouteConfig,
+    routeId: string | undefined,
+    profile: ITargetProfile,
+    routeDomains: string[],
+  ): 'full' | { type: 'scoped'; domains: string[] } | 'none' {
+    // 1. Route reference match → full access
+    if (profile.routeRefs?.length) {
+      if (routeId && profile.routeRefs.includes(routeId)) return 'full';
+      if (route.name && profile.routeRefs.includes(route.name)) return 'full';
+    }
+
+    // 2. Domain match
+    if (profile.domains?.length && routeDomains.length) {
+      const matchedProfileDomains: string[] = [];
+
+      for (const profileDomain of profile.domains) {
+        for (const routeDomain of routeDomains) {
+          if (this.domainMatchesPattern(routeDomain, profileDomain) ||
+              this.domainMatchesPattern(profileDomain, routeDomain)) {
+            matchedProfileDomains.push(profileDomain);
+            break; // This profileDomain matched, move to the next
+          }
+        }
+      }
+
+      if (matchedProfileDomains.length > 0) {
+        // Check if profile domains cover the route entirely (same wildcards = full access)
+        const isFullCoverage = routeDomains.every((rd) =>
+          matchedProfileDomains.some((pd) =>
+            rd === pd || this.domainMatchesPattern(rd, pd),
+          ),
+        );
+        if (isFullCoverage) return 'full';
+
+        // Profile domains are a subset → scoped access to those specific domains
+        return { type: 'scoped', domains: matchedProfileDomains };
+      }
+    }
+
+    // 3. Target match (host + port) → full access (precise by nature)
+    if (profile.targets?.length) {
+      const routeTargets = (route.action as any)?.targets;
+      if (Array.isArray(routeTargets)) {
+        for (const profileTarget of profile.targets) {
+          for (const routeTarget of routeTargets) {
+            const routeHost = routeTarget.host;
+            const routePort = routeTarget.port;
+            if (routeHost === profileTarget.ip && routePort === profileTarget.port) {
+              return 'full';
+            }
+          }
+        }
+      }
+    }
+
+    return 'none';
+  }
+
+  /**
+   * Check if a domain matches a pattern.
+   * - '*.example.com' matches 'sub.example.com', 'a.b.example.com'
+   * - 'example.com' matches only 'example.com'
+   */
+  private domainMatchesPattern(domain: string, pattern: string): boolean {
+    if (pattern === domain) return true;
+    if (pattern.startsWith('*.')) {
+      const suffix = pattern.slice(1); // '.example.com'
+      return domain.endsWith(suffix) && domain.length > suffix.length;
+    }
+    return false;
+  }
+
+  // =========================================================================
+  // Private: persistence
+  // =========================================================================
+
+  private async loadProfiles(): Promise<void> {
+    const docs = await TargetProfileDoc.findAll();
+    for (const doc of docs) {
+      if (doc.id) {
+        this.profiles.set(doc.id, {
+          id: doc.id,
+          name: doc.name,
+          description: doc.description,
+          domains: doc.domains,
+          targets: doc.targets,
+          routeRefs: doc.routeRefs,
+          createdAt: doc.createdAt,
+          updatedAt: doc.updatedAt,
+          createdBy: doc.createdBy,
+        });
+      }
+    }
+    if (this.profiles.size > 0) {
+      logger.log('info', `Loaded ${this.profiles.size} target profile(s) from storage`);
+    }
+  }
+
+  private async persistProfile(profile: ITargetProfile): Promise<void> {
+    const existingDoc = await TargetProfileDoc.findById(profile.id);
+    if (existingDoc) {
+      existingDoc.name = profile.name;
+      existingDoc.description = profile.description;
+      existingDoc.domains = profile.domains;
+      existingDoc.targets = profile.targets;
+      existingDoc.routeRefs = profile.routeRefs;
+      existingDoc.updatedAt = profile.updatedAt;
+      await existingDoc.save();
+    } else {
+      const doc = new TargetProfileDoc();
+      doc.id = profile.id;
+      doc.name = profile.name;
+      doc.description = profile.description;
+      doc.domains = profile.domains;
+      doc.targets = profile.targets;
+      doc.routeRefs = profile.routeRefs;
+      doc.createdAt = profile.createdAt;
+      doc.updatedAt = profile.updatedAt;
+      doc.createdBy = profile.createdBy;
+      await doc.save();
+    }
+  }
+}
--- a/ts/config/index.ts
+++ b/ts/config/index.ts
@@ -3,4 +3,5 @@ export * from './validator.js';
 export { RouteConfigManager } from './classes.route-config-manager.js';
 export { ApiTokenManager } from './classes.api-token-manager.js';
 export { ReferenceResolver } from './classes.reference-resolver.js';
-export { DbSeeder } from './classes.db-seeder.js';
+export { DbSeeder } from './classes.db-seeder.js';
+export { TargetProfileManager } from './classes.target-profile-manager.js';
--- a/ts/db/documents/classes.security-profile.doc.ts
+++ b/ts/db/documents/classes.security-profile.doc.ts
@@ -5,7 +5,7 @@ import type { IRouteSecurity } from '../../../ts_interfaces/data/route-managemen
 const getDb = () => DcRouterDb.getInstance().getDb();

@plugins.smartdata.Collection(() => getDb())
-export class SecurityProfileDoc extends plugins.smartdata.SmartDataDbDoc<SecurityProfileDoc, SecurityProfileDoc> {
+export class SourceProfileDoc extends plugins.smartdata.SmartDataDbDoc<SourceProfileDoc, SourceProfileDoc> {
  @plugins.smartdata.unI()
  @plugins.smartdata.svDb()
  public id!: string;
@@ -35,15 +35,11 @@ export class SecurityProfileDoc extends plugins.smartdata.SmartDataDbDoc<Securit
    super();
  }

-  public static async findById(id: string): Promise<SecurityProfileDoc | null> {
-    return await SecurityProfileDoc.getInstance({ id });
+  public static async findById(id: string): Promise<SourceProfileDoc | null> {
+    return await SourceProfileDoc.getInstance({ id });
  }

-  public static async findByName(name: string): Promise<SecurityProfileDoc | null> {
-    return await SecurityProfileDoc.getInstance({ name });
-  }
-
-  public static async findAll(): Promise<SecurityProfileDoc[]> {
-    return await SecurityProfileDoc.getInstances({});
+  public static async findAll(): Promise<SourceProfileDoc[]> {
+    return await SourceProfileDoc.getInstances({});
  }
 }
--- a/ts/db/documents/classes.stored-route.doc.ts
+++ b/ts/db/documents/classes.stored-route.doc.ts
@@ -1,6 +1,7 @@
 import * as plugins from '../../plugins.js';
 import { DcRouterDb } from '../classes.dcrouter-db.js';
 import type { IRouteMetadata } from '../../../ts_interfaces/data/route-management.js';
+import type { IDcRouterRouteConfig } from '../../../ts_interfaces/data/remoteingress.js';

 const getDb = () => DcRouterDb.getInstance().getDb();

@@ -11,7 +12,7 @@ export class StoredRouteDoc extends plugins.smartdata.SmartDataDbDoc<StoredRoute
  public id!: string;

  @plugins.smartdata.svDb()
-  public route!: plugins.smartproxy.IRouteConfig;
+  public route!: IDcRouterRouteConfig;

  @plugins.smartdata.svDb()
  public enabled!: boolean;
--- a/ts/db/documents/classes.target-profile.doc.ts
+++ b/ts/db/documents/classes.target-profile.doc.ts
@@ -0,0 +1,48 @@
+import * as plugins from '../../plugins.js';
+import { DcRouterDb } from '../classes.dcrouter-db.js';
+import type { ITargetProfileTarget } from '../../../ts_interfaces/data/target-profile.js';
+
+const getDb = () => DcRouterDb.getInstance().getDb();
+
+@plugins.smartdata.Collection(() => getDb())
+export class TargetProfileDoc extends plugins.smartdata.SmartDataDbDoc<TargetProfileDoc, TargetProfileDoc> {
+  @plugins.smartdata.unI()
+  @plugins.smartdata.svDb()
+  public id!: string;
+
+  @plugins.smartdata.svDb()
+  public name: string = '';
+
+  @plugins.smartdata.svDb()
+  public description?: string;
+
+  @plugins.smartdata.svDb()
+  public domains?: string[];
+
+  @plugins.smartdata.svDb()
+  public targets?: ITargetProfileTarget[];
+
+  @plugins.smartdata.svDb()
+  public routeRefs?: string[];
+
+  @plugins.smartdata.svDb()
+  public createdAt!: number;
+
+  @plugins.smartdata.svDb()
+  public updatedAt!: number;
+
+  @plugins.smartdata.svDb()
+  public createdBy!: string;
+
+  constructor() {
+    super();
+  }
+
+  public static async findById(id: string): Promise<TargetProfileDoc | null> {
+    return await TargetProfileDoc.getInstance({ id });
+  }
+
+  public static async findAll(): Promise<TargetProfileDoc[]> {
+    return await TargetProfileDoc.getInstances({});
+  }
+}
--- a/ts/db/documents/classes.vpn-client.doc.ts
+++ b/ts/db/documents/classes.vpn-client.doc.ts
@@ -13,7 +13,7 @@ export class VpnClientDoc extends plugins.smartdata.SmartDataDbDoc<VpnClientDoc,
  public enabled!: boolean;

  @plugins.smartdata.svDb()
-  public serverDefinedClientTags?: string[];
+  public targetProfileIds?: string[];

  @plugins.smartdata.svDb()
  public description?: string;
@@ -39,9 +39,6 @@ export class VpnClientDoc extends plugins.smartdata.SmartDataDbDoc<VpnClientDoc,
  @plugins.smartdata.svDb()
  public expiresAt?: string;

-  @plugins.smartdata.svDb()
-  public forceDestinationSmartproxy: boolean = true;
-
  @plugins.smartdata.svDb()
  public destinationAllowList?: string[];

@@ -67,15 +64,7 @@ export class VpnClientDoc extends plugins.smartdata.SmartDataDbDoc<VpnClientDoc,
    super();
  }

-  public static async findByClientId(clientId: string): Promise<VpnClientDoc | null> {
-    return await VpnClientDoc.getInstance({ clientId });
-  }
-
  public static async findAll(): Promise<VpnClientDoc[]> {
    return await VpnClientDoc.getInstances({});
  }
-
-  public static async findEnabled(): Promise<VpnClientDoc[]> {
-    return await VpnClientDoc.getInstances({ enabled: true });
-  }
 }
--- a/ts/db/documents/index.ts
+++ b/ts/db/documents/index.ts
@@ -6,7 +6,8 @@ export * from './classes.cached.ip.reputation.js';
 export * from './classes.stored-route.doc.js';
 export * from './classes.route-override.doc.js';
 export * from './classes.api-token.doc.js';
-export * from './classes.security-profile.doc.js';
+export * from './classes.source-profile.doc.js';
+export * from './classes.target-profile.doc.js';
 export * from './classes.network-target.doc.js';

 // VPN document classes
--- a/ts/monitoring/classes.metricsmanager.ts
+++ b/ts/monitoring/classes.metricsmanager.ts
@@ -591,6 +591,10 @@ export class MetricsManager {
      const requestsPerSecond = proxyMetrics.requests.perSecond();
      const requestsTotal = proxyMetrics.requests.total();

+      // Get frontend/backend protocol distribution
+      const frontendProtocols = proxyMetrics.connections.frontendProtocols() ?? null;
+      const backendProtocols = proxyMetrics.connections.backendProtocols() ?? null;
+
      // Collect backend protocol data
      const backendMetrics = proxyMetrics.backends.byBackend();
      const protocolCache = proxyMetrics.backends.detectedProtocols();
@@ -705,6 +709,8 @@ export class MetricsManager {
        requestsPerSecond,
        requestsTotal,
        backends,
+        frontendProtocols,
+        backendProtocols,
      };
    }, 1000); // 1s cache — matches typical dashboard poll interval
  }
--- a/ts/opsserver/classes.opsserver.ts
+++ b/ts/opsserver/classes.opsserver.ts
@@ -29,7 +29,8 @@ export class OpsServer {
  private routeManagementHandler!: handlers.RouteManagementHandler;
  private apiTokenHandler!: handlers.ApiTokenHandler;
  private vpnHandler!: handlers.VpnHandler;
-  private securityProfileHandler!: handlers.SecurityProfileHandler;
+  private sourceProfileHandler!: handlers.SourceProfileHandler;
+  private targetProfileHandler!: handlers.TargetProfileHandler;
  private networkTargetHandler!: handlers.NetworkTargetHandler;

  constructor(dcRouterRefArg: DcRouter) {
@@ -90,7 +91,8 @@ export class OpsServer {
    this.routeManagementHandler = new handlers.RouteManagementHandler(this);
    this.apiTokenHandler = new handlers.ApiTokenHandler(this);
    this.vpnHandler = new handlers.VpnHandler(this);
-    this.securityProfileHandler = new handlers.SecurityProfileHandler(this);
+    this.sourceProfileHandler = new handlers.SourceProfileHandler(this);
+    this.targetProfileHandler = new handlers.TargetProfileHandler(this);
    this.networkTargetHandler = new handlers.NetworkTargetHandler(this);

    console.log('✅ OpsServer TypedRequest handlers initialized');
--- a/ts/opsserver/handlers/certificate.handler.ts
+++ b/ts/opsserver/handlers/certificate.handler.ts
@@ -2,6 +2,28 @@ import * as plugins from '../../plugins.js';
 import type { OpsServer } from '../classes.opsserver.js';
 import * as interfaces from '../../../ts_interfaces/index.js';
 import { AcmeCertDoc, ProxyCertDoc } from '../../db/index.js';
+import { logger } from '../../logger.js';
+
+/**
+ * Mirrors `SmartacmeCertMatcher.getCertificateDomainNameByDomainName` from
+ * @push.rocks/smartacme. Inlined here because the original is `private` on
+ * SmartAcme. The cert identity ('task.vc' for both 'outline.task.vc' and
+ * '*.task.vc') is what AcmeCertDoc is keyed by, so two route domains with
+ * the same identity share the same underlying ACME cert.
+ *
+ * Returns undefined for domains with 4+ levels (matching smartacme's
+ * "deeper domains not supported" behavior) and for malformed inputs.
+ *
+ * Exported for unit testing.
+ */
+export function deriveCertDomainName(domain: string): string | undefined {
+  if (domain.startsWith('*.')) {
+    return domain.slice(2);
+  }
+  const parts = domain.split('.');
+  if (parts.length < 2 || parts.length > 3) return undefined;
+  return parts.slice(-2).join('.');
+}

 export class CertificateHandler {
  constructor(private opsServerRef: OpsServer) {
@@ -43,7 +65,7 @@ export class CertificateHandler {
      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_ReprovisionCertificateDomain>(
        'reprovisionCertificateDomain',
        async (dataArg) => {
-          return this.reprovisionCertificateDomain(dataArg.domain);
+          return this.reprovisionCertificateDomain(dataArg.domain, dataArg.forceRenew);
        }
      )
    );
@@ -191,7 +213,11 @@ export class CertificateHandler {
      // Check persisted cert data from smartdata document classes
      if (status === 'unknown') {
        const cleanDomain = domain.replace(/^\*\.?/, '');
-        const acmeDoc = await AcmeCertDoc.findByDomain(cleanDomain);
+        // SmartAcme stores certs under the base domain (e.g. example.com for api.example.com)
+        const parts = cleanDomain.split('.');
+        const baseDomain = parts.length > 2 ? parts.slice(-2).join('.') : cleanDomain;
+        const acmeDoc = await AcmeCertDoc.findByDomain(baseDomain)
+          || (baseDomain !== cleanDomain ? await AcmeCertDoc.findByDomain(cleanDomain) : null);
        const proxyDoc = !acmeDoc ? await ProxyCertDoc.findByDomain(domain) : null;

        if (acmeDoc?.validUntil) {
@@ -291,7 +317,12 @@ export class CertificateHandler {
  }

  /**
-   * Legacy route-based reprovisioning
+   * Legacy route-based reprovisioning. Kept for backward compatibility with
+   * older clients that send `reprovisionCertificate` typed-requests.
+   *
+   * Like reprovisionCertificateDomain, this triggers the full route apply
+   * pipeline rather than smartProxy.provisionCertificate(routeName) — which
+   * is a no-op when certProvisionFunction is set (Rust ACME disabled).
   */
  private async reprovisionCertificateByRoute(routeName: string): Promise<{ success: boolean; message?: string }> {
    const dcRouter = this.opsServerRef.dcRouterRef;
@@ -301,13 +332,19 @@ export class CertificateHandler {
      return { success: false, message: 'SmartProxy is not running' };
    }

+    // Clear event-based status for domains in this route so the
+    // certificate-issued event can refresh them
+    for (const [domain, entry] of dcRouter.certificateStatusMap) {
+      if (entry.routeNames.includes(routeName)) {
+        dcRouter.certificateStatusMap.delete(domain);
+      }
+    }
+
    try {
-      await smartProxy.provisionCertificate(routeName);
-      // Clear event-based status for domains in this route
-      for (const [domain, entry] of dcRouter.certificateStatusMap) {
-        if (entry.routeNames.includes(routeName)) {
-          dcRouter.certificateStatusMap.delete(domain);
-        }
+      if (dcRouter.routeConfigManager) {
+        await dcRouter.routeConfigManager.applyRoutes();
+      } else {
+        await smartProxy.updateRoutes(smartProxy.routeManager.getRoutes());
      }
      return { success: true, message: `Certificate reprovisioning triggered for route '${routeName}'` };
    } catch (err: unknown) {
@@ -316,9 +353,18 @@ export class CertificateHandler {
  }

  /**
-   * Domain-based reprovisioning — clears backoff first, then triggers provision
+   * Domain-based reprovisioning — clears backoff first, refreshes the smartacme
+   * cert (when forceRenew is set), then re-applies routes so the running Rust
+   * proxy actually picks up the new cert.
+   *
+   * Why applyRoutes (not smartProxy.provisionCertificate)?
+   *   smartProxy.provisionCertificate(routeName) routes through the Rust ACME
+   *   path, which is forcibly disabled whenever certProvisionFunction is set
+   *   (smart-proxy.ts:168-171). The only path that re-invokes
+   *   certProvisionFunction → bridge.loadCertificate is updateRoutes(), which
+   *   we trigger via routeConfigManager.applyRoutes().
   */
-  private async reprovisionCertificateDomain(domain: string): Promise<{ success: boolean; message?: string }> {
+  private async reprovisionCertificateDomain(domain: string, forceRenew?: boolean): Promise<{ success: boolean; message?: string }> {
    const dcRouter = this.opsServerRef.dcRouterRef;
    const smartProxy = dcRouter.smartProxy;

@@ -331,31 +377,143 @@ export class CertificateHandler {
      await dcRouter.certProvisionScheduler.clearBackoff(domain);
    }

-    // Clear status map entry so it gets refreshed
+    // Find routes matching this domain — fail early if none exist
+    const routeNames = dcRouter.findRouteNamesForDomain(domain);
+    if (routeNames.length === 0) {
+      return { success: false, message: `No routes found for domain '${domain}'` };
+    }
+
+    // If forceRenew, order a fresh cert from ACME now so it's already in
+    // AcmeCertDoc by the time certProvisionFunction is invoked below.
+    //
+    // includeWildcard: when forcing a non-wildcard subdomain renewal, we still
+    // want the wildcard SAN in the order so the new cert keeps covering every
+    // sibling. Without this, smartacme defaults to includeWildcard: false and
+    // the re-issued cert would have only the base domain as SAN, breaking every
+    // sibling subdomain that was previously covered by the same wildcard cert.
+    if (forceRenew && dcRouter.smartAcme) {
+      let newCert: plugins.smartacme.Cert;
+      try {
+        newCert = await dcRouter.smartAcme.getCertificateForDomain(domain, {
+          forceRenew: true,
+          includeWildcard: !domain.startsWith('*.'),
+        });
+      } catch (err: unknown) {
+        return { success: false, message: `Failed to renew certificate for ${domain}: ${(err as Error).message}` };
+      }
+
+      // Propagate the freshly-issued cert PEM to every sibling route domain that
+      // shares the same cert identity. Without this, the rust hot-swap (keyed by
+      // exact domain in `loaded_certs`) only fires for the clicked route via the
+      // fire-and-forget cert provisioning path, leaving siblings serving the
+      // stale in-memory cert until the next background reload completes.
+      try {
+        await this.propagateCertToSiblings(domain, newCert);
+      } catch (err: unknown) {
+        // Best-effort: failure here doesn't undo the cert issuance, just log.
+        logger.log('warn', `Failed to propagate force-renewed cert to siblings of ${domain}: ${(err as Error).message}`);
+      }
+    }
+
+    // Clear status map entry so it gets refreshed by the certificate-issued event
    dcRouter.certificateStatusMap.delete(domain);

-    // Try to provision via SmartAcme directly
-    if (dcRouter.smartAcme) {
-      try {
-        await dcRouter.smartAcme.getCertificateForDomain(domain);
-        return { success: true, message: `Certificate reprovisioning triggered for domain '${domain}'` };
-      } catch (err: unknown) {
-        return { success: false, message: (err as Error).message || `Failed to reprovision certificate for ${domain}` };
+    // Trigger the full route apply pipeline:
+    //   applyRoutes → updateRoutes → provisionCertificatesViaCallback →
+    //   certProvisionFunction(domain) → smartAcme.getCertificateForDomain →
+    //   bridge.loadCertificate → Rust hot-swaps `loaded_certs` →
+    //   certificate-issued event → certificateStatusMap updated
+    try {
+      if (dcRouter.routeConfigManager) {
+        await dcRouter.routeConfigManager.applyRoutes();
+      } else {
+        // Fallback when DB is disabled and there is no RouteConfigManager
+        await smartProxy.updateRoutes(smartProxy.routeManager.getRoutes());
+      }
+      return { success: true, message: forceRenew ? `Certificate force-renewed for domain '${domain}'` : `Certificate reprovisioning triggered for domain '${domain}'` };
+    } catch (err: unknown) {
+      return { success: false, message: (err as Error).message || `Failed to reprovision certificate for ${domain}` };
+    }
+  }
+
+  /**
+   * After a force-renew, walk every route in the smartproxy that resolves to
+   * the same cert identity as `forcedDomain` and write the freshly-issued cert
+   * PEM into ProxyCertDoc for each. This guarantees that the next applyRoutes
+   * → provisionCertificatesViaCallback iteration will hot-swap every sibling's
+   * rust loaded_certs entry with the new (correct) PEM, rather than relying on
+   * the in-memory cert returned by smartacme's per-domain cache.
+   *
+   * Why this is necessary:
+   *   Rust's `loaded_certs` is a HashMap<domain, TlsCertConfig>. Each
+   *   bridge.loadCertificate(domain, ...) only swaps that one entry. The
+   *   fire-and-forget cert provisioning path triggered by updateRoutes does
+   *   eventually iterate every auto-cert route, but it returns the cached
+   *   (broken pre-fix) cert from smartacme's per-domain mutex. With this
+   *   helper, ProxyCertDoc is updated synchronously to the correct PEM before
+   *   applyRoutes runs, so even the transient window stays consistent.
+   */
+  private async propagateCertToSiblings(
+    forcedDomain: string,
+    newCert: plugins.smartacme.Cert,
+  ): Promise<void> {
+    const dcRouter = this.opsServerRef.dcRouterRef;
+    const smartProxy = dcRouter.smartProxy;
+    if (!smartProxy) return;
+
+    const certIdentity = deriveCertDomainName(forcedDomain);
+    if (!certIdentity) return;
+
+    // Collect every route domain whose cert identity matches.
+    const affected = new Set<string>();
+    for (const route of smartProxy.routeManager.getRoutes()) {
+      if (!route.match.domains) continue;
+      const routeDomains = Array.isArray(route.match.domains)
+        ? route.match.domains
+        : [route.match.domains];
+      for (const routeDomain of routeDomains) {
+        if (deriveCertDomainName(routeDomain) === certIdentity) {
+          affected.add(routeDomain);
+        }
      }
    }

-    // Fallback: try provisioning via the first matching route
-    const routeNames = dcRouter.findRouteNamesForDomain(domain);
-    if (routeNames.length > 0) {
+    if (affected.size === 0) return;
+
+    // Parse expiry from PEM (defense-in-depth — same pattern as
+    // ts/classes.dcrouter.ts:988-995 and the existing certStore.save callback).
+    let validUntil = newCert.validUntil;
+    let validFrom: number | undefined;
+    if (newCert.publicKey) {
      try {
-        await smartProxy.provisionCertificate(routeNames[0]);
-        return { success: true, message: `Certificate reprovisioning triggered for domain '${domain}' via route '${routeNames[0]}'` };
-      } catch (err: unknown) {
-        return { success: false, message: (err as Error).message || `Failed to reprovision certificate for ${domain}` };
-      }
+        const x509 = new plugins.crypto.X509Certificate(newCert.publicKey);
+        validUntil = new Date(x509.validTo).getTime();
+        validFrom = new Date(x509.validFrom).getTime();
+      } catch { /* fall back to smartacme's value */ }
    }

-    return { success: false, message: `No routes found for domain '${domain}'` };
+    // Persist new cert PEM under each affected route domain
+    for (const routeDomain of affected) {
+      let doc = await ProxyCertDoc.findByDomain(routeDomain);
+      if (!doc) {
+        doc = new ProxyCertDoc();
+        doc.domain = routeDomain;
+      }
+      doc.publicKey = newCert.publicKey;
+      doc.privateKey = newCert.privateKey;
+      doc.ca = '';
+      doc.validUntil = validUntil || 0;
+      doc.validFrom = validFrom || 0;
+      await doc.save();
+
+      // Clear status so the next event refresh shows the new cert
+      dcRouter.certificateStatusMap.delete(routeDomain);
+    }
+
+    logger.log(
+      'info',
+      `Propagated force-renewed cert for ${forcedDomain} (cert identity '${certIdentity}') to ${affected.size} sibling route domain(s): ${[...affected].join(', ')}`,
+    );
  }

  /**
@@ -364,9 +522,12 @@ export class CertificateHandler {
  private async deleteCertificate(domain: string): Promise<{ success: boolean; message?: string }> {
    const dcRouter = this.opsServerRef.dcRouterRef;
    const cleanDomain = domain.replace(/^\*\.?/, '');
+    const parts = cleanDomain.split('.');
+    const baseDomain = parts.length > 2 ? parts.slice(-2).join('.') : cleanDomain;

-    // Delete from smartdata document classes
-    const acmeDoc = await AcmeCertDoc.findByDomain(cleanDomain);
+    // Delete from smartdata document classes (try base domain first, then exact)
+    const acmeDoc = await AcmeCertDoc.findByDomain(baseDomain)
+      || (baseDomain !== cleanDomain ? await AcmeCertDoc.findByDomain(cleanDomain) : null);
    if (acmeDoc) {
      await acmeDoc.delete();
    }
--- a/ts/opsserver/handlers/index.ts
+++ b/ts/opsserver/handlers/index.ts
@@ -10,5 +10,6 @@ export * from './remoteingress.handler.js';
 export * from './route-management.handler.js';
 export * from './api-token.handler.js';
 export * from './vpn.handler.js';
-export * from './security-profile.handler.js';
+export * from './source-profile.handler.js';
+export * from './target-profile.handler.js';
 export * from './network-target.handler.js';
--- a/ts/opsserver/handlers/logs.handler.ts
+++ b/ts/opsserver/handlers/logs.handler.ts
@@ -255,7 +255,7 @@ export class LogsHandler {
  } {
    let intervalId: NodeJS.Timeout | null = null;
    let stopped = false;
-    let logIndex = 0;
+    let lastTimestamp = Date.now();

    const stop = () => {
      stopped = true;
@@ -284,53 +284,65 @@ export class LogsHandler {
        return;
      }

-      // For follow mode, simulate real-time log streaming
+      // For follow mode, tail real log entries from the in-memory buffer
      intervalId = setInterval(async () => {
        if (stopped) {
-          // Guard: clear interval if stop() was called between ticks
          clearInterval(intervalId!);
          intervalId = null;
          return;
        }

-        const categories: Array<'smtp' | 'dns' | 'security' | 'system' | 'email'> = ['smtp', 'dns', 'security', 'system', 'email'];
-        const levels: Array<'debug' | 'info' | 'warn' | 'error'> = ['info', 'warn', 'error', 'debug'];
+        // Fetch new entries since last poll
+        const rawEntries = logBuffer.getEntries({
+          since: lastTimestamp,
+          limit: 50,
+        });

-        const mockCategory = categories[Math.floor(Math.random() * categories.length)];
-        const mockLevel = levels[Math.floor(Math.random() * levels.length)];
+        if (rawEntries.length === 0) return;

-        // Filter by requested criteria
-        if (levelFilter && !levelFilter.includes(mockLevel)) return;
-        if (categoryFilter && !categoryFilter.includes(mockCategory)) return;
+        for (const raw of rawEntries) {
+          const mappedLevel = LogsHandler.mapLogLevel(raw.level);
+          const mappedCategory = LogsHandler.deriveCategory(
+            (raw as any).context?.zone,
+            raw.message,
+          );

-        const logEntry = {
-          timestamp: Date.now(),
-          level: mockLevel,
-          category: mockCategory,
-          message: `Real-time log ${logIndex++} from ${mockCategory}`,
-          metadata: {
-            requestId: plugins.uuid.v4(),
-          },
-        };
+          // Apply filters
+          if (levelFilter && !levelFilter.includes(mappedLevel)) continue;
+          if (categoryFilter && !categoryFilter.includes(mappedCategory)) continue;

-        const logData = JSON.stringify(logEntry);
-        const encoder = new TextEncoder();
-        try {
-          // Use a timeout to detect hung streams (sendData can hang if the
-          // VirtualStream's keepAlive loop has ended)
-          let timeoutHandle: ReturnType<typeof setTimeout>;
-          await Promise.race([
-            virtualStream.sendData(encoder.encode(logData)).then((result) => {
-              clearTimeout(timeoutHandle);
-              return result;
-            }),
-            new Promise<never>((_, reject) => {
-              timeoutHandle = setTimeout(() => reject(new Error('stream send timeout')), 10_000);
-            }),
-          ]);
-        } catch {
-          // Stream closed, errored, or timed out — clean up
-          stop();
+          const logEntry = {
+            timestamp: raw.timestamp || Date.now(),
+            level: mappedLevel,
+            category: mappedCategory,
+            message: raw.message,
+            metadata: (raw as any).data,
+          };
+
+          const logData = JSON.stringify(logEntry);
+          const encoder = new TextEncoder();
+          try {
+            let timeoutHandle: ReturnType<typeof setTimeout>;
+            await Promise.race([
+              virtualStream.sendData(encoder.encode(logData)).then((result) => {
+                clearTimeout(timeoutHandle);
+                return result;
+              }),
+              new Promise<never>((_, reject) => {
+                timeoutHandle = setTimeout(() => reject(new Error('stream send timeout')), 10_000);
+              }),
+            ]);
+          } catch {
+            // Stream closed, errored, or timed out — clean up
+            stop();
+            return;
+          }
+        }
+
+        // Advance the watermark past all entries we just processed
+        const newest = rawEntries[rawEntries.length - 1];
+        if (newest.timestamp && newest.timestamp >= lastTimestamp) {
+          lastTimestamp = newest.timestamp + 1;
        }
      }, 2000);
    };
--- a/ts/opsserver/handlers/security-profile.handler.ts
+++ b/ts/opsserver/handlers/security-profile.handler.ts
@@ -2,7 +2,7 @@ import * as plugins from '../../plugins.js';
 import type { OpsServer } from '../classes.opsserver.js';
 import * as interfaces from '../../../ts_interfaces/index.js';

-export class SecurityProfileHandler {
+export class SourceProfileHandler {
  public typedrouter = new plugins.typedrequest.TypedRouter();

  constructor(private opsServerRef: OpsServer) {
@@ -40,12 +40,12 @@ export class SecurityProfileHandler {
  }

  private registerHandlers(): void {
-    // Get all security profiles
+    // Get all source profiles
    this.typedrouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_GetSecurityProfiles>(
-        'getSecurityProfiles',
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_GetSourceProfiles>(
+        'getSourceProfiles',
        async (dataArg) => {
-          await this.requireAuth(dataArg, 'profiles:read');
+          await this.requireAuth(dataArg, 'source-profiles:read');
          const resolver = this.opsServerRef.dcRouterRef.referenceResolver;
          if (!resolver) {
            return { profiles: [] };
@@ -55,12 +55,12 @@ export class SecurityProfileHandler {
      ),
    );

-    // Get a single security profile
+    // Get a single source profile
    this.typedrouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_GetSecurityProfile>(
-        'getSecurityProfile',
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_GetSourceProfile>(
+        'getSourceProfile',
        async (dataArg) => {
-          await this.requireAuth(dataArg, 'profiles:read');
+          await this.requireAuth(dataArg, 'source-profiles:read');
          const resolver = this.opsServerRef.dcRouterRef.referenceResolver;
          if (!resolver) {
            return { profile: null };
@@ -70,12 +70,12 @@ export class SecurityProfileHandler {
      ),
    );

-    // Create a security profile
+    // Create a source profile
    this.typedrouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_CreateSecurityProfile>(
-        'createSecurityProfile',
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_CreateSourceProfile>(
+        'createSourceProfile',
        async (dataArg) => {
-          const userId = await this.requireAuth(dataArg, 'profiles:write');
+          const userId = await this.requireAuth(dataArg, 'source-profiles:write');
          const resolver = this.opsServerRef.dcRouterRef.referenceResolver;
          if (!resolver) {
            return { success: false, message: 'Reference resolver not initialized' };
@@ -92,12 +92,12 @@ export class SecurityProfileHandler {
      ),
    );

-    // Update a security profile
+    // Update a source profile
    this.typedrouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_UpdateSecurityProfile>(
-        'updateSecurityProfile',
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_UpdateSourceProfile>(
+        'updateSourceProfile',
        async (dataArg) => {
-          await this.requireAuth(dataArg, 'profiles:write');
+          await this.requireAuth(dataArg, 'source-profiles:write');
          const resolver = this.opsServerRef.dcRouterRef.referenceResolver;
          const manager = this.opsServerRef.dcRouterRef.routeConfigManager;
          if (!resolver || !manager) {
@@ -121,12 +121,12 @@ export class SecurityProfileHandler {
      ),
    );

-    // Delete a security profile
+    // Delete a source profile
    this.typedrouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_DeleteSecurityProfile>(
-        'deleteSecurityProfile',
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_DeleteSourceProfile>(
+        'deleteSourceProfile',
        async (dataArg) => {
-          await this.requireAuth(dataArg, 'profiles:write');
+          await this.requireAuth(dataArg, 'source-profiles:write');
          const resolver = this.opsServerRef.dcRouterRef.referenceResolver;
          const manager = this.opsServerRef.dcRouterRef.routeConfigManager;
          if (!resolver || !manager) {
@@ -149,12 +149,12 @@ export class SecurityProfileHandler {
      ),
    );

-    // Get routes using a security profile
+    // Get routes using a source profile
    this.typedrouter.addTypedHandler(
-      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_GetSecurityProfileUsage>(
-        'getSecurityProfileUsage',
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_GetSourceProfileUsage>(
+        'getSourceProfileUsage',
        async (dataArg) => {
-          await this.requireAuth(dataArg, 'profiles:read');
+          await this.requireAuth(dataArg, 'source-profiles:read');
          const resolver = this.opsServerRef.dcRouterRef.referenceResolver;
          const manager = this.opsServerRef.dcRouterRef.routeConfigManager;
          if (!resolver || !manager) {
--- a/ts/opsserver/handlers/stats.handler.ts
+++ b/ts/opsserver/handlers/stats.handler.ts
@@ -3,6 +3,7 @@ import type { OpsServer } from '../classes.opsserver.js';
 import * as interfaces from '../../../ts_interfaces/index.js';
 import { MetricsManager } from '../../monitoring/index.js';
 import { SecurityLogger } from '../../security/classes.securitylogger.js';
+import { commitinfo } from '../../00_commitinfo_data.js';

 export class StatsHandler {
  constructor(private opsServerRef: OpsServer) {
@@ -158,7 +159,7 @@ export class StatsHandler {
                };
                return acc;
              }, {} as any),
-              version: '2.12.0', // TODO: Get from package.json
+              version: commitinfo.version,
            },
          };
        }
@@ -310,11 +311,53 @@ export class StatsHandler {
                  requestsPerSecond: stats.requestsPerSecond || 0,
                  requestsTotal: stats.requestsTotal || 0,
                  backends: stats.backends || [],
+                  frontendProtocols: stats.frontendProtocols || null,
+                  backendProtocols: stats.backendProtocols || null,
                };
              })()
            );
          }
-          
+
+          if (sections.radius) {
+            promises.push(
+              (async () => {
+                const radiusServer = this.opsServerRef.dcRouterRef.radiusServer;
+                if (!radiusServer) return;
+                const stats = radiusServer.getStats();
+                const accountingStats = radiusServer.getAccountingManager().getStats();
+                metrics.radius = {
+                  running: stats.running,
+                  uptime: stats.uptime,
+                  authRequests: stats.authRequests,
+                  authAccepts: stats.authAccepts,
+                  authRejects: stats.authRejects,
+                  accountingRequests: stats.accountingRequests,
+                  activeSessions: stats.activeSessions,
+                  totalInputBytes: accountingStats.totalInputBytes,
+                  totalOutputBytes: accountingStats.totalOutputBytes,
+                };
+              })()
+            );
+          }
+
+          if (sections.vpn) {
+            promises.push(
+              (async () => {
+                const vpnManager = this.opsServerRef.dcRouterRef.vpnManager;
+                const vpnConfig = this.opsServerRef.dcRouterRef.options.vpnConfig;
+                if (!vpnManager) return;
+                const connected = await vpnManager.getConnectedClients();
+                metrics.vpn = {
+                  running: vpnManager.running,
+                  subnet: vpnManager.getSubnet(),
+                  registeredClients: vpnManager.listClients().length,
+                  connectedClients: connected.length,
+                  wgListenPort: vpnConfig?.wgListenPort ?? 51820,
+                };
+              })()
+            );
+          }
+
          await Promise.all(promises);
          
          return {
--- a/ts/opsserver/handlers/target-profile.handler.ts
+++ b/ts/opsserver/handlers/target-profile.handler.ts
@@ -0,0 +1,157 @@
+import * as plugins from '../../plugins.js';
+import type { OpsServer } from '../classes.opsserver.js';
+import * as interfaces from '../../../ts_interfaces/index.js';
+
+export class TargetProfileHandler {
+  public typedrouter = new plugins.typedrequest.TypedRouter();
+
+  constructor(private opsServerRef: OpsServer) {
+    this.opsServerRef.typedrouter.addTypedRouter(this.typedrouter);
+    this.registerHandlers();
+  }
+
+  private async requireAuth(
+    request: { identity?: interfaces.data.IIdentity; apiToken?: string },
+    requiredScope?: interfaces.data.TApiTokenScope,
+  ): Promise<string> {
+    if (request.identity?.jwt) {
+      try {
+        const isAdmin = await this.opsServerRef.adminHandler.adminIdentityGuard.exec({
+          identity: request.identity,
+        });
+        if (isAdmin) return request.identity.userId;
+      } catch { /* fall through */ }
+    }
+
+    if (request.apiToken) {
+      const tokenManager = this.opsServerRef.dcRouterRef.apiTokenManager;
+      if (tokenManager) {
+        const token = await tokenManager.validateToken(request.apiToken);
+        if (token) {
+          if (!requiredScope || tokenManager.hasScope(token, requiredScope)) {
+            return token.createdBy;
+          }
+          throw new plugins.typedrequest.TypedResponseError('insufficient scope');
+        }
+      }
+    }
+
+    throw new plugins.typedrequest.TypedResponseError('unauthorized');
+  }
+
+  private registerHandlers(): void {
+    // Get all target profiles
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_GetTargetProfiles>(
+        'getTargetProfiles',
+        async (dataArg) => {
+          await this.requireAuth(dataArg, 'target-profiles:read');
+          const manager = this.opsServerRef.dcRouterRef.targetProfileManager;
+          if (!manager) {
+            return { profiles: [] };
+          }
+          return { profiles: manager.listProfiles() };
+        },
+      ),
+    );
+
+    // Get a single target profile
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_GetTargetProfile>(
+        'getTargetProfile',
+        async (dataArg) => {
+          await this.requireAuth(dataArg, 'target-profiles:read');
+          const manager = this.opsServerRef.dcRouterRef.targetProfileManager;
+          if (!manager) {
+            return { profile: null };
+          }
+          return { profile: manager.getProfile(dataArg.id) || null };
+        },
+      ),
+    );
+
+    // Create a target profile
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_CreateTargetProfile>(
+        'createTargetProfile',
+        async (dataArg) => {
+          const userId = await this.requireAuth(dataArg, 'target-profiles:write');
+          const manager = this.opsServerRef.dcRouterRef.targetProfileManager;
+          if (!manager) {
+            return { success: false, message: 'Target profile manager not initialized' };
+          }
+          const id = await manager.createProfile({
+            name: dataArg.name,
+            description: dataArg.description,
+            domains: dataArg.domains,
+            targets: dataArg.targets,
+            routeRefs: dataArg.routeRefs,
+            createdBy: userId,
+          });
+          return { success: true, id };
+        },
+      ),
+    );
+
+    // Update a target profile
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_UpdateTargetProfile>(
+        'updateTargetProfile',
+        async (dataArg) => {
+          await this.requireAuth(dataArg, 'target-profiles:write');
+          const manager = this.opsServerRef.dcRouterRef.targetProfileManager;
+          if (!manager) {
+            return { success: false, message: 'Not initialized' };
+          }
+          await manager.updateProfile(dataArg.id, {
+            name: dataArg.name,
+            description: dataArg.description,
+            domains: dataArg.domains,
+            targets: dataArg.targets,
+            routeRefs: dataArg.routeRefs,
+          });
+          // Re-apply routes and refresh VPN client security to update access
+          await this.opsServerRef.dcRouterRef.routeConfigManager?.applyRoutes();
+          await this.opsServerRef.dcRouterRef.vpnManager?.refreshAllClientSecurity();
+          return { success: true };
+        },
+      ),
+    );
+
+    // Delete a target profile
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_DeleteTargetProfile>(
+        'deleteTargetProfile',
+        async (dataArg) => {
+          await this.requireAuth(dataArg, 'target-profiles:write');
+          const manager = this.opsServerRef.dcRouterRef.targetProfileManager;
+          if (!manager) {
+            return { success: false, message: 'Not initialized' };
+          }
+          const result = await manager.deleteProfile(dataArg.id, dataArg.force);
+          if (result.success) {
+            // Re-apply routes and refresh VPN client security to update access
+            await this.opsServerRef.dcRouterRef.routeConfigManager?.applyRoutes();
+            await this.opsServerRef.dcRouterRef.vpnManager?.refreshAllClientSecurity();
+          }
+          return result;
+        },
+      ),
+    );
+
+    // Get VPN clients using a target profile
+    this.typedrouter.addTypedHandler(
+      new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_GetTargetProfileUsage>(
+        'getTargetProfileUsage',
+        async (dataArg) => {
+          await this.requireAuth(dataArg, 'target-profiles:read');
+          const manager = this.opsServerRef.dcRouterRef.targetProfileManager;
+          if (!manager) {
+            return { clients: [] };
+          }
+          return { clients: await manager.getProfileUsage(dataArg.id) };
+        },
+      ),
+    );
+  }
+}
--- a/ts/opsserver/handlers/vpn.handler.ts
+++ b/ts/opsserver/handlers/vpn.handler.ts
@@ -25,13 +25,12 @@ export class VpnHandler {
          const clients = manager.listClients().map((c) => ({
            clientId: c.clientId,
            enabled: c.enabled,
-            serverDefinedClientTags: c.serverDefinedClientTags,
+            targetProfileIds: c.targetProfileIds,
            description: c.description,
            assignedIp: c.assignedIp,
            createdAt: c.createdAt,
            updatedAt: c.updatedAt,
            expiresAt: c.expiresAt,
-            forceDestinationSmartproxy: c.forceDestinationSmartproxy ?? true,
            destinationAllowList: c.destinationAllowList,
            destinationBlockList: c.destinationBlockList,
            useHostIp: c.useHostIp,
@@ -120,9 +119,8 @@ export class VpnHandler {
          try {
            const bundle = await manager.createClient({
              clientId: dataArg.clientId,
-              serverDefinedClientTags: dataArg.serverDefinedClientTags,
+              targetProfileIds: dataArg.targetProfileIds,
              description: dataArg.description,
-              forceDestinationSmartproxy: dataArg.forceDestinationSmartproxy,
              destinationAllowList: dataArg.destinationAllowList,
              destinationBlockList: dataArg.destinationBlockList,
              useHostIp: dataArg.useHostIp,
@@ -142,13 +140,12 @@ export class VpnHandler {
              client: {
                clientId: bundle.entry.clientId,
                enabled: bundle.entry.enabled ?? true,
-                serverDefinedClientTags: bundle.entry.serverDefinedClientTags,
+                targetProfileIds: persistedClient?.targetProfileIds,
                description: bundle.entry.description,
                assignedIp: bundle.entry.assignedIp,
                createdAt: Date.now(),
                updatedAt: Date.now(),
                expiresAt: bundle.entry.expiresAt,
-                forceDestinationSmartproxy: persistedClient?.forceDestinationSmartproxy ?? true,
                destinationAllowList: persistedClient?.destinationAllowList,
                destinationBlockList: persistedClient?.destinationBlockList,
                useHostIp: persistedClient?.useHostIp,
@@ -179,8 +176,7 @@ export class VpnHandler {
          try {
            await manager.updateClient(dataArg.clientId, {
              description: dataArg.description,
-              serverDefinedClientTags: dataArg.serverDefinedClientTags,
-              forceDestinationSmartproxy: dataArg.forceDestinationSmartproxy,
+              targetProfileIds: dataArg.targetProfileIds,
              destinationAllowList: dataArg.destinationAllowList,
              destinationBlockList: dataArg.destinationBlockList,
              useHostIp: dataArg.useHostIp,
--- a/ts/tspublish.json
+++ b/ts/tspublish.json
@@ -1,3 +1,3 @@
 {
-  "order": 2
+  "order": 3
 }
--- a/ts/vpn/classes.vpn-manager.ts
+++ b/ts/vpn/classes.vpn-manager.ts
@@ -14,7 +14,7 @@ export interface IVpnManagerConfig {
  /** Pre-defined VPN clients created on startup (idempotent — skips already-persisted clients) */
  initialClients?: Array<{
    clientId: string;
-    serverDefinedClientTags?: string[];
+    targetProfileIds?: string[];
    description?: string;
  }>;
  /** Called when clients are created/deleted/toggled — triggers route re-application */
@@ -26,10 +26,13 @@ export interface IVpnManagerConfig {
    allowList?: string[];
    blockList?: string[];
  };
-  /** Compute per-client AllowedIPs based on the client's server-defined tags.
+  /** Compute per-client AllowedIPs based on the client's target profile IDs.
   *  Called at config generation time (create/export). Returns CIDRs for WireGuard AllowedIPs.
   *  When not set, defaults to [subnet]. */
-  getClientAllowedIPs?: (clientTags: string[]) => Promise<string[]>;
+  getClientAllowedIPs?: (targetProfileIds: string[]) => Promise<string[]>;
+  /** Resolve per-client destination allow-list IPs from target profile IDs.
+   *  Returns IP strings that should bypass forceTarget and go direct to the real destination. */
+  getClientDirectTargets?: (targetProfileIds: string[]) => string[];
  /** Forwarding mode: 'socket' (default, userspace NAT), 'bridge' (L2 bridge to host LAN),
   *  or 'hybrid' (socket default, bridge for clients with useHostIp=true) */
  forwardingMode?: 'socket' | 'bridge' | 'hybrid';
@@ -90,7 +93,6 @@ export class VpnManager {
        publicKey: client.noisePublicKey,
        wgPublicKey: client.wgPublicKey,
        enabled: client.enabled,
-        serverDefinedClientTags: client.serverDefinedClientTags,
        description: client.description,
        assignedIp: client.assignedIp,
        expiresAt: client.expiresAt,
@@ -163,7 +165,7 @@ export class VpnManager {
        if (!this.clients.has(initial.clientId)) {
          const bundle = await this.createClient({
            clientId: initial.clientId,
-            serverDefinedClientTags: initial.serverDefinedClientTags,
+            targetProfileIds: initial.targetProfileIds,
            description: initial.description,
          });
          logger.log('info', `VPN: Created initial client '${initial.clientId}' (IP: ${bundle.entry.assignedIp})`);
@@ -197,9 +199,8 @@ export class VpnManager {
   */
  public async createClient(opts: {
    clientId: string;
-    serverDefinedClientTags?: string[];
+    targetProfileIds?: string[];
    description?: string;
-    forceDestinationSmartproxy?: boolean;
    destinationAllowList?: string[];
    destinationBlockList?: string[];
    useHostIp?: boolean;
@@ -214,13 +215,12 @@ export class VpnManager {

    const bundle = await this.vpnServer.createClient({
      clientId: opts.clientId,
-      serverDefinedClientTags: opts.serverDefinedClientTags,
      description: opts.description,
    });

-    // Override AllowedIPs with per-client values based on tag-matched routes
+    // Override AllowedIPs with per-client values based on target profiles
    if (this.config.getClientAllowedIPs && bundle.wireguardConfig) {
-      const allowedIPs = await this.config.getClientAllowedIPs(opts.serverDefinedClientTags || []);
+      const allowedIPs = await this.config.getClientAllowedIPs(opts.targetProfileIds || []);
      bundle.wireguardConfig = bundle.wireguardConfig.replace(
        /AllowedIPs\s*=\s*.+/,
        `AllowedIPs = ${allowedIPs.join(', ')}`,
@@ -231,7 +231,7 @@ export class VpnManager {
    const doc = new VpnClientDoc();
    doc.clientId = bundle.entry.clientId;
    doc.enabled = bundle.entry.enabled ?? true;
-    doc.serverDefinedClientTags = bundle.entry.serverDefinedClientTags;
+    doc.targetProfileIds = opts.targetProfileIds;
    doc.description = bundle.entry.description;
    doc.assignedIp = bundle.entry.assignedIp;
    doc.noisePublicKey = bundle.entry.publicKey;
@@ -241,9 +241,6 @@ export class VpnManager {
    doc.createdAt = Date.now();
    doc.updatedAt = Date.now();
    doc.expiresAt = bundle.entry.expiresAt;
-    if (opts.forceDestinationSmartproxy !== undefined) {
-      doc.forceDestinationSmartproxy = opts.forceDestinationSmartproxy;
-    }
    if (opts.destinationAllowList !== undefined) {
      doc.destinationAllowList = opts.destinationAllowList;
    }
@@ -266,7 +263,18 @@ export class VpnManager {
      doc.vlanId = opts.vlanId;
    }
    this.clients.set(doc.clientId, doc);
-    await this.persistClient(doc);
+    try {
+      await this.persistClient(doc);
+    } catch (err) {
+      // Rollback: remove from in-memory map and daemon to stay consistent with DB
+      this.clients.delete(doc.clientId);
+      try {
+        await this.vpnServer!.removeClient(doc.clientId);
+      } catch {
+        // best-effort daemon cleanup
+      }
+      throw err;
+    }

    // Sync per-client security to the running daemon
    const security = this.buildClientSecurity(doc);
@@ -332,12 +340,11 @@ export class VpnManager {
  }

  /**
-   * Update a client's metadata (description, tags) without rotating keys.
+   * Update a client's metadata (description, target profiles) without rotating keys.
   */
  public async updateClient(clientId: string, update: {
    description?: string;
-    serverDefinedClientTags?: string[];
-    forceDestinationSmartproxy?: boolean;
+    targetProfileIds?: string[];
    destinationAllowList?: string[];
    destinationBlockList?: string[];
    useHostIp?: boolean;
@@ -349,8 +356,7 @@ export class VpnManager {
    const client = this.clients.get(clientId);
    if (!client) throw new Error(`Client not found: ${clientId}`);
    if (update.description !== undefined) client.description = update.description;
-    if (update.serverDefinedClientTags !== undefined) client.serverDefinedClientTags = update.serverDefinedClientTags;
-    if (update.forceDestinationSmartproxy !== undefined) client.forceDestinationSmartproxy = update.forceDestinationSmartproxy;
+    if (update.targetProfileIds !== undefined) client.targetProfileIds = update.targetProfileIds;
    if (update.destinationAllowList !== undefined) client.destinationAllowList = update.destinationAllowList;
    if (update.destinationBlockList !== undefined) client.destinationBlockList = update.destinationBlockList;
    if (update.useHostIp !== undefined) client.useHostIp = update.useHostIp;
@@ -409,10 +415,10 @@ export class VpnManager {
        );
      }

-      // Override AllowedIPs with per-client values based on tag-matched routes
+      // Override AllowedIPs with per-client values based on target profiles
      if (this.config.getClientAllowedIPs) {
-        const clientTags = persisted?.serverDefinedClientTags || [];
-        const allowedIPs = await this.config.getClientAllowedIPs(clientTags);
+        const profileIds = persisted?.targetProfileIds || [];
+        const allowedIPs = await this.config.getClientAllowedIPs(profileIds);
        config = config.replace(
          /AllowedIPs\s*=\s*.+/,
          `AllowedIPs = ${allowedIPs.join(', ')}`,
@@ -423,22 +429,6 @@ export class VpnManager {
    return config;
  }

-  // ── Tag-based access control ───────────────────────────────────────────
-
-  /**
-   * Get assigned IPs for all enabled clients matching any of the given server-defined tags.
-   */
-  public getClientIpsForServerDefinedTags(tags: string[]): string[] {
-    const ips: string[] = [];
-    for (const client of this.clients.values()) {
-      if (!client.enabled || !client.assignedIp) continue;
-      if (client.serverDefinedClientTags?.some(t => tags.includes(t))) {
-        ips.push(client.assignedIp);
-      }
-    }
-    return ips;
-  }
-
  // ── Status and telemetry ───────────────────────────────────────────────

  /**
@@ -488,33 +478,45 @@ export class VpnManager {

  /**
   * Build per-client security settings for the smartvpn daemon.
-   * Maps dcrouter-level fields (forceDestinationSmartproxy, allow/block lists)
-   * to smartvpn's IClientSecurity with a destinationPolicy.
+   * All VPN traffic is forced through SmartProxy (forceTarget to 127.0.0.1).
+   * TargetProfile direct IP:port targets bypass SmartProxy via allowList.
   */
  private buildClientSecurity(client: VpnClientDoc): plugins.smartvpn.IClientSecurity {
    const security: plugins.smartvpn.IClientSecurity = {};
-    const forceSmartproxy = client.forceDestinationSmartproxy ?? true;

-    if (!forceSmartproxy) {
-      // Client traffic goes directly — not forced to SmartProxy
-      security.destinationPolicy = {
-        default: 'allow' as const,
-        blockList: client.destinationBlockList,
-      };
-    } else if (client.destinationAllowList?.length || client.destinationBlockList?.length) {
-      // Client is forced to SmartProxy, but with per-client allow/block overrides
-      security.destinationPolicy = {
-        default: 'forceTarget' as const,
-        target: '127.0.0.1',
-        allowList: client.destinationAllowList,
-        blockList: client.destinationBlockList,
-      };
-    }
-    // else: no per-client policy, server-wide applies
+    // Collect direct targets from assigned TargetProfiles (bypass forceTarget for these IPs)
+    const profileDirectTargets = this.config.getClientDirectTargets?.(client.targetProfileIds || []) || [];
+
+    // Merge with per-client explicit allow list
+    const mergedAllowList = [
+      ...(client.destinationAllowList || []),
+      ...profileDirectTargets,
+    ];
+
+    security.destinationPolicy = {
+      default: 'forceTarget' as const,
+      target: '127.0.0.1',
+      allowList: mergedAllowList.length ? mergedAllowList : undefined,
+      blockList: client.destinationBlockList,
+    };

    return security;
  }

+  /**
+   * Refresh all client security policies against the running daemon.
+   * Call this when TargetProfiles change so destination allow-lists stay in sync.
+   */
+  public async refreshAllClientSecurity(): Promise<void> {
+    if (!this.vpnServer) return;
+    for (const client of this.clients.values()) {
+      const security = this.buildClientSecurity(client);
+      if (security.destinationPolicy) {
+        await this.vpnServer.updateClient(client.clientId, { security });
+      }
+    }
+  }
+
  // ── Private helpers ────────────────────────────────────────────────────

  private async loadOrGenerateServerKeys(): Promise<VpnServerKeysDoc> {
@@ -548,12 +550,6 @@ export class VpnManager {
  private async loadPersistedClients(): Promise<void> {
    const docs = await VpnClientDoc.findAll();
    for (const doc of docs) {
-      // Migrate legacy `tags` → `serverDefinedClientTags`
-      if (!doc.serverDefinedClientTags && (doc as any).tags) {
-        doc.serverDefinedClientTags = (doc as any).tags;
-        (doc as any).tags = undefined;
-        await doc.save();
-      }
      this.clients.set(doc.clientId, doc);
    }
    if (this.clients.size > 0) {
--- a/ts_apiclient/tspublish.json
+++ b/ts_apiclient/tspublish.json
@@ -1,3 +1,3 @@
 {
-  "order": 4
+  "order": 5
 }
--- a/ts_interfaces/data/index.ts
+++ b/ts_interfaces/data/index.ts
@@ -2,4 +2,5 @@ export * from './auth.js';
 export * from './stats.js';
 export * from './remoteingress.js';
 export * from './route-management.js';
+export * from './target-profile.js';
 export * from './vpn.js';
--- a/ts_interfaces/data/remoteingress.ts
+++ b/ts_interfaces/data/remoteingress.ts
@@ -51,26 +51,14 @@ export interface IRouteRemoteIngress {
  edgeFilter?: string[];
 }

-/**
- * Route-level VPN access configuration.
- * When attached to a route, controls VPN client access.
- */
-export interface IRouteVpn {
-  /** Enable VPN client access for this route */
-  enabled: boolean;
-  /** When true (default), ONLY VPN clients can access this route (replaces ipAllowList).
-   *  When false, VPN client IPs are added alongside the existing allowlist. */
-  mandatory?: boolean;
-  /** Only allow VPN clients with these server-defined tags. Omitted = all VPN clients. */
-  allowedServerDefinedClientTags?: string[];
-}
-
 /**
 * Extended route config used within dcrouter.
- * Adds optional `remoteIngress` and `vpn` properties to SmartProxy's IRouteConfig.
+ * Adds optional `remoteIngress` and `vpnOnly` properties to SmartProxy's IRouteConfig.
 * SmartProxy ignores unknown properties at runtime.
 */
 export type IDcRouterRouteConfig = IRouteConfig & {
  remoteIngress?: IRouteRemoteIngress;
-  vpn?: IRouteVpn;
+  /** When true, only VPN clients whose TargetProfile matches this route get access.
+   *  Matching is determined by domain overlap, target overlap, or direct routeRef. */
+  vpnOnly?: boolean;
 };
--- a/ts_interfaces/data/route-management.ts
+++ b/ts_interfaces/data/route-management.ts
@@ -1,4 +1,5 @@
 import type { IRouteConfig } from '@push.rocks/smartproxy';
+import type { IDcRouterRouteConfig } from './remoteingress.js';

 // Derive IRouteSecurity from IRouteConfig since it's not directly exported
 export type IRouteSecurity = NonNullable<IRouteConfig['security']>;
@@ -11,18 +12,22 @@ export type TApiTokenScope =
  | 'routes:read' | 'routes:write'
  | 'config:read'
  | 'tokens:read' | 'tokens:manage'
-  | 'profiles:read' | 'profiles:write'
+  | 'source-profiles:read' | 'source-profiles:write'
+  | 'target-profiles:read' | 'target-profiles:write'
  | 'targets:read' | 'targets:write';

 // ============================================================================
-// Security Profile Types
+// Source Profile Types (source-side: who can access)
 // ============================================================================

 /**
- * A reusable, named security profile that can be referenced by routes.
+ * A reusable, named source profile that can be referenced by routes.
 * Stores the full IRouteSecurity shape from SmartProxy.
+ *
+ * SourceProfile = source-side (who can access: ipAllowList, rateLimit, auth)
+ * TargetProfile = target-side (what can be accessed: domains, IP:port targets, route refs)
 */
-export interface ISecurityProfile {
+export interface ISourceProfile {
  id: string;
  name: string;
  description?: string;
@@ -61,12 +66,12 @@ export interface INetworkTarget {
 * Metadata on a stored route tracking where its resolved values came from.
 */
 export interface IRouteMetadata {
-  /** ID of the SecurityProfileDoc used to resolve this route's security. */
-  securityProfileRef?: string;
+  /** ID of the SourceProfileDoc used to resolve this route's security. */
+  sourceProfileRef?: string;
  /** ID of the NetworkTargetDoc used to resolve this route's targets. */
  networkTargetRef?: string;
  /** Snapshot of the profile name at resolution time, for display. */
-  securityProfileName?: string;
+  sourceProfileName?: string;
  /** Snapshot of the target name at resolution time, for display. */
  networkTargetName?: string;
  /** Timestamp of last reference resolution. */
@@ -77,7 +82,7 @@ export interface IRouteMetadata {
 * A merged route combining hardcoded and programmatic sources.
 */
 export interface IMergedRoute {
-  route: IRouteConfig;
+  route: IDcRouterRouteConfig;
  source: 'hardcoded' | 'programmatic';
  enabled: boolean;
  overridden: boolean;
@@ -118,7 +123,7 @@ export interface IApiTokenInfo {
 */
 export interface IStoredRoute {
  id: string;
-  route: IRouteConfig;
+  route: IDcRouterRouteConfig;
  enabled: boolean;
  createdAt: number;
  updatedAt: number;
--- a/ts_interfaces/data/stats.ts
+++ b/ts_interfaces/data/stats.ts
@@ -166,6 +166,21 @@ export interface INetworkMetrics {
  requestsPerSecond?: number;
  requestsTotal?: number;
  backends?: IBackendInfo[];
+  frontendProtocols?: IProtocolDistribution | null;
+  backendProtocols?: IProtocolDistribution | null;
+}
+
+export interface IProtocolDistribution {
+  h1Active: number;
+  h1Total: number;
+  h2Active: number;
+  h2Total: number;
+  h3Active: number;
+  h3Total: number;
+  wsActive: number;
+  wsTotal: number;
+  otherActive: number;
+  otherTotal: number;
 }

 export interface IConnectionDetails {
@@ -197,4 +212,24 @@ export interface IBackendInfo {
  h3ConsecutiveFailures: number | null;
  h3Port: number | null;
  cacheAgeSecs: number | null;
+}
+
+export interface IRadiusStats {
+  running: boolean;
+  uptime: number;
+  authRequests: number;
+  authAccepts: number;
+  authRejects: number;
+  accountingRequests: number;
+  activeSessions: number;
+  totalInputBytes: number;
+  totalOutputBytes: number;
+}
+
+export interface IVpnStats {
+  running: boolean;
+  subnet: string;
+  registeredClients: number;
+  connectedClients: number;
+  wgListenPort: number;
 }
--- a/ts_interfaces/data/target-profile.ts
+++ b/ts_interfaces/data/target-profile.ts
@@ -0,0 +1,29 @@
+/**
+ * A specific IP:port target within a TargetProfile.
+ */
+export interface ITargetProfileTarget {
+  ip: string;
+  port: number;
+}
+
+/**
+ * A reusable, named target profile that defines what resources a VPN client can reach.
+ * Assigned to VPN clients via targetProfileIds.
+ *
+ * SourceProfile = source-side (who can access: ipAllowList, rateLimit, auth)
+ * TargetProfile = target-side (what can be accessed: domains, IP:port targets, route refs)
+ */
+export interface ITargetProfile {
+  id: string;
+  name: string;
+  description?: string;
+  /** Domain patterns this profile grants access to (supports wildcards: '*.example.com') */
+  domains?: string[];
+  /** Specific IP:port targets this profile grants access to */
+  targets?: ITargetProfileTarget[];
+  /** Route references by stored route ID or route name */
+  routeRefs?: string[];
+  createdAt: number;
+  updatedAt: number;
+  createdBy: string;
+}
--- a/ts_interfaces/data/vpn.ts
+++ b/ts_interfaces/data/vpn.ts
@@ -4,13 +4,13 @@
 export interface IVpnClient {
  clientId: string;
  enabled: boolean;
-  serverDefinedClientTags?: string[];
+  /** IDs of TargetProfiles assigned to this client */
+  targetProfileIds?: string[];
  description?: string;
  assignedIp?: string;
  createdAt: number;
  updatedAt: number;
  expiresAt?: string;
-  forceDestinationSmartproxy: boolean;
  destinationAllowList?: string[];
  destinationBlockList?: string[];
  useHostIp?: boolean;
--- a/ts_interfaces/readme.md
+++ b/ts_interfaces/readme.md
@@ -80,6 +80,8 @@ interface IIdentity {
 | `IQueueStatus` | Queue name, size, processing/failed/retrying counts |
 | `IHealthStatus` | Healthy flag, uptime, per-service status map |
 | `INetworkMetrics` | Bandwidth, connection counts, top endpoints |
+| `IRadiusStats` | Running, uptime, auth requests/accepts/rejects, sessions, data transfer |
+| `IVpnStats` | Running, subnet, registered/connected clients, WireGuard port |
 | `ILogEntry` | Timestamp, level, category, message, metadata |

 #### Route Management Interfaces
@@ -135,7 +137,8 @@ TypedRequest interfaces for the OpsServer API, organized by domain:
 | `IReq_GetActiveConnections` | `getActiveConnections` | Active connection list |
 | `IReq_GetQueueStatus` | `getQueueStatus` | Email queue status |
 | `IReq_GetHealthStatus` | `getHealthStatus` | System health check |
-| `IReq_GetCombinedMetrics` | `getCombinedMetrics` | All metrics in one request |
+| `IReq_GetNetworkStats` | `getNetworkStats` | Network throughput and connection analytics |
+| `IReq_GetCombinedMetrics` | `getCombinedMetrics` | All metrics in one request (server, email, DNS, security, network, RADIUS, VPN) |

 #### ⚙️ Configuration
 | Interface | Method | Description |
--- a/ts_interfaces/requests/certificate.ts
+++ b/ts_interfaces/requests/certificate.ts
@@ -68,6 +68,7 @@ export interface IReq_ReprovisionCertificateDomain extends plugins.typedrequestI
  request: {
    identity: authInterfaces.IIdentity;
    domain: string;
+    forceRenew?: boolean;
  };
  response: {
    success: boolean;
--- a/ts_interfaces/requests/combined.stats.ts
+++ b/ts_interfaces/requests/combined.stats.ts
@@ -10,6 +10,8 @@ export interface IReq_GetCombinedMetrics {
      dns?: boolean;
      security?: boolean;
      network?: boolean;
+      radius?: boolean;
+      vpn?: boolean;
    };
  };
  response: {
@@ -19,6 +21,8 @@ export interface IReq_GetCombinedMetrics {
      dns?: data.IDnsStats;
      security?: data.ISecurityMetrics;
      network?: data.INetworkMetrics;
+      radius?: data.IRadiusStats;
+      vpn?: data.IVpnStats;
    };
    timestamp: number;
  };
--- a/ts_interfaces/requests/index.ts
+++ b/ts_interfaces/requests/index.ts
@@ -10,5 +10,6 @@ export * from './remoteingress.js';
 export * from './route-management.js';
 export * from './api-tokens.js';
 export * from './vpn.js';
-export * from './security-profiles.js';
+export * from './source-profiles.js';
+export * from './target-profiles.js';
 export * from './network-targets.js';
--- a/ts_interfaces/requests/route-management.ts
+++ b/ts_interfaces/requests/route-management.ts
@@ -2,6 +2,7 @@ import * as plugins from '../plugins.js';
 import type * as authInterfaces from '../data/auth.js';
 import type { IMergedRoute, IRouteWarning, IRouteMetadata } from '../data/route-management.js';
 import type { IRouteConfig } from '@push.rocks/smartproxy';
+import type { IDcRouterRouteConfig } from '../data/remoteingress.js';

 // ============================================================================
 // Route Management Endpoints
@@ -36,7 +37,7 @@ export interface IReq_CreateRoute extends plugins.typedrequestInterfaces.impleme
  request: {
    identity?: authInterfaces.IIdentity;
    apiToken?: string;
-    route: IRouteConfig;
+    route: IDcRouterRouteConfig;
    enabled?: boolean;
    metadata?: IRouteMetadata;
  };
@@ -59,7 +60,7 @@ export interface IReq_UpdateRoute extends plugins.typedrequestInterfaces.impleme
    identity?: authInterfaces.IIdentity;
    apiToken?: string;
    id: string;
-    route?: Partial<IRouteConfig>;
+    route?: Partial<IDcRouterRouteConfig>;
    enabled?: boolean;
    metadata?: Partial<IRouteMetadata>;
  };
--- a/ts_interfaces/requests/security-profiles.ts
+++ b/ts_interfaces/requests/security-profiles.ts
@@ -1,54 +1,54 @@
 import * as plugins from '../plugins.js';
 import type * as authInterfaces from '../data/auth.js';
-import type { ISecurityProfile, IRouteSecurity } from '../data/route-management.js';
+import type { ISourceProfile, IRouteSecurity } from '../data/route-management.js';

 // ============================================================================
-// Security Profile Endpoints
+// Source Profile Endpoints (source-side: who can access)
 // ============================================================================

 /**
- * Get all security profiles.
+ * Get all source profiles.
 */
-export interface IReq_GetSecurityProfiles extends plugins.typedrequestInterfaces.implementsTR<
+export interface IReq_GetSourceProfiles extends plugins.typedrequestInterfaces.implementsTR<
  plugins.typedrequestInterfaces.ITypedRequest,
-  IReq_GetSecurityProfiles
+  IReq_GetSourceProfiles
 > {
-  method: 'getSecurityProfiles';
+  method: 'getSourceProfiles';
  request: {
    identity?: authInterfaces.IIdentity;
    apiToken?: string;
  };
  response: {
-    profiles: ISecurityProfile[];
+    profiles: ISourceProfile[];
  };
 }

 /**
- * Get a single security profile by ID.
+ * Get a single source profile by ID.
 */
-export interface IReq_GetSecurityProfile extends plugins.typedrequestInterfaces.implementsTR<
+export interface IReq_GetSourceProfile extends plugins.typedrequestInterfaces.implementsTR<
  plugins.typedrequestInterfaces.ITypedRequest,
-  IReq_GetSecurityProfile
+  IReq_GetSourceProfile
 > {
-  method: 'getSecurityProfile';
+  method: 'getSourceProfile';
  request: {
    identity?: authInterfaces.IIdentity;
    apiToken?: string;
    id: string;
  };
  response: {
-    profile: ISecurityProfile | null;
+    profile: ISourceProfile | null;
  };
 }

 /**
- * Create a new security profile.
+ * Create a new source profile.
 */
-export interface IReq_CreateSecurityProfile extends plugins.typedrequestInterfaces.implementsTR<
+export interface IReq_CreateSourceProfile extends plugins.typedrequestInterfaces.implementsTR<
  plugins.typedrequestInterfaces.ITypedRequest,
-  IReq_CreateSecurityProfile
+  IReq_CreateSourceProfile
 > {
-  method: 'createSecurityProfile';
+  method: 'createSourceProfile';
  request: {
    identity?: authInterfaces.IIdentity;
    apiToken?: string;
@@ -65,13 +65,13 @@ export interface IReq_CreateSecurityProfile extends plugins.typedrequestInterfac
 }

 /**
- * Update a security profile.
+ * Update a source profile.
 */
-export interface IReq_UpdateSecurityProfile extends plugins.typedrequestInterfaces.implementsTR<
+export interface IReq_UpdateSourceProfile extends plugins.typedrequestInterfaces.implementsTR<
  plugins.typedrequestInterfaces.ITypedRequest,
-  IReq_UpdateSecurityProfile
+  IReq_UpdateSourceProfile
 > {
-  method: 'updateSecurityProfile';
+  method: 'updateSourceProfile';
  request: {
    identity?: authInterfaces.IIdentity;
    apiToken?: string;
@@ -89,13 +89,13 @@ export interface IReq_UpdateSecurityProfile extends plugins.typedrequestInterfac
 }

 /**
- * Delete a security profile.
+ * Delete a source profile.
 */
-export interface IReq_DeleteSecurityProfile extends plugins.typedrequestInterfaces.implementsTR<
+export interface IReq_DeleteSourceProfile extends plugins.typedrequestInterfaces.implementsTR<
  plugins.typedrequestInterfaces.ITypedRequest,
-  IReq_DeleteSecurityProfile
+  IReq_DeleteSourceProfile
 > {
-  method: 'deleteSecurityProfile';
+  method: 'deleteSourceProfile';
  request: {
    identity?: authInterfaces.IIdentity;
    apiToken?: string;
@@ -109,13 +109,13 @@ export interface IReq_DeleteSecurityProfile extends plugins.typedrequestInterfac
 }

 /**
- * Get which routes reference a security profile.
+ * Get which routes reference a source profile.
 */
-export interface IReq_GetSecurityProfileUsage extends plugins.typedrequestInterfaces.implementsTR<
+export interface IReq_GetSourceProfileUsage extends plugins.typedrequestInterfaces.implementsTR<
  plugins.typedrequestInterfaces.ITypedRequest,
-  IReq_GetSecurityProfileUsage
+  IReq_GetSourceProfileUsage
 > {
-  method: 'getSecurityProfileUsage';
+  method: 'getSourceProfileUsage';
  request: {
    identity?: authInterfaces.IIdentity;
    apiToken?: string;
--- a/ts_interfaces/requests/target-profiles.ts
+++ b/ts_interfaces/requests/target-profiles.ts
@@ -0,0 +1,128 @@
+import * as plugins from '../plugins.js';
+import type * as authInterfaces from '../data/auth.js';
+import type { ITargetProfile, ITargetProfileTarget } from '../data/target-profile.js';
+
+// ============================================================================
+// Target Profile Endpoints (target-side: what can be accessed)
+// ============================================================================
+
+/**
+ * Get all target profiles.
+ */
+export interface IReq_GetTargetProfiles extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_GetTargetProfiles
+> {
+  method: 'getTargetProfiles';
+  request: {
+    identity?: authInterfaces.IIdentity;
+    apiToken?: string;
+  };
+  response: {
+    profiles: ITargetProfile[];
+  };
+}
+
+/**
+ * Get a single target profile by ID.
+ */
+export interface IReq_GetTargetProfile extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_GetTargetProfile
+> {
+  method: 'getTargetProfile';
+  request: {
+    identity?: authInterfaces.IIdentity;
+    apiToken?: string;
+    id: string;
+  };
+  response: {
+    profile: ITargetProfile | null;
+  };
+}
+
+/**
+ * Create a new target profile.
+ */
+export interface IReq_CreateTargetProfile extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_CreateTargetProfile
+> {
+  method: 'createTargetProfile';
+  request: {
+    identity?: authInterfaces.IIdentity;
+    apiToken?: string;
+    name: string;
+    description?: string;
+    domains?: string[];
+    targets?: ITargetProfileTarget[];
+    routeRefs?: string[];
+  };
+  response: {
+    success: boolean;
+    id?: string;
+    message?: string;
+  };
+}
+
+/**
+ * Update a target profile.
+ */
+export interface IReq_UpdateTargetProfile extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_UpdateTargetProfile
+> {
+  method: 'updateTargetProfile';
+  request: {
+    identity?: authInterfaces.IIdentity;
+    apiToken?: string;
+    id: string;
+    name?: string;
+    description?: string;
+    domains?: string[];
+    targets?: ITargetProfileTarget[];
+    routeRefs?: string[];
+  };
+  response: {
+    success: boolean;
+    message?: string;
+  };
+}
+
+/**
+ * Delete a target profile.
+ */
+export interface IReq_DeleteTargetProfile extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_DeleteTargetProfile
+> {
+  method: 'deleteTargetProfile';
+  request: {
+    identity?: authInterfaces.IIdentity;
+    apiToken?: string;
+    id: string;
+    force?: boolean;
+  };
+  response: {
+    success: boolean;
+    message?: string;
+  };
+}
+
+/**
+ * Get which VPN clients reference a target profile.
+ */
+export interface IReq_GetTargetProfileUsage extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_GetTargetProfileUsage
+> {
+  method: 'getTargetProfileUsage';
+  request: {
+    identity?: authInterfaces.IIdentity;
+    apiToken?: string;
+    id: string;
+  };
+  response: {
+    clients: Array<{ clientId: string; description?: string }>;
+  };
+}
--- a/ts_interfaces/requests/vpn.ts
+++ b/ts_interfaces/requests/vpn.ts
@@ -49,9 +49,9 @@ export interface IReq_CreateVpnClient extends plugins.typedrequestInterfaces.imp
  request: {
    identity: authInterfaces.IIdentity;
    clientId: string;
-    serverDefinedClientTags?: string[];
+    targetProfileIds?: string[];
    description?: string;
-    forceDestinationSmartproxy?: boolean;
+
    destinationAllowList?: string[];
    destinationBlockList?: string[];
    useHostIp?: boolean;
@@ -81,8 +81,8 @@ export interface IReq_UpdateVpnClient extends plugins.typedrequestInterfaces.imp
    identity: authInterfaces.IIdentity;
    clientId: string;
    description?: string;
-    serverDefinedClientTags?: string[];
-    forceDestinationSmartproxy?: boolean;
+    targetProfileIds?: string[];
+
    destinationAllowList?: string[];
    destinationBlockList?: string[];
    useHostIp?: boolean;
--- a/ts_migrations/index.ts
+++ b/ts_migrations/index.ts
@@ -0,0 +1,70 @@
+/// <reference types="node" />
+
+/**
+ * dcrouter migration runner.
+ *
+ * Uses @push.rocks/smartmigration via dynamic import so smartmigration's type
+ * chain (which pulls in mongodb 7.x and related types) doesn't leak into
+ * compile-time type checking for this folder.
+ */
+
+/** Matches the subset of IMigrationRunResult we actually log. */
+export interface IMigrationRunResult {
+  stepsApplied: Array<unknown>;
+  wasFreshInstall: boolean;
+  currentVersionBefore: string | null;
+  currentVersionAfter: string;
+  totalDurationMs: number;
+}
+
+export interface IMigrationRunner {
+  run(): Promise<IMigrationRunResult>;
+}
+
+/**
+ * Create a configured SmartMigration runner with all dcrouter migration steps registered.
+ *
+ * Call `.run()` on the returned instance at startup (after DcRouterDb is ready,
+ * before any service that reads migrated collections).
+ *
+ * @param db - The initialized SmartdataDb instance from DcRouterDb.getDb()
+ * @param targetVersion - The current app version (from commitinfo.version)
+ */
+export async function createMigrationRunner(
+  db: unknown,
+  targetVersion: string,
+): Promise<IMigrationRunner> {
+  const sm = await import('@push.rocks/smartmigration');
+  const migration = new sm.SmartMigration({
+    targetVersion,
+    db: db as any,
+    // Brand-new installs skip all migrations and stamp directly to the current version.
+    freshInstallVersion: targetVersion,
+  });
+
+  // Register steps in execution order. Each step's .from() must match the
+  // previous step's .to() to form a contiguous chain.
+  migration
+    .step('rename-target-profile-host-to-ip')
+    .from('13.0.11').to('13.1.0')
+    .description('Rename ITargetProfileTarget.host → ip on all target profiles')
+    .up(async (ctx) => {
+      const collection = ctx.mongo!.collection('targetprofiledoc');
+      const cursor = collection.find({ 'targets.host': { $exists: true } });
+      let migrated = 0;
+      for await (const doc of cursor) {
+        const targets = ((doc as any).targets || []).map((t: any) => {
+          if (t && typeof t === 'object' && 'host' in t && !('ip' in t)) {
+            const { host, ...rest } = t;
+            return { ...rest, ip: host };
+          }
+          return t;
+        });
+        await collection.updateOne({ _id: (doc as any)._id }, { $set: { targets } });
+        migrated++;
+      }
+      ctx.log.log('info', `rename-target-profile-host-to-ip: migrated ${migrated} profile(s)`);
+    });
+
+  return migration;
+}
--- a/ts_migrations/tspublish.json
+++ b/ts_migrations/tspublish.json
@@ -0,0 +1,3 @@
+{
+  "order": 2
+}
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@serve.zone/dcrouter',
-  version: '12.5.0',
+  version: '13.4.2',
  description: 'A multifaceted routing service handling mail and SMS delivery functions.'
 }
--- a/ts_web/appstate.ts
+++ b/ts_web/appstate.ts
@@ -15,6 +15,8 @@ export interface IStatsState {
  emailStats: interfaces.data.IEmailStats | null;
  dnsStats: interfaces.data.IDnsStats | null;
  securityMetrics: interfaces.data.ISecurityMetrics | null;
+  radiusStats: interfaces.data.IRadiusStats | null;
+  vpnStats: interfaces.data.IVpnStats | null;
  lastUpdated: number;
  isLoading: boolean;
  error: string | null;
@@ -28,6 +30,7 @@ export interface IConfigState {

 export interface IUiState {
  activeView: string;
+  activeSubview: string | null;
  sidebarCollapsed: boolean;
  autoRefresh: boolean;
  refreshInterval: number; // milliseconds
@@ -54,6 +57,8 @@ export interface INetworkState {
  requestsPerSecond: number;
  requestsTotal: number;
  backends: interfaces.data.IBackendInfo[];
+  frontendProtocols: interfaces.data.IProtocolDistribution | null;
+  backendProtocols: interfaces.data.IProtocolDistribution | null;
  lastUpdated: number;
  isLoading: boolean;
  error: string | null;
@@ -91,6 +96,8 @@ export const statsStatePart = await appState.getStatePart<IStatsState>(
    emailStats: null,
    dnsStats: null,
    securityMetrics: null,
+    radiusStats: null,
+    vpnStats: null,
    lastUpdated: 0,
    isLoading: false,
    error: null,
@@ -110,16 +117,24 @@ 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', 'routes', 'apitokens', 'configuration', 'security', 'certificates', 'remoteingress', 'securityprofiles', 'networktargets'];
+  const validViews = ['overview', 'network', 'email', 'logs', 'access', 'security', 'certificates'];
  const segments = path.split('/').filter(Boolean);
  const view = segments[0];
  return validViews.includes(view) ? view : 'overview';
 };

+// Determine initial subview (second URL segment) from the path
+const getInitialSubview = (): string | null => {
+  const path = typeof window !== 'undefined' ? window.location.pathname : '/';
+  const segments = path.split('/').filter(Boolean);
+  return segments[1] ?? null;
+};
+
 export const uiStatePart = await appState.getStatePart<IUiState>(
  'ui',
  {
    activeView: getInitialView(),
+    activeSubview: getInitialSubview(),
    sidebarCollapsed: false,
    autoRefresh: true,
    refreshInterval: 1000, // 1 second
@@ -150,6 +165,8 @@ export const networkStatePart = await appState.getStatePart<INetworkState>(
    requestsPerSecond: 0,
    requestsTotal: 0,
    backends: [],
+    frontendProtocols: null,
+    backendProtocols: null,
    lastUpdated: 0,
    isLoading: false,
    error: null,
@@ -319,6 +336,8 @@ export const fetchAllStatsAction = statsStatePart.createAction(async (statePartA
        dns: true,
        security: true,
        network: false, // Network is fetched separately for the network view
+        radius: true,
+        vpn: true,
      },
    });

@@ -328,6 +347,8 @@ export const fetchAllStatsAction = statsStatePart.createAction(async (statePartA
      emailStats: combinedResponse.metrics.email || currentState.emailStats,
      dnsStats: combinedResponse.metrics.dns || currentState.dnsStats,
      securityMetrics: combinedResponse.metrics.security || currentState.securityMetrics,
+      radiusStats: combinedResponse.metrics.radius || currentState.radiusStats,
+      vpnStats: combinedResponse.metrics.vpn || currentState.vpnStats,
      lastUpdated: Date.now(),
      isLoading: false,
      error: null,
@@ -423,36 +444,6 @@ export const setActiveViewAction = uiStatePart.createAction<string>(async (state
    }, 100);
  }

-  // If switching to routes view, ensure we fetch route data
-  if (viewName === 'routes' && currentState.activeView !== 'routes') {
-    setTimeout(() => {
-      routeManagementStatePart.dispatchAction(fetchMergedRoutesAction, null);
-      // Also fetch profiles/targets for the Create Route dropdowns
-      profilesTargetsStatePart.dispatchAction(fetchProfilesAndTargetsAction, null);
-    }, 100);
-  }
-
-  // If switching to apitokens view, ensure we fetch token data
-  if (viewName === 'apitokens' && currentState.activeView !== 'apitokens') {
-    setTimeout(() => {
-      routeManagementStatePart.dispatchAction(fetchApiTokensAction, null);
-    }, 100);
-  }
-
-  // If switching to remoteingress view, ensure we fetch edge data
-  if (viewName === 'remoteingress' && currentState.activeView !== 'remoteingress') {
-    setTimeout(() => {
-      remoteIngressStatePart.dispatchAction(fetchRemoteIngressAction, null);
-    }, 100);
-  }
-
-  // If switching to security profiles or network targets views, fetch profiles/targets data
-  if ((viewName === 'securityprofiles' || viewName === 'networktargets') && currentState.activeView !== viewName) {
-    setTimeout(() => {
-      profilesTargetsStatePart.dispatchAction(fetchProfilesAndTargetsAction, null);
-    }, 100);
-  }
-
  return {
    ...currentState,
    activeView: viewName,
@@ -515,6 +506,8 @@ export const fetchNetworkStatsAction = networkStatePart.createAction(async (stat
      requestsPerSecond: networkStatsResponse.requestsPerSecond || 0,
      requestsTotal: networkStatsResponse.requestsTotal || 0,
      backends: networkStatsResponse.backends || [],
+      frontendProtocols: networkStatsResponse.frontendProtocols || null,
+      backendProtocols: networkStatsResponse.backendProtocols || null,
      lastUpdated: Date.now(),
      isLoading: false,
      error: null,
@@ -597,8 +590,8 @@ export const fetchCertificateOverviewAction = certificateStatePart.createAction(
  }
 });

-export const reprovisionCertificateAction = certificateStatePart.createAction<string>(
-  async (statePartArg, domain, actionContext): Promise<ICertificateState> => {
+export const reprovisionCertificateAction = certificateStatePart.createAction<{ domain: string; forceRenew?: boolean }>(
+  async (statePartArg, dataArg, actionContext): Promise<ICertificateState> => {
    const context = getActionContext();
    const currentState = statePartArg.getState()!;

@@ -609,7 +602,8 @@ export const reprovisionCertificateAction = certificateStatePart.createAction<st

      await request.fire({
        identity: context.identity!,
-        domain,
+        domain: dataArg.domain,
+        forceRenew: dataArg.forceRenew,
      });

      // Re-fetch overview after reprovisioning
@@ -991,9 +985,9 @@ export const fetchVpnAction = vpnStatePart.createAction(async (statePartArg): Pr

 export const createVpnClientAction = vpnStatePart.createAction<{
  clientId: string;
-  serverDefinedClientTags?: string[];
+  targetProfileIds?: string[];
  description?: string;
-  forceDestinationSmartproxy?: boolean;
+
  destinationAllowList?: string[];
  destinationBlockList?: string[];
  useHostIp?: boolean;
@@ -1013,9 +1007,9 @@ export const createVpnClientAction = vpnStatePart.createAction<{
    const response = await request.fire({
      identity: context.identity!,
      clientId: dataArg.clientId,
-      serverDefinedClientTags: dataArg.serverDefinedClientTags,
+      targetProfileIds: dataArg.targetProfileIds,
      description: dataArg.description,
-      forceDestinationSmartproxy: dataArg.forceDestinationSmartproxy,
+
      destinationAllowList: dataArg.destinationAllowList,
      destinationBlockList: dataArg.destinationBlockList,
      useHostIp: dataArg.useHostIp,
@@ -1090,8 +1084,8 @@ export const toggleVpnClientAction = vpnStatePart.createAction<{
 export const updateVpnClientAction = vpnStatePart.createAction<{
  clientId: string;
  description?: string;
-  serverDefinedClientTags?: string[];
-  forceDestinationSmartproxy?: boolean;
+  targetProfileIds?: string[];
+
  destinationAllowList?: string[];
  destinationBlockList?: string[];
  useHostIp?: boolean;
@@ -1112,8 +1106,8 @@ export const updateVpnClientAction = vpnStatePart.createAction<{
      identity: context.identity!,
      clientId: dataArg.clientId,
      description: dataArg.description,
-      serverDefinedClientTags: dataArg.serverDefinedClientTags,
-      forceDestinationSmartproxy: dataArg.forceDestinationSmartproxy,
+      targetProfileIds: dataArg.targetProfileIds,
+
      destinationAllowList: dataArg.destinationAllowList,
      destinationBlockList: dataArg.destinationBlockList,
      useHostIp: dataArg.useHostIp,
@@ -1143,11 +1137,167 @@ export const clearNewClientConfigAction = vpnStatePart.createAction(
 );

 // ============================================================================
-// Security Profiles & Network Targets State
+// Target Profiles State
+// ============================================================================
+
+export interface ITargetProfilesState {
+  profiles: interfaces.data.ITargetProfile[];
+  isLoading: boolean;
+  error: string | null;
+  lastUpdated: number;
+}
+
+export const targetProfilesStatePart = await appState.getStatePart<ITargetProfilesState>(
+  'targetProfiles',
+  {
+    profiles: [],
+    isLoading: false,
+    error: null,
+    lastUpdated: 0,
+  },
+  'soft'
+);
+
+// ============================================================================
+// Target Profiles Actions
+// ============================================================================
+
+export const fetchTargetProfilesAction = targetProfilesStatePart.createAction(
+  async (statePartArg): Promise<ITargetProfilesState> => {
+    const context = getActionContext();
+    const currentState = statePartArg.getState()!;
+    if (!context.identity) return currentState;
+
+    try {
+      const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+        interfaces.requests.IReq_GetTargetProfiles
+      >('/typedrequest', 'getTargetProfiles');
+
+      const response = await request.fire({ identity: context.identity });
+
+      return {
+        profiles: response.profiles,
+        isLoading: false,
+        error: null,
+        lastUpdated: Date.now(),
+      };
+    } catch (error) {
+      return {
+        ...currentState,
+        isLoading: false,
+        error: error instanceof Error ? error.message : 'Failed to fetch target profiles',
+      };
+    }
+  }
+);
+
+export const createTargetProfileAction = targetProfilesStatePart.createAction<{
+  name: string;
+  description?: string;
+  domains?: string[];
+  targets?: Array<{ ip: string; port: number }>;
+  routeRefs?: string[];
+}>(async (statePartArg, dataArg, actionContext): Promise<ITargetProfilesState> => {
+  const context = getActionContext();
+  try {
+    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_CreateTargetProfile
+    >('/typedrequest', 'createTargetProfile');
+    const response = await request.fire({
+      identity: context.identity!,
+      name: dataArg.name,
+      description: dataArg.description,
+      domains: dataArg.domains,
+      targets: dataArg.targets,
+      routeRefs: dataArg.routeRefs,
+    });
+    if (!response.success) {
+      return {
+        ...statePartArg.getState()!,
+        error: response.message || 'Failed to create target profile',
+      };
+    }
+    return await actionContext!.dispatch(fetchTargetProfilesAction, null);
+  } catch (error: unknown) {
+    return {
+      ...statePartArg.getState()!,
+      error: error instanceof Error ? error.message : 'Failed to create target profile',
+    };
+  }
+});
+
+export const updateTargetProfileAction = targetProfilesStatePart.createAction<{
+  id: string;
+  name?: string;
+  description?: string;
+  domains?: string[];
+  targets?: Array<{ ip: string; port: number }>;
+  routeRefs?: string[];
+}>(async (statePartArg, dataArg, actionContext): Promise<ITargetProfilesState> => {
+  const context = getActionContext();
+  try {
+    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_UpdateTargetProfile
+    >('/typedrequest', 'updateTargetProfile');
+    const response = await request.fire({
+      identity: context.identity!,
+      id: dataArg.id,
+      name: dataArg.name,
+      description: dataArg.description,
+      domains: dataArg.domains,
+      targets: dataArg.targets,
+      routeRefs: dataArg.routeRefs,
+    });
+    if (!response.success) {
+      return {
+        ...statePartArg.getState()!,
+        error: response.message || 'Failed to update target profile',
+      };
+    }
+    return await actionContext!.dispatch(fetchTargetProfilesAction, null);
+  } catch (error: unknown) {
+    return {
+      ...statePartArg.getState()!,
+      error: error instanceof Error ? error.message : 'Failed to update target profile',
+    };
+  }
+});
+
+export const deleteTargetProfileAction = targetProfilesStatePart.createAction<{
+  id: string;
+  force?: boolean;
+}>(async (statePartArg, dataArg, actionContext): Promise<ITargetProfilesState> => {
+  const context = getActionContext();
+  try {
+    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_DeleteTargetProfile
+    >('/typedrequest', 'deleteTargetProfile');
+    const response = await request.fire({
+      identity: context.identity!,
+      id: dataArg.id,
+      force: dataArg.force,
+    });
+    if (!response.success) {
+      return {
+        ...statePartArg.getState()!,
+        error: response.message || 'Failed to delete target profile',
+      };
+    }
+    return await actionContext!.dispatch(fetchTargetProfilesAction, null);
+  } catch (error: unknown) {
+    return {
+      ...statePartArg.getState()!,
+      error: error instanceof Error ? error.message : 'Failed to delete target profile',
+    };
+  }
+});
+
+// ============================================================================
+// Source Profiles & Network Targets State
 // ============================================================================

 export interface IProfilesTargetsState {
-  profiles: interfaces.data.ISecurityProfile[];
+  profiles: interfaces.data.ISourceProfile[];
  targets: interfaces.data.INetworkTarget[];
  isLoading: boolean;
  error: string | null;
@@ -1167,7 +1317,7 @@ export const profilesTargetsStatePart = await appState.getStatePart<IProfilesTar
 );

 // ============================================================================
-// Security Profiles & Network Targets Actions
+// Source Profiles & Network Targets Actions
 // ============================================================================

 export const fetchProfilesAndTargetsAction = profilesTargetsStatePart.createAction(
@@ -1178,8 +1328,8 @@ export const fetchProfilesAndTargetsAction = profilesTargetsStatePart.createActi

    try {
      const profilesRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
-        interfaces.requests.IReq_GetSecurityProfiles
-      >('/typedrequest', 'getSecurityProfiles');
+        interfaces.requests.IReq_GetSourceProfiles
+      >('/typedrequest', 'getSourceProfiles');

      const targetsRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
        interfaces.requests.IReq_GetNetworkTargets
@@ -1216,8 +1366,8 @@ export const createProfileAction = profilesTargetsStatePart.createAction<{
  const context = getActionContext();
  try {
    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
-      interfaces.requests.IReq_CreateSecurityProfile
-    >('/typedrequest', 'createSecurityProfile');
+      interfaces.requests.IReq_CreateSourceProfile
+    >('/typedrequest', 'createSourceProfile');
    await request.fire({
      identity: context.identity!,
      name: dataArg.name,
@@ -1244,8 +1394,8 @@ export const updateProfileAction = profilesTargetsStatePart.createAction<{
  const context = getActionContext();
  try {
    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
-      interfaces.requests.IReq_UpdateSecurityProfile
-    >('/typedrequest', 'updateSecurityProfile');
+      interfaces.requests.IReq_UpdateSourceProfile
+    >('/typedrequest', 'updateSourceProfile');
    await request.fire({
      identity: context.identity!,
      id: dataArg.id,
@@ -1270,8 +1420,8 @@ export const deleteProfileAction = profilesTargetsStatePart.createAction<{
  const context = getActionContext();
  try {
    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
-      interfaces.requests.IReq_DeleteSecurityProfile
-    >('/typedrequest', 'deleteSecurityProfile');
+      interfaces.requests.IReq_DeleteSourceProfile
+    >('/typedrequest', 'deleteSourceProfile');
    const response = await request.fire({
      identity: context.identity!,
      id: dataArg.id,
@@ -1766,6 +1916,7 @@ async function dispatchCombinedRefreshActionInner() {
  const context = getActionContext();
  if (!context.identity) return;
  const currentView = uiStatePart.getState()!.activeView;
+  const currentSubview = uiStatePart.getState()!.activeSubview;

  try {
    // Always fetch basic stats for dashboard widgets
@@ -1781,6 +1932,8 @@ async function dispatchCombinedRefreshActionInner() {
        dns: true,
        security: true,
        network: currentView === 'network', // Only fetch network if on network view
+        radius: true,
+        vpn: true,
      },
    });

@@ -1792,6 +1945,8 @@ async function dispatchCombinedRefreshActionInner() {
      emailStats: combinedResponse.metrics.email || currentStatsState.emailStats,
      dnsStats: combinedResponse.metrics.dns || currentStatsState.dnsStats,
      securityMetrics: combinedResponse.metrics.security || currentStatsState.securityMetrics,
+      radiusStats: combinedResponse.metrics.radius || currentStatsState.radiusStats,
+      vpnStats: combinedResponse.metrics.vpn || currentStatsState.vpnStats,
      lastUpdated: Date.now(),
      isLoading: false,
      error: null,
@@ -1832,6 +1987,8 @@ async function dispatchCombinedRefreshActionInner() {
          requestsPerSecond: network.requestsPerSecond || 0,
          requestsTotal: network.requestsTotal || 0,
          backends: network.backends || [],
+          frontendProtocols: network.frontendProtocols || null,
+          backendProtocols: network.backendProtocols || null,
          lastUpdated: Date.now(),
          isLoading: false,
          error: null,
@@ -1853,6 +2010,8 @@ async function dispatchCombinedRefreshActionInner() {
          requestsPerSecond: network.requestsPerSecond || 0,
          requestsTotal: network.requestsTotal || 0,
          backends: network.backends || [],
+          frontendProtocols: network.frontendProtocols || null,
+          backendProtocols: network.backendProtocols || null,
          lastUpdated: Date.now(),
          isLoading: false,
          error: null,
@@ -1869,8 +2028,8 @@ async function dispatchCombinedRefreshActionInner() {
      }
    }

-    // Refresh remote ingress data if on remoteingress view
-    if (currentView === 'remoteingress') {
+    // Refresh remote ingress data if on the Network → Remote Ingress subview
+    if (currentView === 'network' && currentSubview === 'remoteingress') {
      try {
        await remoteIngressStatePart.dispatchAction(fetchRemoteIngressAction, null);
      } catch (error) {
@@ -1878,8 +2037,8 @@ async function dispatchCombinedRefreshActionInner() {
      }
    }

-    // Refresh VPN data if on vpn view
-    if (currentView === 'vpn') {
+    // Refresh VPN data if on the Network → VPN subview
+    if (currentView === 'network' && currentSubview === 'vpn') {
      try {
        await vpnStatePart.dispatchAction(fetchVpnAction, null);
      } catch (error) {
--- a/ts_web/elements/access/index.ts
+++ b/ts_web/elements/access/index.ts
@@ -0,0 +1 @@
+export * from './ops-view-apitokens.js';
--- a/ts_web/elements/access/ops-view-apitokens.ts
+++ b/ts_web/elements/access/ops-view-apitokens.ts
@@ -1,6 +1,6 @@
-import * as appstate from '../appstate.js';
-import * as interfaces from '../../dist_ts_interfaces/index.js';
-import { viewHostCss } from './shared/css.js';
+import * as appstate from '../../appstate.js';
+import * as interfaces from '../../../dist_ts_interfaces/index.js';
+import { viewHostCss } from '../shared/css.js';

 import {
  DeesElement,
@@ -100,7 +100,7 @@ export class OpsViewApiTokens extends DeesElement {
    const { apiTokens } = this.routeState;

    return html`
-      <ops-sectionheading>API Tokens</ops-sectionheading>
+      <dees-heading level="2">API Tokens</dees-heading>

      <div class="apiTokensContainer">
        <dees-table
@@ -109,6 +109,7 @@ export class OpsViewApiTokens extends DeesElement {
          .data=${apiTokens}
          .dataName=${'token'}
          .searchable=${true}
+          .showColumnFilters=${true}
          .displayFunction=${(token: interfaces.data.IApiTokenInfo) => ({
            name: token.name,
            scopes: this.renderScopePills(token.scopes),
--- a/ts_web/elements/email/index.ts
+++ b/ts_web/elements/email/index.ts
@@ -0,0 +1,2 @@
+export * from './ops-view-emails.js';
+export * from './ops-view-email-security.js';
--- a/ts_web/elements/email/ops-view-email-security.ts
+++ b/ts_web/elements/email/ops-view-email-security.ts
@@ -0,0 +1,160 @@
+import * as appstate from '../../appstate.js';
+import { viewHostCss } from '../shared/css.js';
+
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { type IStatsTile } from '@design.estate/dees-catalog';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ops-view-email-security': OpsViewEmailSecurity;
+  }
+}
+
+@customElement('ops-view-email-security')
+export class OpsViewEmailSecurity extends DeesElement {
+  @state()
+  accessor statsState: appstate.IStatsState = appstate.statsStatePart.getState()!;
+
+  constructor() {
+    super();
+    const sub = appstate.statsStatePart
+      .select((s) => s)
+      .subscribe((s) => {
+        this.statsState = s;
+      });
+    this.rxSubscriptions.push(sub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      h2 {
+        margin: 32px 0 16px 0;
+        font-size: 24px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#333', '#ccc')};
+      }
+      dees-statsgrid {
+        margin-bottom: 32px;
+      }
+      .securityCard {
+        background: ${cssManager.bdTheme('#fff', '#222')};
+        border: 1px solid ${cssManager.bdTheme('#e9ecef', '#333')};
+        border-radius: 8px;
+        padding: 24px;
+        position: relative;
+        overflow: hidden;
+      }
+      .actionButton {
+        margin-top: 16px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const metrics = this.statsState.securityMetrics;
+
+    if (!metrics) {
+      return html`
+        <div class="loadingMessage">
+          <p>Loading security metrics...</p>
+        </div>
+      `;
+    }
+
+    const tiles: IStatsTile[] = [
+      {
+        id: 'malware',
+        title: 'Malware Detection',
+        value: metrics.malwareDetected,
+        type: 'number',
+        icon: 'lucide:BugOff',
+        color: metrics.malwareDetected > 0 ? '#ef4444' : '#22c55e',
+        description: 'Malware detected',
+      },
+      {
+        id: 'phishing',
+        title: 'Phishing Detection',
+        value: metrics.phishingDetected,
+        type: 'number',
+        icon: 'lucide:Fish',
+        color: metrics.phishingDetected > 0 ? '#ef4444' : '#22c55e',
+        description: 'Phishing attempts detected',
+      },
+      {
+        id: 'suspicious',
+        title: 'Suspicious Activities',
+        value: metrics.suspiciousActivities,
+        type: 'number',
+        icon: 'lucide:TriangleAlert',
+        color: metrics.suspiciousActivities > 5 ? '#ef4444' : '#f59e0b',
+        description: 'Suspicious activities detected',
+      },
+      {
+        id: 'spam',
+        title: 'Spam Detection',
+        value: metrics.spamDetected,
+        type: 'number',
+        icon: 'lucide:Ban',
+        color: '#f59e0b',
+        description: 'Spam emails blocked',
+      },
+    ];
+
+    return html`
+      <dees-heading level="hr">Email Security</dees-heading>
+
+      <dees-statsgrid
+        .tiles=${tiles}
+        .minTileWidth=${200}
+      ></dees-statsgrid>
+
+      <h2>Email Security Configuration</h2>
+      <div class="securityCard">
+        <dees-form>
+          <dees-input-checkbox
+            .key=${'enableSPF'}
+            .label=${'Enable SPF checking'}
+            .value=${true}
+          ></dees-input-checkbox>
+          <dees-input-checkbox
+            .key=${'enableDKIM'}
+            .label=${'Enable DKIM validation'}
+            .value=${true}
+          ></dees-input-checkbox>
+          <dees-input-checkbox
+            .key=${'enableDMARC'}
+            .label=${'Enable DMARC policy enforcement'}
+            .value=${true}
+          ></dees-input-checkbox>
+          <dees-input-checkbox
+            .key=${'enableSpamFilter'}
+            .label=${'Enable spam filtering'}
+            .value=${true}
+          ></dees-input-checkbox>
+        </dees-form>
+        <dees-button
+          class="actionButton"
+          type="highlighted"
+          @click=${() => this.saveEmailSecuritySettings()}
+        >
+          Save Settings
+        </dees-button>
+      </div>
+    `;
+  }
+
+  private async saveEmailSecuritySettings() {
+    // Config is read-only from the UI for now
+    alert('Email security settings are read-only. Update the dcrouter configuration file to change these settings.');
+  }
+}
--- a/ts_web/elements/email/ops-view-emails.ts
+++ b/ts_web/elements/email/ops-view-emails.ts
@@ -1,8 +1,8 @@
 import { DeesElement, property, html, customElement, type TemplateResult, css, state, cssManager } from '@design.estate/dees-element';
-import * as plugins from '../plugins.js';
-import * as appstate from '../appstate.js';
-import * as shared from './shared/index.js';
-import * as interfaces from '../../dist_ts_interfaces/index.js';
+import * as plugins from '../../plugins.js';
+import * as appstate from '../../appstate.js';
+import * as shared from '../shared/index.js';
+import * as interfaces from '../../../dist_ts_interfaces/index.js';

 declare global {
  interface HTMLElementTagNameMap {
@@ -60,7 +60,7 @@ export class OpsViewEmails extends DeesElement {

  public render() {
    return html`
-      <ops-sectionheading>Email Operations</ops-sectionheading>
+      <dees-heading level="2">Email Operations</dees-heading>
      <div class="viewContainer">
        ${this.currentView === 'detail' && this.selectedEmail
          ? html`
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@@ -1,15 +1,9 @@
 export * from './ops-dashboard.js';
-export * from './ops-view-overview.js';
-export * from './ops-view-network.js';
-export * from './ops-view-emails.js';
+export * from './overview/index.js';
+export * from './network/index.js';
+export * from './email/index.js';
 export * from './ops-view-logs.js';
-export * from './ops-view-config.js';
-export * from './ops-view-routes.js';
-export * from './ops-view-apitokens.js';
-export * from './ops-view-security.js';
+export * from './access/index.js';
+export * from './security/index.js';
 export * from './ops-view-certificates.js';
-export * from './ops-view-remoteingress.js';
-export * from './ops-view-vpn.js';
-export * from './ops-view-securityprofiles.js';
-export * from './ops-view-networktargets.js';
-export * from './shared/index.js';
+export * from './shared/index.js';
--- a/ts_web/elements/network/index.ts
+++ b/ts_web/elements/network/index.ts
@@ -0,0 +1,7 @@
+export * from './ops-view-network-activity.js';
+export * from './ops-view-routes.js';
+export * from './ops-view-sourceprofiles.js';
+export * from './ops-view-networktargets.js';
+export * from './ops-view-targetprofiles.js';
+export * from './ops-view-remoteingress.js';
+export * from './ops-view-vpn.js';
--- a/ts_web/elements/network/ops-view-network-activity.ts
+++ b/ts_web/elements/network/ops-view-network-activity.ts
@@ -1,12 +1,12 @@
 import { DeesElement, property, 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 * 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-network': OpsViewNetwork;
+    'ops-view-network-activity': OpsViewNetworkActivity;
  }
 }

@@ -26,8 +26,15 @@ interface INetworkRequest {
  route?: string;
 }

-@customElement('ops-view-network')
-export class OpsViewNetwork extends DeesElement {
+@customElement('ops-view-network-activity')
+export class OpsViewNetworkActivity extends DeesElement {
+  /** How far back the traffic chart shows */
+  private static readonly CHART_WINDOW_MS = 5 * 60 * 1000; // 5 minutes
+  /** How often a new data point is added */
+  private static readonly UPDATE_INTERVAL_MS = 1000; // 1 second
+  /** Derived: max data points the buffer holds */
+  private static readonly MAX_DATA_POINTS = OpsViewNetworkActivity.CHART_WINDOW_MS / OpsViewNetworkActivity.UPDATE_INTERVAL_MS;
+
  @state()
  accessor statsState = appstate.statsStatePart.getState()!;

@@ -43,10 +50,10 @@ export class OpsViewNetwork extends DeesElement {

  @state()
  accessor trafficDataOut: Array<{ x: string | number; y: number }> = [];
-  
+
  // Track if we need to update the chart to avoid unnecessary re-renders
  private lastChartUpdate = 0;
-  private chartUpdateThreshold = 1000; // Minimum ms between chart updates
+  private chartUpdateThreshold = OpsViewNetworkActivity.UPDATE_INTERVAL_MS; // Minimum ms between chart updates

  private trafficUpdateTimer: any = null;
  private requestsPerSecHistory: number[] = []; // Track requests/sec over time for trend
@@ -94,23 +101,21 @@ export class OpsViewNetwork extends DeesElement {
      this.updateNetworkData();
    });
    this.rxSubscriptions.push(statsUnsubscribe);
-    
+
    const networkUnsubscribe = appstate.networkStatePart.select().subscribe((state) => {
      this.networkState = state;
      this.updateNetworkData();
    });
    this.rxSubscriptions.push(networkUnsubscribe);
  }
-  
+
  private initializeTrafficData() {
    const now = Date.now();
-    // Fixed 5 minute time range
-    const range = 5 * 60 * 1000; // 5 minutes
-    const bucketSize = range / 60; // 60 data points
+    const { MAX_DATA_POINTS, UPDATE_INTERVAL_MS } = OpsViewNetworkActivity;

    // Initialize with empty data points for both in and out
-    const emptyData = Array.from({ length: 60 }, (_, i) => {
-      const time = now - ((59 - i) * bucketSize);
+    const emptyData = Array.from({ length: MAX_DATA_POINTS }, (_, i) => {
+      const time = now - ((MAX_DATA_POINTS - 1 - i) * UPDATE_INTERVAL_MS);
      return {
        x: new Date(time).toISOString(),
        y: 0,
@@ -143,23 +148,23 @@ export class OpsViewNetwork extends DeesElement {
      y: Math.round((p.out * 8) / 1000000 * 10) / 10,
    }));

-    // Use history as the chart data, keeping the most recent 60 points (5 min window)
-    const sliceStart = Math.max(0, historyIn.length - 60);
+    const { MAX_DATA_POINTS, UPDATE_INTERVAL_MS } = OpsViewNetworkActivity;
+
+    // Use history as the chart data, keeping the most recent points within the window
+    const sliceStart = Math.max(0, historyIn.length - MAX_DATA_POINTS);
    this.trafficDataIn = historyIn.slice(sliceStart);
    this.trafficDataOut = historyOut.slice(sliceStart);

-    // If fewer than 60 points, pad the front with zeros
-    if (this.trafficDataIn.length < 60) {
+    // If fewer than MAX_DATA_POINTS, pad the front with zeros
+    if (this.trafficDataIn.length < MAX_DATA_POINTS) {
      const now = Date.now();
-      const range = 5 * 60 * 1000;
-      const bucketSize = range / 60;
-      const padCount = 60 - this.trafficDataIn.length;
+      const padCount = MAX_DATA_POINTS - this.trafficDataIn.length;
      const firstTimestamp = this.trafficDataIn.length > 0
        ? new Date(this.trafficDataIn[0].x).getTime()
        : now;

      const padIn = Array.from({ length: padCount }, (_, i) => ({
-        x: new Date(firstTimestamp - ((padCount - i) * bucketSize)).toISOString(),
+        x: new Date(firstTimestamp - ((padCount - i) * UPDATE_INTERVAL_MS)).toISOString(),
        y: 0,
      }));
      const padOut = padIn.map(p => ({ ...p }));
@@ -269,13 +274,19 @@ export class OpsViewNetwork extends DeesElement {
        background: ${cssManager.bdTheme('#fff3e0', '#3a2a1a')};
        color: ${cssManager.bdTheme('#f57c00', '#ff9933')};
      }
+
+      .protocolChartGrid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 16px;
+      }
    `,
  ];

  public render() {
    return html`
-      <ops-sectionheading>Network Activity</ops-sectionheading>
-      
+      <dees-heading level="hr">Network Activity</dees-heading>
+
      <div class="networkContainer">
        <!-- Stats Grid -->
        ${this.renderNetworkStats()}
@@ -296,10 +307,13 @@ export class OpsViewNetwork extends DeesElement {
            }
          ]}
          .realtimeMode=${true}
-          .rollingWindow=${300000}
+          .rollingWindow=${OpsViewNetworkActivity.CHART_WINDOW_MS}
          .yAxisFormatter=${(val: number) => `${val} Mbit/s`}
        ></dees-chart-area>

+        <!-- Protocol Distribution Charts -->
+        ${this.renderProtocolCharts()}
+
        <!-- Top IPs Section -->
        ${this.renderTopIPs()}

@@ -343,7 +357,7 @@ export class OpsViewNetwork extends DeesElement {

  private async showRequestDetails(request: INetworkRequest) {
    const { DeesModal } = await import('@design.estate/dees-catalog');
-    
+
    await DeesModal.createAndShow({
      heading: 'Request Details',
      content: html`
@@ -386,10 +400,10 @@ export class OpsViewNetwork extends DeesElement {
    if (!statusCode) {
      return html`<span class="statusBadge warning">N/A</span>`;
    }
-    
+
    const statusClass = statusCode >= 200 && statusCode < 300 ? 'success' :
                       statusCode >= 400 ? 'error' : 'warning';
-    
+
    return html`<span class="statusBadge ${statusClass}">${statusCode}</span>`;
  }

@@ -412,26 +426,26 @@ export class OpsViewNetwork extends DeesElement {
    const units = ['B', 'KB', 'MB', 'GB'];
    let size = bytes;
    let unitIndex = 0;
-    
+
    while (size >= 1024 && unitIndex < units.length - 1) {
      size /= 1024;
      unitIndex++;
    }
-    
+
    return `${size.toFixed(1)} ${units[unitIndex]}`;
  }
-  
+
  private formatBitsPerSecond(bytesPerSecond: number): string {
    const bitsPerSecond = bytesPerSecond * 8; // Convert bytes to bits
    const units = ['bit/s', 'kbit/s', 'Mbit/s', 'Gbit/s'];
    let size = bitsPerSecond;
    let unitIndex = 0;
-    
+
    while (size >= 1000 && unitIndex < units.length - 1) {
      size /= 1000; // Use 1000 for bits (not 1024)
      unitIndex++;
    }
-    
+
    return `${size.toFixed(1)} ${units[unitIndex]}`;
  }

@@ -506,23 +520,61 @@ export class OpsViewNetwork extends DeesElement {
    ];

    return html`
-      <dees-statsgrid 
+      <dees-statsgrid
        .tiles=${tiles}
        .minTileWidth=${200}
-        .gridActions=${[
-          {
-            name: 'Export Data',
-            iconName: 'lucide:FileOutput',
-            action: async () => {
-              console.log('Export feature coming soon');
-            },
-          },
-        ]}
      ></dees-statsgrid>
    `;
  }

-  
+  private renderProtocolCharts(): TemplateResult {
+    const fp = this.networkState.frontendProtocols;
+    const bp = this.networkState.backendProtocols;
+
+    const protoColors: Record<string, string> = {
+      'HTTP/1.1': '#1976d2',
+      'HTTP/2': '#388e3c',
+      'HTTP/3': '#7b1fa2',
+      'WebSocket': '#f57c00',
+      'Other': '#757575',
+    };
+
+    const buildDonutData = (dist: interfaces.data.IProtocolDistribution | null) => {
+      if (!dist) return [];
+      const items: Array<{ name: string; value: number; color: string }> = [];
+      if (dist.h1Active > 0) items.push({ name: 'HTTP/1.1', value: dist.h1Active, color: protoColors['HTTP/1.1'] });
+      if (dist.h2Active > 0) items.push({ name: 'HTTP/2', value: dist.h2Active, color: protoColors['HTTP/2'] });
+      if (dist.h3Active > 0) items.push({ name: 'HTTP/3', value: dist.h3Active, color: protoColors['HTTP/3'] });
+      if (dist.wsActive > 0) items.push({ name: 'WebSocket', value: dist.wsActive, color: protoColors['WebSocket'] });
+      if (dist.otherActive > 0) items.push({ name: 'Other', value: dist.otherActive, color: protoColors['Other'] });
+      return items;
+    };
+
+    const frontendData = buildDonutData(fp);
+    const backendData = buildDonutData(bp);
+
+    return html`
+      <div class="protocolChartGrid">
+        <dees-chart-donut
+          .label=${'Frontend Protocols'}
+          .data=${frontendData.length > 0 ? frontendData : [{ name: 'No Traffic', value: 1, color: '#757575' }]}
+          .showLegend=${true}
+          .showLabels=${true}
+          .innerRadiusPercent=${'55%'}
+          .valueFormatter=${(val: number) => `${val} active`}
+        ></dees-chart-donut>
+        <dees-chart-donut
+          .label=${'Backend Protocols'}
+          .data=${backendData.length > 0 ? backendData : [{ name: 'No Traffic', value: 1, color: '#757575' }]}
+          .showLegend=${true}
+          .showLabels=${true}
+          .innerRadiusPercent=${'55%'}
+          .valueFormatter=${(val: number) => `${val} active`}
+        ></dees-chart-donut>
+      </div>
+    `;
+  }
+
  private renderTopIPs(): TemplateResult {
    if (this.networkState.topIPs.length === 0) {
      return html``;
@@ -671,12 +723,12 @@ export class OpsViewNetwork extends DeesElement {
    // Only update if connections changed significantly
    const newConnectionCount = this.networkState.connections.length;
    const oldConnectionCount = this.networkRequests.length;
-    
+
    // Check if we need to update the network requests array
-    const shouldUpdate = newConnectionCount !== oldConnectionCount || 
+    const shouldUpdate = newConnectionCount !== oldConnectionCount ||
                        newConnectionCount === 0 ||
                        (newConnectionCount > 0 && this.networkRequests.length === 0);
-    
+
    if (shouldUpdate) {
      // Convert connection data to network requests format
      if (newConnectionCount > 0) {
@@ -699,63 +751,62 @@ export class OpsViewNetwork extends DeesElement {
        this.networkRequests = [];
      }
    }
-    
+
    // Load server-side throughput history into chart (once)
    if (!this.historyLoaded && this.networkState.throughputHistory && this.networkState.throughputHistory.length > 0) {
      this.loadThroughputHistory();
    }
  }
-  
+
  private startTrafficUpdateTimer() {
    this.stopTrafficUpdateTimer(); // Clear any existing timer
    this.trafficUpdateTimer = setInterval(() => {
-      // Add a new data point every second
      this.addTrafficDataPoint();
-    }, 1000); // Update every second
+    }, OpsViewNetworkActivity.UPDATE_INTERVAL_MS);
  }
-  
+
  private addTrafficDataPoint() {
    const now = Date.now();
-    
+
    // Throttle chart updates to avoid excessive re-renders
    if (now - this.lastChartUpdate < this.chartUpdateThreshold) {
      return;
    }
-    
+
    const throughput = this.calculateThroughput();
-    
+
    // Convert to Mbps (bytes * 8 / 1,000,000)
    const throughputInMbps = (throughput.in * 8) / 1000000;
    const throughputOutMbps = (throughput.out * 8) / 1000000;
-    
+
    // Add new data points
    const timestamp = new Date(now).toISOString();
-    
+
    const newDataPointIn = {
      x: timestamp,
      y: Math.round(throughputInMbps * 10) / 10
    };
-    
+
    const newDataPointOut = {
      x: timestamp,
      y: Math.round(throughputOutMbps * 10) / 10
    };
-    
+
    // In-place mutation then reassign for Lit reactivity (avoids 4 intermediate arrays)
-    if (this.trafficDataIn.length >= 60) {
+    if (this.trafficDataIn.length >= OpsViewNetworkActivity.MAX_DATA_POINTS) {
      this.trafficDataIn.shift();
      this.trafficDataOut.shift();
    }
    this.trafficDataIn = [...this.trafficDataIn, newDataPointIn];
    this.trafficDataOut = [...this.trafficDataOut, newDataPointOut];
-    
+
    this.lastChartUpdate = now;
  }
-  
+
  private stopTrafficUpdateTimer() {
    if (this.trafficUpdateTimer) {
      clearInterval(this.trafficUpdateTimer);
      this.trafficUpdateTimer = null;
    }
  }
-}
+}
--- a/ts_web/elements/network/ops-view-networktargets.ts
+++ b/ts_web/elements/network/ops-view-networktargets.ts
@@ -7,9 +7,9 @@ import {
  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 * 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 {
@@ -64,13 +64,14 @@ export class OpsViewNetworkTargets extends DeesElement {
    ];

    return html`
-      <ops-sectionheading>Network Targets</ops-sectionheading>
+      <dees-heading level="hr">Network Targets</dees-heading>
      <div class="targetsContainer">
        <dees-statsgrid .tiles=${statsTiles}></dees-statsgrid>
        <dees-table
          .heading1=${'Network Targets'}
          .heading2=${'Reusable host:port destinations for routes'}
          .data=${targets}
+          .showColumnFilters=${true}
          .displayFunction=${(target: interfaces.data.INetworkTarget) => ({
            Name: target.name,
            Host: Array.isArray(target.host) ? target.host.join(', ') : target.host,
--- a/ts_web/elements/network/ops-view-remoteingress.ts
+++ b/ts_web/elements/network/ops-view-remoteingress.ts
@@ -7,9 +7,9 @@ import {
  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 * 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 {
@@ -174,7 +174,7 @@ export class OpsViewRemoteIngress extends DeesElement {
    ];

    return html`
-      <ops-sectionheading>Remote Ingress</ops-sectionheading>
+      <dees-heading level="hr">Remote Ingress</dees-heading>

      ${this.riState.newEdgeId ? html`
        <div class="secretDialog">
@@ -220,6 +220,7 @@ export class OpsViewRemoteIngress extends DeesElement {
          .heading1=${'Edge Nodes'}
          .heading2=${'Manage remote ingress edge registrations'}
          .data=${this.riState.edges}
+          .showColumnFilters=${true}
          .displayFunction=${(edge: interfaces.data.IRemoteIngress) => ({
            name: edge.name,
            status: this.getEdgeStatusHtml(edge),
--- a/ts_web/elements/network/ops-view-routes.ts
+++ b/ts_web/elements/network/ops-view-routes.ts
@@ -1,6 +1,6 @@
-import * as appstate from '../appstate.js';
-import * as interfaces from '../../dist_ts_interfaces/index.js';
-import { viewHostCss } from './shared/css.js';
+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';

 import {
@@ -13,6 +13,40 @@ import {
  type TemplateResult,
 } from '@design.estate/dees-element';

+// TLS dropdown options shared by create and edit dialogs
+const tlsModeOptions = [
+  { key: 'none', option: '(none — no TLS)' },
+  { key: 'passthrough', option: 'Passthrough' },
+  { key: 'terminate', option: 'Terminate' },
+  { key: 'terminate-and-reencrypt', option: 'Terminate & Re-encrypt' },
+];
+const tlsCertOptions = [
+  { key: 'auto', option: 'Auto (ACME/Let\'s Encrypt)' },
+  { key: 'custom', option: 'Custom certificate' },
+];
+
+/**
+ * Toggle TLS form field visibility based on selected TLS mode and certificate type.
+ */
+function setupTlsVisibility(formEl: any) {
+  const updateVisibility = async () => {
+    const data = await formEl.collectFormData();
+    const contentEl = formEl.closest('.content') || formEl.parentElement;
+    if (!contentEl) return;
+    const tlsModeValue = data.tlsMode;
+    const modeKey = typeof tlsModeValue === 'string' ? tlsModeValue : tlsModeValue?.key;
+    const needsCert = modeKey === 'terminate' || modeKey === 'terminate-and-reencrypt';
+    const certGroup = contentEl.querySelector('.tlsCertificateGroup') as HTMLElement;
+    if (certGroup) certGroup.style.display = needsCert ? 'flex' : 'none';
+    const tlsCertValue = data.tlsCertificate;
+    const certKey = typeof tlsCertValue === 'string' ? tlsCertValue : tlsCertValue?.key;
+    const customGroup = contentEl.querySelector('.tlsCustomCertGroup') as HTMLElement;
+    if (customGroup) customGroup.style.display = (needsCert && certKey === 'custom') ? 'flex' : 'none';
+  };
+  formEl.changeSubject.subscribe(() => updateVisibility());
+  updateVisibility();
+}
+
@customElement('ops-view-routes')
 export class OpsViewRoutes extends DeesElement {
  @state() accessor routeState: appstate.IRouteManagementState = {
@@ -166,7 +200,7 @@ export class OpsViewRoutes extends DeesElement {
    });

    return html`
-      <ops-sectionheading>Route Management</ops-sectionheading>
+      <dees-heading level="hr">Route Management</dees-heading>

      <div class="routesContainer">
        <dees-statsgrid
@@ -303,7 +337,7 @@ export class OpsViewRoutes extends DeesElement {
            <p>Source: <strong style="color: #0af;">programmatic</strong></p>
            <p>Status: <strong>${merged.enabled ? 'Enabled' : 'Disabled'}</strong></p>
            <p>ID: <code style="color: #888;">${merged.storedRouteId}</code></p>
-            ${meta?.securityProfileName ? html`<p>Security Profile: <strong style="color: #a78bfa;">${meta.securityProfileName}</strong></p>` : ''}
+            ${meta?.sourceProfileName ? html`<p>Source Profile: <strong style="color: #a78bfa;">${meta.sourceProfileName}</strong></p>` : ''}
            ${meta?.networkTargetName ? html`<p>Network Target: <strong style="color: #a78bfa;">${meta.networkTargetName}</strong></p>` : ''}
          </div>
        `,
@@ -423,7 +457,18 @@ export class OpsViewRoutes extends DeesElement {
      : '';
    const currentTargetPort = firstTarget?.port != null ? String(firstTarget.port) : '';

-    await DeesModal.createAndShow({
+    // Compute current TLS state for pre-population
+    const currentTls = (route.action as any).tls;
+    const currentTlsMode = currentTls?.mode || 'none';
+    const currentTlsCert = currentTls
+      ? (currentTls.certificate === 'auto' || !currentTls.certificate ? 'auto' : 'custom')
+      : 'auto';
+    const currentCustomKey = (typeof currentTls?.certificate === 'object') ? currentTls.certificate.key : '';
+    const currentCustomCert = (typeof currentTls?.certificate === 'object') ? currentTls.certificate.cert : '';
+    const needsCert = currentTlsMode === 'terminate' || currentTlsMode === 'terminate-and-reencrypt';
+    const isCustom = currentTlsCert === 'custom';
+
+    const editModal = await DeesModal.createAndShow({
      heading: `Edit Route: ${route.name}`,
      content: html`
        <dees-form>
@@ -431,10 +476,18 @@ export class OpsViewRoutes extends DeesElement {
          <dees-input-text .key=${'ports'} .label=${'Ports (comma-separated)'} .value=${currentPorts} .required=${true}></dees-input-text>
          <dees-input-list .key=${'domains'} .label=${'Domains'} .placeholder=${'Add domain...'} .value=${currentDomains}></dees-input-list>
          <dees-input-text .key=${'priority'} .label=${'Priority (higher = matched first)'} .value=${route.priority != null ? String(route.priority) : ''}></dees-input-text>
-          <dees-input-dropdown .key=${'securityProfileRef'} .label=${'Security Profile'} .options=${profileOptions} .selectedKey=${merged.metadata?.securityProfileRef || ''}></dees-input-dropdown>
-          <dees-input-dropdown .key=${'networkTargetRef'} .label=${'Network Target'} .options=${targetOptions} .selectedKey=${merged.metadata?.networkTargetRef || ''}></dees-input-dropdown>
+          <dees-input-dropdown .key=${'sourceProfileRef'} .label=${'Source Profile'} .options=${profileOptions} .selectedOption=${profileOptions.find((o) => o.key === (merged.metadata?.sourceProfileRef || '')) || null}></dees-input-dropdown>
+          <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 (if no target selected)'} .value=${currentTargetHost}></dees-input-text>
          <dees-input-text .key=${'targetPort'} .label=${'Target Port (if no target selected)'} .value=${currentTargetPort}></dees-input-text>
+          <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>
+            <div class="tlsCustomCertGroup" style="display: ${needsCert && isCustom ? 'flex' : 'none'}; flex-direction: column; gap: 16px;">
+              <dees-input-text .key=${'tlsCertKey'} .label=${'Private Key (PEM)'} .value=${currentCustomKey}></dees-input-text>
+              <dees-input-text .key=${'tlsCertCert'} .label=${'Certificate (PEM)'} .value=${currentCustomCert}></dees-input-text>
+            </div>
+          </div>
        </dees-form>
      `,
      menuOptions: [
@@ -476,12 +529,35 @@ export class OpsViewRoutes extends DeesElement {
              ...(priority != null && !isNaN(priority) ? { priority } : {}),
            };

-            const metadata: any = {};
-            if (formData.securityProfileRef) {
-              metadata.securityProfileRef = formData.securityProfileRef;
+            // Build TLS config from form
+            const tlsModeValue = formData.tlsMode as any;
+            const tlsModeKey = typeof tlsModeValue === 'string' ? tlsModeValue : tlsModeValue?.key;
+            if (tlsModeKey && tlsModeKey !== 'none') {
+              const tls: any = { mode: tlsModeKey };
+              if (tlsModeKey !== 'passthrough') {
+                const tlsCertValue = formData.tlsCertificate as any;
+                const tlsCertKey = typeof tlsCertValue === 'string' ? tlsCertValue : tlsCertValue?.key;
+                if (tlsCertKey === 'custom' && formData.tlsCertKey && formData.tlsCertCert) {
+                  tls.certificate = { key: formData.tlsCertKey, cert: formData.tlsCertCert };
+                } else {
+                  tls.certificate = 'auto';
+                }
+              }
+              updatedRoute.action.tls = tls;
+            } else {
+              updatedRoute.action.tls = null; // explicit removal
            }
-            if (formData.networkTargetRef) {
-              metadata.networkTargetRef = formData.networkTargetRef;
+
+            const metadata: any = {};
+            const profileRefValue = formData.sourceProfileRef as any;
+            const profileKey = typeof profileRefValue === 'string' ? profileRefValue : profileRefValue?.key;
+            if (profileKey) {
+              metadata.sourceProfileRef = profileKey;
+            }
+            const targetRefValue = formData.networkTargetRef as any;
+            const targetKey = typeof targetRefValue === 'string' ? targetRefValue : targetRefValue?.key;
+            if (targetKey) {
+              metadata.networkTargetRef = targetKey;
            }

            await appstate.routeManagementStatePart.dispatchAction(
@@ -497,6 +573,12 @@ export class OpsViewRoutes extends DeesElement {
        },
      ],
    });
+    // Setup conditional TLS field visibility after modal renders
+    const editForm = editModal?.shadowRoot?.querySelector('.content')?.querySelector('dees-form') as any;
+    if (editForm) {
+      await editForm.updateComplete;
+      setupTlsVisibility(editForm);
+    }
  }

  private async showCreateRouteDialog() {
@@ -520,7 +602,7 @@ export class OpsViewRoutes extends DeesElement {
      })),
    ];

-    await DeesModal.createAndShow({
+    const createModal = await DeesModal.createAndShow({
      heading: 'Add Programmatic Route',
      content: html`
        <dees-form>
@@ -528,10 +610,18 @@ export class OpsViewRoutes extends DeesElement {
          <dees-input-text .key=${'ports'} .label=${'Ports (comma-separated)'} .required=${true}></dees-input-text>
          <dees-input-list .key=${'domains'} .label=${'Domains'} .placeholder=${'Add domain...'}></dees-input-list>
          <dees-input-text .key=${'priority'} .label=${'Priority (higher = matched first)'}></dees-input-text>
-          <dees-input-dropdown .key=${'securityProfileRef'} .label=${'Security Profile'} .options=${profileOptions} .selectedKey=${''}></dees-input-dropdown>
-          <dees-input-dropdown .key=${'networkTargetRef'} .label=${'Network Target'} .options=${targetOptions} .selectedKey=${''}></dees-input-dropdown>
+          <dees-input-dropdown .key=${'sourceProfileRef'} .label=${'Source Profile'} .options=${profileOptions}></dees-input-dropdown>
+          <dees-input-dropdown .key=${'networkTargetRef'} .label=${'Network Target'} .options=${targetOptions}></dees-input-dropdown>
          <dees-input-text .key=${'targetHost'} .label=${'Target Host (if no target selected)'} .value=${'localhost'}></dees-input-text>
          <dees-input-text .key=${'targetPort'} .label=${'Target Port (if no target selected)'}></dees-input-text>
+          <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>
+            <div class="tlsCustomCertGroup" style="display: none; flex-direction: column; gap: 16px;">
+              <dees-input-text .key=${'tlsCertKey'} .label=${'Private Key (PEM)'}></dees-input-text>
+              <dees-input-text .key=${'tlsCertCert'} .label=${'Certificate (PEM)'}></dees-input-text>
+            </div>
+          </div>
        </dees-form>
      `,
      menuOptions: [
@@ -573,13 +663,34 @@ export class OpsViewRoutes extends DeesElement {
              ...(priority != null && !isNaN(priority) ? { priority } : {}),
            };

+            // Build TLS config from form
+            const tlsModeValue = formData.tlsMode as any;
+            const tlsModeKey = typeof tlsModeValue === 'string' ? tlsModeValue : tlsModeValue?.key;
+            if (tlsModeKey && tlsModeKey !== 'none') {
+              const tls: any = { mode: tlsModeKey };
+              if (tlsModeKey !== 'passthrough') {
+                const tlsCertValue = formData.tlsCertificate as any;
+                const tlsCertKey = typeof tlsCertValue === 'string' ? tlsCertValue : tlsCertValue?.key;
+                if (tlsCertKey === 'custom' && formData.tlsCertKey && formData.tlsCertCert) {
+                  tls.certificate = { key: formData.tlsCertKey, cert: formData.tlsCertCert };
+                } else {
+                  tls.certificate = 'auto';
+                }
+              }
+              route.action.tls = tls;
+            }
+
            // Build metadata if profile/target selected
            const metadata: any = {};
-            if (formData.securityProfileRef) {
-              metadata.securityProfileRef = formData.securityProfileRef;
+            const profileRefValue = formData.sourceProfileRef as any;
+            const profileKey = typeof profileRefValue === 'string' ? profileRefValue : profileRefValue?.key;
+            if (profileKey) {
+              metadata.sourceProfileRef = profileKey;
            }
-            if (formData.networkTargetRef) {
-              metadata.networkTargetRef = formData.networkTargetRef;
+            const targetRefValue = formData.networkTargetRef as any;
+            const targetKey = typeof targetRefValue === 'string' ? targetRefValue : targetRefValue?.key;
+            if (targetKey) {
+              metadata.networkTargetRef = targetKey;
            }

            await appstate.routeManagementStatePart.dispatchAction(
@@ -594,6 +705,12 @@ export class OpsViewRoutes extends DeesElement {
        },
      ],
    });
+    // Setup conditional TLS field visibility after modal renders
+    const createForm = createModal?.shadowRoot?.querySelector('.content')?.querySelector('dees-form') as any;
+    if (createForm) {
+      await createForm.updateComplete;
+      setupTlsVisibility(createForm);
+    }
  }

  private refreshData() {
--- a/ts_web/elements/network/ops-view-sourceprofiles.ts
+++ b/ts_web/elements/network/ops-view-sourceprofiles.ts
@@ -7,19 +7,19 @@ import {
  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 * 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-securityprofiles': OpsViewSecurityProfiles;
+    'ops-view-sourceprofiles': OpsViewSourceProfiles;
  }
 }

-@customElement('ops-view-securityprofiles')
-export class OpsViewSecurityProfiles extends DeesElement {
+@customElement('ops-view-sourceprofiles')
+export class OpsViewSourceProfiles extends DeesElement {
  @state()
  accessor profilesState: appstate.IProfilesTargetsState = appstate.profilesTargetsStatePart.getState()!;

@@ -58,20 +58,21 @@ export class OpsViewSecurityProfiles extends DeesElement {
        type: 'number',
        value: profiles.length,
        icon: 'lucide:shieldCheck',
-        description: 'Reusable security profiles',
+        description: 'Reusable source profiles',
        color: '#3b82f6',
      },
    ];

    return html`
-      <ops-sectionheading>Security Profiles</ops-sectionheading>
+      <dees-heading level="hr">Source Profiles</dees-heading>
      <div class="profilesContainer">
        <dees-statsgrid .tiles=${statsTiles}></dees-statsgrid>
        <dees-table
-          .heading1=${'Security Profiles'}
-          .heading2=${'Reusable security configurations for routes'}
+          .heading1=${'Source Profiles'}
+          .heading2=${'Reusable source configurations for routes'}
          .data=${profiles}
-          .displayFunction=${(profile: interfaces.data.ISecurityProfile) => ({
+          .showColumnFilters=${true}
+          .displayFunction=${(profile: interfaces.data.ISourceProfile) => ({
            Name: profile.name,
            Description: profile.description || '-',
            'IP Allow List': (profile.security?.ipAllowList || []).join(', ') || '-',
@@ -107,7 +108,7 @@ export class OpsViewSecurityProfiles extends DeesElement {
              iconName: 'lucide:pencil',
              type: ['inRow', 'contextmenu'] as any,
              actionFunc: async (actionData: any) => {
-                const profile = actionData.item as interfaces.data.ISecurityProfile;
+                const profile = actionData.item as interfaces.data.ISourceProfile;
                await this.showEditProfileDialog(profile);
              },
            },
@@ -116,7 +117,7 @@ export class OpsViewSecurityProfiles extends DeesElement {
              iconName: 'lucide:trash2',
              type: ['inRow', 'contextmenu'] as any,
              actionFunc: async (actionData: any) => {
-                const profile = actionData.item as interfaces.data.ISecurityProfile;
+                const profile = actionData.item as interfaces.data.ISourceProfile;
                await this.deleteProfile(profile);
              },
            },
@@ -129,7 +130,7 @@ export class OpsViewSecurityProfiles extends DeesElement {
  private async showCreateProfileDialog() {
    const { DeesModal } = await import('@design.estate/dees-catalog');
    DeesModal.createAndShow({
-      heading: 'Create Security Profile',
+      heading: 'Create Source Profile',
      content: html`
        <dees-form>
          <dees-input-text .key=${'name'} .label=${'Name'} .required=${true}></dees-input-text>
@@ -149,7 +150,8 @@ export class OpsViewSecurityProfiles extends DeesElement {
            const data = await form.collectFormData();
            const ipAllowList: string[] = Array.isArray(data.ipAllowList) ? data.ipAllowList : [];
            const ipBlockList: string[] = Array.isArray(data.ipBlockList) ? data.ipBlockList : [];
-            const maxConnections = data.maxConnections ? parseInt(String(data.maxConnections)) : undefined;
+            const parsed = data.maxConnections ? parseInt(String(data.maxConnections), 10) : NaN;
+            const maxConnections = Number.isNaN(parsed) ? undefined : parsed;

            await appstate.profilesTargetsStatePart.dispatchAction(appstate.createProfileAction, {
              name: String(data.name),
@@ -167,7 +169,7 @@ export class OpsViewSecurityProfiles extends DeesElement {
    });
  }

-  private async showEditProfileDialog(profile: interfaces.data.ISecurityProfile) {
+  private async showEditProfileDialog(profile: interfaces.data.ISourceProfile) {
    const { DeesModal } = await import('@design.estate/dees-catalog');
    DeesModal.createAndShow({
      heading: `Edit Profile: ${profile.name}`,
@@ -190,7 +192,8 @@ export class OpsViewSecurityProfiles extends DeesElement {
            const data = await form.collectFormData();
            const ipAllowList: string[] = Array.isArray(data.ipAllowList) ? data.ipAllowList : [];
            const ipBlockList: string[] = Array.isArray(data.ipBlockList) ? data.ipBlockList : [];
-            const maxConnections = data.maxConnections ? parseInt(String(data.maxConnections)) : undefined;
+            const parsed = data.maxConnections ? parseInt(String(data.maxConnections), 10) : NaN;
+            const maxConnections = Number.isNaN(parsed) ? undefined : parsed;

            await appstate.profilesTargetsStatePart.dispatchAction(appstate.updateProfileAction, {
              id: profile.id,
@@ -209,7 +212,7 @@ export class OpsViewSecurityProfiles extends DeesElement {
    });
  }

-  private async deleteProfile(profile: interfaces.data.ISecurityProfile) {
+  private async deleteProfile(profile: interfaces.data.ISourceProfile) {
    await appstate.profilesTargetsStatePart.dispatchAction(appstate.deleteProfileAction, {
      id: profile.id,
      force: false,
--- a/ts_web/elements/network/ops-view-targetprofiles.ts
+++ b/ts_web/elements/network/ops-view-targetprofiles.ts
@@ -0,0 +1,392 @@
+import {
+  DeesElement,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  state,
+  cssManager,
+} from '@design.estate/dees-element';
+import * as plugins from '../../plugins.js';
+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-targetprofiles': OpsViewTargetProfiles;
+  }
+}
+
+@customElement('ops-view-targetprofiles')
+export class OpsViewTargetProfiles extends DeesElement {
+  @state()
+  accessor targetProfilesState: appstate.ITargetProfilesState = appstate.targetProfilesStatePart.getState()!;
+
+  constructor() {
+    super();
+    const sub = appstate.targetProfilesStatePart.select().subscribe((newState) => {
+      this.targetProfilesState = newState;
+    });
+    this.rxSubscriptions.push(sub);
+  }
+
+  async connectedCallback() {
+    await super.connectedCallback();
+    await appstate.targetProfilesStatePart.dispatchAction(appstate.fetchTargetProfilesAction, null);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      .profilesContainer {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+
+      .tagBadge {
+        display: inline-flex;
+        padding: 2px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+        background: ${cssManager.bdTheme('#eff6ff', '#172554')};
+        color: ${cssManager.bdTheme('#1e40af', '#60a5fa')};
+        margin-right: 4px;
+        margin-bottom: 2px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const profiles = this.targetProfilesState.profiles;
+
+    const statsTiles: IStatsTile[] = [
+      {
+        id: 'totalProfiles',
+        title: 'Total Profiles',
+        type: 'number',
+        value: profiles.length,
+        icon: 'lucide:target',
+        description: 'Reusable target profiles',
+        color: '#8b5cf6',
+      },
+    ];
+
+    return html`
+      <dees-heading level="hr">Target Profiles</dees-heading>
+      <div class="profilesContainer">
+        <dees-statsgrid .tiles=${statsTiles}></dees-statsgrid>
+        <dees-table
+          .heading1=${'Target Profiles'}
+          .heading2=${'Define what resources VPN clients can access'}
+          .data=${profiles}
+          .showColumnFilters=${true}
+          .displayFunction=${(profile: interfaces.data.ITargetProfile) => ({
+            Name: profile.name,
+            Description: profile.description || '-',
+            Domains: profile.domains?.length
+              ? html`${profile.domains.map(d => html`<span class="tagBadge">${d}</span>`)}`
+              : '-',
+            Targets: profile.targets?.length
+              ? html`${profile.targets.map(t => html`<span class="tagBadge">${t.ip}:${t.port}</span>`)}`
+              : '-',
+            'Route Refs': profile.routeRefs?.length
+              ? html`${profile.routeRefs.map(r => html`<span class="tagBadge">${r}</span>`)}`
+              : '-',
+            Created: new Date(profile.createdAt).toLocaleDateString(),
+          })}
+          .dataActions=${[
+            {
+              name: 'Create Profile',
+              iconName: 'lucide:plus',
+              type: ['header' as const],
+              actionFunc: async () => {
+                await this.showCreateProfileDialog();
+              },
+            },
+            {
+              name: 'Refresh',
+              iconName: 'lucide:rotateCw',
+              type: ['header' as const],
+              actionFunc: async () => {
+                await appstate.targetProfilesStatePart.dispatchAction(appstate.fetchTargetProfilesAction, null);
+              },
+            },
+            {
+              name: 'Detail',
+              iconName: 'lucide:info',
+              type: ['doubleClick'] as any,
+              actionFunc: async (actionData: any) => {
+                const profile = actionData.item as interfaces.data.ITargetProfile;
+                await this.showDetailDialog(profile);
+              },
+            },
+            {
+              name: 'Edit',
+              iconName: 'lucide:pencil',
+              type: ['inRow', 'contextmenu'] as any,
+              actionFunc: async (actionData: any) => {
+                const profile = actionData.item as interfaces.data.ITargetProfile;
+                await this.showEditProfileDialog(profile);
+              },
+            },
+            {
+              name: 'Delete',
+              iconName: 'lucide:trash2',
+              type: ['inRow', 'contextmenu'] as any,
+              actionFunc: async (actionData: any) => {
+                const profile = actionData.item as interfaces.data.ITargetProfile;
+                await this.deleteProfile(profile);
+              },
+            },
+          ]}
+        ></dees-table>
+      </div>
+    `;
+  }
+
+  private getRouteCandidates() {
+    const routeState = appstate.routeManagementStatePart.getState();
+    const routes = routeState?.mergedRoutes || [];
+    return routes
+      .filter((mr) => mr.route.name)
+      .map((mr) => ({ viewKey: mr.route.name! }));
+  }
+
+  private async ensureRoutesLoaded() {
+    const routeState = appstate.routeManagementStatePart.getState();
+    if (!routeState?.mergedRoutes?.length) {
+      await appstate.routeManagementStatePart.dispatchAction(appstate.fetchMergedRoutesAction, null);
+    }
+  }
+
+  private async showCreateProfileDialog() {
+    const { DeesModal } = await import('@design.estate/dees-catalog');
+    await this.ensureRoutesLoaded();
+    const routeCandidates = this.getRouteCandidates();
+
+    DeesModal.createAndShow({
+      heading: 'Create Target Profile',
+      content: html`
+        <dees-form>
+          <dees-input-text .key=${'name'} .label=${'Name'} .required=${true}></dees-input-text>
+          <dees-input-text .key=${'description'} .label=${'Description'}></dees-input-text>
+          <dees-input-list .key=${'domains'} .label=${'Domains'} .placeholder=${'e.g. *.example.com'} .allowFreeform=${true}></dees-input-list>
+          <dees-input-list .key=${'targets'} .label=${'Targets (ip:port)'} .placeholder=${'e.g. 10.0.0.1:443'} .allowFreeform=${true}></dees-input-list>
+          <dees-input-list .key=${'routeRefs'} .label=${'Route Refs'} .placeholder=${'Type to search routes...'} .candidates=${routeCandidates} .allowFreeform=${true}></dees-input-list>
+        </dees-form>
+      `,
+      menuOptions: [
+        { name: 'Cancel', iconName: 'lucide:x', action: async (modalArg: any) => modalArg.destroy() },
+        {
+          name: 'Create',
+          iconName: 'lucide:plus',
+          action: async (modalArg: any) => {
+            const form = modalArg.shadowRoot?.querySelector('.content')?.querySelector('dees-form');
+            if (!form) return;
+            const data = await form.collectFormData();
+            if (!data.name) return;
+
+            const domains: string[] = Array.isArray(data.domains) ? data.domains : [];
+            const targetStrings: string[] = Array.isArray(data.targets) ? data.targets : [];
+            const targets = targetStrings
+              .map((s: string) => {
+                const lastColon = s.lastIndexOf(':');
+                if (lastColon === -1) return null;
+                return {
+                  ip: s.substring(0, lastColon),
+                  port: parseInt(s.substring(lastColon + 1), 10),
+                };
+              })
+              .filter((t): t is { ip: string; port: number } => t !== null && !isNaN(t.port));
+            const routeRefs: string[] = Array.isArray(data.routeRefs) ? data.routeRefs : [];
+
+            await appstate.targetProfilesStatePart.dispatchAction(appstate.createTargetProfileAction, {
+              name: String(data.name),
+              description: data.description ? String(data.description) : undefined,
+              domains: domains.length > 0 ? domains : undefined,
+              targets: targets.length > 0 ? targets : undefined,
+              routeRefs: routeRefs.length > 0 ? routeRefs : undefined,
+            });
+            modalArg.destroy();
+          },
+        },
+      ],
+    });
+  }
+
+  private async showEditProfileDialog(profile: interfaces.data.ITargetProfile) {
+    const currentDomains = profile.domains || [];
+    const currentTargets = profile.targets?.map(t => `${t.ip}:${t.port}`) || [];
+    const currentRouteRefs = profile.routeRefs || [];
+
+    const { DeesModal } = await import('@design.estate/dees-catalog');
+    await this.ensureRoutesLoaded();
+    const routeCandidates = this.getRouteCandidates();
+
+    DeesModal.createAndShow({
+      heading: `Edit Profile: ${profile.name}`,
+      content: html`
+        <dees-form>
+          <dees-input-text .key=${'name'} .label=${'Name'} .value=${profile.name}></dees-input-text>
+          <dees-input-text .key=${'description'} .label=${'Description'} .value=${profile.description || ''}></dees-input-text>
+          <dees-input-list .key=${'domains'} .label=${'Domains'} .placeholder=${'e.g. *.example.com'} .allowFreeform=${true} .value=${currentDomains}></dees-input-list>
+          <dees-input-list .key=${'targets'} .label=${'Targets (ip:port)'} .placeholder=${'e.g. 10.0.0.1:443'} .allowFreeform=${true} .value=${currentTargets}></dees-input-list>
+          <dees-input-list .key=${'routeRefs'} .label=${'Route Refs'} .placeholder=${'Type to search routes...'} .candidates=${routeCandidates} .allowFreeform=${true} .value=${currentRouteRefs}></dees-input-list>
+        </dees-form>
+      `,
+      menuOptions: [
+        { name: 'Cancel', iconName: 'lucide:x', action: async (modalArg: any) => modalArg.destroy() },
+        {
+          name: 'Save',
+          iconName: 'lucide:check',
+          action: async (modalArg: any) => {
+            const form = modalArg.shadowRoot?.querySelector('.content')?.querySelector('dees-form');
+            if (!form) return;
+            const data = await form.collectFormData();
+
+            const domains: string[] = Array.isArray(data.domains) ? data.domains : [];
+            const targetStrings: string[] = Array.isArray(data.targets) ? data.targets : [];
+            const targets = targetStrings
+              .map((s: string) => {
+                const lastColon = s.lastIndexOf(':');
+                if (lastColon === -1) return null;
+                return {
+                  ip: s.substring(0, lastColon),
+                  port: parseInt(s.substring(lastColon + 1), 10),
+                };
+              })
+              .filter((t): t is { ip: string; port: number } => t !== null && !isNaN(t.port));
+            const routeRefs: string[] = Array.isArray(data.routeRefs) ? data.routeRefs : [];
+
+            await appstate.targetProfilesStatePart.dispatchAction(appstate.updateTargetProfileAction, {
+              id: profile.id,
+              name: String(data.name),
+              description: data.description ? String(data.description) : undefined,
+              domains,
+              targets,
+              routeRefs,
+            });
+            modalArg.destroy();
+          },
+        },
+      ],
+    });
+  }
+
+  private async showDetailDialog(profile: interfaces.data.ITargetProfile) {
+    const { DeesModal } = await import('@design.estate/dees-catalog');
+
+    // Fetch usage (which VPN clients reference this profile)
+    let usageHtml = html`<p style="color: #9ca3af;">Loading usage...</p>`;
+    try {
+      const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+        interfaces.requests.IReq_GetTargetProfileUsage
+      >('/typedrequest', 'getTargetProfileUsage');
+      const response = await request.fire({
+        identity: appstate.loginStatePart.getState()!.identity!,
+        id: profile.id,
+      });
+      if (response.clients.length > 0) {
+        usageHtml = html`
+          <div style="margin-top: 8px;">
+            ${response.clients.map(c => html`
+              <div style="padding: 4px 0; font-size: 13px;">
+                <strong>${c.clientId}</strong>${c.description ? html` - ${c.description}` : ''}
+              </div>
+            `)}
+          </div>
+        `;
+      } else {
+        usageHtml = html`<p style="color: #9ca3af; font-size: 13px;">No VPN clients reference this profile.</p>`;
+      }
+    } catch {
+      usageHtml = html`<p style="color: #9ca3af;">Usage data unavailable.</p>`;
+    }
+
+    DeesModal.createAndShow({
+      heading: `Target Profile: ${profile.name}`,
+      content: html`
+        <div style="display: flex; flex-direction: column; gap: 12px;">
+          <div>
+            <div style="font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};">Description</div>
+            <div style="font-size: 14px; margin-top: 4px;">${profile.description || '-'}</div>
+          </div>
+          <div>
+            <div style="font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};">Domains</div>
+            <div style="font-size: 14px; margin-top: 4px;">
+              ${profile.domains?.length
+                ? profile.domains.map(d => html`<span class="tagBadge">${d}</span>`)
+                : '-'}
+            </div>
+          </div>
+          <div>
+            <div style="font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};">Targets</div>
+            <div style="font-size: 14px; margin-top: 4px;">
+              ${profile.targets?.length
+                ? profile.targets.map(t => html`<span class="tagBadge">${t.ip}:${t.port}</span>`)
+                : '-'}
+            </div>
+          </div>
+          <div>
+            <div style="font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};">Route Refs</div>
+            <div style="font-size: 14px; margin-top: 4px;">
+              ${profile.routeRefs?.length
+                ? profile.routeRefs.map(r => html`<span class="tagBadge">${r}</span>`)
+                : '-'}
+            </div>
+          </div>
+          <div>
+            <div style="font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};">Created</div>
+            <div style="font-size: 14px; margin-top: 4px;">${new Date(profile.createdAt).toLocaleString()} by ${profile.createdBy}</div>
+          </div>
+          <div>
+            <div style="font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};">Updated</div>
+            <div style="font-size: 14px; margin-top: 4px;">${new Date(profile.updatedAt).toLocaleString()}</div>
+          </div>
+          <div>
+            <div style="font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};">VPN Clients Using This Profile</div>
+            ${usageHtml}
+          </div>
+        </div>
+      `,
+      menuOptions: [
+        { name: 'Close', iconName: 'lucide:x', action: async (m: any) => await m.destroy() },
+      ],
+    });
+  }
+
+  private async deleteProfile(profile: interfaces.data.ITargetProfile) {
+    await appstate.targetProfilesStatePart.dispatchAction(appstate.deleteTargetProfileAction, {
+      id: profile.id,
+      force: false,
+    });
+
+    const currentState = appstate.targetProfilesStatePart.getState()!;
+    if (currentState.error?.includes('in use')) {
+      const { DeesModal } = await import('@design.estate/dees-catalog');
+      DeesModal.createAndShow({
+        heading: 'Profile In Use',
+        content: html`<p>${currentState.error} Force delete?</p>`,
+        menuOptions: [
+          {
+            name: 'Force Delete',
+            iconName: 'lucide:trash2',
+            action: async (modalArg: any) => {
+              await appstate.targetProfilesStatePart.dispatchAction(appstate.deleteTargetProfileAction, {
+                id: profile.id,
+                force: true,
+              });
+              modalArg.destroy();
+            },
+          },
+          { name: 'Cancel', iconName: 'lucide:x', action: async (modalArg: any) => modalArg.destroy() },
+        ],
+      });
+    }
+  }
+}
--- a/ts_web/elements/network/ops-view-vpn.ts
+++ b/ts_web/elements/network/ops-view-vpn.ts
@@ -7,10 +7,10 @@ import {
  state,
  cssManager,
 } from '@design.estate/dees-element';
-import * as plugins from '../plugins.js';
-import * as appstate from '../appstate.js';
-import * as interfaces from '../../dist_ts_interfaces/index.js';
-import { viewHostCss } from './shared/css.js';
+import * as plugins from '../../plugins.js';
+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';

 /**
@@ -28,7 +28,7 @@ function setupFormVisibility(formEl: any) {
    const staticIpGroup = contentEl.querySelector('.staticIpGroup') as HTMLElement;
    const vlanIdGroup = contentEl.querySelector('.vlanIdGroup') as HTMLElement;
    const aclGroup = contentEl.querySelector('.aclGroup') as HTMLElement;
-    if (hostIpGroup) hostIpGroup.style.display = data.forceDestinationSmartproxy ? 'none' : show;
+    if (hostIpGroup) hostIpGroup.style.display = show; // always show (forceTarget is always on)
    if (hostIpDetails) hostIpDetails.style.display = data.useHostIp ? show : 'none';
    if (staticIpGroup) staticIpGroup.style.display = data.useDhcp ? 'none' : show;
    if (vlanIdGroup) vlanIdGroup.style.display = data.forceVlan ? show : 'none';
@@ -60,6 +60,8 @@ export class OpsViewVpn extends DeesElement {
  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);
  }

  public static styles = [
@@ -221,7 +223,7 @@ export class OpsViewVpn extends DeesElement {
    ];

    return html`
-      <ops-sectionheading>VPN</ops-sectionheading>
+      <dees-heading level="hr">VPN</dees-heading>
      <div class="vpnContainer">

      ${this.vpnState.newClientConfig ? html`
@@ -303,6 +305,7 @@ export class OpsViewVpn extends DeesElement {
        .heading1=${'VPN Clients'}
        .heading2=${'Manage WireGuard and SmartVPN client registrations'}
        .data=${clients}
+        .showColumnFilters=${true}
        .displayFunction=${(client: interfaces.data.IVpnClient) => {
          const conn = this.getConnectedInfo(client);
          let statusHtml;
@@ -315,9 +318,7 @@ export class OpsViewVpn extends DeesElement {
            statusHtml = html`<span class="statusBadge enabled" style="background: ${cssManager.bdTheme('#eff6ff', '#172554')}; color: ${cssManager.bdTheme('#1e40af', '#60a5fa')};">offline</span>`;
          }
          let routingHtml;
-          if (client.forceDestinationSmartproxy !== false) {
-            routingHtml = html`<span class="statusBadge enabled">SmartProxy</span>`;
-          } else if (client.useHostIp) {
+          if (client.useHostIp) {
            routingHtml = html`<span class="statusBadge" style="background: ${cssManager.bdTheme('#f3e8ff', '#3b0764')}; color: ${cssManager.bdTheme('#7c3aed', '#c084fc')};">Host IP</span>`;
          } else {
            routingHtml = html`<span class="statusBadge" style="background: ${cssManager.bdTheme('#eff6ff', '#172554')}; color: ${cssManager.bdTheme('#1e40af', '#60a5fa')};">Direct</span>`;
@@ -327,8 +328,12 @@ export class OpsViewVpn extends DeesElement {
            'Status': statusHtml,
            'Routing': routingHtml,
            'VPN IP': client.assignedIp || '-',
-            'Tags': client.serverDefinedClientTags?.length
-              ? html`${client.serverDefinedClientTags.map(t => html`<span class="tagBadge">${t}</span>`)}`
+            '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>`;
+                })}`
              : '-',
            'Description': client.description || '-',
            'Created': new Date(client.createdAt).toLocaleDateString(),
@@ -341,15 +346,15 @@ export class OpsViewVpn extends DeesElement {
            type: ['header'],
            actionFunc: async () => {
              const { DeesModal } = await import('@design.estate/dees-catalog');
+              const profileCandidates = this.getTargetProfileCandidates();
              const createModal = await DeesModal.createAndShow({
                heading: 'Create VPN Client',
                content: html`
                  <dees-form>
                    <dees-input-text .key=${'clientId'} .label=${'Client ID'} .required=${true}></dees-input-text>
                    <dees-input-text .key=${'description'} .label=${'Description'}></dees-input-text>
-                    <dees-input-text .key=${'tags'} .label=${'Server-Defined Tags (comma-separated)'}></dees-input-text>
-                    <dees-input-checkbox .key=${'forceDestinationSmartproxy'} .label=${'Force traffic through SmartProxy'} .value=${true}></dees-input-checkbox>
-                    <div class="hostIpGroup" style="display: none; flex-direction: column; gap: 16px;">
+                    <dees-input-list .key=${'targetProfileNames'} .label=${'Target Profiles'} .placeholder=${'Type to search profiles...'} .candidates=${profileCandidates} .allowFreeform=${false}></dees-input-list>
+                    <div class="hostIpGroup" style="display: flex; flex-direction: column; gap: 16px;">
                      <dees-input-checkbox .key=${'useHostIp'} .label=${'Get Host IP'} .value=${false}></dees-input-checkbox>
                      <div class="hostIpDetails" style="display: none; flex-direction: column; gap: 16px;">
                        <dees-input-checkbox .key=${'useDhcp'} .label=${'Get IP through DHCP'} .value=${false}></dees-input-checkbox>
@@ -383,13 +388,12 @@ export class OpsViewVpn extends DeesElement {
                      if (!form) return;
                      const data = await form.collectFormData();
                      if (!data.clientId) return;
-                      const serverDefinedClientTags = data.tags
-                        ? data.tags.split(',').map((t: string) => t.trim()).filter(Boolean)
-                        : undefined;
+                      const targetProfileIds = this.resolveProfileNamesToIds(
+                        Array.isArray(data.targetProfileNames) ? data.targetProfileNames : [],
+                      );

                      // Apply conditional logic based on checkbox states
-                      const forceSmartproxy = data.forceDestinationSmartproxy ?? true;
-                      const useHostIp = !forceSmartproxy && (data.useHostIp ?? false);
+                      const useHostIp = data.useHostIp ?? false;
                      const useDhcp = useHostIp && (data.useDhcp ?? false);
                      const staticIp = useHostIp && !useDhcp && data.staticIp ? data.staticIp : undefined;
                      const forceVlan = useHostIp && (data.forceVlan ?? false);
@@ -406,8 +410,8 @@ export class OpsViewVpn extends DeesElement {
                      await appstate.vpnStatePart.dispatchAction(appstate.createVpnClientAction, {
                        clientId: data.clientId,
                        description: data.description || undefined,
-                        serverDefinedClientTags,
-                        forceDestinationSmartproxy: forceSmartproxy,
+                        targetProfileIds,
+
                        useHostIp: useHostIp || undefined,
                        useDhcp: useDhcp || undefined,
                        staticIp,
@@ -479,8 +483,8 @@ export class OpsViewVpn extends DeesElement {
                      <div class="infoItem"><span class="infoLabel">Transport</span><span class="infoValue">${conn.transport}</span></div>
                    ` : ''}
                    <div class="infoItem"><span class="infoLabel">Description</span><span class="infoValue">${client.description || '-'}</span></div>
-                    <div class="infoItem"><span class="infoLabel">Tags</span><span class="infoValue">${client.serverDefinedClientTags?.join(', ') || '-'}</span></div>
-                    <div class="infoItem"><span class="infoLabel">Routing</span><span class="infoValue">${client.forceDestinationSmartproxy !== false ? 'SmartProxy' : client.useHostIp ? 'Host IP' : 'Direct'}</span></div>
+                    <div class="infoItem"><span class="infoLabel">Target Profiles</span><span class="infoValue">${this.resolveProfileIdsToNames(client.targetProfileIds)?.join(', ') || '-'}</span></div>
+                    <div class="infoItem"><span class="infoLabel">Routing</span><span class="infoValue">${client.useHostIp ? 'Host IP' : 'SmartProxy'}</span></div>
                    ${client.useHostIp ? html`
                      <div class="infoItem"><span class="infoLabel">Host IP</span><span class="infoValue">${client.useDhcp ? 'DHCP' : client.staticIp ? `Static: ${client.staticIp}` : 'Not configured'}</span></div>
                      <div class="infoItem"><span class="infoLabel">VLAN</span><span class="infoValue">${client.forceVlan && client.vlanId != null ? `VLAN ${client.vlanId}` : 'No VLAN'}</span></div>
@@ -643,8 +647,8 @@ export class OpsViewVpn extends DeesElement {
              const client = actionData.item as interfaces.data.IVpnClient;
              const { DeesModal } = await import('@design.estate/dees-catalog');
              const currentDescription = client.description ?? '';
-              const currentTags = client.serverDefinedClientTags?.join(', ') ?? '';
-              const currentForceSmartproxy = client.forceDestinationSmartproxy ?? true;
+              const currentTargetProfileNames = this.resolveProfileIdsToNames(client.targetProfileIds) || [];
+              const profileCandidates = this.getTargetProfileCandidates();
              const currentUseHostIp = client.useHostIp ?? false;
              const currentUseDhcp = client.useDhcp ?? false;
              const currentStaticIp = client.staticIp ?? '';
@@ -659,9 +663,8 @@ export class OpsViewVpn extends DeesElement {
                content: html`
                  <dees-form>
                    <dees-input-text .key=${'description'} .label=${'Description'} .value=${currentDescription}></dees-input-text>
-                    <dees-input-text .key=${'tags'} .label=${'Server-Defined Tags (comma-separated)'} .value=${currentTags}></dees-input-text>
-                    <dees-input-checkbox .key=${'forceDestinationSmartproxy'} .label=${'Force traffic through SmartProxy'} .value=${currentForceSmartproxy}></dees-input-checkbox>
-                    <div class="hostIpGroup" style="display: ${currentForceSmartproxy ? 'none' : 'flex'}; flex-direction: column; gap: 16px;">
+                    <dees-input-list .key=${'targetProfileNames'} .label=${'Target Profiles'} .placeholder=${'Type to search profiles...'} .candidates=${profileCandidates} .allowFreeform=${false} .value=${currentTargetProfileNames}></dees-input-list>
+                    <div class="hostIpGroup" style="display: flex; flex-direction: column; gap: 16px;">
                      <dees-input-checkbox .key=${'useHostIp'} .label=${'Get Host IP'} .value=${currentUseHostIp}></dees-input-checkbox>
                      <div class="hostIpDetails" style="display: ${currentUseHostIp ? 'flex' : 'none'}; flex-direction: column; gap: 16px;">
                        <dees-input-checkbox .key=${'useDhcp'} .label=${'Get IP through DHCP'} .value=${currentUseDhcp}></dees-input-checkbox>
@@ -690,13 +693,12 @@ export class OpsViewVpn extends DeesElement {
                      const form = modalArg.shadowRoot?.querySelector('.content')?.querySelector('dees-form');
                      if (!form) return;
                      const data = await form.collectFormData();
-                      const serverDefinedClientTags = data.tags
-                        ? data.tags.split(',').map((t: string) => t.trim()).filter(Boolean)
-                        : [];
+                      const targetProfileIds = this.resolveProfileNamesToIds(
+                        Array.isArray(data.targetProfileNames) ? data.targetProfileNames : [],
+                      );

                      // Apply conditional logic based on checkbox states
-                      const forceSmartproxy = data.forceDestinationSmartproxy ?? true;
-                      const useHostIp = !forceSmartproxy && (data.useHostIp ?? false);
+                      const useHostIp = data.useHostIp ?? false;
                      const useDhcp = useHostIp && (data.useDhcp ?? false);
                      const staticIp = useHostIp && !useDhcp && data.staticIp ? data.staticIp : undefined;
                      const forceVlan = useHostIp && (data.forceVlan ?? false);
@@ -713,8 +715,8 @@ export class OpsViewVpn extends DeesElement {
                      await appstate.vpnStatePart.dispatchAction(appstate.updateVpnClientAction, {
                        clientId: client.clientId,
                        description: data.description || undefined,
-                        serverDefinedClientTags,
-                        forceDestinationSmartproxy: forceSmartproxy,
+                        targetProfileIds,
+
                        useHostIp: useHostIp || undefined,
                        useDhcp: useDhcp || undefined,
                        staticIp,
@@ -805,4 +807,43 @@ export class OpsViewVpn extends DeesElement {
      </div>
    `;
  }
+
+  /**
+   * Build autocomplete candidates from loaded target profiles.
+   * viewKey = profile name (displayed), payload = { id } (carried for resolution).
+   */
+  private getTargetProfileCandidates() {
+    const profileState = appstate.targetProfilesStatePart.getState();
+    const profiles = profileState?.profiles || [];
+    return profiles.map((p) => ({ viewKey: p.name, payload: { id: p.id } }));
+  }
+
+  /**
+   * Convert profile IDs to profile names (for populating edit form values).
+   */
+  private resolveProfileIdsToNames(ids?: string[]): string[] | undefined {
+    if (!ids?.length) return undefined;
+    const profileState = appstate.targetProfilesStatePart.getState();
+    const profiles = profileState?.profiles || [];
+    return ids.map((id) => {
+      const profile = profiles.find((p) => p.id === id);
+      return profile?.name || id;
+    });
+  }
+
+  /**
+   * Convert profile names back to IDs (for saving form data).
+   * Uses the dees-input-list candidates' payload when available.
+   */
+  private resolveProfileNamesToIds(names: string[]): string[] | undefined {
+    if (!names.length) return undefined;
+    const profileState = appstate.targetProfilesStatePart.getState();
+    const profiles = profileState?.profiles || [];
+    return names
+      .map((name) => {
+        const profile = profiles.find((p) => p.name === name);
+        return profile?.id;
+      })
+      .filter((id): id is string => !!id);
+  }
 }
--- a/ts_web/elements/ops-dashboard.ts
+++ b/ts_web/elements/ops-dashboard.ts
@@ -11,21 +11,45 @@ import {
  state,
  type TemplateResult
 } from '@design.estate/dees-element';
+import type { IView } from '@design.estate/dees-catalog';

-// Import view components
-import { OpsViewOverview } from './ops-view-overview.js';
-import { OpsViewNetwork } from './ops-view-network.js';
-import { OpsViewEmails } from './ops-view-emails.js';
+// Top-level / flat views
 import { OpsViewLogs } from './ops-view-logs.js';
-import { OpsViewConfig } from './ops-view-config.js';
-import { OpsViewRoutes } from './ops-view-routes.js';
-import { OpsViewApiTokens } from './ops-view-apitokens.js';
-import { OpsViewSecurity } from './ops-view-security.js';
 import { OpsViewCertificates } from './ops-view-certificates.js';
-import { OpsViewRemoteIngress } from './ops-view-remoteingress.js';
-import { OpsViewVpn } from './ops-view-vpn.js';
-import { OpsViewSecurityProfiles } from './ops-view-securityprofiles.js';
-import { OpsViewNetworkTargets } from './ops-view-networktargets.js';
+
+// Overview group
+import { OpsViewOverview } from './overview/ops-view-overview.js';
+import { OpsViewConfig } from './overview/ops-view-config.js';
+
+// Network group
+import { OpsViewNetworkActivity } from './network/ops-view-network-activity.js';
+import { OpsViewRoutes } from './network/ops-view-routes.js';
+import { OpsViewSourceProfiles } from './network/ops-view-sourceprofiles.js';
+import { OpsViewNetworkTargets } from './network/ops-view-networktargets.js';
+import { OpsViewTargetProfiles } from './network/ops-view-targetprofiles.js';
+import { OpsViewRemoteIngress } from './network/ops-view-remoteingress.js';
+import { OpsViewVpn } from './network/ops-view-vpn.js';
+
+// Email group
+import { OpsViewEmails } from './email/ops-view-emails.js';
+import { OpsViewEmailSecurity } from './email/ops-view-email-security.js';
+
+// Access group
+import { OpsViewApiTokens } from './access/ops-view-apitokens.js';
+
+// Security group
+import { OpsViewSecurityOverview } from './security/ops-view-security-overview.js';
+import { OpsViewSecurityBlocked } from './security/ops-view-security-blocked.js';
+import { OpsViewSecurityAuthentication } from './security/ops-view-security-authentication.js';
+
+/**
+ * Extended IView with explicit URL slug. Without an explicit `slug`, the URL
+ * slug is derived from `name.toLowerCase().replace(/\s+/g, '')`.
+ */
+interface ITabbedView extends IView {
+  slug?: string;
+  subViews?: ITabbedView[];
+}

@customElement('ops-dashboard')
 export class OpsDashboard extends DeesElement {
@@ -36,6 +60,7 @@ export class OpsDashboard extends DeesElement {

  @state() accessor uiState: appstate.IUiState = {
    activeView: 'overview',
+    activeSubview: null,
    sidebarCollapsed: false,
    autoRefresh: true,
    refreshInterval: 1000,
@@ -48,27 +73,36 @@ export class OpsDashboard extends DeesElement {
    error: null,
  };

-  // Store viewTabs as a property to maintain object references
-  private viewTabs = [
+  // Store viewTabs as a property to maintain object references (used for === selectedView identity)
+  private viewTabs: ITabbedView[] = [
    {
      name: 'Overview',
      iconName: 'lucide:layoutDashboard',
-      element: OpsViewOverview,
-    },
-    {
-      name: 'Configuration',
-      iconName: 'lucide:settings',
-      element: OpsViewConfig,
+      subViews: [
+        { slug: 'stats', name: 'Stats', iconName: 'lucide:activity', element: OpsViewOverview },
+        { slug: 'configuration', name: 'Configuration', iconName: 'lucide:settings', element: OpsViewConfig },
+      ],
    },
    {
      name: 'Network',
      iconName: 'lucide:network',
-      element: OpsViewNetwork,
+      subViews: [
+        { slug: 'activity', name: 'Network Activity', iconName: 'lucide:activity', element: OpsViewNetworkActivity },
+        { slug: 'routes', name: 'Routes', iconName: 'lucide:route', element: OpsViewRoutes },
+        { slug: 'sourceprofiles', name: 'Source Profiles', iconName: 'lucide:shieldCheck', element: OpsViewSourceProfiles },
+        { slug: 'networktargets', name: 'Network Targets', iconName: 'lucide:server', element: OpsViewNetworkTargets },
+        { slug: 'targetprofiles', name: 'Target Profiles', iconName: 'lucide:target', element: OpsViewTargetProfiles },
+        { slug: 'remoteingress', name: 'Remote Ingress', iconName: 'lucide:globe', element: OpsViewRemoteIngress },
+        { slug: 'vpn', name: 'VPN', iconName: 'lucide:shield', element: OpsViewVpn },
+      ],
    },
    {
-      name: 'Emails',
+      name: 'Email',
      iconName: 'lucide:mail',
-      element: OpsViewEmails,
+      subViews: [
+        { slug: 'log', name: 'Email Log', iconName: 'lucide:scrollText', element: OpsViewEmails },
+        { slug: 'security', name: 'Email Security', iconName: 'lucide:shieldCheck', element: OpsViewEmailSecurity },
+      ],
    },
    {
      name: 'Logs',
@@ -76,47 +110,48 @@ export class OpsDashboard extends DeesElement {
      element: OpsViewLogs,
    },
    {
-      name: 'Routes',
-      iconName: 'lucide:route',
-      element: OpsViewRoutes,
-    },
-    {
-      name: 'SecurityProfiles',
-      iconName: 'lucide:shieldCheck',
-      element: OpsViewSecurityProfiles,
-    },
-    {
-      name: 'NetworkTargets',
-      iconName: 'lucide:server',
-      element: OpsViewNetworkTargets,
-    },
-    {
-      name: 'ApiTokens',
-      iconName: 'lucide:key',
-      element: OpsViewApiTokens,
+      name: 'Access',
+      iconName: 'lucide:keyRound',
+      subViews: [
+        { slug: 'apitokens', name: 'API Tokens', iconName: 'lucide:key', element: OpsViewApiTokens },
+      ],
    },
    {
      name: 'Security',
      iconName: 'lucide:shield',
-      element: OpsViewSecurity,
+      subViews: [
+        { slug: 'overview', name: 'Overview', iconName: 'lucide:eye', element: OpsViewSecurityOverview },
+        { slug: 'blocked', name: 'Blocked IPs', iconName: 'lucide:shieldBan', element: OpsViewSecurityBlocked },
+        { slug: 'authentication', name: 'Authentication', iconName: 'lucide:lock', element: OpsViewSecurityAuthentication },
+      ],
    },
    {
      name: 'Certificates',
      iconName: 'lucide:badgeCheck',
      element: OpsViewCertificates,
    },
-    {
-      name: 'RemoteIngress',
-      iconName: 'lucide:globe',
-      element: OpsViewRemoteIngress,
-    },
-    {
-      name: 'VPN',
-      iconName: 'lucide:shield',
-      element: OpsViewVpn,
-    },
  ];

+  /** URL slug for a view (explicit `slug` field, or lowercased name with spaces stripped). */
+  private slugFor(view: ITabbedView): string {
+    return view.slug ?? view.name.toLowerCase().replace(/\s+/g, '');
+  }
+
+  /** Find the parent group of a subview, or undefined for top-level views. */
+  private findParent(view: ITabbedView): ITabbedView | undefined {
+    return this.viewTabs.find((v) => v.subViews?.includes(view));
+  }
+
+  /** Look up a view (or subview) by its URL slug pair. */
+  private findViewBySlug(viewSlug: string, subSlug: string | null): ITabbedView | undefined {
+    const top = this.viewTabs.find((v) => this.slugFor(v) === viewSlug);
+    if (!top) return undefined;
+    if (subSlug && top.subViews) {
+      return top.subViews.find((sv) => this.slugFor(sv) === subSlug) ?? top;
+    }
+    return top;
+  }
+
  private get globalMessages() {
    const messages: Array<{ id: string; type: string; message: string; dismissible?: boolean }> = [];
    const config = this.configState.config;
@@ -132,17 +167,19 @@ export class OpsDashboard extends DeesElement {
  }

  /**
-   * Get the current view tab based on the UI state's activeView.
+   * Get the current view tab based on the UI state's activeView/activeSubview.
   * Used to pass the correct selectedView to dees-simple-appdash on initial render.
   */
-  private get currentViewTab() {
-    return this.viewTabs.find(t => t.name.toLowerCase() === this.uiState.activeView) || this.viewTabs[0];
+  private get currentViewTab(): ITabbedView {
+    return (
+      this.findViewBySlug(this.uiState.activeView, this.uiState.activeSubview) ?? this.viewTabs[0]
+    );
  }

  constructor() {
    super();
    document.title = 'DCRouter OpsServer';
-    
+
    // Subscribe to login state
    const loginSubscription = appstate.loginStatePart
      .select((stateArg) => stateArg)
@@ -155,7 +192,7 @@ export class OpsDashboard extends DeesElement {
        }
      });
    this.rxSubscriptions.push(loginSubscription);
-    
+
    // Subscribe to config state (for global warnings)
    const configSubscription = appstate.configStatePart
      .select((stateArg) => stateArg)
@@ -170,38 +207,27 @@ export class OpsDashboard extends DeesElement {
      .subscribe((uiState) => {
        this.uiState = uiState;
        // Sync appdash view when state changes (e.g., from URL navigation)
-        this.syncAppdashView(uiState.activeView);
+        this.syncAppdashView(uiState.activeView, uiState.activeSubview);
      });
    this.rxSubscriptions.push(uiSubscription);
  }

  /**
   * Sync the dees-simple-appdash view selection with the current state.
-   * This is needed when the URL changes and we need to update the UI.
+   * This is needed when the URL changes externally (back/forward, deep link).
   */
-  private syncAppdashView(viewName: string): void {
+  private syncAppdashView(viewSlug: string, subviewSlug: string | null): void {
    const appDash = this.shadowRoot?.querySelector('dees-simple-appdash') as any;
    if (!appDash) return;

-    const targetTab = this.viewTabs.find(t => t.name.toLowerCase() === viewName);
-    if (!targetTab) return;
+    const targetView = this.findViewBySlug(viewSlug, subviewSlug);
+    if (!targetView) return;

-    // Check if we need to switch (avoid unnecessary updates)
-    if (appDash.selectedView === targetTab) return;
+    if (appDash.selectedView === targetView) return;

-    // Update the selected view programmatically
-    appDash.selectedView = targetTab;
-
-    // Update the displayed content
-    const content = appDash.shadowRoot?.querySelector('.appcontent');
-    if (content) {
-      if (appDash.currentView) {
-        appDash.currentView.remove();
-      }
-      const view = new targetTab.element();
-      content.appendChild(view);
-      appDash.currentView = view;
-    }
+    // Use loadView to update both selectedView and the mounted element.
+    // It will dispatch view-select; our handler skips when state already matches.
+    appDash.loadView(targetView);
  }

  public static styles = [
@@ -243,7 +269,7 @@ export class OpsDashboard extends DeesElement {
  public async firstUpdated() {
    const simpleLogin = this.shadowRoot!.querySelector('dees-simple-login') as any;
    simpleLogin.addEventListener('login', (e: Event) => {
-      // Handle logout event
+      // Handle login event
      const detail = (e as CustomEvent).detail;
      this.login(detail.data.username, detail.data.password);
    });
@@ -252,9 +278,24 @@ export class OpsDashboard extends DeesElement {
    const appDash = this.shadowRoot!.querySelector('dees-simple-appdash');
    if (appDash) {
      appDash.addEventListener('view-select', (e: Event) => {
-        const viewName = (e as CustomEvent).detail.view.name.toLowerCase();
-        // Use router for navigation instead of direct state update
-        appRouter.navigateToView(viewName);
+        const view = (e as CustomEvent).detail.view as ITabbedView;
+        const parent = this.findParent(view);
+        const currentState = appstate.uiStatePart.getState();
+        if (parent) {
+          const parentSlug = this.slugFor(parent);
+          const subSlug = this.slugFor(view);
+          // Skip if already on this exact subview — preserves URL on initial mount
+          if (currentState?.activeView === parentSlug && currentState?.activeSubview === subSlug) {
+            return;
+          }
+          appRouter.navigateToView(parentSlug, subSlug);
+        } else {
+          const slug = this.slugFor(view);
+          if (currentState?.activeView === slug && !currentState?.activeSubview) {
+            return;
+          }
+          appRouter.navigateToView(slug);
+        }
      });

      // Handle logout event
@@ -300,12 +341,12 @@ export class OpsDashboard extends DeesElement {
    const simpleLogin = this.shadowRoot!.querySelector('dees-simple-login') as any;
    const form = simpleLogin.shadowRoot!.querySelector('dees-form') as any;
    form.setStatus('pending', 'Logging in...');
-    
+
    const state = await appstate.loginStatePart.dispatchAction(appstate.loginAction, {
      username,
      password,
    });
-    
+
    if (state.identity) {
      console.log('Login successful');
      this.loginState = state;
@@ -319,4 +360,4 @@ export class OpsDashboard extends DeesElement {
      form!.reset();
    }
  }
-}
+}
--- a/ts_web/elements/ops-view-certificates.ts
+++ b/ts_web/elements/ops-view-certificates.ts
@@ -159,7 +159,7 @@ export class OpsViewCertificates extends DeesElement {
    const { summary } = this.certState;

    return html`
-      <ops-sectionheading>Certificates</ops-sectionheading>
+      <dees-heading level="2">Certificates</dees-heading>

      <div class="certificatesContainer">
        ${this.renderStatsTiles(summary)}
@@ -228,6 +228,7 @@ export class OpsViewCertificates extends DeesElement {
    return html`
      <dees-table
        .data=${this.certState.certificates}
+        .showColumnFilters=${true}
        .displayFunction=${(cert: interfaces.requests.ICertificateInfo) => ({
          Domain: cert.domain,
          Routes: this.renderRoutePills(cert.routeNames),
@@ -299,7 +300,7 @@ export class OpsViewCertificates extends DeesElement {
          {
            name: 'Reprovision',
            iconName: 'lucide:RefreshCw',
-            type: ['inRow'],
+            type: ['inRow', 'contextmenu'],
            actionFunc: async (actionData: { item: interfaces.requests.ICertificateInfo }) => {
              const cert = actionData.item;
              if (!cert.canReprovision) {
@@ -311,16 +312,41 @@ export class OpsViewCertificates extends DeesElement {
                });
                return;
              }
-              await appstate.certificateStatePart.dispatchAction(
-                appstate.reprovisionCertificateAction,
-                cert.domain,
-              );
-              const { DeesToast } = await import('@design.estate/dees-catalog');
-              DeesToast.show({
-                message: `Reprovisioning triggered for ${cert.domain}`,
-                type: 'success',
-                duration: 3000,
-              });
+
+              const doReprovision = async (forceRenew = false) => {
+                await appstate.certificateStatePart.dispatchAction(
+                  appstate.reprovisionCertificateAction,
+                  { domain: cert.domain, forceRenew },
+                );
+                const { DeesToast } = await import('@design.estate/dees-catalog');
+                DeesToast.show({
+                  message: forceRenew
+                    ? `Force renewal triggered for ${cert.domain}`
+                    : `Reprovisioning triggered for ${cert.domain}`,
+                  type: 'success',
+                  duration: 3000,
+                });
+              };
+
+              if (cert.status === 'valid') {
+                const { DeesModal } = await import('@design.estate/dees-catalog');
+                DeesModal.createAndShow({
+                  heading: 'Certificate Still Valid',
+                  content: html`<p style="margin: 0; line-height: 1.5;">The certificate for <strong>${cert.domain}</strong> is still valid${cert.expiryDate ? ` until ${new Date(cert.expiryDate).toLocaleDateString()}` : ''}. Do you want to force renew it now?</p>`,
+                  menuOptions: [
+                    { name: 'Cancel', action: async (modalArg: any) => modalArg.destroy() },
+                    {
+                      name: 'Force Renew',
+                      action: async (modalArg: any) => {
+                        await modalArg.destroy();
+                        await doReprovision(true);
+                      },
+                    },
+                  ],
+                });
+              } else {
+                await doReprovision();
+              }
            },
          },
          {
--- a/ts_web/elements/ops-view-logs.ts
+++ b/ts_web/elements/ops-view-logs.ts
@@ -39,7 +39,7 @@ export class OpsViewLogs extends DeesElement {

  public render() {
    return html`
-      <ops-sectionheading>Logs</ops-sectionheading>
+      <dees-heading level="2">Logs</dees-heading>

      <dees-chart-log
        .label=${'Application Logs'}
--- a/ts_web/elements/ops-view-security.ts
+++ b/ts_web/elements/ops-view-security.ts
@@ -1,541 +0,0 @@
-import * as plugins from '../plugins.js';
-import * as shared from './shared/index.js';
-import * as appstate from '../appstate.js';
-
-import {
-  DeesElement,
-  customElement,
-  html,
-  state,
-  css,
-  cssManager,
-} from '@design.estate/dees-element';
-import { type IStatsTile } from '@design.estate/dees-catalog';
-
-@customElement('ops-view-security')
-export class OpsViewSecurity extends DeesElement {
-  @state()
-  accessor statsState: appstate.IStatsState = {
-    serverStats: null,
-    emailStats: null,
-    dnsStats: null,
-    securityMetrics: null,
-    lastUpdated: 0,
-    isLoading: false,
-    error: null,
-  };
-
-  @state()
-  accessor selectedTab: 'overview' | 'blocked' | 'authentication' | 'email-security' = 'overview';
-
-  constructor() {
-    super();
-    const subscription = appstate.statsStatePart
-      .select((stateArg) => stateArg)
-      .subscribe((statsState) => {
-        this.statsState = statsState;
-      });
-    this.rxSubscriptions.push(subscription);
-  }
-
-  public static styles = [
-    cssManager.defaultStyles,
-    shared.viewHostCss,
-    css`
-      .tabs {
-        display: flex;
-        gap: 8px;
-        margin-bottom: 24px;
-        border-bottom: 2px solid ${cssManager.bdTheme('#e9ecef', '#333')};
-      }
-
-      .tab {
-        padding: 12px 24px;
-        background: none;
-        border: none;
-        border-bottom: 2px solid transparent;
-        cursor: pointer;
-        font-size: 16px;
-        color: ${cssManager.bdTheme('#666', '#999')};
-        transition: all 0.2s ease;
-      }
-
-      .tab:hover {
-        color: ${cssManager.bdTheme('#333', '#ccc')};
-      }
-
-      .tab.active {
-        color: ${cssManager.bdTheme('#2196F3', '#4a90e2')};
-        border-bottom-color: ${cssManager.bdTheme('#2196F3', '#4a90e2')};
-      }
-
-      h2 {
-        margin: 32px 0 16px 0;
-        font-size: 24px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('#333', '#ccc')};
-      }
-
-      dees-statsgrid {
-        margin-bottom: 32px;
-      }
-
-      .securityCard {
-        background: ${cssManager.bdTheme('#fff', '#222')};
-        border: 1px solid ${cssManager.bdTheme('#e9ecef', '#333')};
-        border-radius: 8px;
-        padding: 24px;
-        position: relative;
-        overflow: hidden;
-      }
-
-      .securityCard.alert {
-        border-color: ${cssManager.bdTheme('#f44336', '#ff6666')};
-        background: ${cssManager.bdTheme('#ffebee', '#4a1f1f')};
-      }
-
-      .securityCard.warning {
-        border-color: ${cssManager.bdTheme('#ff9800', '#ffaa33')};
-        background: ${cssManager.bdTheme('#fff3e0', '#4a3a1f')};
-      }
-
-      .securityCard.success {
-        border-color: ${cssManager.bdTheme('#4caf50', '#66cc66')};
-        background: ${cssManager.bdTheme('#e8f5e9', '#1f3f1f')};
-      }
-
-      .cardHeader {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 16px;
-      }
-
-      .cardTitle {
-        font-size: 18px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('#333', '#ccc')};
-      }
-
-      .cardStatus {
-        font-size: 14px;
-        padding: 4px 12px;
-        border-radius: 16px;
-        font-weight: 500;
-      }
-
-      .status-critical {
-        background: ${cssManager.bdTheme('#f44336', '#ff6666')};
-        color: ${cssManager.bdTheme('#fff', '#fff')};
-      }
-
-      .status-warning {
-        background: ${cssManager.bdTheme('#ff9800', '#ffaa33')};
-        color: ${cssManager.bdTheme('#fff', '#fff')};
-      }
-
-      .status-good {
-        background: ${cssManager.bdTheme('#4caf50', '#66cc66')};
-        color: ${cssManager.bdTheme('#fff', '#fff')};
-      }
-
-      .metricValue {
-        font-size: 32px;
-        font-weight: 700;
-        margin-bottom: 8px;
-      }
-
-      .metricLabel {
-        font-size: 14px;
-        color: ${cssManager.bdTheme('#666', '#999')};
-      }
-
-      .actionButton {
-        margin-top: 16px;
-      }
-
-      .blockedIpList {
-        max-height: 400px;
-        overflow-y: auto;
-      }
-
-      .blockedIpItem {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 12px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e9ecef', '#333')};
-      }
-
-      .blockedIpItem:last-child {
-        border-bottom: none;
-      }
-
-      .ipAddress {
-        font-family: 'Consolas', 'Monaco', monospace;
-        font-weight: 600;
-      }
-
-      .blockReason {
-        font-size: 14px;
-        color: ${cssManager.bdTheme('#666', '#999')};
-      }
-
-      .blockTime {
-        font-size: 12px;
-        color: ${cssManager.bdTheme('#999', '#666')};
-      }
-    `,
-  ];
-
-  public render() {
-    return html`
-      <ops-sectionheading>Security</ops-sectionheading>
-      
-      <div class="tabs">
-        <button 
-          class="tab ${this.selectedTab === 'overview' ? 'active' : ''}"
-          @click=${() => this.selectedTab = 'overview'}
-        >
-          Overview
-        </button>
-        <button 
-          class="tab ${this.selectedTab === 'blocked' ? 'active' : ''}"
-          @click=${() => this.selectedTab = 'blocked'}
-        >
-          Blocked IPs
-        </button>
-        <button 
-          class="tab ${this.selectedTab === 'authentication' ? 'active' : ''}"
-          @click=${() => this.selectedTab = 'authentication'}
-        >
-          Authentication
-        </button>
-        <button 
-          class="tab ${this.selectedTab === 'email-security' ? 'active' : ''}"
-          @click=${() => this.selectedTab = 'email-security'}
-        >
-          Email Security
-        </button>
-      </div>
-
-      ${this.renderTabContent()}
-    `;
-  }
-
-  private renderTabContent() {
-    const metrics = this.statsState.securityMetrics;
-    
-    if (!metrics) {
-      return html`
-        <div class="loadingMessage">
-          <p>Loading security metrics...</p>
-        </div>
-      `;
-    }
-
-    switch(this.selectedTab) {
-      case 'overview':
-        return this.renderOverview(metrics);
-      case 'blocked':
-        return this.renderBlockedIPs(metrics);
-      case 'authentication':
-        return this.renderAuthentication(metrics);
-      case 'email-security':
-        return this.renderEmailSecurity(metrics);
-    }
-  }
-
-  private renderOverview(metrics: any) {
-    const threatLevel = this.calculateThreatLevel(metrics);
-    const threatScore = this.getThreatScore(metrics);
-
-    // Derive active sessions from recent successful auth events (last hour)
-    const allEvents: any[] = metrics.recentEvents || [];
-    const oneHourAgo = Date.now() - 3600000;
-    const recentAuthSuccesses = allEvents.filter(
-      (evt: any) => evt.type === 'authentication' && evt.success === true && evt.timestamp >= oneHourAgo
-    ).length;
-
-    const tiles: IStatsTile[] = [
-      {
-        id: 'threatLevel',
-        title: 'Threat Level',
-        value: threatScore,
-        type: 'gauge',
-        icon: 'lucide:Shield',
-        gaugeOptions: {
-          min: 0,
-          max: 100,
-          thresholds: [
-            { value: 0, color: '#ef4444' },
-            { value: 30, color: '#f59e0b' },
-            { value: 70, color: '#22c55e' },
-          ],
-        },
-        description: `Status: ${threatLevel.toUpperCase()}`,
-      },
-      {
-        id: 'blockedThreats',
-        title: 'Blocked Threats',
-        value: (metrics.blockedIPs?.length || 0) + metrics.spamDetected,
-        type: 'number',
-        icon: 'lucide:ShieldCheck',
-        color: '#ef4444',
-        description: 'Total threats blocked today',
-      },
-      {
-        id: 'activeSessions',
-        title: 'Active Sessions',
-        value: recentAuthSuccesses,
-        type: 'number',
-        icon: 'lucide:Users',
-        color: '#22c55e',
-        description: 'Authenticated in last hour',
-      },
-      {
-        id: 'authFailures',
-        title: 'Auth Failures',
-        value: metrics.authenticationFailures,
-        type: 'number',
-        icon: 'lucide:LockOpen',
-        color: metrics.authenticationFailures > 10 ? '#ef4444' : '#f59e0b',
-        description: 'Failed login attempts today',
-      },
-    ];
-    
-    return html`
-      <dees-statsgrid
-        .tiles=${tiles}
-        .minTileWidth=${200}
-      ></dees-statsgrid>
-
-      <h2>Recent Security Events</h2>
-      <dees-table
-        .heading1=${'Security Events'}
-        .heading2=${'Last 24 hours'}
-        .data=${this.getSecurityEvents(metrics)}
-        .displayFunction=${(item) => ({
-          'Time': new Date(item.timestamp).toLocaleTimeString(),
-          'Event': item.event,
-          'Severity': item.severity,
-          'Details': item.details,
-        })}
-      ></dees-table>
-    `;
-  }
-
-  private renderBlockedIPs(metrics: any) {
-    return html`
-      <div class="securityCard">
-        <div class="cardHeader">
-          <h3 class="cardTitle">Blocked IP Addresses</h3>
-          <dees-button @click=${() => this.clearBlockedIPs()}>
-            Clear All
-          </dees-button>
-        </div>
-        
-        <div class="blockedIpList">
-          ${metrics.blockedIPs && metrics.blockedIPs.length > 0 ? metrics.blockedIPs.map((ipAddress, index) => html`
-            <div class="blockedIpItem">
-              <div>
-                <div class="ipAddress">${ipAddress}</div>
-                <div class="blockReason">Suspicious activity</div>
-                <div class="blockTime">Blocked</div>
-              </div>
-              <dees-button @click=${() => this.unblockIP(ipAddress)}>
-                Unblock
-              </dees-button>
-            </div>
-          `) : html`
-            <p>No blocked IPs</p>
-          `}
-        </div>
-      </div>
-    `;
-  }
-
-  private renderAuthentication(metrics: any) {
-    // Derive auth events from recentEvents
-    const allEvents: any[] = metrics.recentEvents || [];
-    const authEvents = allEvents.filter((evt: any) => evt.type === 'authentication');
-    const successfulLogins = authEvents.filter((evt: any) => evt.success === true).length;
-
-    const tiles: IStatsTile[] = [
-      {
-        id: 'authFailures',
-        title: 'Authentication Failures',
-        value: metrics.authenticationFailures,
-        type: 'number',
-        icon: 'lucide:LockOpen',
-        color: metrics.authenticationFailures > 10 ? '#ef4444' : '#f59e0b',
-        description: 'Failed authentication attempts today',
-      },
-      {
-        id: 'successfulLogins',
-        title: 'Successful Logins',
-        value: successfulLogins,
-        type: 'number',
-        icon: 'lucide:Lock',
-        color: '#22c55e',
-        description: 'Successful logins today',
-      },
-    ];
-
-    // Map auth events to login history table data
-    const loginHistory = authEvents.map((evt: any) => ({
-      timestamp: evt.timestamp,
-      username: evt.details?.username || 'unknown',
-      ipAddress: evt.ipAddress || 'unknown',
-      success: evt.success ?? false,
-      reason: evt.success ? '' : evt.message || 'Authentication failed',
-    }));
-
-    return html`
-      <dees-statsgrid
-        .tiles=${tiles}
-        .minTileWidth=${200}
-      ></dees-statsgrid>
-
-      <h2>Recent Login Attempts</h2>
-      <dees-table
-        .heading1=${'Login History'}
-        .heading2=${'Recent authentication attempts'}
-        .data=${loginHistory}
-        .displayFunction=${(item) => ({
-          'Time': new Date(item.timestamp).toLocaleString(),
-          'Username': item.username,
-          'IP Address': item.ipAddress,
-          'Status': item.success ? 'Success' : 'Failed',
-          'Reason': item.reason || '-',
-        })}
-      ></dees-table>
-    `;
-  }
-
-  private renderEmailSecurity(metrics: any) {
-    const tiles: IStatsTile[] = [
-      {
-        id: 'malware',
-        title: 'Malware Detection',
-        value: metrics.malwareDetected,
-        type: 'number',
-        icon: 'lucide:BugOff',
-        color: metrics.malwareDetected > 0 ? '#ef4444' : '#22c55e',
-        description: 'Malware detected',
-      },
-      {
-        id: 'phishing',
-        title: 'Phishing Detection',
-        value: metrics.phishingDetected,
-        type: 'number',
-        icon: 'lucide:Fish',
-        color: metrics.phishingDetected > 0 ? '#ef4444' : '#22c55e',
-        description: 'Phishing attempts detected',
-      },
-      {
-        id: 'suspicious',
-        title: 'Suspicious Activities',
-        value: metrics.suspiciousActivities,
-        type: 'number',
-        icon: 'lucide:TriangleAlert',
-        color: metrics.suspiciousActivities > 5 ? '#ef4444' : '#f59e0b',
-        description: 'Suspicious activities detected',
-      },
-      {
-        id: 'spam',
-        title: 'Spam Detection',
-        value: metrics.spamDetected,
-        type: 'number',
-        icon: 'lucide:Ban',
-        color: '#f59e0b',
-        description: 'Spam emails blocked',
-      },
-    ];
-
-    return html`
-      <dees-statsgrid
-        .tiles=${tiles}
-        .minTileWidth=${200}
-      ></dees-statsgrid>
-
-      <h2>Email Security Configuration</h2>
-      <div class="securityCard">
-        <dees-form>
-          <dees-input-checkbox 
-            .key=${'enableSPF'} 
-            .label=${'Enable SPF checking'} 
-            .value=${true}
-          ></dees-input-checkbox>
-          <dees-input-checkbox 
-            .key=${'enableDKIM'} 
-            .label=${'Enable DKIM validation'} 
-            .value=${true}
-          ></dees-input-checkbox>
-          <dees-input-checkbox 
-            .key=${'enableDMARC'} 
-            .label=${'Enable DMARC policy enforcement'} 
-            .value=${true}
-          ></dees-input-checkbox>
-          <dees-input-checkbox 
-            .key=${'enableSpamFilter'} 
-            .label=${'Enable spam filtering'} 
-            .value=${true}
-          ></dees-input-checkbox>
-        </dees-form>
-        <dees-button 
-          class="actionButton"
-          type="highlighted"
-          @click=${() => this.saveEmailSecuritySettings()}
-        >
-          Save Settings
-        </dees-button>
-      </div>
-    `;
-  }
-
-  private calculateThreatLevel(metrics: any): string {
-    const score = this.getThreatScore(metrics);
-    if (score < 30) return 'alert';
-    if (score < 70) return 'warning';
-    return 'success';
-  }
-
-  private getThreatScore(metrics: any): number {
-    // Simple scoring algorithm
-    let score = 100;
-    const blockedCount = Array.isArray(metrics.blockedIPs) ? metrics.blockedIPs.length : (metrics.blockedIPs || 0);
-    score -= blockedCount * 2;
-    score -= (metrics.authenticationFailures || 0) * 1;
-    score -= (metrics.spamDetected || 0) * 0.5;
-    score -= (metrics.malwareDetected || 0) * 3;
-    score -= (metrics.phishingDetected || 0) * 3;
-    score -= (metrics.suspiciousActivities || 0) * 2;
-    return Math.max(0, Math.min(100, Math.round(score)));
-  }
-
-  private getSecurityEvents(metrics: any): any[] {
-    const events: any[] = metrics.recentEvents || [];
-    return events.map((evt: any) => ({
-      timestamp: evt.timestamp,
-      event: evt.message,
-      severity: evt.level === 'critical' ? 'critical' : evt.level === 'error' ? 'high' : evt.level === 'warn' ? 'warning' : 'info',
-      details: evt.ipAddress ? `IP: ${evt.ipAddress}` : evt.domain ? `Domain: ${evt.domain}` : evt.type,
-    }));
-  }
-
-  private async clearBlockedIPs() {
-    // SmartProxy manages IP blocking — not yet exposed via API
-    alert('Clearing blocked IPs is not yet supported from the UI.');
-  }
-
-  private async unblockIP(ip: string) {
-    // SmartProxy manages IP blocking — not yet exposed via API
-    alert(`Unblocking IP ${ip} is not yet supported from the UI.`);
-  }
-
-  private async saveEmailSecuritySettings() {
-    // Config is read-only from the UI for now
-    alert('Email security settings are read-only. Update the dcrouter configuration file to change these settings.');
-  }
-}
--- a/ts_web/elements/overview/index.ts
+++ b/ts_web/elements/overview/index.ts
@@ -0,0 +1,2 @@
+export * from './ops-view-overview.js';
+export * from './ops-view-config.js';
--- a/ts_web/elements/overview/ops-view-config.ts
+++ b/ts_web/elements/overview/ops-view-config.ts
@@ -1,7 +1,7 @@
-import * as plugins from '../plugins.js';
-import * as shared from './shared/index.js';
-import * as appstate from '../appstate.js';
-import { appRouter } from '../router.js';
+import * as plugins from '../../plugins.js';
+import * as shared from '../shared/index.js';
+import * as appstate from '../../appstate.js';
+import { appRouter } from '../../router.js';

 import {
  DeesElement,
@@ -57,7 +57,7 @@ export class OpsViewConfig extends DeesElement {

  public render() {
    return html`
-      <ops-sectionheading>Configuration</ops-sectionheading>
+      <dees-heading level="2">Configuration</dees-heading>

      ${this.configState.isLoading
        ? html`
@@ -86,7 +86,7 @@ export class OpsViewConfig extends DeesElement {
        infoText="This view displays the current running configuration. DcRouter is configured through code or remote management."
        @navigate=${(e: CustomEvent) => {
          if (e.detail?.view) {
-            appRouter.navigateToView(e.detail.view);
+            appRouter.navigateToView(e.detail.view, e.detail.subview);
          }
        }}
      >
@@ -149,7 +149,7 @@ export class OpsViewConfig extends DeesElement {
    }

    const actions: IConfigSectionAction[] = [
-      { label: 'View Routes', icon: 'lucide:arrow-right', event: 'navigate', detail: { view: 'routes' } },
+      { label: 'View Routes', icon: 'lucide:arrow-right', event: 'navigate', detail: { view: 'network', subview: 'routes' } },
    ];

    return html`
@@ -181,7 +181,7 @@ export class OpsViewConfig extends DeesElement {
    }

    const actions: IConfigSectionAction[] = [
-      { label: 'View Emails', icon: 'lucide:arrow-right', event: 'navigate', detail: { view: 'emails' } },
+      { label: 'View Emails', icon: 'lucide:arrow-right', event: 'navigate', detail: { view: 'email', subview: 'log' } },
    ];

    return html`
@@ -305,7 +305,7 @@ export class OpsViewConfig extends DeesElement {
    ];

    const actions: IConfigSectionAction[] = [
-      { label: 'View Remote Ingress', icon: 'lucide:arrow-right', event: 'navigate', detail: { view: 'remoteingress' } },
+      { label: 'View Remote Ingress', icon: 'lucide:arrow-right', event: 'navigate', detail: { view: 'network', subview: 'remoteingress' } },
    ];

    return html`
--- a/ts_web/elements/overview/ops-view-overview.ts
+++ b/ts_web/elements/overview/ops-view-overview.ts
@@ -1,6 +1,6 @@
-import * as plugins from '../plugins.js';
-import * as shared from './shared/index.js';
-import * as appstate from '../appstate.js';
+import * as plugins from '../../plugins.js';
+import * as shared from '../shared/index.js';
+import * as appstate from '../../appstate.js';

 import {
  DeesElement,
@@ -21,6 +21,8 @@ export class OpsViewOverview extends DeesElement {
    emailStats: null,
    dnsStats: null,
    securityMetrics: null,
+    radiusStats: null,
+    vpnStats: null,
    lastUpdated: 0,
    isLoading: false,
    error: null,
@@ -62,13 +64,6 @@ export class OpsViewOverview extends DeesElement {
    cssManager.defaultStyles,
    shared.viewHostCss,
    css`
-      h2 {
-        margin: 32px 0 16px 0;
-        font-size: 24px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('#333', '#ccc')};
-      }
-
      .chartGrid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
@@ -99,7 +94,7 @@ export class OpsViewOverview extends DeesElement {

  public render() {
    return html`
-      <ops-sectionheading>Overview</ops-sectionheading>
+      <dees-heading level="2">Overview</dees-heading>
      
      ${this.statsState.isLoading ? html`
        <div class="loadingMessage">
@@ -117,6 +112,11 @@ export class OpsViewOverview extends DeesElement {

        ${this.renderDnsStats()}

+        ${this.renderRadiusStats()}
+
+        ${this.renderVpnStats()}
+
+        <dees-heading level="hr">Activity Charts</dees-heading>
        <div class="chartGrid">
          <dees-chart-area
            .label=${'Email Traffic (24h)'}
@@ -324,7 +324,7 @@ export class OpsViewOverview extends DeesElement {
    ];

    return html`
-      <h2>Email Statistics</h2>
+      <dees-heading level="hr">Email Statistics</dees-heading>
      <dees-statsgrid .tiles=${tiles}></dees-statsgrid>
    `;
  }
@@ -373,7 +373,98 @@ export class OpsViewOverview extends DeesElement {
    ];

    return html`
-      <h2>DNS Statistics</h2>
+      <dees-heading level="hr">DNS Statistics</dees-heading>
+      <dees-statsgrid .tiles=${tiles}></dees-statsgrid>
+    `;
+  }
+
+  private renderRadiusStats(): TemplateResult {
+    if (!this.statsState.radiusStats) return html``;
+
+    const stats = this.statsState.radiusStats;
+    const authTotal = stats.authRequests || 0;
+    const acceptRate = authTotal > 0 ? ((stats.authAccepts / authTotal) * 100).toFixed(1) : '0.0';
+
+    const tiles: IStatsTile[] = [
+      {
+        id: 'radiusStatus',
+        title: 'RADIUS Status',
+        value: stats.running ? 'Running' : 'Stopped',
+        type: 'text',
+        icon: 'lucide:ShieldCheck',
+        color: stats.running ? '#22c55e' : '#ef4444',
+        description: stats.running ? `Uptime: ${this.formatUptime(stats.uptime / 1000)}` : undefined,
+      },
+      {
+        id: 'authRequests',
+        title: 'Auth Requests',
+        value: stats.authRequests,
+        type: 'number',
+        icon: 'lucide:KeyRound',
+        color: '#3b82f6',
+        description: `Accept rate: ${acceptRate}% (${stats.authAccepts} / ${stats.authRejects} rejected)`,
+      },
+      {
+        id: 'activeSessions',
+        title: 'Active Sessions',
+        value: stats.activeSessions,
+        type: 'number',
+        icon: 'lucide:Users',
+        color: '#8b5cf6',
+      },
+      {
+        id: 'radiusTraffic',
+        title: 'Data Transfer',
+        value: this.formatBytes(stats.totalInputBytes + stats.totalOutputBytes),
+        type: 'text',
+        icon: 'lucide:ArrowLeftRight',
+        color: '#f59e0b',
+        description: `In: ${this.formatBytes(stats.totalInputBytes)} / Out: ${this.formatBytes(stats.totalOutputBytes)}`,
+      },
+    ];
+
+    return html`
+      <dees-heading level="hr">RADIUS Statistics</dees-heading>
+      <dees-statsgrid .tiles=${tiles}></dees-statsgrid>
+    `;
+  }
+
+  private renderVpnStats(): TemplateResult {
+    if (!this.statsState.vpnStats) return html``;
+
+    const stats = this.statsState.vpnStats;
+
+    const tiles: IStatsTile[] = [
+      {
+        id: 'vpnStatus',
+        title: 'VPN Status',
+        value: stats.running ? 'Running' : 'Stopped',
+        type: 'text',
+        icon: 'lucide:Shield',
+        color: stats.running ? '#22c55e' : '#ef4444',
+        description: `Subnet: ${stats.subnet}`,
+      },
+      {
+        id: 'connectedClients',
+        title: 'Connected Clients',
+        value: stats.connectedClients,
+        type: 'number',
+        icon: 'lucide:Wifi',
+        color: '#3b82f6',
+        description: `${stats.registeredClients} registered`,
+      },
+      {
+        id: 'wgPort',
+        title: 'WireGuard Port',
+        value: stats.wgListenPort,
+        type: 'number',
+        icon: 'lucide:Network',
+        color: '#8b5cf6',
+      },
+    ];
+
+    return html`
+      <dees-heading level="hr">VPN Statistics</dees-heading>
      <dees-statsgrid .tiles=${tiles}></dees-statsgrid>
    `;
  }
--- a/ts_web/elements/security/index.ts
+++ b/ts_web/elements/security/index.ts
@@ -0,0 +1,3 @@
+export * from './ops-view-security-overview.js';
+export * from './ops-view-security-blocked.js';
+export * from './ops-view-security-authentication.js';
--- a/ts_web/elements/security/ops-view-security-authentication.ts
+++ b/ts_web/elements/security/ops-view-security-authentication.ts
@@ -0,0 +1,121 @@
+import * as appstate from '../../appstate.js';
+import { viewHostCss } from '../shared/css.js';
+
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { type IStatsTile } from '@design.estate/dees-catalog';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ops-view-security-authentication': OpsViewSecurityAuthentication;
+  }
+}
+
+@customElement('ops-view-security-authentication')
+export class OpsViewSecurityAuthentication extends DeesElement {
+  @state()
+  accessor statsState: appstate.IStatsState = appstate.statsStatePart.getState()!;
+
+  constructor() {
+    super();
+    const sub = appstate.statsStatePart
+      .select((s) => s)
+      .subscribe((s) => {
+        this.statsState = s;
+      });
+    this.rxSubscriptions.push(sub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      h2 {
+        margin: 32px 0 16px 0;
+        font-size: 24px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#333', '#ccc')};
+      }
+      dees-statsgrid {
+        margin-bottom: 32px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const metrics = this.statsState.securityMetrics;
+
+    if (!metrics) {
+      return html`
+        <div class="loadingMessage">
+          <p>Loading security metrics...</p>
+        </div>
+      `;
+    }
+
+    // Derive auth events from recentEvents
+    const allEvents: any[] = metrics.recentEvents || [];
+    const authEvents = allEvents.filter((evt: any) => evt.type === 'authentication');
+    const successfulLogins = authEvents.filter((evt: any) => evt.success === true).length;
+
+    const tiles: IStatsTile[] = [
+      {
+        id: 'authFailures',
+        title: 'Authentication Failures',
+        value: metrics.authenticationFailures,
+        type: 'number',
+        icon: 'lucide:LockOpen',
+        color: metrics.authenticationFailures > 10 ? '#ef4444' : '#f59e0b',
+        description: 'Failed authentication attempts today',
+      },
+      {
+        id: 'successfulLogins',
+        title: 'Successful Logins',
+        value: successfulLogins,
+        type: 'number',
+        icon: 'lucide:Lock',
+        color: '#22c55e',
+        description: 'Successful logins today',
+      },
+    ];
+
+    // Map auth events to login history table data
+    const loginHistory = authEvents.map((evt: any) => ({
+      timestamp: evt.timestamp,
+      username: evt.details?.username || 'unknown',
+      ipAddress: evt.ipAddress || 'unknown',
+      success: evt.success ?? false,
+      reason: evt.success ? '' : evt.message || 'Authentication failed',
+    }));
+
+    return html`
+      <dees-heading level="hr">Authentication</dees-heading>
+
+      <dees-statsgrid
+        .tiles=${tiles}
+        .minTileWidth=${200}
+      ></dees-statsgrid>
+
+      <h2>Recent Login Attempts</h2>
+      <dees-table
+        .heading1=${'Login History'}
+        .heading2=${'Recent authentication attempts'}
+        .data=${loginHistory}
+        .displayFunction=${(item) => ({
+          'Time': new Date(item.timestamp).toLocaleString(),
+          'Username': item.username,
+          'IP Address': item.ipAddress,
+          'Status': item.success ? 'Success' : 'Failed',
+          'Reason': item.reason || '-',
+        })}
+      ></dees-table>
+    `;
+  }
+}
--- a/ts_web/elements/security/ops-view-security-blocked.ts
+++ b/ts_web/elements/security/ops-view-security-blocked.ts
@@ -0,0 +1,118 @@
+import * as appstate from '../../appstate.js';
+import { viewHostCss } from '../shared/css.js';
+
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { type IStatsTile } from '@design.estate/dees-catalog';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ops-view-security-blocked': OpsViewSecurityBlocked;
+  }
+}
+
+@customElement('ops-view-security-blocked')
+export class OpsViewSecurityBlocked extends DeesElement {
+  @state()
+  accessor statsState: appstate.IStatsState = appstate.statsStatePart.getState()!;
+
+  constructor() {
+    super();
+    const sub = appstate.statsStatePart
+      .select((s) => s)
+      .subscribe((s) => {
+        this.statsState = s;
+      });
+    this.rxSubscriptions.push(sub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      dees-statsgrid {
+        margin-bottom: 32px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const metrics = this.statsState.securityMetrics;
+
+    if (!metrics) {
+      return html`
+        <div class="loadingMessage">
+          <p>Loading security metrics...</p>
+        </div>
+      `;
+    }
+
+    const blockedIPs: string[] = metrics.blockedIPs || [];
+
+    const tiles: IStatsTile[] = [
+      {
+        id: 'totalBlocked',
+        title: 'Blocked IPs',
+        value: blockedIPs.length,
+        type: 'number',
+        icon: 'lucide:ShieldBan',
+        color: blockedIPs.length > 0 ? '#ef4444' : '#22c55e',
+        description: 'Currently blocked addresses',
+      },
+    ];
+
+    return html`
+      <dees-heading level="hr">Blocked IPs</dees-heading>
+
+      <dees-statsgrid
+        .tiles=${tiles}
+        .minTileWidth=${200}
+      ></dees-statsgrid>
+
+      <dees-table
+        .heading1=${'Blocked IP Addresses'}
+        .heading2=${'IPs blocked due to suspicious activity'}
+        .data=${blockedIPs.map((ip) => ({ ip }))}
+        .displayFunction=${(item) => ({
+          'IP Address': item.ip,
+          'Reason': 'Suspicious activity',
+        })}
+        .dataActions=${[
+          {
+            name: 'Unblock',
+            iconName: 'lucide:shield-off',
+            type: ['contextmenu' as const],
+            actionFunc: async (item) => {
+              await this.unblockIP(item.ip);
+            },
+          },
+          {
+            name: 'Clear All',
+            iconName: 'lucide:trash-2',
+            type: ['header' as const],
+            actionFunc: async () => {
+              await this.clearBlockedIPs();
+            },
+          },
+        ]}
+      ></dees-table>
+    `;
+  }
+
+  private async clearBlockedIPs() {
+    // SmartProxy manages IP blocking — not yet exposed via API
+    alert('Clearing blocked IPs is not yet supported from the UI.');
+  }
+
+  private async unblockIP(ip: string) {
+    // SmartProxy manages IP blocking — not yet exposed via API
+    alert(`Unblocking IP ${ip} is not yet supported from the UI.`);
+  }
+}
--- a/ts_web/elements/security/ops-view-security-overview.ts
+++ b/ts_web/elements/security/ops-view-security-overview.ts
@@ -0,0 +1,172 @@
+import * as appstate from '../../appstate.js';
+import { viewHostCss } from '../shared/css.js';
+
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { type IStatsTile } from '@design.estate/dees-catalog';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ops-view-security-overview': OpsViewSecurityOverview;
+  }
+}
+
+@customElement('ops-view-security-overview')
+export class OpsViewSecurityOverview extends DeesElement {
+  @state()
+  accessor statsState: appstate.IStatsState = appstate.statsStatePart.getState()!;
+
+  constructor() {
+    super();
+    const sub = appstate.statsStatePart
+      .select((s) => s)
+      .subscribe((s) => {
+        this.statsState = s;
+      });
+    this.rxSubscriptions.push(sub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      h2 {
+        margin: 32px 0 16px 0;
+        font-size: 24px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#333', '#ccc')};
+      }
+      dees-statsgrid {
+        margin-bottom: 32px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const metrics = this.statsState.securityMetrics;
+
+    if (!metrics) {
+      return html`
+        <div class="loadingMessage">
+          <p>Loading security metrics...</p>
+        </div>
+      `;
+    }
+
+    const threatLevel = this.calculateThreatLevel(metrics);
+    const threatScore = this.getThreatScore(metrics);
+
+    // Derive active sessions from recent successful auth events (last hour)
+    const allEvents: any[] = metrics.recentEvents || [];
+    const oneHourAgo = Date.now() - 3600000;
+    const recentAuthSuccesses = allEvents.filter(
+      (evt: any) => evt.type === 'authentication' && evt.success === true && evt.timestamp >= oneHourAgo
+    ).length;
+
+    const tiles: IStatsTile[] = [
+      {
+        id: 'threatLevel',
+        title: 'Threat Level',
+        value: threatScore,
+        type: 'gauge',
+        icon: 'lucide:Shield',
+        gaugeOptions: {
+          min: 0,
+          max: 100,
+          thresholds: [
+            { value: 0, color: '#ef4444' },
+            { value: 30, color: '#f59e0b' },
+            { value: 70, color: '#22c55e' },
+          ],
+        },
+        description: `Status: ${threatLevel.toUpperCase()}`,
+      },
+      {
+        id: 'blockedThreats',
+        title: 'Blocked Threats',
+        value: (metrics.blockedIPs?.length || 0) + metrics.spamDetected,
+        type: 'number',
+        icon: 'lucide:ShieldCheck',
+        color: '#ef4444',
+        description: 'Total threats blocked today',
+      },
+      {
+        id: 'activeSessions',
+        title: 'Active Sessions',
+        value: recentAuthSuccesses,
+        type: 'number',
+        icon: 'lucide:Users',
+        color: '#22c55e',
+        description: 'Authenticated in last hour',
+      },
+      {
+        id: 'authFailures',
+        title: 'Auth Failures',
+        value: metrics.authenticationFailures,
+        type: 'number',
+        icon: 'lucide:LockOpen',
+        color: metrics.authenticationFailures > 10 ? '#ef4444' : '#f59e0b',
+        description: 'Failed login attempts today',
+      },
+    ];
+
+    return html`
+      <dees-heading level="hr">Overview</dees-heading>
+
+      <dees-statsgrid
+        .tiles=${tiles}
+        .minTileWidth=${200}
+      ></dees-statsgrid>
+
+      <h2>Recent Security Events</h2>
+      <dees-table
+        .heading1=${'Security Events'}
+        .heading2=${'Last 24 hours'}
+        .data=${this.getSecurityEvents(metrics)}
+        .displayFunction=${(item) => ({
+          'Time': new Date(item.timestamp).toLocaleTimeString(),
+          'Event': item.event,
+          'Severity': item.severity,
+          'Details': item.details,
+        })}
+      ></dees-table>
+    `;
+  }
+
+  private calculateThreatLevel(metrics: any): string {
+    const score = this.getThreatScore(metrics);
+    if (score < 30) return 'alert';
+    if (score < 70) return 'warning';
+    return 'success';
+  }
+
+  private getThreatScore(metrics: any): number {
+    // Simple scoring algorithm
+    let score = 100;
+    const blockedCount = Array.isArray(metrics.blockedIPs) ? metrics.blockedIPs.length : (metrics.blockedIPs || 0);
+    score -= blockedCount * 2;
+    score -= (metrics.authenticationFailures || 0) * 1;
+    score -= (metrics.spamDetected || 0) * 0.5;
+    score -= (metrics.malwareDetected || 0) * 3;
+    score -= (metrics.phishingDetected || 0) * 3;
+    score -= (metrics.suspiciousActivities || 0) * 2;
+    return Math.max(0, Math.min(100, Math.round(score)));
+  }
+
+  private getSecurityEvents(metrics: any): any[] {
+    const events: any[] = metrics.recentEvents || [];
+    return events.map((evt: any) => ({
+      timestamp: evt.timestamp,
+      event: evt.message,
+      severity: evt.level === 'critical' ? 'critical' : evt.level === 'error' ? 'high' : evt.level === 'warn' ? 'warning' : 'info',
+      details: evt.ipAddress ? `IP: ${evt.ipAddress}` : evt.domain ? `Domain: ${evt.domain}` : evt.type,
+    }));
+  }
+}
--- a/ts_web/elements/shared/index.ts
+++ b/ts_web/elements/shared/index.ts
@@ -1,2 +1 @@
-export * from './css.js';
-export * from './ops-sectionheading.js';
+export * from './css.js';
--- a/ts_web/elements/shared/ops-sectionheading.ts
+++ b/ts_web/elements/shared/ops-sectionheading.ts
@@ -1,38 +0,0 @@
-import {
-  DeesElement,
-  css,
-  cssManager,
-  customElement,
-  html,
-  type TemplateResult
-} from '@design.estate/dees-element';
-
-@customElement('ops-sectionheading')
-export class OpsSectionHeading extends DeesElement {
-  public static styles = [
-    cssManager.defaultStyles,
-    css`
-      :host {
-        display: block;
-        margin-bottom: 24px;
-      }
-
-      .heading {
-        font-family: 'Cal Sans', 'Inter', sans-serif;
-        font-size: 28px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('#111', '#fff')};
-        margin: 0;
-        padding: 0;
-      }
-    `,
-  ];
-
-  public render(): TemplateResult {
-    return html`
-      <h1 class="heading">
-        <slot></slot>
-      </h1>
-    `;
-  }
-}
--- a/ts_web/readme.md
+++ b/ts_web/readme.md
@@ -131,7 +131,7 @@ The app uses `@push.rocks/smartstate` v2.3+ with multiple state parts, scheduled
 | State Part | Mode | Description |
 |-----------|------|-------------|
 | `loginStatePart` | Persistent (IndexedDB) | JWT identity and login status |
-| `statsStatePart` | Soft (memory) | Server, email, DNS, security metrics |
+| `statsStatePart` | Soft (memory) | Server, email, DNS, security, RADIUS, VPN metrics |
 | `configStatePart` | Soft | Current system configuration |
 | `uiStatePart` | Soft | Active view, sidebar, auto-refresh, theme |
 | `logStatePart` | Soft | Recent logs, streaming status, filters |
--- a/ts_web/router.ts
+++ b/ts_web/router.ts
@@ -3,9 +3,37 @@ import * as appstate from './appstate.js';

 const SmartRouter = plugins.domtools.plugins.smartrouter.SmartRouter;

-export const validViews = ['overview', 'network', 'emails', 'logs', 'routes', 'apitokens', 'configuration', 'security', 'certificates', 'remoteingress', 'vpn', 'securityprofiles', 'networktargets'] as const;
+// Flat top-level views (no subviews)
+const flatViews = ['logs', 'certificates'] as const;

-export type TValidView = typeof validViews[number];
+// Tabbed views and their valid subviews
+const subviewMap: Record<string, readonly string[]> = {
+  overview: ['stats', 'configuration'] as const,
+  network: ['activity', 'routes', 'sourceprofiles', 'networktargets', 'targetprofiles', 'remoteingress', 'vpn'] as const,
+  email: ['log', 'security'] as const,
+  access: ['apitokens'] as const,
+  security: ['overview', 'blocked', 'authentication'] as const,
+};
+
+// Default subview when user visits the bare parent URL
+const defaultSubview: Record<string, string> = {
+  overview: 'stats',
+  network: 'activity',
+  email: 'log',
+  access: 'apitokens',
+  security: 'overview',
+};
+
+export const validTopLevelViews = [...flatViews, ...Object.keys(subviewMap)] as const;
+export type TValidView = typeof validTopLevelViews[number];
+
+export function isValidView(view: string): boolean {
+  return (validTopLevelViews as readonly string[]).includes(view);
+}
+
+export function isValidSubview(view: string, subview: string): boolean {
+  return subviewMap[view]?.includes(subview) ?? false;
+}

 class AppRouter {
  private router: InstanceType<typeof SmartRouter>;
@@ -25,12 +53,27 @@ class AppRouter {
  }

  private setupRoutes(): void {
-    for (const view of validViews) {
+    // Flat views
+    for (const view of flatViews) {
      this.router.on(`/${view}`, async () => {
-        this.updateViewState(view);
+        this.updateViewState(view, null);
      });
    }

+    // Tabbed views
+    for (const view of Object.keys(subviewMap)) {
+      // Bare parent → redirect to default subview
+      this.router.on(`/${view}`, async () => {
+        this.navigateTo(`/${view}/${defaultSubview[view]}`);
+      });
+      // Each valid subview
+      for (const sub of subviewMap[view]) {
+        this.router.on(`/${view}/${sub}`, async () => {
+          this.updateViewState(view, sub);
+        });
+      }
+    }
+
    // Root redirect
    this.router.on('/', async () => {
      this.navigateTo('/overview');
@@ -42,7 +85,9 @@ class AppRouter {
      if (this.suppressStateUpdate) return;

      const currentPath = window.location.pathname;
-      const expectedPath = `/${uiState.activeView}`;
+      const expectedPath = uiState.activeSubview
+        ? `/${uiState.activeView}/${uiState.activeSubview}`
+        : `/${uiState.activeView}`;

      if (currentPath !== expectedPath) {
        this.suppressStateUpdate = true;
@@ -57,25 +102,38 @@ class AppRouter {

    if (!path || path === '/') {
      this.router.pushUrl('/overview');
-    } else {
-      const segments = path.split('/').filter(Boolean);
-      const view = segments[0];
+      return;
+    }

-      if (validViews.includes(view as TValidView)) {
-        this.updateViewState(view as TValidView);
+    const segments = path.split('/').filter(Boolean);
+    const view = segments[0];
+    const sub = segments[1];
+
+    if (!isValidView(view)) {
+      this.router.pushUrl('/overview');
+      return;
+    }
+
+    if (subviewMap[view]) {
+      if (sub && isValidSubview(view, sub)) {
+        this.updateViewState(view, sub);
      } else {
-        this.router.pushUrl('/overview');
+        // Bare parent or invalid sub → default subview
+        this.router.pushUrl(`/${view}/${defaultSubview[view]}`);
      }
+    } else {
+      this.updateViewState(view, null);
    }
  }

-  private updateViewState(view: string): void {
+  private updateViewState(view: string, subview: string | null): void {
    this.suppressStateUpdate = true;
    const currentState = appstate.uiStatePart.getState()!;
-    if (currentState.activeView !== view) {
+    if (currentState.activeView !== view || currentState.activeSubview !== subview) {
      appstate.uiStatePart.setState({
        ...currentState,
        activeView: view,
+        activeSubview: subview,
      } as appstate.IUiState);
    }
    this.suppressStateUpdate = false;
@@ -85,11 +143,17 @@ class AppRouter {
    this.router.pushUrl(path);
  }

-  public navigateToView(view: string): void {
-    if (validViews.includes(view as TValidView)) {
-      this.navigateTo(`/${view}`);
-    } else {
+  public navigateToView(view: string, subview?: string): void {
+    if (!isValidView(view)) {
      this.navigateTo('/overview');
+      return;
+    }
+    if (subview && isValidSubview(view, subview)) {
+      this.navigateTo(`/${view}/${subview}`);
+    } else if (subviewMap[view]) {
+      this.navigateTo(`/${view}/${defaultSubview[view]}`);
+    } else {
+      this.navigateTo(`/${view}`);
    }
  }

--- a/ts_web/tspublish.json
+++ b/ts_web/tspublish.json
@@ -1,3 +1,3 @@
 {
-  "order": 3
+  "order": 4
 }
Author	SHA1	Message	Date
Juergen Kunz	6099563acd	v13.4.2 Some checks failed Docker (tags) / security (push) Failing after 0s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-08 08:29:30 +00:00
Juergen Kunz	bf4c181026	fix(repo): no changes to commit	2026-04-08 08:29:30 +00:00
Juergen Kunz	d9d12427d3	v13.4.1 Some checks failed Docker (tags) / security (push) Failing after 0s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-08 08:28:00 +00:00
Juergen Kunz	91aa9a7228	fix(repo): no changes to commit	2026-04-08 08:28:00 +00:00
Juergen Kunz	877356b247	v13.4.0 Some checks failed Docker (tags) / security (push) Failing after 0s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-08 08:24:55 +00:00
Juergen Kunz	2325f01cde	feat(web-ui): reorganize dashboard views into grouped navigation with new email, access, and network subviews	2026-04-08 08:24:55 +00:00
Juergen Kunz	00fdadb088	v13.3.0 Some checks failed Docker (tags) / security (push) Failing after 0s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-08 07:45:26 +00:00
Juergen Kunz	2b76e05a40	feat(web-ui): reorganize network and security views into tabbed subviews with route-aware navigation	2026-04-08 07:45:26 +00:00
Juergen Kunz	1b37944aab	v13.2.2 Some checks failed Docker (tags) / security (push) Failing after 0s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-08 07:13:01 +00:00
Juergen Kunz	35a01a6981	fix(project): no changes to commit	2026-04-08 07:13:01 +00:00
Juergen Kunz	3058706d2a	v13.2.1 Some checks failed Docker (tags) / security (push) Failing after 0s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-08 07:12:16 +00:00
Juergen Kunz	0e4d6a3c0c	fix(project): no changes to commit	2026-04-08 07:12:16 +00:00
Juergen Kunz	2bc2475878	v13.2.0 Some checks failed Docker (tags) / security (push) Failing after 0s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-08 07:11:21 +00:00
Juergen Kunz	37eab7c7b1	feat(ops-ui): add column filters to operations tables across admin views	2026-04-08 07:11:21 +00:00
Juergen Kunz	8ab7343606	v13.1.3 Some checks failed Docker (tags) / security (push) Failing after 2s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-08 00:56:02 +00:00
Juergen Kunz	f04feec273	fix(certificate-handler): preserve wildcard coverage during forced certificate renewals and propagate renewed certs to sibling domains	2026-04-08 00:56:02 +00:00
Juergen Kunz	d320590ce2	v13.1.2 Some checks failed Docker (tags) / security (push) Failing after 2s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-07 22:46:22 +00:00
Juergen Kunz	0ee57f433b	fix(deps): bump @serve.zone/catalog to ^2.12.3	2026-04-07 22:46:22 +00:00
Juergen Kunz	b28b5eea84	v13.1.1 Some checks failed Docker (tags) / security (push) Failing after 2s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-07 22:28:22 +00:00
Juergen Kunz	27d7489af9	fix(deps): bump catalog-related dependencies to newer patch and minor releases	2026-04-07 22:28:22 +00:00
Juergen Kunz	940c7dc92e	v13.1.0 Some checks failed Docker (tags) / security (push) Failing after 3s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-07 21:02:37 +00:00
Juergen Kunz	7fa6d82e58	feat(vpn,target-profiles,migrations): add startup data migrations, support scoped VPN route allow entries, and rename target profile hosts to ips	2026-04-07 21:02:37 +00:00
Juergen Kunz	f29ed9757e	fix(target-profile-manager): enhance domain matching to support bidirectional checks	2026-04-06 11:56:55 +00:00
Juergen Kunz	ad45d1b8b9	v13.0.11 Some checks failed Docker (tags) / security (push) Failing after 3s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-06 10:23:19 +00:00
Juergen Kunz	68473f8550	fix(routing): serialize route updates and correct VPN-gated route application	2026-04-06 10:23:18 +00:00
Juergen Kunz	07cfe76cac	v13.0.10 Some checks failed Docker (tags) / security (push) Failing after 2s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-06 08:08:23 +00:00
Juergen Kunz	3775957bf2	fix(repo): no changes to commit	2026-04-06 08:08:23 +00:00
Juergen Kunz	31ce18a025	v13.0.9 Some checks failed Docker (tags) / security (push) Failing after 3s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-06 08:07:25 +00:00
Juergen Kunz	0cccec5526	fix(repo): no changes to commit	2026-04-06 08:07:25 +00:00
Juergen Kunz	0373f02f86	v13.0.8 Some checks failed Docker (tags) / security (push) Failing after 3s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-06 08:05:07 +00:00
Juergen Kunz	52dac0339f	fix(ops-view-vpn): show target profile names in VPN forms and load profile candidates for autocomplete	2026-04-06 08:05:07 +00:00
Juergen Kunz	b6f7f5f63f	v13.0.7 Some checks failed Docker (tags) / security (push) Failing after 3s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-06 07:51:25 +00:00
Juergen Kunz	6271bb1079	fix(vpn,target-profiles): refresh VPN client security when target profiles change and include profile target IPs in direct destination allow-lists	2026-04-06 07:51:25 +00:00
Juergen Kunz	0fa65f31c3	fix(ops-view-targetprofiles): ensure routes are loaded before showing profile dialogs	2026-04-05 13:48:08 +00:00
Juergen Kunz	93d6c7d341	v13.0.6 Some checks failed Docker (tags) / security (push) Failing after 3s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-05 11:29:47 +00:00
Juergen Kunz	b2ccd54079	fix(certificates): resolve base-domain certificate lookups and route profile list inputs	2026-04-05 11:29:47 +00:00
Juergen Kunz	4e9b09616d	v13.0.5 Some checks failed Docker (tags) / security (push) Failing after 2s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-05 10:13:09 +00:00
Juergen Kunz	ddb420835e	fix(ts_web): replace custom section heading component with dees-heading across ops views	2026-04-05 10:13:09 +00:00
Juergen Kunz	505fd044c0	v13.0.4 Some checks failed Docker (tags) / security (push) Failing after 2s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-05 03:54:39 +00:00
Juergen Kunz	7711204fef	fix(deps): bump @push.rocks/smartdata and @push.rocks/smartdb to the latest patch releases	2026-04-05 03:54:39 +00:00
Juergen Kunz	d7b6fbb241	v13.0.3 Some checks failed Docker (tags) / security (push) Failing after 2s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-05 03:28:40 +00:00
Juergen Kunz	a670b27a1c	fix(deps): bump @push.rocks/smartdb to ^2.5.2	2026-04-05 03:28:40 +00:00
Juergen Kunz	c2f57b086f	v13.0.2 Some checks failed Docker (tags) / security (push) Failing after 2s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-05 02:50:56 +00:00
Juergen Kunz	083f16d7b4	fix(deps): bump smartdata, smartdb, and catalog dependencies	2026-04-05 02:50:56 +00:00
Juergen Kunz	2994b6e686	v13.0.1 Some checks failed Docker (tags) / security (push) Failing after 3s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-05 01:33:27 +00:00
Juergen Kunz	ba15c169d7	fix(deps): bump @design.estate/dees-catalog and @push.rocks/smartdb dependencies	2026-04-05 01:33:27 +00:00
Juergen Kunz	bbd5707711	v13.0.0 Some checks failed Docker (tags) / security (push) Failing after 3s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-05 00:37:37 +00:00
Juergen Kunz	1ddf83b28d	BREAKING CHANGE(vpn): replace tag-based VPN access control with source and target profiles	2026-04-05 00:37:37 +00:00
Juergen Kunz	25365678e0	v12.10.0 Some checks failed Docker (tags) / security (push) Failing after 2s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-04 21:23:16 +00:00
Juergen Kunz	96d215fc66	feat(routes): add TLS configuration controls for route create and edit flows	2026-04-04 21:23:16 +00:00
Juergen Kunz	648ba9e61d	v12.9.4 Some checks failed Docker (tags) / security (push) Failing after 3s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-04 20:18:34 +00:00
Juergen Kunz	fcc1d9fede	fix(deps): bump @push.rocks/smartdb to ^2.3.1	2026-04-04 20:18:34 +00:00
Juergen Kunz	336e8aa4cc	v12.9.3 Some checks failed Docker (tags) / security (push) Failing after 3s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-04 19:29:49 +00:00
Juergen Kunz	c8f19cf783	fix(route-management): include stored VPN routes in domain resolution and align programmatic route types with dcrouter configs	2026-04-04 19:29:49 +00:00
Juergen Kunz	12b2cc11da	v12.9.2 Some checks failed Docker (tags) / security (push) Failing after 3s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-04 19:03:11 +00:00
Juergen Kunz	ffcc35be64	fix(config-ui): handle missing HTTP/3 config safely and standardize overview section headings	2026-04-04 19:03:11 +00:00
Juergen Kunz	59e0d41bdb	v12.9.1 Some checks failed Docker (tags) / security (push) Failing after 2s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-04 17:08:05 +00:00
Juergen Kunz	9509d87b1e	fix(monitoring): update SmartProxy and use direct connection protocol metrics access	2026-04-04 17:08:05 +00:00
Juergen Kunz	b835e2d0eb	v12.9.0 Some checks failed Docker (tags) / security (push) Failing after 3s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-04 16:45:02 +00:00
Juergen Kunz	6c3d8714a2	feat(monitoring): add frontend and backend protocol distribution metrics to network stats	2026-04-04 16:45:02 +00:00
Juergen Kunz	94f53f0259	v12.8.1 Some checks failed Docker (tags) / security (push) Failing after 3s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-04 11:00:03 +00:00
Juergen Kunz	1004f8579f	fix(ops-view-routes): correct route form dropdown selection handling for security profiles and network targets	2026-04-04 11:00:03 +00:00
Juergen Kunz	a77ec6884a	v12.8.0 Some checks failed Docker (tags) / security (push) Failing after 2s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-03 19:08:46 +00:00
Juergen Kunz	6112e4e884	feat(certificates): add force renew option for domain certificate reprovisioning	2026-04-03 19:08:46 +00:00
Juergen Kunz	4a6913d4bb	v12.7.0 Some checks failed Docker (tags) / security (push) Failing after 3s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-03 14:11:17 +00:00
Juergen Kunz	f6a9e344e5	feat(opsserver): add RADIUS and VPN metrics to combined ops stats and overview dashboards, and stream live log buffer entries in follow mode	2026-04-03 14:11:17 +00:00
Juergen Kunz	b3296c6522	v12.6.6 Some checks failed Docker (tags) / security (push) Failing after 2s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-03 13:53:20 +00:00
Juergen Kunz	10a2b922d3	fix(deps): bump @design.estate/dees-catalog to ^3.52.3	2026-04-03 13:53:20 +00:00
Juergen Kunz	ee5cdde225	v12.6.5 Some checks failed Docker (tags) / security (push) Failing after 3s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-03 13:40:52 +00:00
Juergen Kunz	d2e9efccd0	fix(deps): bump @design.estate/dees-catalog to ^3.52.2	2026-04-03 13:40:51 +00:00
Juergen Kunz	a07901a28a	v12.6.4 Some checks failed Docker (tags) / security (push) Failing after 2s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-03 13:02:07 +00:00
Juergen Kunz	a3954d6eb5	fix(deps): bump @design.estate/dees-catalog to ^3.52.0	2026-04-03 13:02:07 +00:00
Juergen Kunz	9685fcd89d	v12.6.3 Some checks failed Docker (tags) / security (push) Failing after 3s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-03 12:39:02 +00:00
Juergen Kunz	74c23ce5ff	fix(deps): bump @types/node and @design.estate/dees-catalog patch versions	2026-04-03 12:39:02 +00:00
Juergen Kunz	746fbb15e6	v12.6.2 Some checks failed Docker (tags) / security (push) Failing after 2s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-03 10:48:26 +00:00
Juergen Kunz	415065b246	fix(deps): bump @design.estate/dees-catalog to ^3.51.1	2026-04-03 10:48:26 +00:00
Juergen Kunz	30aeef7bbd	v12.6.1 Some checks failed Docker (tags) / security (push) Failing after 2s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-03 10:15:10 +00:00
Juergen Kunz	dba1c70fa7	fix(repo): no changes to commit	2026-04-03 10:15:10 +00:00
Juergen Kunz	f9cfb3d36b	v12.6.0 Some checks failed Docker (tags) / security (push) Failing after 3s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-03 10:14:52 +00:00
Juergen Kunz	43b92b784d	feat(certificates): add confirmation before force renewing valid certificates from the certificate actions menu	2026-04-03 10:14:52 +00:00
Juergen Kunz	b62a322c54	v12.5.2 Some checks failed Docker (tags) / security (push) Failing after 2s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-03 08:19:02 +00:00
Juergen Kunz	a3a64e9a02	fix(repo): no changes to commit	2026-04-03 08:19:02 +00:00
Juergen Kunz	491e51f40b	v12.5.1 Some checks failed Docker (tags) / security (push) Failing after 3s Details Docker (tags) / test (push) Has been skipped Details Docker (tags) / release (push) Has been skipped Details Docker (tags) / metadata (push) Has been skipped Details	2026-04-03 08:18:28 +00:00
Juergen Kunz	b46247d9cb	fix(ops-view-network): centralize traffic chart timing constants for consistent rolling window updates	2026-04-03 08:18:28 +00:00