Add dev-only state debug view (Elm-style "show the Model")

A floating, read-only panel that renders the current root-store state
(SessionStore + BigProfileStore) live via the json pipe. Whole thing is
gated by isDevMode() so it never renders or ships in production.

- Observer only — no new store/library/state pattern (PRD prime directive).
- BigProfileStore resolved lazily on first open; its httpResources fetch
  eagerly on construction, so we avoid a personal-data fetch on pages that
  don't use it.
- bsn masked before render; no persistence/logging/network in the feature.
- maskBsn has a unit spec; UI exercised via a Devtools Storybook story,
  per repo convention (no TestBed component tests).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-26 17:56:12 +02:00
parent e5a3030dca
commit 4e9af05cc1
5 changed files with 102 additions and 1 deletions

View File

@@ -2,12 +2,13 @@ import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { SiteHeaderComponent } from '@shared/layout/site-header/site-header.component';
import { SiteFooterComponent } from '@shared/layout/site-footer/site-footer.component';
import { DebugStateComponent } from '@shared/ui/debug-state/debug-state.component';
/** Template: persistent app chrome. Header + footer mount once; only the routed
content inside <router-outlet> changes (and cross-fades — see styles.scss). */
@Component({
selector: 'app-shell',
imports: [RouterOutlet, SiteHeaderComponent, SiteFooterComponent],
imports: [RouterOutlet, SiteHeaderComponent, SiteFooterComponent, DebugStateComponent],
styles: [`
:host{display:block}
.skip{position:absolute;left:var(--app-skip-link-offset)}
@@ -26,6 +27,7 @@ import { SiteFooterComponent } from '@shared/layout/site-footer/site-footer.comp
</main>
<app-site-footer />
</div>
<app-debug-state />
`,
})
export class ShellComponent {}