# component_architecture_web.md - **Stella Ops Web** (2025Q4)

> Angular 17 frontend SPA for StellaOps console.

> **Scope.** Frontend architecture for **Web**: the Angular 17 single-page application providing the StellaOps console interface.

> **Note:** For the comprehensive Web UI architecture including all features, see [`../ui/architecture.md`](../ui/architecture.md). This file provides a condensed overview.

---

## 0) Mission & boundaries

**Mission.** Provide an **intuitive, responsive web interface** for StellaOps operators to manage scans, review findings, configure policies, and monitor system health.

**Boundaries.**

* Web is a **frontend-only** application. All data comes from backend APIs.
* Web **does not** store sensitive data locally beyond session tokens.
* Supports **offline-first** patterns for air-gapped console access.

---

## 1) Solution & project layout

```
src/Web/StellaOps.Web/
 ├─ src/
 │   ├─ app/
 │   │   ├─ core/                    # Core services, guards, interceptors
 │   │   │   ├─ services/
 │   │   │   ├─ guards/
 │   │   │   └─ interceptors/
 │   │   ├─ shared/                  # Shared components, pipes, directives
 │   │   │   ├─ components/
 │   │   │   ├─ pipes/
 │   │   │   └─ directives/
 │   │   ├─ features/                # Feature modules
 │   │   │   ├─ dashboard/
 │   │   │   ├─ scans/
 │   │   │   ├─ findings/
 │   │   │   ├─ policies/
 │   │   │   ├─ settings/
 │   │   │   └─ admin/
 │   │   └─ app.routes.ts
 │   ├─ assets/
 │   ├─ environments/
 │   └─ styles/
 ├─ angular.json
 ├─ package.json
 └─ tsconfig.json
```

---

## 2) Technology stack

* **Framework**: Angular 17 with standalone components
* **State management**: NgRx Signals
* **UI components**: Angular Material
* **HTTP**: Angular HttpClient with interceptors
* **Routing**: Angular Router with lazy loading
* **Build**: Angular CLI with esbuild

---

## 3) Key features

| Feature | Path | Description |
|---------|------|-------------|
| Dashboard | `/dashboard` | Overview metrics and alerts |
| Scans | `/scans` | Scan history and details |
| Findings | `/findings` | Vulnerability findings list |
| Compare | `/compare` | Diff view between scans |
| Policies | `/policies` | Policy configuration |
| Settings | `/settings` | User and system settings |

---

## 4) Authentication

* **OIDC/OAuth2** via Authority module
* **Token refresh** handled by interceptor
* **Session timeout** with configurable duration

---

## 5) Configuration

```typescript
// environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:5000/api/v1',
  authorityUrl: 'http://localhost:5001',
  clientId: 'stellaops-web'
};
```

---

## Related Documentation

* UI module: `../ui/architecture.md`
* Authority: `../authority/architecture.md`
* Auth smoke tests: `../ui/operations/auth-smoke.md`