v13.0.10

changelog.md

@@ -1,5 +1,33 @@
 # Changelog
 
+## 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
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@serve.zone/dcrouter",
   "private": false,
-  "version": "13.0.5",
+  "version": "13.0.10",
   "description": "A multifaceted routing service handling mail and SMS delivery functions.",
   "type": "module",
   "exports": {
@@ -35,12 +35,12 @@
     "@api.global/typedserver": "^8.4.6",
     "@api.global/typedsocket": "^4.1.2",
     "@apiclient.xyz/cloudflare": "^7.1.0",
-    "@design.estate/dees-catalog": "^3.61.0",
+    "@design.estate/dees-catalog": "^3.61.1",
     "@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.4.0",
+    "@push.rocks/smartacme": "^9.5.0",
     "@push.rocks/smartdata": "^7.1.6",
     "@push.rocks/smartdb": "^2.5.9",
     "@push.rocks/smartdns": "^7.9.0",

pnpm-lock.yaml

@@ -24,8 +24,8 @@ importers:
         specifier: ^7.1.0
         version: 7.1.0
       '@design.estate/dees-catalog':
-        specifier: ^3.61.0
-        version: 3.61.0(@tiptap/pm@2.27.2)
+        specifier: ^3.61.1
+        version: 3.61.1(@tiptap/pm@2.27.2)
       '@design.estate/dees-element':
         specifier: ^2.2.4
         version: 2.2.4
@@ -39,8 +39,8 @@ importers:
         specifier: ^6.1.3
         version: 6.1.3
       '@push.rocks/smartacme':
-        specifier: ^9.4.0
-        version: 9.4.0(socks@2.8.7)
+        specifier: ^9.5.0
+        version: 9.5.0(socks@2.8.7)
       '@push.rocks/smartdata':
         specifier: ^7.1.6
         version: 7.1.6(socks@2.8.7)
@@ -350,8 +350,8 @@ packages:
   '@configvault.io/interfaces@1.0.17':
     resolution: {integrity: sha512-bEcCUR2VBDJsTin8HQh8Uw/mlYl2v8A3jMIaQ+MTB9Hrqd6CZL2dL7iJdWyFl/3EIX+LDxWFR+Oq7liIq7w+1Q==}
 
-  '@design.estate/dees-catalog@3.61.0':
-    resolution: {integrity: sha512-gBcNotstwnapGuf/DSapVu+R8F1ITp1wypDOw4NLFak0FwOmPb7ao5pALUbcz+MZmZmB0VuBuqN5GcTyIGIX3Q==}
+  '@design.estate/dees-catalog@3.61.1':
+    resolution: {integrity: sha512-RA85O87pRM3QPlncBNB27wJTl+UVGaGtx8l5DaeOhru78agu4+y+ByAdUgS9Ahdpr/ZZVYSAADkZETsf/l08UQ==}
 
   '@design.estate/dees-comms@1.0.30':
     resolution: {integrity: sha512-KchMlklJfKAjQiJiR0xmofXtQ27VgZtBIxcMwPE9d+h3jJRv+lPZxzBQVOM0eyM0uS44S5vJMZ11IeV4uDXSHg==}
@@ -1108,8 +1108,8 @@ packages:
   '@push.rocks/qenv@6.1.3':
     resolution: {integrity: sha512-+z2hsAU/7CIgpYLFqvda8cn9rUBMHqLdQLjsFfRn5jPoD7dJ5rFlpkbhfM4Ws8mHMniwWaxGKo+q/YBhtzRBLg==}
 
-  '@push.rocks/smartacme@9.4.0':
-    resolution: {integrity: sha512-mSqsI859mHI9fCZxLfayzPf/WvukDFzVHOh02vXq3ujxbb5M+ArMnXe0MmC2egR9GeXmQTm3DTENaETX5ffMtw==}
+  '@push.rocks/smartacme@9.5.0':
+    resolution: {integrity: sha512-soOjER2c4umKaOSsB6uq/k08aA9rfd7Dicm6DNX3XB16LjCjldVHpizeOGqRBkFga+VroDQ/rEYecHT5tFiWvg==}
 
   '@push.rocks/smartarchive@4.2.4':
     resolution: {integrity: sha512-uiqVAXPxmr8G5rv3uZvZFMOCt8l7cZC3nzvsy4YQqKf/VkPhKIEX+b7LkAeNlxPSYUiBQUkNRoawg9+5BaMcHg==}
@@ -4358,7 +4358,7 @@ snapshots:
       '@api.global/typedrequest-interfaces': 3.0.19
       '@api.global/typedsocket': 4.1.2(@push.rocks/smartserve@2.0.3)
       '@cloudflare/workers-types': 4.20260317.1
-      '@design.estate/dees-catalog': 3.61.0(@tiptap/pm@2.27.2)
+      '@design.estate/dees-catalog': 3.61.1(@tiptap/pm@2.27.2)
       '@design.estate/dees-comms': 1.0.30
       '@push.rocks/lik': 6.4.0
       '@push.rocks/smartdelay': 3.0.5
@@ -4887,7 +4887,7 @@ snapshots:
     dependencies:
       '@api.global/typedrequest-interfaces': 3.0.19
 
-  '@design.estate/dees-catalog@3.61.0(@tiptap/pm@2.27.2)':
+  '@design.estate/dees-catalog@3.61.1(@tiptap/pm@2.27.2)':
     dependencies:
       '@design.estate/dees-domtools': 2.5.4
       '@design.estate/dees-element': 2.2.4
@@ -5977,7 +5977,7 @@ snapshots:
       '@push.rocks/smartlog': 3.2.1
       '@push.rocks/smartpath': 6.0.0
 
-  '@push.rocks/smartacme@9.4.0(socks@2.8.7)':
+  '@push.rocks/smartacme@9.5.0(socks@2.8.7)':
     dependencies:
       '@apiclient.xyz/cloudflare': 7.1.0
       '@peculiar/x509': 2.0.0
@@ -5997,11 +5997,14 @@ snapshots:
       - '@aws-sdk/credential-providers'
       - '@mongodb-js/zstd'
       - '@nuxt/kit'
+      - bare-abort-controller
+      - bare-buffer
       - encoding
       - gcp-metadata
       - kerberos
       - mongodb-client-encryption
       - react
+      - react-native-b4a
       - snappy
       - socks
       - supports-color
@@ -6965,7 +6968,7 @@ snapshots:
 
   '@serve.zone/catalog@2.11.2(@tiptap/pm@2.27.2)':
     dependencies:
-      '@design.estate/dees-catalog': 3.61.0(@tiptap/pm@2.27.2)
+      '@design.estate/dees-catalog': 3.61.1(@tiptap/pm@2.27.2)
       '@design.estate/dees-domtools': 2.5.4
       '@design.estate/dees-element': 2.2.4
       '@design.estate/dees-wcctools': 3.8.0

ts/00_commitinfo_data.ts

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

ts/classes.dcrouter.ts

@@ -1076,7 +1076,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();
               }
@@ -2148,6 +2151,10 @@ export class DcRouter {
         // Re-apply routes so profile-based ipAllowLists get updated
         this.routeConfigManager?.applyRoutes();
       },
+      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]);

ts/config/classes.target-profile-manager.ts

@@ -134,6 +134,27 @@ export class TargetProfileManager {
       .map((c) => ({ clientId: c.clientId, description: c.description }));
   }
 
+  // =========================================================================
+  // Direct target IPs (bypass SmartProxy)
+  // =========================================================================
+
+  /**
+   * For a set of target profile IDs, collect all explicit target host 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.host);
+      }
+    }
+    return [...ips];
+  }
+
   // =========================================================================
   // Core matching: route → client IPs
   // =========================================================================

ts/opsserver/handlers/certificate.handler.ts

@@ -191,7 +191,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) {
@@ -331,31 +335,32 @@ export class CertificateHandler {
       await dcRouter.certProvisionScheduler.clearBackoff(domain);
     }
 
-    // Clear status map entry so it gets refreshed
+    // Find routes matching this domain — needed to provision through SmartProxy
+    const routeNames = dcRouter.findRouteNamesForDomain(domain);
+    if (routeNames.length === 0) {
+      return { success: false, message: `No routes found for domain '${domain}'` };
+    }
+
+    // If forceRenew, invalidate SmartAcme's cache so the next provision gets a fresh cert
+    if (forceRenew && dcRouter.smartAcme) {
+      try {
+        await dcRouter.smartAcme.getCertificateForDomain(domain, { forceRenew: true });
+      } catch {
+        // Cache invalidation failed — proceed with provisioning anyway
+      }
+    }
+
+    // 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, { forceRenew: forceRenew ?? false });
-        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}` };
-      }
+    // Provision through SmartProxy — this triggers the full pipeline:
+    // certProvisionFunction → bridge.loadCertificate → certificate-issued event → status map updated
+    try {
+      await smartProxy.provisionCertificate(routeNames[0]);
+      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}` };
     }
-
-    // Fallback: try provisioning via the first matching route
-    const routeNames = dcRouter.findRouteNamesForDomain(domain);
-    if (routeNames.length > 0) {
-      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}` };
-      }
-    }
-
-    return { success: false, message: `No routes found for domain '${domain}'` };
   }
 
   /**
@@ -364,9 +369,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();
     }

ts/opsserver/handlers/target-profile.handler.ts

@@ -110,8 +110,9 @@ export class TargetProfileHandler {
             targets: dataArg.targets,
             routeRefs: dataArg.routeRefs,
           });
-          // Re-apply routes to update VPN access
+          // Re-apply routes and refresh VPN client security to update access
           this.opsServerRef.dcRouterRef.routeConfigManager?.applyRoutes();
+          this.opsServerRef.dcRouterRef.vpnManager?.refreshAllClientSecurity();
           return { success: true };
         },
       ),
@@ -129,8 +130,9 @@ export class TargetProfileHandler {
           }
           const result = await manager.deleteProfile(dataArg.id, dataArg.force);
           if (result.success) {
-            // Re-apply routes to update VPN access
+            // Re-apply routes and refresh VPN client security to update access
             this.opsServerRef.dcRouterRef.routeConfigManager?.applyRoutes();
+            this.opsServerRef.dcRouterRef.vpnManager?.refreshAllClientSecurity();
           }
           return result;
         },

ts/vpn/classes.vpn-manager.ts

@@ -30,6 +30,9 @@ export interface IVpnManagerConfig {
    *  Called at config generation time (create/export). Returns CIDRs for WireGuard AllowedIPs.
    *  When not set, defaults to [subnet]. */
   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';
@@ -477,18 +480,28 @@ export class VpnManager {
     const security: plugins.smartvpn.IClientSecurity = {};
     const forceSmartproxy = client.forceDestinationSmartproxy ?? true;
 
+    // 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,
+    ];
+
     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
+    } else if (mergedAllowList.length || client.destinationBlockList?.length) {
+      // Client is forced to SmartProxy, but with allow/block overrides
+      // (includes TargetProfile direct targets that bypass SmartProxy)
       security.destinationPolicy = {
         default: 'forceTarget' as const,
         target: '127.0.0.1',
-        allowList: client.destinationAllowList,
+        allowList: mergedAllowList.length ? mergedAllowList : undefined,
         blockList: client.destinationBlockList,
       };
     }
@@ -497,6 +510,20 @@ export class VpnManager {
     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> {

ts_web/00_commitinfo_data.ts

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

ts_web/elements/ops-view-targetprofiles.ts

@@ -148,17 +148,35 @@ export class OpsViewTargetProfiles extends DeesElement {
     `;
   }
 
+  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-text .key=${'domains'} .label=${'Domains (comma-separated, e.g. *.example.com)'} ></dees-input-text>
-          <dees-input-text .key=${'targets'} .label=${'Targets (comma-separated host:port, e.g. 10.0.0.1:443)'}></dees-input-text>
-          <dees-input-text .key=${'routeRefs'} .label=${'Route Refs (comma-separated route names/IDs)'}></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 (host: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: [
@@ -172,30 +190,26 @@ export class OpsViewTargetProfiles extends DeesElement {
             const data = await form.collectFormData();
             if (!data.name) return;
 
-            const domains = data.domains
-              ? String(data.domains).split(',').map((s: string) => s.trim()).filter(Boolean)
-              : undefined;
-            const targets = data.targets
-              ? String(data.targets).split(',').map((s: string) => {
-                  const trimmed = s.trim();
-                  const lastColon = trimmed.lastIndexOf(':');
-                  if (lastColon === -1) return null;
-                  return {
-                    host: trimmed.substring(0, lastColon),
-                    port: parseInt(trimmed.substring(lastColon + 1), 10),
-                  };
-                }).filter((t): t is { host: string; port: number } => t !== null && !isNaN(t.port))
-              : undefined;
-            const routeRefs = data.routeRefs
-              ? String(data.routeRefs).split(',').map((s: string) => s.trim()).filter(Boolean)
-              : undefined;
+            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 {
+                  host: s.substring(0, lastColon),
+                  port: parseInt(s.substring(lastColon + 1), 10),
+                };
+              })
+              .filter((t): t is { host: 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,
-              targets,
-              routeRefs,
+              domains: domains.length > 0 ? domains : undefined,
+              targets: targets.length > 0 ? targets : undefined,
+              routeRefs: routeRefs.length > 0 ? routeRefs : undefined,
             });
             modalArg.destroy();
           },
@@ -205,20 +219,23 @@ export class OpsViewTargetProfiles extends DeesElement {
   }
 
   private async showEditProfileDialog(profile: interfaces.data.ITargetProfile) {
-    const currentDomains = profile.domains?.join(', ') ?? '';
-    const currentTargets = profile.targets?.map(t => `${t.host}:${t.port}`).join(', ') ?? '';
-    const currentRouteRefs = profile.routeRefs?.join(', ') ?? '';
+    const currentDomains = profile.domains || [];
+    const currentTargets = profile.targets?.map(t => `${t.host}:${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-text .key=${'domains'} .label=${'Domains (comma-separated, e.g. *.example.com)'} .value=${currentDomains}></dees-input-text>
-          <dees-input-text .key=${'targets'} .label=${'Targets (comma-separated host:port, e.g. 10.0.0.1:443)'} .value=${currentTargets}></dees-input-text>
-          <dees-input-text .key=${'routeRefs'} .label=${'Route Refs (comma-separated route names/IDs)'} .value=${currentRouteRefs}></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 (host: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: [
@@ -231,24 +248,19 @@ export class OpsViewTargetProfiles extends DeesElement {
             if (!form) return;
             const data = await form.collectFormData();
 
-            const domains = data.domains
-              ? String(data.domains).split(',').map((s: string) => s.trim()).filter(Boolean)
-              : [];
-            const targets = data.targets
-              ? String(data.targets).split(',').map((s: string) => {
-                  const trimmed = s.trim();
-                  if (!trimmed) return null;
-                  const lastColon = trimmed.lastIndexOf(':');
-                  if (lastColon === -1) return null;
-                  return {
-                    host: trimmed.substring(0, lastColon),
-                    port: parseInt(trimmed.substring(lastColon + 1), 10),
-                  };
-                }).filter((t): t is { host: string; port: number } => t !== null && !isNaN(t.port))
-              : [];
-            const routeRefs = data.routeRefs
-              ? String(data.routeRefs).split(',').map((s: string) => s.trim()).filter(Boolean)
-              : [];
+            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 {
+                  host: s.substring(0, lastColon),
+                  port: parseInt(s.substring(lastColon + 1), 10),
+                };
+              })
+              .filter((t): t is { host: 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,

ts_web/elements/ops-view-vpn.ts

@@ -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 = [
@@ -328,7 +330,11 @@ export class OpsViewVpn extends DeesElement {
             'Routing': routingHtml,
             'VPN IP': client.assignedIp || '-',
             'Target Profiles': client.targetProfileIds?.length
-              ? html`${client.targetProfileIds.map(t => html`<span class="tagBadge">${t}</span>`)}`
+              ? 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,13 +347,14 @@ 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=${'targetProfileIds'} .label=${'Target Profile IDs (comma-separated)'}></dees-input-text>
+                    <dees-input-list .key=${'targetProfileNames'} .label=${'Target Profiles'} .placeholder=${'Type to search profiles...'} .candidates=${profileCandidates} .allowFreeform=${false}></dees-input-list>
                     <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-checkbox .key=${'useHostIp'} .label=${'Get Host IP'} .value=${false}></dees-input-checkbox>
@@ -383,9 +390,9 @@ export class OpsViewVpn extends DeesElement {
                       if (!form) return;
                       const data = await form.collectFormData();
                       if (!data.clientId) return;
-                      const targetProfileIds = data.targetProfileIds
-                        ? data.targetProfileIds.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;
@@ -479,7 +486,7 @@ 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">Target Profiles</span><span class="infoValue">${client.targetProfileIds?.join(', ') || '-'}</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.forceDestinationSmartproxy !== false ? 'SmartProxy' : client.useHostIp ? 'Host IP' : 'Direct'}</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>
@@ -643,7 +650,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 currentTargetProfileIds = client.targetProfileIds?.join(', ') ?? '';
+              const currentTargetProfileNames = this.resolveProfileIdsToNames(client.targetProfileIds) || [];
+              const profileCandidates = this.getTargetProfileCandidates();
               const currentForceSmartproxy = client.forceDestinationSmartproxy ?? true;
               const currentUseHostIp = client.useHostIp ?? false;
               const currentUseDhcp = client.useDhcp ?? false;
@@ -659,7 +667,7 @@ 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=${'targetProfileIds'} .label=${'Target Profile IDs (comma-separated)'} .value=${currentTargetProfileIds}></dees-input-text>
+                    <dees-input-list .key=${'targetProfileNames'} .label=${'Target Profiles'} .placeholder=${'Type to search profiles...'} .candidates=${profileCandidates} .allowFreeform=${false} .value=${currentTargetProfileNames}></dees-input-list>
                     <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-checkbox .key=${'useHostIp'} .label=${'Get Host IP'} .value=${currentUseHostIp}></dees-input-checkbox>
@@ -690,9 +698,9 @@ export class OpsViewVpn extends DeesElement {
                       const form = modalArg.shadowRoot?.querySelector('.content')?.querySelector('dees-form');
                       if (!form) return;
                       const data = await form.collectFormData();
-                      const targetProfileIds = data.targetProfileIds
-                        ? data.targetProfileIds.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;
@@ -805,4 +813,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);
+  }
 }