From 7d6bc2b0ab255d948af10ad9abbfcf55545b7e6b Mon Sep 17 00:00:00 2001
From: master <>
Date: Sun, 29 Mar 2026 16:09:25 +0300
Subject: [PATCH] Show pack display name instead of raw ID in title

The pack-shell title showed the raw packId like 'Pack pack-291b12b...'
which is unreadable. Now looks up the display name from the pack store
cache. Falls back to a truncated ID (first 12 chars) when no name is
available. Added PolicyPackStore.currentPacks() synchronous accessor
for the computed signal lookup.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../policy-pack-shell.component.ts                  | 13 ++++++++++++-
 .../policy-studio/services/policy-pack.store.ts     |  5 +++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/Web/StellaOps.Web/src/app/features/policy-decisioning/policy-pack-shell.component.ts b/src/Web/StellaOps.Web/src/app/features/policy-decisioning/policy-pack-shell.component.ts
index 36dc9345b..97bf4a3bf 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-decisioning/policy-pack-shell.component.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-decisioning/policy-pack-shell.component.ts
@@ -18,6 +18,7 @@ import {
 import { filter, startWith } from 'rxjs';
 
 import { StellaPageTabsComponent, StellaPageTab } from '../../shared/components/stella-page-tabs/stella-page-tabs.component';
+import { PolicyPackStore } from '../policy-studio/services/policy-pack.store';
 
 type PackSubview =
   | 'workspace'
@@ -49,7 +50,7 @@ const PACK_DETAIL_TABS: readonly StellaPageTab[] = [
     <section class="policy-pack-shell" data-testid="policy-pack-shell">
       <header class="pack-shell__header">
         <div>
-          <h1 class="pack-shell__title">{{ packId() ? 'Pack ' + packId() : 'Policy Pack Workspace' }}</h1>
+          <h1 class="pack-shell__title">{{ packTitle() }}</h1>
           <p class="pack-shell__subtitle">{{ activeSubtitle() }}</p>
         </div>
       </header>
@@ -84,6 +85,7 @@ export class PolicyPackShellComponent {
   private readonly route = inject(ActivatedRoute);
   private readonly router = inject(Router);
   private readonly destroyRef = inject(DestroyRef);
+  private readonly packStore = inject(PolicyPackStore);
 
   readonly packId = signal<string | null>(this.readPackId());
   readonly activeSubview = signal<PackSubview>(this.readSubview());
@@ -92,6 +94,15 @@ export class PolicyPackShellComponent {
     return this.packId() ? PACK_DETAIL_TABS : WORKSPACE_TABS;
   });
 
+  readonly packTitle = computed(() => {
+    const id = this.packId();
+    if (!id) return 'Policy Pack Workspace';
+    // Try to find display name from the pack store cache
+    const packs = this.packStore.currentPacks();
+    const match = packs?.find((p) => p.id === id);
+    return match?.name && match.name !== id ? match.name : `Pack ${id.replace(/^pack-/, '').slice(0, 12)}…`;
+  });
+
   protected readonly activeSubtitle = computed(() => {
     if (!this.packId()) {
       return 'Browse deterministic pack inventory and open a pack into authoring mode.';
diff --git a/src/Web/StellaOps.Web/src/app/features/policy-studio/services/policy-pack.store.ts b/src/Web/StellaOps.Web/src/app/features/policy-studio/services/policy-pack.store.ts
index 85db19320..f08f689eb 100644
--- a/src/Web/StellaOps.Web/src/app/features/policy-studio/services/policy-pack.store.ts
+++ b/src/Web/StellaOps.Web/src/app/features/policy-studio/services/policy-pack.store.ts
@@ -15,6 +15,11 @@ export class PolicyPackStore {
   private usingFallback = false;
   private readonly cacheKey = 'policy-studio:packs-cache';
 
+  /** Synchronous snapshot of the current packs (may be null if not yet loaded). */
+  currentPacks(): PolicyPackSummary[] | null {
+    return this.packs$.value;
+  }
+
   getPacks(options: { allowRemoteFetch?: boolean } = {}): Observable<PolicyPackSummary[]> {
     const allowRemoteFetch = options.allowRemoteFetch ?? true;
     if (!this.loading) {