feat(dashboard): the portfolio, grouped by the team that owns it

[haksungjang]

The third cockpit panel, and the one that most needs the product to be a portal. A project list answers "which project is worst". This answers "which team is carrying the risk" — a question that requires an organisation, teams, and projects that outlive the scan that produced their numbers. It completes W16-b: action queue (#536), trends (#537), portfolio grid.

The endpoint

GET /v1/dashboard/portfolio returns the caller's visible projects grouped by owning team, worst first, with the severity counts their project-list rows already show.

Those counts come from project_list_enrichment's own helpers rather than a third implementation of "worst CVE per component over the latest succeeded scan". A user who opens the grid and then the project list is comparing the two, and a second copy would eventually disagree with the first. Nothing to keep in sync means no parity test is needed to police it — the cheapest form of hardening rule #2.

Three things the design has to protect:

Zero means two different things. A project nobody has scanned and one that came back clean have identical numbers. Only scanned separates them, so the unscanned cell gets its own dashed, untinted treatment and says so in words — painting it like a clean project would tell the reader an unexamined project is fine.

Truncation is stated, at both levels. A grid quietly showing the worst twelve reads exactly like a grid showing everything, and the conclusion drawn about the rest is the opposite in each case.

Teams the caller does not belong to are not enumerable — not even as an empty row. Team names are looked up only for teams that own a visible project.

Severity is an ordinal domain scale, not a continuous magnitude, so this is not a colour-scale heatmap: a cell is tinted by its worst bucket, prints that bucket's count, and carries a dot for shape. Colour is never the only signal.

What the gates and the review caught

The axe gate rejected the first spelling of the count label. text-muted-foreground clears AA on white and misses it on a 10 % severity tint — twelve nodes, all of them the count sitting on a tinted cell. Exactly the class of defect a machine catches and a reviewer does not: the colour was right in isolation and wrong in context.

The security review found team scoping clean (it traced the chain and confirmed the isolation test fails if the clamps are removed) and six ways the grid could still mislead. All are fixed in cc68a415; the ones worth naming here:

• A cut team left no trace at all — a cut row can caption itself, a dropped team cannot — while the caption said "across 15 teams" beside twelve rendered rows. The response now carries shown_team_count.
• Teams were ranked from their already-truncated rows, so a team's worst high could sit on a project cut before the ranking saw it. At the MAX_TEAMS boundary that decides which team disappears entirely.
• The tie-break was not total: projects.name has no unique constraint, so two projects in a team can share a name and all four counts, and which survived the cap flipped between identical requests.
• The tooltip on an unscanned cell said "Critical 0 · High 0 · …" — the exact misreading the panel exists to prevent, surviving on the one surface nobody checked. It now says what the cell says, and for scanned projects carries the last scan date (which is what last_scan_at was being fetched for and never rendered).
• The Korean truncation caption attached "worst" to the wrong noun, so it read as "of the N high-risk ones" where the English said the shown subset is the worst.

Each new test was mutation-verified: reverting the ranking to the truncated list fails one, removing the id tie-break fails another.

A defect this uncovered, not fixed here

bg-risk-critical/10 has never painted anything. Tailwind applies an opacity modifier only to colours whose channels it can parse, and these tokens hold a var() it cannot see into, so it emits no rule at all for the slashed class and the element falls back to transparent. Confirmed two ways: compiling the stylesheet (grep 'risk-critical\\/' → 0 matches) and reading the computed style off a rendered cell (rgba(0, 0, 0, 0)).

Thirty-one call sites across a dozen files are written that way today, and the token comments plus the design-system doc describe the spelling as if it worked. Repairing those moves pixels on a dozen screens and needs fresh baselines, so it is its own change. The four risk-tint-* classes added here do what the slash was meant to do, in one place, so this panel does not add to the pile.

Documentation

The dashboard user guide described a page that no longer exists — it predates the action queue and the trend series as well as this grid. It now covers all three in EN and KO, including the two distinctions most easily misread: a flat trend line that may mean "nobody looked", and an unscanned project that is not a clean one.

Gates

Backend: 12 tests green, ruff and mypy (whole tree) clean, OpenAPI contract snapshot updated. Frontend: 93 unit tests green, tsc clean, token-lint holds at 130. axe: the dashboard screen passes after the contrast fix. EN/KO shipped together; ko-style 0 findings.

Visual baselines need recapturing on the Linux runner — the dashboard grew a third panel.

Still open in W16

The frozen a11y ratchet stands at 19, and W16's exit criterion is ≤ 12. Seven of those are nested-interactive in the severity and licence distribution charts, which the dashboard and the project list share; fixing them there clears both screens. That is the remaining piece, and it is not in this change.