feat(sz-route-card): add Linked section for security profile and network target refs

ts_web/elements/sz-route-card.ts

@@ -55,12 +55,21 @@ export interface IRouteSecurity {
   rateLimit?: { enabled: boolean; maxRequests: number; window: number };
 }
 
+export interface IRouteMetadata {
+  securityProfileRef?: string;
+  networkTargetRef?: string;
+  securityProfileName?: string;
+  networkTargetName?: string;
+  lastResolvedAt?: number;
+}
+
 export interface IRouteConfig {
   id?: string;
   match: IRouteMatch;
   action: IRouteAction;
   security?: IRouteSecurity;
   headers?: { request?: Record<string, string>; response?: Record<string, string> };
+  metadata?: IRouteMetadata;
   name?: string;
   description?: string;
   priority?: number;
@@ -127,6 +136,10 @@ export class SzRouteCard extends DeesElement {
             rateLimit: { enabled: true, maxRequests: 100, window: 60 },
             maxConnections: 1000,
           },
+          metadata: {
+            securityProfileName: 'STANDARD',
+            networkTargetName: 'LOSSLESS_INFRA',
+          },
         } satisfies IRouteConfig}
       ></sz-route-card>
     </div>
@@ -296,6 +309,21 @@ export class SzRouteCard extends DeesElement {
         border-left-color: ${cssManager.bdTheme('#f59e0b', '#f59e0b')};
       }
 
+      .section.linked {
+        border-left-color: ${cssManager.bdTheme('#8b5cf6', '#8b5cf6')};
+      }
+
+      .linked-name {
+        display: inline-flex;
+        padding: 1px 6px;
+        border-radius: 3px;
+        font-size: 12px;
+        font-weight: 600;
+        font-family: monospace;
+        background: ${cssManager.bdTheme('#ede9fe', 'rgba(139, 92, 246, 0.15)')};
+        color: ${cssManager.bdTheme('#6d28d9', '#a78bfa')};
+      }
+
       .section-label {
         font-size: 10px;
         font-weight: 600;
@@ -624,6 +652,9 @@ export class SzRouteCard extends DeesElement {
             `
           : ''}
 
+        <!-- Linked References Section -->
+        ${this.renderLinked()}
+
         <!-- Feature Icons Row -->
         ${this.renderFeatures()}
       </div>
@@ -638,12 +669,43 @@ export class SzRouteCard extends DeesElement {
     )}`;
   }
 
+  private renderLinked(): TemplateResult {
+    const meta = this.route?.metadata;
+    if (!meta) return html``;
+    const hasProfile = !!meta.securityProfileName;
+    const hasTarget = !!meta.networkTargetName;
+    if (!hasProfile && !hasTarget) return html``;
+
+    return html`
+      <div class="section linked">
+        <div class="section-label">Linked</div>
+        ${hasProfile
+          ? html`
+              <div class="field-row">
+                <span class="field-key">Profile</span>
+                <span class="field-value"><span class="linked-name">${meta.securityProfileName}</span></span>
+              </div>
+            `
+          : ''}
+        ${hasTarget
+          ? html`
+              <div class="field-row">
+                <span class="field-key">Target</span>
+                <span class="field-value"><span class="linked-name">${meta.networkTargetName}</span></span>
+              </div>
+            `
+          : ''}
+      </div>
+    `;
+  }
+
   private renderFeatures(): TemplateResult {
     if (!this.route) return html``;
     const features: TemplateResult[] = [];
     const action = this.route.action;
     const security = this.route.security;
     const headers = this.route.headers;
+    const meta = this.route.metadata;
 
     if (action.tls) {
       features.push(html`<span class="feature"><span class="feature-icon">&#x1f512;</span>TLS</span>`);
@@ -660,6 +722,9 @@ export class SzRouteCard extends DeesElement {
     if (headers) {
       features.push(html`<span class="feature"><span class="feature-icon">&#x2699;</span>Headers</span>`);
     }
+    if (meta?.securityProfileName || meta?.networkTargetName) {
+      features.push(html`<span class="feature"><span class="feature-icon">&#x1f517;</span>Linked</span>`);
+    }
 
     if (features.length === 0) return html``;
     return html`<div class="features-row">${features}</div>`;