docs(ms-ai-architect): add v1.11.0 sections to README + CHANGELOG

- README.md: new "v1.11.0 — Design-system 100%-adoption" section under
  Playground (v3), parallel to existing v1.10.0 Foundation refactor
  section. Documents hoisted DS components, PARALLEL CSS migration,
  inline style trim, visual upgrade benchmarks, and intentional
  plugin-local survivors.
- CHANGELOG.md: new [1.11.0] entry with Added subsection, plugin-local
  survivors note, and 3-session rollout note. Tests baseline 278 PASS.

Follow-up to release commit 7ffaa82 — release was pushed without these
deeper doc sections.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Kjell Tore Guttormsen 2026-05-04 17:52:28 +02:00
commit 1d8c2aa9ce
2 changed files with 41 additions and 0 deletions

View file

@ -375,6 +375,16 @@ All 17 report renderers now wrap output through `renderPageShell()` for a consis
open plugins/ms-ai-architect/playground/ms-ai-architect-playground.html
```
### v1.11.0 — Design-system 100%-adoption
The playground now consumes the shared `playground-design-system` v0.3.0 end-to-end — no parallel CSS, minimal inline overrides, visual upgrade benchmarked against the showcase scenarios:
- **Hoisted to shared DS (v0.3.0)** — 13 generic components moved from inline `<style>` to `shared/playground-design-system/components-tier3-supplement.css`: `.eyebrow`, `.page__*`, `.key-stats`/`.key-stat`, `.verdict-pill-lg`, `.tab-list`/`.tab`/`.tab-panel`, `.top-risks`/`.top-risk[data-severity]`, `.recommendation-card`, `.card__*` subcomponents, `.card--severity-{level}`, form-patterns, `.stack-lg/-md/-sm`, `.pyramide-tier-detail`, `.scenario-card-grid`/`.scenario-card[data-status="winner"]`, `.app-shell` variants. Re-synced to vendored DS via `scripts/sync-design-system.mjs ms-ai-architect`.
- **PARALLEL CSS migration** — all 6 plugin-local naming groups renamed to DS conventions: `.topbar* → .app-header*`, `.residual-pair* → .pair-before-after*`, `.command-card*` / `.catalog-card* → .card + .card__*`, `.screen-tabs/-tab/screen → .tab-list/.tab/.tab-panel`, `.pyramide-desc* → .pyramide-tier-detail*`. ~50 markup occurrences updated across CSS + JS strings.
- **Inline `<style>` trim** — block reduced 202 → 127 lines (~37%). `renderPageShell` + `renderKeyStatsGrid` refactored to DS markup (`.page__header-main` + `.page__header-aside`, `.key-stat--{level}` BEM modifiers).
- **Visual upgrade (benchmarked against showcase)** — AI Act pyramid width fix (min-width 480px, font-size-md, responsive breakpoint), severity-coded left border on report cards in project surface based on `parsed.verdict`, app-header restructure (brand + breadcrumb + spacer + actions), eyebrow-label "PROSJEKTER · X av X" on home, `.stack-lg` vertical rhythm on home/project/catalog body.
- **Plugin-local survivors (intentional)**`.verdict-pill` (domain go/block semantics, distinct from DS `.verdict-pill-lg` severity bands), `.scenario-card[data-status="met/partial/missing"]` (DS only ships "winner"), `.read-more-block` + `.suppressed-panel` (native `<details>`; DS uses JS-toggled `aria-expanded`), surface-specific layouts (`.onboarding-*`, `.home-*`, `.project-*`, `.modal*`, `.command-form*`).
### Demo data (one-click)
Click **"Last inn demo-data"** on the onboarding screen to bootstrap a complete demo: