Red team panelPro
Attack categories with pass and fail counts and severity, the failures behind each, and the transcript behind each failure with the turn that gave way marked.
On this page
Installation
Usage
import { RedTeamPanel } from "@/components/ui/chatcn/pro/red-team-panel"
<RedTeamPanel categories={categories} agentLabel="Support agent" />Each category carries its passed and failed counts, attacks still running, and its failures: a one line title, a severity (low, medium, high, critical), an optional technique and the transcript. Mark the turn where the agent gave way with flagged and say why in note. Categories sort by failure rate, the headline is the attack success rate, and severity reads as rising bars and a word as well as color. Categories that held say so instead of showing an empty list.
Examples
States
Props
| Prop | Type | Notes |
|---|---|---|
categories | RedTeamCategory[] | { id, label, passed, failed, running?, failures } |
category, defaultCategory, onCategoryChange | string | null | Defaults to the worst category |
failure, defaultFailure, onFailureChange | string | null | The open transcript |
agentLabel | string | Names the agent in transcripts |
loading | boolean | Static rows |
error, onRetry | ReactNode, () => void | Say how to fix it |
Keyboard
| Key | Action |
|---|---|
| Up, Down, Home, End | Move between categories |
| Tab | Into the failures, then the transcript |
Accessibility
- Categories are a listbox with one tab stop; failures are pressed buttons.
- Severity has a word for screen readers wherever only the bars show; the failing turn says Failure before its note.
- The failures and transcript are a polite live region.
Motion
None beyond the spinner on running categories. Selection changes instantly, because a reviewer moves through dozens of failures.