hai/gstack
1
0
Fork 0
mirror of https://github.com/garrytan/gstack.git synced 2026-05-20 11:19:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add security shield icon in sidepanel header (3 states)

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
Garry Tan
2026-04-19 19:20:26 +08:00
parent ffb064afda
commit 59e0635eb5
3 changed files with 74 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
extension/sidepanel.css
View File

@@ -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 {