Map policy API response fields to UI model (packId→id, displayName→name)

The backend returns PolicyPackSummaryDto with fields: packId,
displayName, createdAt, versions. The UI model expects: id, name,
description, version, status, etc.

Added mapPackSummary() to translate API fields to UI model fields.
The sortPacks filter was removing all packs because p.id was undefined
(the API field is packId, not id).

Also maps createPack response and sends displayName in the POST body
to match the backend's expected field name.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/Web/StellaOps.Web/src/app/features/policy-studio/services/policy-api.service.ts

@@ -14,6 +14,7 @@
 import { Injectable, inject } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 import type {
   PolicyPackSummary,
@@ -68,7 +69,24 @@ export class PolicyApiService {
     if (params?.limit) httpParams = httpParams.set('limit', params.limit.toString());
     if (params?.offset) httpParams = httpParams.set('offset', params.offset.toString());
 
-    return this.http.get<PolicyPackSummary[]>(`${API_BASE}/packs`, { params: httpParams });
+    return this.http.get<any[]>(`${API_BASE}/packs`, { params: httpParams }).pipe(
+      map((items) => (items ?? []).map((item) => this.mapPackSummary(item)))
+    );
+  }
+
+  private mapPackSummary(raw: any): PolicyPackSummary {
+    return {
+      id: raw.packId ?? raw.id ?? '',
+      name: raw.displayName ?? raw.name ?? raw.packId ?? 'Unnamed Pack',
+      description: raw.description ?? '',
+      version: raw.versions?.length > 0 ? `v${Math.max(...raw.versions)}` : 'latest',
+      status: raw.status ?? 'active',
+      createdAt: raw.createdAt ?? '',
+      modifiedAt: raw.modifiedAt ?? raw.createdAt ?? '',
+      createdBy: raw.createdBy ?? '',
+      modifiedBy: raw.modifiedBy ?? raw.createdBy ?? '',
+      tags: raw.tags ?? [],
+    };
   }
 
   /**
@@ -95,7 +113,16 @@ export class PolicyApiService {
     content: string;
     tags?: string[];
   }): Observable<PolicyPack> {
-    return this.http.post<PolicyPack>(`${API_BASE}/packs`, pack);
+    return this.http.post<any>(`${API_BASE}/packs`, {
+      displayName: pack.name,
+      ...pack,
+    }).pipe(
+      map((raw) => ({
+        ...raw,
+        id: raw?.packId ?? raw?.id ?? '',
+        name: raw?.displayName ?? raw?.name ?? pack.name,
+      }))
+    );
   }
 
   /**