@serve.zone/dcrouter 12.9.4 → 13.0.0

package/ts_web/appstate.ts

@@ -116,7 +116,7 @@ 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', 'emails', 'logs', 'routes', 'apitokens', 'configuration', 'security', 'certificates', 'remoteingress', 'sourceprofiles', 'networktargets', 'targetprofiles'];
   const segments = path.split('/').filter(Boolean);
   const view = segments[0];
   return validViews.includes(view) ? view : 'overview';
@@ -459,12 +459,19 @@ export const setActiveViewAction = uiStatePart.createAction<string>(async (state
   }
 
   // If switching to security profiles or network targets views, fetch profiles/targets data
-  if ((viewName === 'securityprofiles' || viewName === 'networktargets') && currentState.activeView !== viewName) {
+  if ((viewName === 'sourceprofiles' || viewName === 'networktargets') && currentState.activeView !== viewName) {
     setTimeout(() => {
       profilesTargetsStatePart.dispatchAction(fetchProfilesAndTargetsAction, null);
     }, 100);
   }
 
+  // If switching to target profiles view, fetch target profiles data
+  if (viewName === 'targetprofiles' && currentState.activeView !== viewName) {
+    setTimeout(() => {
+      targetProfilesStatePart.dispatchAction(fetchTargetProfilesAction, null);
+    }, 100);
+  }
+
   return {
     ...currentState,
     activeView: viewName,
@@ -1006,7 +1013,7 @@ 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[];
@@ -1028,7 +1035,7 @@ 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,
@@ -1105,7 +1112,7 @@ export const toggleVpnClientAction = vpnStatePart.createAction<{
 export const updateVpnClientAction = vpnStatePart.createAction<{
   clientId: string;
   description?: string;
-  serverDefinedClientTags?: string[];
+  targetProfileIds?: string[];
   forceDestinationSmartproxy?: boolean;
   destinationAllowList?: string[];
   destinationBlockList?: string[];
@@ -1127,7 +1134,7 @@ export const updateVpnClientAction = vpnStatePart.createAction<{
       identity: context.identity!,
       clientId: dataArg.clientId,
       description: dataArg.description,
-      serverDefinedClientTags: dataArg.serverDefinedClientTags,
+      targetProfileIds: dataArg.targetProfileIds,
       forceDestinationSmartproxy: dataArg.forceDestinationSmartproxy,
       destinationAllowList: dataArg.destinationAllowList,
       destinationBlockList: dataArg.destinationBlockList,
@@ -1158,11 +1165,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<{ host: 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<{ host: 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;
@@ -1182,7 +1345,7 @@ export const profilesTargetsStatePart = await appState.getStatePart<IProfilesTar
 );
 
 // ============================================================================
-// Security Profiles & Network Targets Actions
+// Source Profiles & Network Targets Actions
 // ============================================================================
 
 export const fetchProfilesAndTargetsAction = profilesTargetsStatePart.createAction(
@@ -1193,8 +1356,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
@@ -1231,8 +1394,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,
@@ -1259,8 +1422,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,
@@ -1285,8 +1448,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,

package/ts_web/elements/index.ts

@@ -10,6 +10,7 @@ export * from './ops-view-security.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-sourceprofiles.js';
 export * from './ops-view-networktargets.js';
+export * from './ops-view-targetprofiles.js';
 export * from './shared/index.js';

package/ts_web/elements/ops-dashboard.ts

@@ -24,8 +24,9 @@ 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 { OpsViewSourceProfiles } from './ops-view-sourceprofiles.js';
 import { OpsViewNetworkTargets } from './ops-view-networktargets.js';
+import { OpsViewTargetProfiles } from './ops-view-targetprofiles.js';
 
 @customElement('ops-dashboard')
 export class OpsDashboard extends DeesElement {
@@ -81,15 +82,20 @@ export class OpsDashboard extends DeesElement {
       element: OpsViewRoutes,
     },
     {
-      name: 'SecurityProfiles',
+      name: 'SourceProfiles',
       iconName: 'lucide:shieldCheck',
-      element: OpsViewSecurityProfiles,
+      element: OpsViewSourceProfiles,
     },
     {
       name: 'NetworkTargets',
       iconName: 'lucide:server',
       element: OpsViewNetworkTargets,
     },
+    {
+      name: 'TargetProfiles',
+      iconName: 'lucide:target',
+      element: OpsViewTargetProfiles,
+    },
     {
       name: 'ApiTokens',
       iconName: 'lucide:key',

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

@@ -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 = {
@@ -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} .selectedOption=${profileOptions.find((o) => o.key === (merged.metadata?.securityProfileRef || '')) || null}></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,11 +529,30 @@ 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';
+                }
+              }
+              updatedRoute.action.tls = tls;
+            } else {
+              updatedRoute.action.tls = null; // explicit removal
+            }
+
             const metadata: any = {};
-            const profileRefValue = formData.securityProfileRef as any;
+            const profileRefValue = formData.sourceProfileRef as any;
             const profileKey = typeof profileRefValue === 'string' ? profileRefValue : profileRefValue?.key;
             if (profileKey) {
-              metadata.securityProfileRef = profileKey;
+              metadata.sourceProfileRef = profileKey;
             }
             const targetRefValue = formData.networkTargetRef as any;
             const targetKey = typeof targetRefValue === 'string' ? targetRefValue : targetRefValue?.key;
@@ -501,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() {
@@ -524,7 +602,7 @@ export class OpsViewRoutes extends DeesElement {
       })),
     ];
 
-    await DeesModal.createAndShow({
+    const createModal = await DeesModal.createAndShow({
       heading: 'Add Programmatic Route',
       content: html`
         <dees-form>
@@ -532,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}></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: [
@@ -577,12 +663,29 @@ 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 = {};
-            const profileRefValue = formData.securityProfileRef as any;
+            const profileRefValue = formData.sourceProfileRef as any;
             const profileKey = typeof profileRefValue === 'string' ? profileRefValue : profileRefValue?.key;
             if (profileKey) {
-              metadata.securityProfileRef = profileKey;
+              metadata.sourceProfileRef = profileKey;
             }
             const targetRefValue = formData.networkTargetRef as any;
             const targetKey = typeof targetRefValue === 'string' ? targetRefValue : targetRefValue?.key;
@@ -602,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() {

package/ts_web/elements/{ops-view-securityprofiles.ts → ops-view-sourceprofiles.ts}

@@ -14,12 +14,12 @@ 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,20 @@ 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>
+      <ops-sectionheading>Source Profiles</ops-sectionheading>
       <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) => ({
+          .displayFunction=${(profile: interfaces.data.ISourceProfile) => ({
             Name: profile.name,
             Description: profile.description || '-',
             'IP Allow List': (profile.security?.ipAllowList || []).join(', ') || '-',
@@ -107,7 +107,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 +116,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 +129,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>
@@ -167,7 +167,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}`,
@@ -209,7 +209,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,