# Stella Ops UI Structure - Part 1: Shell & Navigation

## Technology Stack

- **Framework**: Angular 17+ (standalone components, signals)
- **Routing**: Angular Router with lazy-loaded modules
- **Styling**: SCSS
- **Architecture**: Feature-based module organization under `src/app/features/`
- **Location**: `src/Web/StellaOps.Web/`

---

## 1. MAIN SHELL & HEADER

```
┌─────────────────────────────────────────────────────────────────────────────────┐
│ [QUICKSTART BANNER - visible only in demo/offline mode]                         │
├─────────────────────────────────────────────────────────────────────────────────┤
│ ┌─────────────┐ ┌─────────────────────────────────────────┐  ┌────────────────┐ │
│ │ StellaOps   │ │   HOME│ANALYZE│TRIAGE│POLICY│OPS│NOTIFY│  │ Fresh Auth     │ │
│ │ Dashboard   │ │       │ADMIN                            │  │ Tenant: xxx    │ │
│ │  (brand)    │ │                                         │  │ [User Menu ▼]  │ │
│ └─────────────┘ └─────────────────────────────────────────┘  └────────────────┘ │
├─────────────────────────────────────────────────────────────────────────────────┤
│ [BREADCRUMB: Dashboard > Section > Subsection]                                  │
├─────────────────────────────────────────────────────────────────────────────────┤
│                                                                                 │
│                         ┌─────────────────────────────────┐                     │
│                         │       <router-outlet />         │                     │
│                         │       (Page Content)            │                     │
│                         └─────────────────────────────────┘                     │
│                                                                                 │
└─────────────────────────────────────────────────────────────────────────────────┘
                                    │
              ┌─────────────────────┼─────────────────────┐
              ▼                     ▼                     ▼
    [Command Palette]      [Toast Container]     [Keyboard Shortcuts]
```

### Shell Components (from app.component.html)

- `app-navigation-menu` - Main navigation
- `app-user-menu` - User dropdown
- `app-breadcrumb` - Breadcrumb navigation
- `app-command-palette` - Command palette (keyboard shortcut access)
- `app-toast-container` - Toast notifications
- `app-keyboard-shortcuts` - Keyboard shortcut handler

---

## 2. NAVIGATION MENU STRUCTURE

Source: `src/app/core/navigation/navigation.config.ts`

```
┌──────────────────────────────────────────────────────────────────────────────┐
│                           MAIN NAVIGATION                                     │
├──────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐       │
│  │   HOME   │  │  ANALYZE │  │  TRIAGE  │  │  POLICY  │  │   OPS    │       │
│  │ [icon]   │  │ [icon] ▼ │  │ [icon] ▼ │  │ [icon] ▼ │  │ [icon] ▼ │       │
│  └────┬─────┘  └────┬─────┘  └────┬─────┘  └────┬─────┘  └────┬─────┘       │
│       │             │             │             │             │              │
│  ┌────▼─────┐  ┌────▼───────────────────┐ ┌────▼──────────┐ ┌─▼────────────┐│
│  │Dashboard │  │ • Scans & Findings     │ │ • Artifacts   │ │• SBOM Sources││
│  └──────────┘  │ • Vulnerabilities      │ │ • Exceptions  │ │• Quotas      ││
│                │ • SBOM Graph           │ │ • Audit       │ │  └→ Overview ││
│                │ • Lineage              │ │   Bundles     │ │  └→ Tenants  ││
│                │ • Reachability         │ │ • Risk        │ │  └→ Throttle ││
│                │ • VEX Hub              │ │   Profiles    │ │  └→ Forecast ││
│                │ • Unknowns             │ └───────────────┘ │  └→ Alerts   ││
│                │ • Patch Map            │                   │  └→ Reports  ││
│                └────────────────────────┘                   │• Dead-Letter ││
│                                                             │  └→ Dashboard││
│  ┌──────────┐  ┌───────────────────────────────────────────▲│  └→ Queue    ││
│  │  NOTIFY  │  │                      ADMIN (scoped)       ││• SLO Monitor ││
│  │ [icon]   │  │                                           ││  └→ Dashboard││
│  └────┬─────┘  └────┬──────────────────────────────────────┘│  └→ Alerts   ││
│       │             │                                       │  └→ Defs     ││
│  ┌────▼─────┐  ┌────▼───────────────────────────────────┐  │• Platform    ││
│  │Notific.  │  │ • Tenants      • OAuth Clients         │  │  Health      ││
│  │Panel     │  │ • Users        • Tokens                │  │• Feed Mirror ││
│  └──────────┘  │ • Roles        • Unified Audit Log     │  │  └→ Dashboard││
│                │ • Branding     • Notification Admin    │  │  └→ AirGap   ││
│                │ • Platform     • Trust Management      │  │• Offline Kit ││
│                │   Status       • Policy Governance     │  │• AOC Compli. ││
│                │ • Trivy DB     • Policy Simulation     │  │• Scheduler   ││
│                │ • Registry     • Issuer Directory      │  │• Doctor Diag ││
│                │   Tokens       • Scanner Ops           │  │              ││
│                └────────────────────────────────────────┘  └──────────────┘│
└──────────────────────────────────────────────────────────────────────────────┘
```

---

## 3. NAVIGATION GROUPS DETAIL

### 3.1 HOME Group

| ID | Label | Route | Icon | Scopes |
|---|---|---|---|---|
| dashboard | Dashboard | `/` | dashboard | - |

### 3.2 ANALYZE Group

| ID | Label | Route | Icon | Scopes |
|---|---|---|---|---|
| findings | Scans & Findings | `/findings` | scan | - |
| vulnerabilities | Vulnerabilities | `/vulnerabilities` | bug | - |
| graph | SBOM Graph | `/graph` | graph | graph:read |
| lineage | Lineage | `/lineage` | git-branch | - |
| reachability | Reachability | `/reachability` | network | - |
| vex-hub | VEX Hub | `/admin/vex-hub` | shield-check | - |
| unknowns | Unknowns | `/analyze/unknowns` | help-circle | - |
| patch-map | Patch Map | `/analyze/patch-map` | grid | - |

### 3.3 TRIAGE Group

| ID | Label | Route | Icon | Scopes |
|---|---|---|---|---|
| artifacts | Artifact Workspace | `/triage/artifacts` | package | - |
| exceptions | Exception Queue | `/exceptions` | exception | - |
| audit-bundles | Audit Bundles | `/triage/audit-bundles` | archive | - |
| risk | Risk Profiles | `/risk` | shield | - |

### 3.4 POLICY Group

| ID | Label | Route | Icon | Scopes |
|---|---|---|---|---|
| policy-studio | Policy Studio | - | edit | - |
| ├─ policy-editor | Editor | `/policy-studio/packs` | - | policy:author |
| ├─ policy-simulate | Simulate | `/policy-studio/simulate` | - | policy:simulate |
| ├─ policy-approvals | Approvals | `/policy-studio/approvals` | - | policy:review OR policy:approve |
| └─ policy-dashboard | Dashboard | `/policy-studio/dashboard` | - | policy:read |
| orchestrator | Jobs & Orchestration | `/orchestrator` | workflow | - |

### 3.5 OPS Group

| ID | Label | Route | Icon | Children |
|---|---|---|---|---|
| sbom-sources | SBOM Sources | `/sbom-sources` | database | - |
| quotas | Quota Dashboard | `/ops/quotas` | gauge | Overview, Tenant Usage, Throttle Events, Forecast, Alert Config, Reports |
| dead-letter | Dead-Letter Queue | `/ops/orchestrator/dead-letter` | alert-triangle | Dashboard, Queue Browser |
| slo-monitoring | SLO Monitoring | `/ops/orchestrator/slo` | activity | Dashboard, Alerts, Definitions |
| platform-health | Platform Health | `/ops/health` | heart-pulse | Dashboard, Incidents |
| feed-mirror | Feed Mirror & AirGap | `/ops/feeds` | mirror | Dashboard, Import Bundle, Export Bundle, Version Locks |
| offline-kit | Offline Kit | `/ops/offline-kit` | offline | Dashboard, Bundles, Verification, JWKS |
| aoc-compliance | AOC Compliance | `/ops/aoc` | shield-check | Dashboard, Guard Violations, Ingestion Flow, Provenance Validator, Compliance Report |

### 3.6 NOTIFY Group

| ID | Label | Route | Icon | Scopes |
|---|---|---|---|---|
| notifications | Notifications | `/notify` | notification | - |

### 3.7 ADMIN Group (requires ui.admin scope)

| ID | Label | Route | Icon | Notes |
|---|---|---|---|---|
| tenants | Tenants | `/console/admin/tenants` | building | - |
| users | Users | `/console/admin/users` | users | - |
| roles | Roles & Scopes | `/console/admin/roles` | key | - |
| clients | OAuth Clients | `/console/admin/clients` | app | - |
| tokens | Tokens | `/console/admin/tokens` | token | - |
| audit | Unified Audit Log | `/admin/audit` | log | Has children: Dashboard, All Events, Policy Audit, Authority Audit, VEX Audit, Integration Audit, Export |
| branding | Branding | `/console/admin/branding` | palette | - |
| platform-status | Platform Status | `/console/status` | monitor | - |
| trivy-db | Trivy DB Settings | `/concelier/trivy-db-settings` | database | - |
| admin-notifications | Notification Admin | `/admin/notifications` | bell-config | - |
| admin-trust | Trust Management | `/admin/trust` | certificate | - |
| policy-governance | Policy Governance | `/admin/policy/governance` | policy-config | - |
| policy-simulation | Policy Simulation | `/admin/policy/simulation` | test-tube | - |
| registry-admin | Registry Tokens | `/admin/registries` | container | - |
| issuer-trust | Issuer Directory | `/admin/issuers` | shield-check | - |
| scanner-ops | Scanner Ops | `/ops/scanner` | scan | - |

---

## 4. USER MENU ITEMS

| ID | Label | Route | Icon |
|---|---|---|---|
| profile | Profile | `/console/profile` | user |
| settings | Settings | `/settings` | settings |

---

## 5. FEATURE MODULES COUNT

Total feature directories under `src/app/features/`: **77 modules**

```
admin-notifications/    evidence-export/        policy-governance/      setup-wizard/
advisory-ai/            evidence-pack/          policy-simulation/      slo-monitoring/
ai-runs/                evidence-thread/        policy-studio/          snapshot/
aoc/                    exceptions/             proof/                  sources/
aoc-compliance/         feed-mirror/            proof-chain/            timeline/
audit-log/              findings/               proof-studio/           triage/
auth/                   graph/                  proofs/                 triage-inbox/
binary-index/           home/                   quota-dashboard/        trivy-db-settings/
change-trace/           integration-hub/        reachability/           trust-admin/
compare/                integrations/           registry-admin/         unknowns/
configuration-pane/     issuer-trust/           release-orchestrator/   unknowns-tracking/
console/                lineage/                releases/               verdicts/
console-admin/          notify/                 risk/                   vex-hub/
cvss/                   offline-kit/            runs/                   vex-studio/
dashboard/              opsmemory/              sbom/                   vuln-explorer/
deadletter/             orchestrator/           sbom-sources/           vulnerabilities/
doctor/                 platform-health/        scanner-ops/            welcome/
evidence/               policy/                 scans/
                        policy-gates/           scheduler-ops/
                                                scores/
                                                secret-detection/
                                                settings/
```