feat(frontend): Angular scaffold, PrimeNG shell, and API service layer#35
Merged
feat(frontend): Angular scaffold, PrimeNG shell, and API service layer#35
Conversation
There was a problem hiding this comment.
Pull request overview
Introduces a new Angular 21 SPA frontend (PrimeNG-based shell + typed API/SSE service layer) and wires FastAPI to serve the built SPA from the backend during the Phase 3 HTMX→Angular migration.
Changes:
- Add Angular 21 standalone frontend scaffold in
frontend/with PrimeNG theming, app layout, shared state components, and lint/format tooling. - Add typed frontend API layer (HttpClient wrapper, SSE service, domain services, error handling) with unit tests.
- Add FastAPI SPA catch-all serving logic + backend tests, plus dev workflow helpers (Make target + script) and sprint documentation.
Reviewed changes
Copilot reviewed 91 out of 94 changed files in this pull request and generated 11 comments.
Show a summary per file
| File | Description |
|---|---|
| test/test_api_spa_mount.py | Adds backend tests validating SPA catch-all behavior and reserved route handling. |
| src/api/main.py | Adds SPA dist detection, favicon serving, /v3 redirect, and GET catch-all for SPA assets/index fallback. |
| scripts/dev/run_frontend_dev.sh | Convenience script to run FastAPI + Angular dev server together. |
| Makefile | Adds frontend-dev target to run the dev convenience script. |
| ROADMAP.md | Updates roadmap phase markers/version header. |
| .claude/CLAUDE.md | Documents Node/Angular workflow and combined dev command. |
| docs/plans/2026-03-20-angular-project-scaffold.md | Adds implementation plan doc for FRONT-001 scaffold work. |
| sprints/v3.0.0/README.md | Adds sprint v3.0.0 overview and ticket graph for frontend modernization. |
| sprints/v3.0.0/FRONT-001-angular-project-scaffold.md | Documents FRONT-001 scope and verification steps. |
| sprints/v3.0.0/FRONT-002-primeng-theme-layout.md | Documents FRONT-002 scope and verification steps. |
| sprints/v3.0.0/FRONT-003-api-service-layer.md | Documents FRONT-003 scope and verification steps. |
| sprints/v3.0.0/FRONT-003a-font-service.md | Adds follow-up ticket doc for FontService. |
| sprints/v3.0.0/FRONT-003b-wifi-service.md | Adds follow-up ticket doc for WifiService. |
| sprints/v3.0.0/FRONT-003c-starlark-service.md | Adds follow-up ticket doc for StarlarkService. |
| sprints/v3.0.0/FRONT-004-dashboard-module.md | Adds dashboard feature-module ticket doc. |
| sprints/v3.0.0/FRONT-005-plugins-module.md | Adds plugins feature-module ticket doc. |
| sprints/v3.0.0/FRONT-006-settings-module.md | Adds settings feature-module ticket doc. |
| sprints/v3.0.0/FRONT-007-logs-store-modules.md | Adds logs/store feature-module ticket doc. |
| sprints/v3.0.0/FRONT-008-htmx-removal-cleanup.md | Adds HTMX removal/cleanup ticket doc for later phase. |
| sprints/v3.0.0/SPIKE-001-angular-unit-test-setup.md | Adds test-infra spike doc. |
| sprints/v3.0.0/SPIKE-002-raw-json-editor.md | Adds raw JSON editor spike doc. |
| sprints/v3.0.0/SPIKE-003-operation-history-view.md | Adds operation history spike doc. |
| sprints/v3.0.0/SPIKE-004-ci-angular-build.md | Adds CI pipeline spike doc. |
| sprints/v3.0.0/SPIKE-005-starlark-config-ui.md | Adds starlark config UI spike doc. |
| sprints/v3.0.0/SPIKE-FRONT-001-nodejs-in-distrobox.md | Adds spike doc about Node availability in distrobox/host. |
| sprints/v3.0.0/SPIKE-FRONT-002-angular-environment-switching.md | Adds spike doc about Angular environment switching. |
| sprints/v3.0.0/SPIKE-FRONT-003-dev-server-proxy-verification.md | Adds spike doc about dev proxy verification and workflow. |
| frontend/angular.json | Angular workspace config (build/serve/test/lint, budgets, file replacements). |
| frontend/package.json | Adds Angular/PrimeNG deps and dev tooling (eslint/prettier/vitest). |
| frontend/proxy.conf.json | Adds Angular dev-server proxy configuration. |
| frontend/eslint.config.js | Adds ESLint flat config for TS + Angular templates. |
| frontend/.prettierrc | Adds Prettier config and HTML parser override. |
| frontend/.editorconfig | Adds editor config tuned for TS/MD. |
| frontend/.gitignore | Ignores node_modules, dist, cache, coverage, etc. |
| frontend/README.md | Angular project README (dev/build/test notes). |
| frontend/tsconfig.json | Base TS config (strict flags, ES2022 target, references). |
| frontend/tsconfig.app.json | App TS config include/exclude rules. |
| frontend/tsconfig.spec.json | Spec TS config enabling vitest/globals types. |
| frontend/public/favicon.ico | Adds SPA favicon asset. |
| frontend/src/index.html | SPA HTML entrypoint with dark-mode selector class. |
| frontend/src/main.ts | Bootstraps Angular standalone app via bootstrapApplication. |
| frontend/src/styles.scss | Global styles including PrimeIcons and theme variables. |
| frontend/src/environments/environment.ts | Dev environment config (apiBase). |
| frontend/src/environments/environment.prod.ts | Prod environment config (apiBase). |
| frontend/src/app/app.ts | Root standalone component. |
| frontend/src/app/app.html | Root template (router outlet). |
| frontend/src/app/app.scss | App styles placeholder. |
| frontend/src/app/app.spec.ts | Root component test. |
| frontend/src/app/app.routes.ts | Route skeleton loading the app layout. |
| frontend/src/app/app.config.ts | App providers: router, HttpClient interceptors, PrimeNG theme preset. |
| frontend/src/app/layout/app-layout.component.ts | Responsive layout with mobile drawer + desktop sidebar. |
| frontend/src/app/layout/app-layout.component.html | Layout template wiring topbar, drawer/sidebar, router-outlet. |
| frontend/src/app/layout/app-layout.component.scss | Layout styling for sidebar/content positioning. |
| frontend/src/app/layout/app-layout.component.spec.ts | Layout component unit tests. |
| frontend/src/app/layout/topbar/topbar.component.ts | Topbar component with sidebar toggle output. |
| frontend/src/app/layout/topbar/topbar.component.html | Topbar template with toolbar + hamburger button. |
| frontend/src/app/layout/topbar/topbar.component.scss | Topbar styling. |
| frontend/src/app/layout/topbar/topbar.component.spec.ts | Topbar unit tests. |
| frontend/src/app/layout/sidebar/sidebar.component.ts | Sidebar nav model + routes. |
| frontend/src/app/layout/sidebar/sidebar.component.html | Sidebar template rendering nav items. |
| frontend/src/app/layout/sidebar/sidebar.component.scss | Sidebar styling (active/hover states). |
| frontend/src/app/layout/sidebar/sidebar.component.spec.ts | Sidebar unit tests. |
| frontend/src/app/shared/loading/loading.component.ts | Shared loading state component using signals input. |
| frontend/src/app/shared/loading/loading.component.html | Loading template (spinner + message). |
| frontend/src/app/shared/loading/loading.component.scss | Loading styling. |
| frontend/src/app/shared/loading/loading.component.spec.ts | Loading component tests. |
| frontend/src/app/shared/error-state/error-state.component.ts | Shared error state component with retry output. |
| frontend/src/app/shared/error-state/error-state.component.html | Error state template (icon/message/retry). |
| frontend/src/app/shared/error-state/error-state.component.scss | Error state styling. |
| frontend/src/app/shared/error-state/error-state.component.spec.ts | Error state tests. |
| frontend/src/app/shared/empty-state/empty-state.component.ts | Shared empty state component with optional action. |
| frontend/src/app/shared/empty-state/empty-state.component.html | Empty state template with optional action button. |
| frontend/src/app/shared/empty-state/empty-state.component.scss | Empty state styling. |
| frontend/src/app/shared/empty-state/empty-state.component.spec.ts | Empty state tests. |
| frontend/src/app/core/services/api.service.ts | HttpClient wrapper with base URL + request-id header. |
| frontend/src/app/core/services/api.service.spec.ts | ApiService unit tests. |
| frontend/src/app/core/services/sse.service.ts | SSE service using EventSource with retry + shared streams. |
| frontend/src/app/core/services/sse.service.spec.ts | SSE service unit tests with EventSource mock. |
| frontend/src/app/core/services/system.service.ts | System domain service endpoints. |
| frontend/src/app/core/services/system.service.spec.ts | SystemService unit tests. |
| frontend/src/app/core/services/plugin.service.ts | Plugin domain service endpoints (installed/config/toggle/store ops). |
| frontend/src/app/core/services/plugin.service.spec.ts | PluginService unit tests. |
| frontend/src/app/core/services/config.service.ts | Config domain service endpoints. |
| frontend/src/app/core/services/config.service.spec.ts | ConfigService unit tests. |
| frontend/src/app/core/interceptors/error.interceptor.ts | Http interceptor mapping HttpErrorResponse to ApiError. |
| frontend/src/app/core/errors/api-error.ts | ApiError parsing/normalization from HTTP errors. |
| frontend/src/app/core/errors/api-error.spec.ts | ApiError unit tests. |
| frontend/src/app/core/models/common.model.ts | Common API envelope interfaces. |
| frontend/src/app/core/models/system.model.ts | System response interfaces. |
| frontend/src/app/core/models/plugin.model.ts | Plugin response/request interfaces. |
| frontend/src/app/core/models/config.model.ts | Config response/request interfaces. |
| frontend/src/app/core/models/stream.model.ts | SSE event interfaces. |
| frontend/src/app/core/index.ts | Barrel exports for core models/services/errors. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
….0.0 - Move sprints/ → docs/anvil/sprints/ (rename, no content changes) - Add docs/anvil/config.yml (core/cli/frontend components, develop branch) - Sync v3.0.0 README: FRONT-002/003 → Done, add FRONT-003a/b/c rows - Update FRONT-003 Blocks: to list 003a/b/c - Remove legacy .claude/agents and .claude/skills superseded by anvil plugin - Add docs/superpowers/ plans
Olino3
force-pushed
the
feature/angular-scaffold
branch
from
386c723 to
5420a7a
Compare
Owner
Author
|
@copilot apply changes based on the comments in this thread |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
What's included
frontend/with SCSS, strict TypeScript/api/v3and/streamroutesng build,ng test,ng lintall pass (2 pre-existing lint warnings in core services)Test plan
cd frontend && npx ng test --watch=false— 64 tests, 13 files, 0 failurescd frontend && npx ng build— production bundle builds successfullycd frontend && npx ng lint— passes (2 non-blocking warnings from core services)