git.stella-ops.org/docs/modules/web/architecture.md

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. 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

// 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