Crisis Detail Template

Página de detalhe de uma crise específica. Concentra todas as informações, métricas, timeline e ações relacionadas a um incidente.

Estrutura


┌─────────────────────────────────────────────┐
│  Header (flat, sem Card wrapper)            │
│  (Anel)  Nome da Crise  [Status] [Alerta]   │
│           Criado em · X dias · Atualizado   │
│                              [Equipe (av.)] │
├─────────────────────────────────────────────┤
│  Tabs (underline, border-b-2 border-brand)  │
│  Resumo | Timeline | Cobertura              │
│                                             │
│  [Tab Content: Resumo]                      │
│  ┌──────────────────┐  ┌──────────────────┐ │
│  │ KPI strip        │  │ Próxima Ação     │ │
│  │ label + chip Δ   │  │ [borda colorida  │ │
│  │ valor grande     │  │  por prioridade] │ │
│  └──────────────────┘  └──────────────────┘ │
│  ┌──────────────────┐  ┌──────────────────┐ │
│  │ Fontes/Mídia     │  │ Ações Rápidas    │ │
│  │ - Twitter: 342   │  │ [Dispatch]       │ │
│  │ - News: 89       │  │ [Export PDF]     │ │
│  │ - Reddit: 156    │  │ [Archive]        │ │
│  └──────────────────┘  └──────────────────┘ │
└─────────────────────────────────────────────┘

Componentes Utilizados

Seção	Componentes
Header	anel de score (`conic-gradient`), `RiskChangeHighlight`, `MonitoringStatusBadge`, `AvatarGroup`
Tabs	underline com `border-b-2 border-brand` (não `Tabs` shadcn padrão)
Score	anel circular (`conic-gradient` + máscara interna), não usa `Progress`/SVG
KPI strip	`DeltaChip` inline ao label
Próxima Ação	card com borda esquerda colorida por prioridade
Timeline	`Accordion`, `Avatar`, `Separator`
Fontes	`Card`, `MetricCard` compacto
Ações	`DropdownMenu`, `Button`

Padrão de Score

O score de crise (getAttentionScore() em lib/attention-score.ts) usa a mesma escala canônica de risco documentada em patterns/risk-levels e nos tokens --risk-stable/monitor/attention/high/critical-* do app. Não há mais divergência entre label e cor — ambos vêm da mesma banda.

Bandas (fonte única — `AttentionScore` e `--risk-*`)

Range	Label	Token de cor
0–19	Estável	`--risk-stable-text`
20–39	Monitor	`--risk-monitor-text`
40–59	Atenção	`--risk-attention-text`
60–79	Alto	`--risk-high-text`
80–100	Crítico	`--risk-critical-text`

Histórico: até jul/2026, attention-score.ts usava labels e faixas próprias (Ruído/Atenção/Alerta/Crise/Crítico, 0-20/21-40/41-60/61-80/81-100) com classes Tailwind hardcoded, divergentes da escala canônica. Corrigido para eliminar a fonte dupla de verdade — ver Issue #272 do Crisis-Monitor.

Estrutura visual — anel circular via conic-gradient, não um bloco retangular nem SVG:


<div
  className="relative grid size-[92px] shrink-0 place-items-center rounded-full"
  style={{ background: `conic-gradient(${ringColorVar} ${score}%, var(--border) 0)` }}
>
  <div className="absolute inset-[6px] rounded-full bg-card shadow-[var(--shadow-lg)]" />
  <div className="relative flex flex-col items-center leading-none">
    <RiskChangeHighlight value={score} className={`font-mono text-[26px] font-semibold ${scoreTextClass}`}>
      {score}
    </RiskChangeHighlight>
    <span className="mt-0.5 font-mono text-[10px] text-fg-subtle">/100</span>
    <span className={`mt-1 text-[9px] font-semibold uppercase tracking-[0.14em] ${scoreTextClass}`}>
      {band.label}
    </span>
  </div>
</div>

ringColorVar e scoreTextClass usam os mesmos 5 limiares (19/39/59/79/100) e os mesmos tokens --risk-*-text da tabela acima — cor do anel, cor do número e label sempre coerentes entre si.

Números de score usam .mono ou [data-numeric] para manter numerais tabulares. RiskChangeHighlight anima o valor quando o score muda entre renders.

Acento de Prioridade (card “Próxima Ação Recomendada”)

Prioridade de ação usa tokens delta, não tokens de risco — é uma escala independente da do score:

Prioridade	Token
`critica`	`--delta-error-*`
`alta`	`--delta-warn-*`
`media`	`--delta-info-*`

Implementação em response-playbook.tsx. Nunca usar cor literal (hex/hsl) para prioridade.

KPI Strip

Cada métrica exibe o chip de variação (DeltaChip) inline ao label, na mesma linha — não abaixo do valor:


<div className="flex flex-wrap items-center gap-x-1 gap-y-0.5">
  <span className="text-xs text-muted-foreground">{label}</span>
  <DeltaChip value={delta} tone={trendToneMap[trendDirection]} size="xs" />
</div>
<span className="text-2xl font-semibold tabular-nums leading-none">{value}</span>

tone é derivado de trendDirection: up → success, down → error, flat → neutral. Implementação em crisis-overview.tsx.

Estado Vazio

Quando uma crise não tem dados de timeline:


<EmptyState
  icon={<Search className="size-8" />}
  title="Nenhum evento registrado"
  description="Os eventos aparecerão aqui conforme a crise evolui."
/>