From 59e0635eb555721a22c565cd8d5c47132aa1dd4c Mon Sep 17 00:00:00 2001 From: Garry Tan Date: Sun, 19 Apr 2026 19:20:26 +0800 Subject: [PATCH] feat(ui): add security shield icon in sidepanel header (3 states) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Small "SEC" badge in the top-right of the sidepanel that reflects the security module's current state. Three states drive color: protected green — all layers ok (TestSavantAI + transcript + canary) degraded amber — one+ ML layer offline but canary + arch controls active inactive red — security module crashed, arch controls only Consumes /health.security (surfaced in commit 7e9600ff). Updated once on connection bootstrap. Shield stays hidden until /health arrives so the user never sees a flickering "unknown" state. Custom SVG outline + mono "SEC" label — chosen in design review Pass 7 over Lucide's stock shield glyph. Matches the industrial/CLI brand voice in DESIGN.md ("monospace as personality font"). Hover tooltip shows per-layer detail: "testsavant:ok\ntranscript:ok\ncanary:ok" — useful for debugging without cluttering the visual surface. Known v1 limitation: only updates at connection bootstrap. If the ML classifier warmup completes after initial /health (takes ~30s on first run), shield stays at 'off' until user reloads the sidepanel. Follow-up TODO: extend /sidebar-chat polling to refresh security state. Co-Authored-By: Claude Opus 4.7 (1M context) --- extension/sidepanel.css | 33 +++++++++++++++++++++++++++++++++ extension/sidepanel.html | 10 ++++++++++ extension/sidepanel.js | 31 +++++++++++++++++++++++++++++++ 3 files changed, 74 insertions(+) diff --git a/extension/sidepanel.css b/extension/sidepanel.css index 0939a350..c490f4d2 100644 --- a/extension/sidepanel.css +++ b/extension/sidepanel.css @@ -47,6 +47,39 @@ --radius-full: 9999px; } +/* ─── Security Shield ───────────────────────────────────────────── */ +/* 3 states — green=protected, amber=degraded, red=inactive. + Custom SVG outline + "SEC" label in JetBrains Mono to match the + industrial/CLI aesthetic (design review Pass 7 decision). */ + +.security-shield { + position: absolute; + top: 6px; + right: 8px; + z-index: 10; + display: inline-flex; + align-items: center; + gap: 4px; + padding: 2px 6px; + border-radius: var(--radius-sm, 4px); + font-family: var(--font-mono, 'JetBrains Mono', monospace); + font-size: 10px; + font-weight: 500; + letter-spacing: 0.04em; + background: rgba(255, 255, 255, 0.02); + transition: color 200ms ease-out, background 200ms ease-out; + cursor: default; +} +.security-shield[data-status="protected"] { + color: var(--success, #22C55E); +} +.security-shield[data-status="degraded"] { + color: var(--amber-400, #FBBF24); +} +.security-shield[data-status="inactive"] { + color: var(--error, #EF4444); +} + /* ─── Connection Banner ─────────────────────────────────────────── */ .conn-banner { diff --git a/extension/sidepanel.html b/extension/sidepanel.html index 1824cda4..fb5d79e6 100644 --- a/extension/sidepanel.html +++ b/extension/sidepanel.html @@ -5,6 +5,16 @@ + + +