fix(ms-ai-architect): playground v1.13.0 — visuelle DS-bugs

Fix-pakke som speiler llm-security v7.6.1 (commit f9b555a). Samme klasse
visuelle bugs identifisert via parallell DS-analyse av playground-rendrere.

- B1: renderFindingsBlock + renderRequirements bytter <div class="findings">
  outer (DS grid 360px+1fr klemte indre struktur til 360px-kolonne, lot
  1fr-detail-panel-kolonnen stå tom) til <section class="report-meta">.
  BEM-strukturen findings__list > findings__group > findings__items uendret.
- B2: lokal .report-table CSS for 6+ rapporter (Trusler, Kostnadsoversikt,
  TCO, Risiko-tabell, Key Metrics) som manglet styling — DS implementerer
  ikke klassen. Speilet lokal styling fra llm-security v7.6.1.
- B3: ROS-matrise-bobler bytter <span> til <button type="button"
  data-threat-id="..." aria-label="..."> med document-level click-handler
  som scroller smooth til tilsvarende rad i Trusler-tabellen og
  highlighter raden i 1.6 sek. Lokal CSS for cursor:pointer, hover
  scale(1.15), :focus-visible outline.
- B4: renderRadarSvg bumpet 300x300 til 380x380, R fra 100 til 125,
  label-offset fra R+25 til R+28, dynamisk text-anchor basert på
  horisontal-posisjon for å unngå at bottom-labels overlapper hverandre
  ved 6+ akser (typisk for ROS-rapport med 7 risiko-dimensjoner).
- B5: lokal .recommendation-card__body { overflow-wrap: anywhere;
  word-break: break-word } for å forhindre at lange single-line tekster
  (URLer, owner-tags, dato) skubber innhold ut av viewport i grid-cellen.

tests/test-playground-v3.sh: DS-klasse-assertion oppdatert fra .findings
til .findings__list (BEM-list er fortsatt i bruk; outer grid-container
bevisst fjernet i B1).

Verifisering:
- 22/22 smoke-test PASS (B1-B5 grep-asserts)
- 271/271 playground E2E PASS (201 statisk-struktur + 70 parser-fixtures)
- 219 plugin-validering PASS
- 42 KB-update test PASS

Versjon: v1.12.0 -> v1.13.0 (plugin.json, README badge, README
version-history, CHANGELOG, ROADMAP, TODO, plugin CLAUDE.md
playground-header, root README plugin-list, root CLAUDE.md plugin-list).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Kjell Tore Guttormsen 2026-05-06 14:51:15 +02:00
commit 121c5cc677
8 changed files with 108 additions and 17 deletions

View file

@ -5,6 +5,28 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
## [1.13.0] - 2026-05-06
### Fixed — playground visuelle DS-bugs
Fix-pakke som speiler llm-security v7.6.1 (commit `f9b555a`). Samme klasse av visuelle bugs identifisert i ms-ai-architect playground via parallell DS-analyse. Verifisert i 22 smoke-test-asserts + full E2E-regresjon.
- **B1: `renderFindingsBlock` + `renderRequirements` outer-wrapper.** DS' `.findings` er `display: grid; grid-template-columns: 360px 1fr` (list+detail-panel). Playground bruker bare list-kolonnen, så outer `<div class="findings">` klemte indre struktur til 360px og forlot 1fr-kolonnen tom. Erstattet med `<section class="report-meta">`-wrapper. Indre `findings__list > findings__group > findings__group-header + findings__items` BEM-struktur uendret.
- **B2: `.report-table` lokal CSS.** Brukt i 6+ rapporter (Trusler, Kostnadsoversikt, TCO, Risiko-tabell, Key Metrics) men ikke definert i vendored DS — rendret som ren ustylet tekst-grid. Lokal styling speilet fra llm-security v7.6.1: 100%-bredde, border-collapse, `bg-soft` th-bakgrunn med uppercase-overskrift, hover-rad, mono-formatert `<code>`-inline.
- **B3: ROS-matrise klikkbare bobler.** `<span class="matrix__bubble">` byttet til `<button type="button" data-threat-id="…" aria-label="Trussel: …">`. Document-level click-handler matcher `.matrix__bubble[data-threat-id]`, scroller smooth til tilsvarende rad i Trusler-tabellen og highlighter raden i 1.6 sek. Lokal CSS for `cursor:pointer`, `transform: scale(1.15)` på hover, `:focus-visible` outline.
- **B4: `renderRadarSvg` label-overlap ved 6+ akser.** Bumpe SVG fra 300×300 til 380×380, R fra 100 til 125, label-offset fra `R+25` til `R+28`. Dynamisk `text-anchor` basert på horisontal-posisjon (`Math.abs(dx) < 0.2 ? 'middle' : (dx > 0 ? 'start' : 'end')`) for å unngå at bottom-labels overlapper hverandre — typisk for ROS-rapporten med 7 risiko-dimensjoner.
- **B5: `recommendation-card__body` overflow-wrap.** Lange single-line tekster (URLer, owner-tags, datoer) skubbet ut av viewport i grid-cellen `auto + 1fr`. Lokal CSS `overflow-wrap: anywhere; word-break: break-word;`.
### Changed
- `tests/test-playground-v3.sh`: DS-klasse-assertion oppdatert fra `.findings` til `.findings__list` (BEM-list er fortsatt i bruk; outer grid-container bevisst fjernet i B1).
### Notes on 1.13.0
- Bugfix-only release. Ingen scanner-/agent-/knowledge-endringer. Ingen modifisering av `playground/vendor/` (DS-endringer der må gå via `shared/playground-design-system/` + re-sync).
- Playground v3-arkitektur uendret. Alle 17 rapport-renderers og parser-routing-tabell uendret.
- Smoke-test: 22/22 PASS (`/private/tmp/claude-smoke-msarch-v1130.mjs`). E2E playground: 272/272 PASS (201 statisk-struktur etter test-oppdatering + 70 parser-fixtures + 1 verdict-pill). Plugin-validering: 219 PASS. KB-update: 42 PASS.
## [1.12.0] - 2026-05-05
### Added — Manuell KB-refresh-arbeidsflyt