Skip to content

Phase 3: Angular 21 PWA shell#2

Open
amtocbot-droid wants to merge 1 commit intousers/krk/20260315_phase2_backendfrom
users/krk/20260315_phase3_angular
Open

Phase 3: Angular 21 PWA shell#2
amtocbot-droid wants to merge 1 commit intousers/krk/20260315_phase2_backendfrom
users/krk/20260315_phase3_angular

Conversation

@amtocbot-droid
Copy link
Owner

Summary

  • Angular 21 standalone PWA with OIDC auth (Keycloak/PKCE), SignalR service, shell layout
  • Signal-based AuthService with role computed signals (isAdmin, isOperator)
  • Functional authGuard/roleGuard, JWT interceptor
  • SignalrService: hub factory with typed on(), auto-reconnect, reconnecting signal
  • Shell: sidenav + topbar with reconnect banner
  • Dashboard: live instance list with stats
  • Route stubs for all features (instances, models, kanban, chat)
  • Multi-stage Docker: node:22 build → nginx:1.27 serve with SPA routing

Test plan

  • npm install && ng serve → app loads at :4200
  • Login redirect → Keycloak → callback → dashboard renders
  • SignalR connects (check Network tab, WS frames)
  • Sidebar navigation between routes works
  • ng build --configuration production succeeds

🤖 Generated with Claude Code

Angular 21 standalone PWA foundation:

Config & Bootstrap:
- app.config.ts: provideRouter (input binding + view transitions),
  provideHttpClient (authTokenInterceptor), provideAuth (OIDC → Keycloak
  with PKCE + silent renew), provideServiceWorker
- app.routes.ts: lazy-loaded feature routes, authGuard on shell

Core:
- AuthService: signals-based isAuthenticated, userData, roles,
  isAdmin/isOperator computed signals; wraps angular-auth-oidc-client
- authGuard / roleGuard: functional guards (adminGuard, operatorGuard)
- authTokenInterceptor: attaches JWT Bearer to /api and /hubs requests
- AuthCallbackComponent: handles OIDC redirect
- SignalrService: hub connection factory with withAutomaticReconnect,
  typed on<T>() Observable, reconnecting signal for UI banner
- ShellComponent: mat-sidenav shell + reconnect banner
- SidebarComponent: nav items with routerLinkActive
- TopbarComponent: menu toggle + user dropdown + logout

Shared:
- StatusBadgeComponent: color-coded status badge (running/stopped/starting/error)
- ConfirmDialogComponent: reusable confirm dialog

Features:
- DashboardComponent: live instance list with stats via toSignal + HttpClient
- Route stubs for instances, models, kanban, chat (implementation in phases 4-8)

Infrastructure:
- multi-stage Dockerfile: node:22 build → nginx:1.27 serve
- nginx.conf: SPA routing, asset caching, gzip
- ngsw-config.json: app-shell prefetch, API freshness strategy
- proxy.conf.json: dev proxy /api and /hubs to :8080
- environments: dev (localhost) + production (amtocbot.com)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant