Redesign pack cards to match Stella Ops Material, add delete action

Pack cards completely restyled following the releases page pattern:
- Status badge (Active/Draft/Archived) with semantic colors
- Pack name with text-overflow ellipsis and title tooltip
- Version badge in mono font with subtle background
- Description and creation date in proper typography scale
- Decision capsules for actions (Edit, Simulate, Approvals, Delete)
  matching the releases page capsule pattern with SVG icons
- Hover: brand-primary border glow + subtle shadow lift
- Delete button with app-confirm-dialog (danger variant)

Layout changed from multi-column grid to single-column list for
better readability (each card is a full-width row).

Empty state follows the releases empty state pattern with centered
SVG icon, title, description, and inline create form.

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

src/Web/StellaOps.Web/src/app/features/policy-studio/workspace/policy-workspace.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, ChangeDetectionStrategy, inject, signal } from '@angular/core';
+import { Component, ChangeDetectionStrategy, inject, signal, ViewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { AuthService, AUTH_SERVICE } from '../../../core/auth';
 import { Router, RouterLink } from '@angular/router';
@@ -7,15 +7,18 @@ import { Router, RouterLink } from '@angular/router';
 import { PolicyPackSummary } from '../models/policy.models';
 import { PolicyApiService } from '../services/policy-api.service';
 import { PolicyPackStore } from '../services/policy-pack.store';
+import { ConfirmDialogComponent } from '../../../shared/components/confirm-dialog/confirm-dialog.component';
 
 @Component({
     selector: 'app-policy-workspace',
-    imports: [CommonModule, RouterLink, FormsModule],
+    imports: [CommonModule, RouterLink, FormsModule, ConfirmDialogComponent],
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
     <section class="workspace" [attr.aria-busy]="loading()">
       <div class="workspace__actions">
-        <button type="button" (click)="refresh()" [disabled]="refreshing()">{{ refreshing() ? 'Refreshing…' : 'Refresh' }}</button>
+        <button type="button" class="btn btn--secondary" (click)="refresh()" [disabled]="refreshing()">
+          {{ refreshing() ? 'Refreshing…' : 'Refresh' }}
+        </button>
       </div>
 
       @if (scopeHint) {
@@ -23,78 +26,57 @@ import { PolicyPackStore } from '../services/policy-pack.store';
           {{ scopeHint }} — some actions are disabled. Request scopes from your admin.
         </div>
       }
-    
+
       <div class="workspace__grid">
-        @for (pack of packs(); track pack) {
+        @for (pack of packs(); track pack.id) {
-          <article class="pack-card">
+          <article class="pack-card" [class.pack-card--clickable]="canView">
-            <header class="pack-card__head">
+            <a class="pack-card__link" [routerLink]="canView ? ['/ops/policy/packs', pack.id] : null">
-              <div>
+              <div class="pack-card__header">
-                <p class="pack-card__eyebrow">{{ pack.status | titlecase }}</p>
+                <div class="pack-card__identity">
-                <h2>{{ pack.name }}</h2>
+                  <span class="pack-card__status" [class]="'pack-card__status--' + pack.status">{{ pack.status }}</span>
-                <p class="pack-card__desc">{{ pack.description || 'No description provided.' }}</p>
+                  <h3 class="pack-card__name" [title]="pack.name">{{ pack.name }}</h3>
+                </div>
+                <span class="pack-card__version">{{ pack.version }}</span>
               </div>
+              <p class="pack-card__desc">{{ pack.description || 'No description provided.' }}</p>
               <div class="pack-card__meta">
-                <span>v{{ pack.version }}</span>
+                <span>Created {{ pack.createdAt | date: 'mediumDate' }}</span>
-                <span>{{ pack.modifiedAt | date: 'medium' }}</span>
+                @if (pack.tags?.length) {
+                  <span class="pack-card__tags">
+                    @for (tag of pack.tags; track tag) {
+                      <span class="pack-card__tag">{{ tag }}</span>
+                    }
+                  </span>
+                }
               </div>
-            </header>
+            </a>
-            <ul class="pack-card__tags">
-              @for (tag of pack.tags; track tag) {
-                <li>{{ tag }}</li>
-              }
-            </ul>
             <div class="pack-card__actions">
-              <a
+              <a class="capsule" [routerLink]="['/ops/policy/packs', pack.id, 'edit']"
-                [routerLink]="['/ops/policy/packs', pack.id, 'edit']"
+                [class.capsule--disabled]="!canAuthor" [title]="canAuthor ? 'Edit pack rules' : 'Requires policy:author'">
-                [class.action-disabled]="!canAuthor"
+                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
-                [attr.aria-disabled]="!canAuthor"
-                [title]="canAuthor ? '' : 'Requires policy:author scope'"
-                >
                 Edit
               </a>
-              <a
+              <a class="capsule" [routerLink]="['/ops/policy/packs', pack.id, 'simulate']"
-                [routerLink]="['/ops/policy/packs', pack.id, 'simulate']"
+                [class.capsule--disabled]="!canSimulate" [title]="canSimulate ? 'Run simulation' : 'Requires policy:simulate'">
-                [class.action-disabled]="!canSimulate"
+                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 3l14 9-14 9V3z"/></svg>
-                [attr.aria-disabled]="!canSimulate"
-                [title]="canSimulate ? '' : 'Requires policy:simulate scope'"
-                >
                 Simulate
               </a>
-              <a
+              <a class="capsule" [routerLink]="['/ops/policy/packs', pack.id, 'approvals']"
-                [routerLink]="['/ops/policy/packs', pack.id, 'approvals']"
+                [class.capsule--disabled]="!canReviewOrApprove" [title]="canReviewOrApprove ? 'Review approvals' : 'Requires policy:review'">
-                [class.action-disabled]="!canReviewOrApprove"
+                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
-                [attr.aria-disabled]="!canReviewOrApprove"
-                [title]="canReviewOrApprove ? '' : 'Requires policy:review or policy:approve scope'"
-                >
                 Approvals
               </a>
-              <a
+              <button class="capsule capsule--danger" (click)="requestDelete(pack)" [disabled]="!canOperate"
-                [routerLink]="['/ops/policy/packs', pack.id]"
+                [title]="canOperate ? 'Delete pack' : 'Requires policy:operate'">
-                [class.action-disabled]="!canView"
+                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
-                [attr.aria-disabled]="!canView"
+                Delete
-                [title]="canView ? '' : 'Requires policy:read scope'"
+              </button>
-                >
-                Dashboard
-              </a>
             </div>
-            <dl class="pack-card__detail">
-              <div>
-                <dt>Created</dt>
-                <dd>{{ pack.createdAt | date: 'medium' }}</dd>
-              </div>
-              <div>
-                <dt>Authors</dt>
-                <dd>{{ pack.createdBy || 'unknown' }}</dd>
-              </div>
-              <div>
-                <dt>Owner</dt>
-                <dd>{{ pack.modifiedBy || 'unknown' }}</dd>
-              </div>
-            </dl>
           </article>
         } @empty {
           @if (!loading()) {
             <div class="workspace__empty" data-testid="policy-packs-empty-state">
+              <svg viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="var(--color-text-muted)" stroke-width="1.5"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="M3.27 6.96L12 12.01l8.73-5.05"/><path d="M12 22.08V12"/></svg>
               <h3>No policy packs configured</h3>
               <p>
                 Policy packs define the rules that govern release decisions.
@@ -113,7 +95,7 @@ import { PolicyPackStore } from '../services/policy-pack.store';
                 @if (createError(); as err) {
                   <p class="error-text">{{ err }}</p>
                 }
-                <button class="btn-primary" (click)="createPack()" [disabled]="!newPackName().trim() || creating()">
+                <button class="btn btn--primary" (click)="createPack()" [disabled]="!newPackName().trim() || creating()">
                   @if (creating()) { Creating... } @else { Create Pack }
                 </button>
               </div>
@@ -122,47 +104,171 @@ import { PolicyPackStore } from '../services/policy-pack.store';
         }
       </div>
     </section>
+
+    <app-confirm-dialog #deleteConfirm
+      title="Delete Policy Pack"
+      [message]="'Delete pack \\'' + (pendingDeletePack()?.name ?? '') + '\\'? This action cannot be undone.'"
+      confirmLabel="Delete" cancelLabel="Cancel" variant="danger"
+      (confirmed)="executeDelete()" />
     `,
-    styles: [
+    styles: [`
-        `
+      :host { display: block; }
-      :host { display: block; background: var(--color-surface-primary); color: var(--color-text-primary); }
+      .workspace { max-width: 1200px; margin: 0 auto; padding: 0; }
-      .workspace { max-width: 1200px; margin: 0 auto; padding: 1.5rem; }
+
+      /* Actions bar */
       .workspace__actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-bottom: 1rem; }
-      .workspace__actions button { background: var(--color-btn-secondary-bg); border: 1px solid var(--color-btn-secondary-border); color: var(--color-btn-secondary-text); border-radius: var(--radius-lg); padding: 0.35rem 0.7rem; cursor: pointer; font-size: 0.8125rem; }
+
-      .workspace__actions button:hover:not(:disabled) { background: var(--color-btn-secondary-hover-bg); border-color: var(--color-btn-secondary-hover-border); }
+      /* Buttons */
-      .workspace__actions button:disabled { opacity: 0.5; cursor: not-allowed; }
+      .btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; border-radius: var(--radius-md); font-size: 0.8125rem; font-weight: var(--font-weight-medium); cursor: pointer; transition: all 150ms ease; white-space: nowrap; }
-      .workspace__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
+      .btn--primary { background: var(--color-btn-primary-bg); border: 1px solid var(--color-btn-primary-bg); color: var(--color-btn-primary-text); }
-      .pack-card { background: var(--color-surface-elevated); border: 1px solid var(--color-border-primary); border-radius: var(--radius-xl); padding: 1rem; box-shadow: var(--shadow-md); display: grid; gap: 0.6rem; }
+      .btn--primary:hover:not(:disabled) { opacity: 0.9; }
-      .pack-card__head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start; }
+      .btn--secondary { background: var(--color-btn-secondary-bg); border: 1px solid var(--color-btn-secondary-border); color: var(--color-btn-secondary-text); }
-      .pack-card__eyebrow { margin: 0; color: var(--color-text-link); font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; }
+      .btn--secondary:hover:not(:disabled) { background: var(--color-btn-secondary-hover-bg); border-color: var(--color-btn-secondary-hover-border); }
-      .pack-card__desc { margin: 0.2rem 0 0; color: var(--color-text-muted); }
+      .btn:disabled { opacity: 0.5; cursor: not-allowed; }
-      .pack-card__meta { display: grid; justify-items: end; gap: 0.2rem; color: var(--color-text-muted); font-size: 0.9rem; }
+
-      .pack-card__tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
+      /* Banner */
-      .pack-card__tags li { padding: 0.2rem 0.45rem; border: 1px solid var(--color-border-primary); border-radius: var(--radius-full); background: var(--color-surface-tertiary); }
+      .workspace__banner { background: var(--color-status-warning-bg); border: 1px solid var(--color-status-warning-border); color: var(--color-status-warning-text); padding: 0.6rem 0.8rem; border-radius: var(--radius-md); margin-bottom: 1rem; font-size: var(--font-size-sm, 0.75rem); }
-      .pack-card__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
+
-      .pack-card__actions a { color: var(--color-text-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); padding: 0.35rem 0.6rem; text-decoration: none; }
+      /* Grid */
-      .pack-card__actions a:hover { border-color: var(--color-status-info); }
+      .workspace__grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
-      .pack-card__actions a.action-disabled { opacity: 0.5; pointer-events: none; border-style: dashed; }
+
-      .pack-card__detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.35rem 1rem; margin: 0; }
+      /* Pack card */
-      dt { color: var(--color-text-muted); font-size: 0.85rem; margin: 0; }
+      .pack-card {
-      dd { margin: 0; color: var(--color-text-primary); }
+        background: var(--color-surface-primary);
-      .workspace__banner { background: var(--color-status-warning-bg); border: 1px solid var(--color-status-warning-border); color: var(--color-status-warning-text); padding: 0.75rem 1rem; border-radius: var(--radius-xl); margin: 0.5rem 0 1rem; }
+        border: 1px solid var(--color-border-primary);
-      .workspace__empty { grid-column: 1 / -1; text-align: center; padding: 3rem 1.5rem; border: 1px dashed var(--color-border-primary); border-radius: var(--radius-xl); background: var(--color-surface-elevated); }
+        border-radius: var(--radius-lg);
-      .workspace__empty h3 { margin: 0 0 0.5rem; color: var(--color-text-heading); }
+        overflow: hidden;
-      .workspace__empty p { margin: 0 0 1rem; color: var(--color-text-muted); max-width: 480px; margin-inline: auto; }
+        transition: border-color 150ms ease, box-shadow 150ms ease;
-      .workspace__empty-link { display: inline-block; color: var(--color-text-link); border: 1px solid var(--color-brand-primary); border-radius: var(--radius-lg); padding: 0.45rem 0.8rem; text-decoration: none; }
+      }
-      .workspace__empty-link:hover { background: var(--color-btn-primary-bg); color: var(--color-text-inverse); }
+      .pack-card:hover { border-color: var(--color-brand-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
-      .workspace__create-form { display: grid; gap: 0.75rem; max-width: 400px; margin: 1.5rem auto 0; text-align: left; }
+
-      .workspace__create-form h4 { margin: 0; text-align: center; color: var(--color-text-heading); }
+      .pack-card__link { display: block; padding: 0.85rem 1rem 0.5rem; text-decoration: none; color: inherit; cursor: pointer; }
-      .workspace__create-form label { display: grid; gap: 0.25rem; font-size: 0.85rem; color: var(--color-text-muted); }
+
-      .workspace__create-form input { padding: 0.45rem 0.6rem; border: 1px solid var(--color-border-primary); border-radius: var(--radius-lg); background: var(--color-surface-primary); color: var(--color-text-primary); font-size: 0.95rem; }
+      .pack-card__header { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.25rem; }
-      .workspace__create-form input:focus { outline: none; border-color: var(--color-brand-primary); box-shadow: 0 0 0 2px rgba(var(--color-brand-primary-rgb, 99, 102, 241), 0.15); }
+      .pack-card__identity { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
-      .workspace__create-form .btn-primary { background: var(--color-btn-primary-bg); border: 1px solid var(--color-btn-primary-bg); color: var(--color-btn-primary-text); border-radius: var(--radius-lg); padding: 0.45rem 0.8rem; cursor: pointer; font-size: 0.95rem; }
+
-      .workspace__create-form .btn-primary:hover:not(:disabled) { opacity: 0.9; }
+      .pack-card__status {
-      .workspace__create-form .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+        display: inline-block;
-      .workspace__create-form .error-text { margin: 0; color: var(--color-status-error, #ef4444); font-size: 0.85rem; }
+        padding: 0.06rem 0.4rem;
-    `,
+        border-radius: var(--radius-full);
-    ]
+        font-size: var(--font-size-xs, 0.6875rem);
+        font-weight: var(--font-weight-semibold);
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        flex-shrink: 0;
+      }
+      .pack-card__status--active { background: var(--color-status-success-bg); color: var(--color-status-success-text); }
+      .pack-card__status--draft { background: var(--color-status-warning-bg); color: var(--color-status-warning-text); }
+      .pack-card__status--archived { background: var(--color-surface-tertiary); color: var(--color-text-muted); }
+
+      .pack-card__name {
+        margin: 0;
+        font-size: 0.9375rem;
+        font-weight: var(--font-weight-semibold);
+        color: var(--color-text-heading);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .pack-card__version {
+        font-size: var(--font-size-xs, 0.6875rem);
+        font-family: var(--font-family-mono);
+        color: var(--color-text-muted);
+        flex-shrink: 0;
+        background: var(--color-surface-secondary);
+        padding: 0.1rem 0.4rem;
+        border-radius: var(--radius-sm);
+      }
+
+      .pack-card__desc {
+        margin: 0;
+        font-size: var(--font-size-sm, 0.75rem);
+        color: var(--color-text-secondary);
+        line-height: 1.4;
+      }
+
+      .pack-card__meta {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        margin-top: 0.35rem;
+        font-size: var(--font-size-xs, 0.6875rem);
+        color: var(--color-text-muted);
+      }
+
+      .pack-card__tags { display: flex; gap: 0.25rem; }
+      .pack-card__tag {
+        padding: 0 0.3rem;
+        background: var(--color-surface-tertiary);
+        border-radius: var(--radius-sm);
+        font-size: 0.625rem;
+        text-transform: uppercase;
+        letter-spacing: 0.03em;
+      }
+
+      /* Action capsules (matches releases pattern) */
+      .pack-card__actions {
+        display: flex;
+        gap: 0.35rem;
+        padding: 0.5rem 1rem 0.75rem;
+        border-top: 1px solid var(--color-border-primary);
+      }
+
+      .capsule {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.2rem 0.5rem;
+        border-radius: var(--radius-sm);
+        font-size: 0.65rem;
+        font-weight: 500;
+        cursor: pointer;
+        border: 1px solid var(--color-border-primary);
+        transition: all 150ms ease;
+        text-decoration: none;
+        white-space: nowrap;
+        line-height: 1.3;
+        background: transparent;
+        color: var(--color-text-secondary);
+      }
+      .capsule:hover { background: var(--color-surface-tertiary); border-color: var(--color-brand-primary); color: var(--color-text-primary); }
+      .capsule--disabled { opacity: 0.4; pointer-events: none; border-style: dashed; }
+      .capsule--danger { color: var(--color-status-error-text); }
+      .capsule--danger:hover { background: var(--color-status-error-bg); border-color: var(--color-status-error-border); }
+      .capsule:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; border-style: dashed; }
+
+      /* Empty state */
+      .workspace__empty {
+        grid-column: 1 / -1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+        padding: 3.5rem 1.5rem 4rem;
+        border: 1px solid var(--color-border-primary);
+        border-radius: var(--radius-lg);
+        background: var(--color-surface-primary);
+      }
+      .workspace__empty svg { margin-bottom: 1.25rem; }
+      .workspace__empty h3 { margin: 0 0 0.4rem; font-size: var(--font-size-md, 1rem); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
+      .workspace__empty p { margin: 0 0 1.5rem; max-width: 420px; font-size: var(--font-size-sm, 0.75rem); color: var(--color-text-secondary); line-height: var(--line-height-relaxed, 1.625); }
+
+      /* Create form */
+      .workspace__create-form { display: grid; gap: 0.75rem; max-width: 400px; margin: 0 auto; text-align: left; }
+      .workspace__create-form h4 { margin: 0; text-align: center; font-size: 0.875rem; color: var(--color-text-heading); }
+      .workspace__create-form label { display: grid; gap: 0.25rem; font-size: 0.8125rem; color: var(--color-text-secondary); }
+      .workspace__create-form input {
+        padding: 0.4rem 0.6rem;
+        border: 1px solid var(--color-border-primary);
+        border-radius: var(--radius-md);
+        background: transparent;
+        color: var(--color-text-primary);
+        font-size: 0.8125rem;
+      }
+      .workspace__create-form input:focus { outline: none; border-color: var(--color-brand-primary); }
+      .workspace__create-form .error-text { margin: 0; color: var(--color-status-error-text); font-size: var(--font-size-sm, 0.75rem); }
+    `]
 })
 export class PolicyWorkspaceComponent {
   protected readonly loading = signal(true);
@@ -182,6 +288,9 @@ export class PolicyWorkspaceComponent {
   protected readonly newPackDesc = signal('');
   protected readonly creating = signal(false);
   protected readonly createError = signal<string | null>(null);
+  protected readonly pendingDeletePack = signal<PolicyPackSummary | null>(null);
+
+  @ViewChild('deleteConfirm') private deleteConfirmRef!: ConfirmDialogComponent;
 
   private readonly packStore = inject(PolicyPackStore);
   private readonly policyApi = inject(PolicyApiService);
@@ -259,6 +368,25 @@ export class PolicyWorkspaceComponent {
       });
   }
 
+  protected requestDelete(pack: PolicyPackSummary): void {
+    this.pendingDeletePack.set(pack);
+    this.deleteConfirmRef.open();
+  }
+
+  protected executeDelete(): void {
+    const pack = this.pendingDeletePack();
+    if (!pack) return;
+    this.policyApi.deletePack(pack.id).subscribe({
+      next: () => {
+        this.packStore.clearCache();
+        this.refresh();
+      },
+      error: (err) => {
+        console.error('Failed to delete pack', err);
+      },
+    });
+  }
+
   private applyScopes(): void {
     this.canAuthor = this.auth.canAuthorPolicies?.() ?? false;
     this.canSimulate = this.auth.canSimulatePolicies?.() ?? false;