UI fixes

src/Web/StellaOps.Web/AGENTS.md

@@ -87,3 +87,95 @@ Design and build the StellaOps web user experience that surfaces backend capabil
 - 4. Coordinate doc updates, tests, and cross-guild communication whenever contracts or workflows change.
 - 5. Revert to `TODO` if you pause the task without shipping changes; leave notes in commit/PR descriptions for context.
 
+## Metric / KPI Cards Convention (MANDATORY)
+
+All metric badges, stat cards, KPI tiles, and summary indicators **must** use `<stella-metric-card>`.
+Do NOT create custom `.stat-card`, `.summary-card`, `.kpi-card`, or `.posture-card` elements.
+
+**Components:**
+- `shared/components/stella-metric-card/stella-metric-card.component.ts` — individual card
+- `shared/components/stella-metric-card/stella-metric-grid.component.ts` — responsive grid wrapper
+
+**Usage:**
+```html
+<stella-metric-grid [columns]="3">
+  <stella-metric-card label="Risk Posture" [value]="riskLevel()" subtitle="6 findings in scope"
+    icon="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" route="/triage/artifacts" />
+  <stella-metric-card label="VEX Coverage" value="0%" subtitle="0/0 findings covered" />
+</stella-metric-grid>
+```
+
+**Design rules:**
+- Cards are **uncolored** — no severity/status color backgrounds
+- Icon is mandatory (SVG path d, multi-path via `|||`)
+- Subtitle is 5-10 words explaining the metric
+- If `route` is set: card is clickable with hover lift + arrow
+- If no `route`: static display, no hover effect
+
+## Tab Navigation Convention (MANDATORY)
+
+All page-level tab navigation **must** use `<stella-page-tabs>`.
+Do NOT create custom `.tabs`, `.tab-navigation`, `.tab-button`, or `nav[role="tablist"]` elements.
+Do NOT use the `app-tabs` / `TabsComponent` for page tabs (that component is for inline content tabs only).
+
+**Component:** `shared/components/stella-page-tabs/stella-page-tabs.component.ts`
+
+**Usage (signal-based, no router):**
+```html
+<stella-page-tabs
+  [tabs]="tabs"
+  [activeTab]="activeTab()"
+  (tabChange)="activeTab.set($any($event))"
+  ariaLabel="Section tabs"
+>
+  @switch (activeTab()) {
+    @case ('first') { <my-first-panel /> }
+    @case ('second') { <my-second-panel /> }
+  }
+</stella-page-tabs>
+```
+
+**Usage (router-based):**
+```html
+<stella-page-tabs
+  [tabs]="pageTabs"
+  [activeTab]="activeTab()"
+  ariaLabel="Page tabs"
+  (tabChange)="onTabChange($event)"
+>
+  <router-outlet></router-outlet>
+</stella-page-tabs>
+```
+
+**Tab definition:**
+```typescript
+const MY_TABS: readonly StellaPageTab[] = [
+  { id: 'overview', label: 'Overview', icon: 'M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z' },
+  { id: 'details', label: 'Details', icon: 'M14 2H6a2...', status: 'warn', statusHint: '3 issues' },
+];
+```
+
+**Design rules:**
+- Every tab MUST have an SVG icon (`icon` field — SVG path `d` attribute, multi-path via `|||`)
+- Labels should be short (1-2 words)
+- Use `status` for warn/error indicators, `badge` for counts
+- Do NOT duplicate the tab bar styling — the component owns all tab CSS
+- The component provides: keyboard navigation, ARIA roles, active background, bottom border, icon opacity transitions, panel border-radius, enter animation
+
+## Table Styling Convention
+All HTML tables must use the `stella-table` CSS class for consistent styling.
+Never define custom table padding, borders, or header styles inline.
+Use the shared data-table component when possible, or the stella-table class for simple static tables.
+
+## Filter Convention (MANDATORY)
+
+Three filter component types:
+1. `stella-filter-chip` — Single-select dropdown (Region, Env, Stage, Type, Gate, Risk)
+2. `stella-filter-multi` — Multi-select with checkboxes + All/None (Severity, Status)
+3. `stella-view-mode-switcher` — Binary toggle (Operator/Auditor, view modes)
+
+Global filters (Region, Env, Window, Stage, Operator/Auditor) live in the header bar only.
+Pages must NOT duplicate global filters. Read from PlatformContextStore.
+
+Design: Compact inline chips, 28px height, no border default, dropdown on click.
+