feat(ui): reviewable security banner with suspected-text + Allow/Block

Banner previously always rendered "Session terminated" — one-way. Now
when security_event.reviewable=true:

- Title switches to "Review suspected injection"
- Subtitle explains the decision ("allow to continue, block to end")
- Expandable details auto-open so the user sees context immediately
- Suspected text excerpt rendered in a mono pre block, scrollable,
  capped at 500 chars server-side
- Per-layer confidence scores (which layer fired, how confident)
- Action row with red [Block session] + neutral [Allow and continue]
- Click posts to /security-decision, banner hides, sidebar-agent
  sees the file and resumes or kills within one poll cycle

Existing hard-block banner (terminated session, canary leaks) unchanged.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Garry Tan
2026-04-20 20:25:29 +08:00
parent 13b8db9e7a
commit b12a28654f
3 changed files with 142 additions and 6 deletions
+60
View File
@@ -257,6 +257,66 @@
font-variant-numeric: tabular-nums;
}
.security-banner-suspect {
margin: 4px 0 0;
padding: 8px 10px;
background: var(--zinc-900, #18181B);
border: 1px solid var(--zinc-700, #3F3F46);
border-radius: var(--radius-sm, 4px);
font-family: var(--font-mono);
font-size: 11px;
line-height: 1.4;
color: var(--zinc-300, #D4D4D8);
white-space: pre-wrap;
word-break: break-word;
max-height: 160px;
overflow-y: auto;
}
.security-banner-actions {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 14px;
}
.security-banner-btn {
flex: 1;
padding: 8px 14px;
border-radius: var(--radius-md, 6px);
font-size: 12px;
font-weight: 600;
cursor: pointer;
border: 1px solid transparent;
transition: background 0.15s, border-color 0.15s;
}
.security-banner-btn-block {
background: var(--red-600, #DC2626);
color: white;
border-color: var(--red-700, #B91C1C);
}
.security-banner-btn-block:hover {
background: var(--red-700, #B91C1C);
}
.security-banner-btn-allow {
background: transparent;
color: var(--zinc-200, #E4E4E7);
border-color: var(--zinc-600, #52525B);
}
.security-banner-btn-allow:hover {
background: var(--zinc-800, #27272A);
border-color: var(--zinc-500, #71717A);
}
.security-banner-btn:focus-visible {
outline: 2px solid var(--amber-400);
outline-offset: 2px;
}
.conn-btn {
font-size: 9px;
font-family: var(--font-mono);