mirror of
https://github.com/garrytan/gstack.git
synced 2026-05-02 03:35:09 +02:00
Garry Tan
a9f702a715
HTML + CSS for the canary leak / ML block banner. Structure matches the
approved mockup from /plan-design-review 2026-04-19 (variant A — centered
alert-heavy):
* Red alert-circle SVG icon (no stock shield, intentional — matches the
"serious but not scary" tone the review chose)
* "Session terminated" Satoshi Bold 18px red headline
* "— prompt injection detected from {domain}" DM Sans zinc subtitle
* Expandable "What happened" chevron button (aria-expanded/aria-controls)
* Layer list rendered in JetBrains Mono with amber tabular-nums scores
* Close X in top-right, 28px hit area, focus-visible amber outline
Enter animation: slide-down 8px + fade, 250ms, cubic-bezier(0.16,1,0.3,1) —
matches DESIGN.md motion spec. Respects `role="alert"` + `aria-live="assertive"`
so screen readers announce on appearance. Escape-to-dismiss hook is in the
JS follow-up commit.
Design tokens all via CSS variables (--error, --amber-400, --amber-500,
--zinc-*, --font-display, --font-mono, --radius-*) — already established in
the stylesheet. No new color constants introduced.
JS wiring lands in the next commit so this diff stays focused on
presentation layer only.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>