feat: build a real dashboard and fix dead panel navigation in the web UI

The sidebar nav (Overview/Alerts/Analysis) only did scrollIntoView on a
single stacked page, so clicking it produced no visible change. The
Alerts/Analysis panels were also placeholder shells with no real data
exploration despite the API already exposing rich per-pillar evidence.

- app.js/app.css/index.html: real panel switching via showView()/currentView,
  toggling an .active class with `.view:not(.active) { display: none }`;
  settings keeps opening its own dialog without disturbing the active view.
- New Hosts panel: table of observed hosts ranked by fusion score, with
  per-pillar (P1/P2/P3) columns, search, and drill-down into each pillar's
  evidence. Documents the known limitation that /api/alerts only lists hosts
  with at least one alert (no /api/hosts endpoint exists yet), so a benign
  host with no alert won't appear.
- Alerts panel: filterable by pillar and minimum score, sortable, with
  full evidence rendered as a formatted key/value table instead of raw JSON.
- Overview panel: KPI tiles (alert count, hosts with alerts, max score,
  dataset records) plus two interactive SVG charts (top hosts by fusion
  score, alert distribution by pillar) with hover tooltips.
- i18n-en.js: English strings for all new UI text.

No Rust files changed; this is purely apps/gui/ui/ consuming the existing
/api/alerts, /api/analyze and /api/status endpoints.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VAyr8d7HuAdUGB6aA5xmDD

apps/gui/ui/app.css

@@ -11,6 +11,12 @@
   --accent: #45d6b0;
   --accent-2: #f0b35b;
   --danger: #f27878;
+  --p1: #45d6b0;
+  --p2: #f0b35b;
+  --p3: #7aa7ff;
+  --p1-soft: rgba(69, 214, 176, 0.14);
+  --p2-soft: rgba(240, 179, 91, 0.14);
+  --p3-soft: rgba(122, 167, 255, 0.14);
   --shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
   --radius: 16px;
   --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
@@ -30,6 +36,12 @@ html[data-theme="light"] {
   --accent: #087f68;
   --accent-2: #a05b09;
   --danger: #b42323;
+  --p1: #087f68;
+  --p2: #a05b09;
+  --p3: #2456a8;
+  --p1-soft: rgba(8, 127, 104, 0.12);
+  --p2-soft: rgba(160, 91, 9, 0.12);
+  --p3-soft: rgba(36, 86, 168, 0.12);
   --shadow: 0 20px 50px rgba(20, 58, 64, 0.12);
 }
 
@@ -184,6 +196,10 @@ html[data-theme="light"] .card { background: linear-gradient(160deg, var(--panel
 .card p { color: var(--muted); font-size: 0.83rem; line-height: 1.5; }
 .tag { margin-top: auto; align-self: flex-start; color: var(--accent-2); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
 
+.view:not(.active) {
+  display: none !important;
+}
+
 .panel {
   margin-top: 16px;
   padding: 22px;
@@ -302,3 +318,382 @@ dialog menu { display: flex; justify-content: flex-end; gap: 8px; margin: 20px 0
   .panel-head { flex-direction: column; }
   .foot { flex-direction: column; }
 }
+
+/* ------------------------------------------------------------------ dashboard */
+
+[hidden] { display: none !important; }
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
+.last-updated { white-space: nowrap; }
+
+.kpi-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 14px;
+}
+.kpi {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-height: 128px;
+  padding: 18px 20px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  background: linear-gradient(160deg, var(--panel), rgba(15, 30, 43, 0.32));
+  box-shadow: var(--shadow);
+}
+html[data-theme="light"] .kpi { background: linear-gradient(160deg, var(--panel), rgba(255, 255, 255, 0.5)); }
+.kpi-label { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
+.kpi-value { margin-top: auto; font-family: var(--mono); font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; letter-spacing: -0.04em; }
+.kpi-sub { color: var(--muted); font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.charts-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
+  gap: 16px;
+  margin-top: 16px;
+}
+.chart-panel { margin-top: 0; }
+.panel-tag {
+  align-self: flex-start;
+  padding: 5px 9px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 0.68rem;
+  white-space: nowrap;
+}
+.chart-wrap { position: relative; width: 100%; min-height: 220px; }
+.chart { display: block; width: 100%; height: auto; overflow: visible; }
+.axis-line { stroke: var(--line); stroke-width: 1; }
+.axis-line.strong { stroke: var(--line-strong); }
+.axis-label { fill: var(--muted); font-family: var(--mono); font-size: 11px; }
+.bar-track { fill: rgba(255, 255, 255, 0.04); }
+html[data-theme="light"] .bar-track { fill: rgba(20, 58, 64, 0.06); }
+.bar-fill { transition: filter 140ms ease, opacity 140ms ease; }
+.bar-fill.p1 { fill: var(--p1); }
+.bar-fill.p2 { fill: var(--p2); }
+.bar-fill.p3 { fill: var(--p3); }
+.bar-fill.accent { fill: var(--accent); }
+.bar-label { fill: var(--text); font-family: var(--mono); font-size: 12px; }
+.bar-value { fill: var(--text); font-family: var(--mono); font-size: 12px; font-weight: 700; }
+.bar-row, .pillar-bar-row { outline: none; }
+.bar-row:hover .bar-fill, .bar-row:focus .bar-fill { filter: brightness(1.16); }
+.pillar-bar-row { cursor: pointer; }
+.pillar-bar-row:hover .bar-fill, .pillar-bar-row:focus .bar-fill { filter: brightness(1.2); }
+.pillar-bar-row:hover .bar-track, .pillar-bar-row:focus .bar-track { fill: rgba(255, 255, 255, 0.08); }
+.chart-empty { fill: var(--muted); font-family: var(--sans); font-size: 13px; }
+.chart-tip {
+  position: absolute;
+  z-index: 8;
+  display: grid;
+  gap: 4px;
+  max-width: 320px;
+  padding: 10px 12px;
+  border: 1px solid var(--line-strong);
+  border-radius: 10px;
+  background: var(--panel-solid);
+  box-shadow: var(--shadow);
+  color: var(--text);
+  font-size: 0.74rem;
+  line-height: 1.35;
+  pointer-events: none;
+}
+.chart-tip strong { font-family: var(--mono); font-size: 0.78rem; }
+.chart-tip span { color: var(--muted); }
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 14px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid var(--line);
+  margin-bottom: 14px;
+}
+.toolbar-slim { align-items: center; justify-content: space-between; }
+.field.compact { flex: 0 0 auto; min-width: 130px; }
+.field.compact > span { font-size: 0.68rem; }
+.field.compact input, .field.compact select { padding: 8px 10px; }
+.range-field { min-width: 178px; }
+.range-field > span { display: flex; justify-content: space-between; gap: 12px; }
+.range-field output { color: var(--text); font-family: var(--mono); }
+.range-field input[type="range"] { padding: 0; border: 0; background: transparent; accent-color: var(--accent); }
+.search-field { flex: 1 1 230px; }
+.chips { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 1px; }
+.chip {
+  padding: 8px 12px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--muted);
+  font-size: 0.76rem;
+  font-weight: 600;
+}
+.chip:hover { border-color: var(--line-strong); color: var(--text); }
+.chip.active { border-color: var(--accent); background: rgba(69, 214, 176, 0.12); color: var(--text); }
+.legend { display: flex; gap: 14px; align-items: center; color: var(--muted); font-size: 0.74rem; }
+.legend-item { display: inline-flex; align-items: center; gap: 6px; }
+.swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
+.swatch.p1 { background: var(--p1); }
+.swatch.p2 { background: var(--p2); }
+.swatch.p3 { background: var(--p3); }
+
+.pillars { margin-top: 16px; }
+.card[data-pillar-card] { cursor: pointer; outline: none; transition: 160ms ease; }
+.card[data-pillar-card]:hover, .card[data-pillar-card]:focus-visible { border-color: var(--line-strong); transform: translateY(-2px); }
+.card h2 { display: flex; align-items: center; gap: 8px; }
+.card-count {
+  margin-left: auto;
+  padding: 1px 7px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 0.66rem;
+  font-weight: 600;
+}
+
+.overview-alerts { display: grid; gap: 8px; }
+.ov-alert {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) 112px;
+  gap: 14px;
+  align-items: center;
+  width: 100%;
+  padding: 12px 14px;
+  border: 1px solid var(--line);
+  border-left: 3px solid var(--line-strong);
+  border-radius: 11px;
+  background: rgba(255, 255, 255, 0.02);
+  color: inherit;
+  text-align: left;
+}
+.ov-alert:hover { border-color: var(--line-strong); background: rgba(69, 214, 176, 0.05); }
+.ov-alert:has(.pillar-badge.p1) { border-left-color: var(--p1); }
+.ov-alert:has(.pillar-badge.p2) { border-left-color: var(--p2); }
+.ov-alert:has(.pillar-badge.p3) { border-left-color: var(--p3); }
+.ov-main { display: grid; gap: 4px; min-width: 0; }
+.ov-summary { font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ov-meta { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 0.72rem; min-width: 0; }
+.ov-dest { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ov-score { display: grid; gap: 5px; text-align: right; }
+.ov-score strong { font-family: var(--mono); font-size: 0.88rem; }
+
+.pillar-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 8px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+.pillar-badge.p1 { color: var(--p1); background: var(--p1-soft); border-color: color-mix(in srgb, var(--p1) 40%, transparent); }
+.pillar-badge.p2 { color: var(--p2); background: var(--p2-soft); border-color: color-mix(in srgb, var(--p2) 40%, transparent); }
+.pillar-badge.p3 { color: var(--p3); background: var(--p3-soft); border-color: color-mix(in srgb, var(--p3) 40%, transparent); }
+.host-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 7px;
+  border: 1px solid var(--line-strong);
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 0.72rem;
+  white-space: nowrap;
+}
+
+.score-track { display: block; width: 100%; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
+html[data-theme="light"] .score-track { background: rgba(20, 58, 64, 0.1); }
+.score-fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
+.alert-score.low .score-fill, .ov-score.low .score-fill { background: var(--accent); }
+.alert-score.medium .score-fill, .ov-score.medium .score-fill { background: var(--accent-2); }
+.alert-score.high .score-fill, .ov-score.high .score-fill { background: var(--danger); }
+
+.alert-cards { display: grid; gap: 10px; }
+.alert-card {
+  border: 1px solid var(--line);
+  border-left: 3px solid var(--line-strong);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.02);
+  overflow: hidden;
+}
+.alert-card.p1 { border-left-color: var(--p1); }
+.alert-card.p2 { border-left-color: var(--p2); }
+.alert-card.p3 { border-left-color: var(--p3); }
+.alert-head {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) 104px 16px;
+  gap: 14px;
+  align-items: center;
+  width: 100%;
+  padding: 14px 16px;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+}
+.alert-head:hover { background: rgba(69, 214, 176, 0.045); }
+.alert-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.alert-main { display: grid; gap: 5px; min-width: 0; }
+.alert-summary { font-size: 0.86rem; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.alert-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--muted); font-size: 0.72rem; min-width: 0; }
+.alert-arrow { color: var(--accent); }
+.alert-dest { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.alert-when { margin-left: auto; white-space: nowrap; }
+.alert-score { display: grid; gap: 5px; justify-items: end; }
+.alert-score strong { font-family: var(--mono); font-size: 0.92rem; }
+.chevron { color: var(--muted); font-size: 1.1rem; text-align: center; }
+.alert-body { display: grid; gap: 14px; padding: 16px; border-top: 1px solid var(--line); background: rgba(0, 0, 0, 0.1); }
+html[data-theme="light"] .alert-body { background: rgba(20, 58, 64, 0.025); }
+.metrics { display: flex; flex-wrap: wrap; gap: 8px; }
+.metric {
+  display: grid;
+  gap: 2px;
+  min-width: 92px;
+  padding: 8px 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.02);
+}
+.metric-label { color: var(--muted); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; }
+.metric-value { font-family: var(--mono); font-size: 0.78rem; font-weight: 600; overflow-wrap: anywhere; }
+.evidence-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
+.evidence-head h3 { margin: 0; font-size: 0.82rem; letter-spacing: 0.02em; }
+.dim { color: var(--muted); }
+.kv { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
+.kv th {
+  width: 44%;
+  padding: 6px 10px;
+  border-top: 1px solid var(--line);
+  color: var(--muted);
+  font-size: 0.72rem;
+  font-weight: 500;
+  text-align: left;
+  vertical-align: top;
+  overflow-wrap: anywhere;
+}
+.kv td { padding: 6px 10px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
+.kv tr:first-child th, .kv tr:first-child td { border-top: 0; }
+.alert-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.alert-actions .mono { margin-right: auto; }
+.btn.small { padding: 7px 11px; font-size: 0.74rem; }
+
+.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
+.host-table { width: 100%; border-collapse: collapse; min-width: 720px; }
+.host-table thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--line);
+  background: var(--panel-solid);
+  color: var(--muted);
+  font-size: 0.68rem;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-align: left;
+  text-transform: uppercase;
+}
+.host-table td { padding: 11px 12px; border-top: 1px solid var(--line); font-size: 0.82rem; vertical-align: middle; }
+.host-table tbody tr:first-child td { border-top: 0; }
+.host-row { cursor: pointer; outline: none; transition: background 120ms ease; }
+.host-row:hover, .host-row:focus-visible { background: rgba(69, 214, 176, 0.06); }
+.host-row.open { background: rgba(69, 214, 176, 0.05); }
+.host-row .rank { color: var(--muted); font-family: var(--mono); font-size: 0.72rem; width: 42px; }
+.host-name { font-size: 0.84rem; color: var(--text); }
+.fusion-cell { display: grid; gap: 5px; min-width: 106px; }
+.fusion-score { font-family: var(--mono); font-size: 0.8rem; }
+.m-cell { font-family: var(--mono); font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
+.m-cell.has.p1 { color: var(--p1); }
+.m-cell.has.p2 { color: var(--p2); }
+.m-cell.has.p3 { color: var(--p3); }
+.chevron-cell { color: var(--muted); text-align: right; width: 36px; }
+.host-detail-row td { padding: 0; background: rgba(0, 0, 0, 0.1); }
+html[data-theme="light"] .host-detail-row td { background: rgba(20, 58, 64, 0.03); }
+.host-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); align-items: start; gap: 12px; padding: 14px; }
+.host-pillar {
+  display: flex;
+  flex-direction: column;
+  gap: 9px;
+  min-width: 0;
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-top: 2px solid var(--line-strong);
+  border-radius: 10px;
+  background: var(--panel);
+}
+.host-pillar.p1 { border-top-color: var(--p1); }
+.host-pillar.p2 { border-top-color: var(--p2); }
+.host-pillar.p3 { border-top-color: var(--p3); }
+.host-pillar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
+.host-m { font-family: var(--mono); font-size: 0.92rem; }
+.formula { color: var(--muted); font-size: 0.7rem; }
+.evidence-compact { max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
+.evidence-compact .kv th, .evidence-compact .kv td { padding: 5px 8px; font-size: 0.72rem; }
+.host-pillar > .btn { align-self: flex-start; }
+.footnote { margin-top: 12px; color: var(--muted); font-size: 0.74rem; line-height: 1.5; }
+
+.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
+.summary-grid-wide { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: 0; }
+.summary-tile {
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+  padding: 11px 12px;
+  border: 1px solid var(--line);
+  border-radius: 9px;
+  background: rgba(255, 255, 255, 0.02);
+}
+.summary-label { color: var(--muted); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; }
+.summary-value { font-family: var(--mono); font-size: 0.8rem; font-weight: 600; overflow-wrap: anywhere; }
+.report-detail { display: grid; gap: 10px; }
+.report-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+.empty { color: var(--muted); font-size: 0.84rem; line-height: 1.5; margin: 0; padding: 14px; border: 1px dashed var(--line); border-radius: 10px; }
+
+@media (max-width: 1280px) {
+  .charts-grid { grid-template-columns: 1fr; }
+}
+
+@media (max-width: 1120px) {
+  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+
+@media (max-width: 820px) {
+  .toolbar-slim { align-items: flex-end; }
+  .alert-head { grid-template-columns: auto minmax(0, 1fr) 92px 16px; gap: 10px; }
+  .alert-when { display: none; }
+  .last-updated { display: none; }
+}
+
+@media (max-width: 640px) {
+  .kpi-grid { grid-template-columns: 1fr; }
+  .summary-grid { grid-template-columns: 1fr; }
+  .alert-head { grid-template-columns: auto minmax(0, 1fr) 16px; }
+  .alert-score { display: none; }
+  .ov-alert { grid-template-columns: auto minmax(0, 1fr); }
+  .ov-score { display: none; }
+  .alert-summary { white-space: normal; }
+  .toolbar { gap: 10px; }
+  .field.compact, .range-field, .search-field { flex: 1 1 100%; min-width: 0; }
+  .legend { display: none; }
+  .top-actions { justify-content: flex-start; }
+}

apps/gui/ui/i18n-en.js

@@ -63,4 +63,105 @@ export const EN = {
   'Nenhum alerta ainda.': 'No alerts yet.',
   'Alertas carregados: {n}': 'Alerts loaded: {n}',
   'versão {n}': 'version {n}',
+  'estado e prioridades': 'status and priorities',
+  'filtros e evidências': 'filters and evidence',
+  'fusão por evidência': 'fusion by evidence',
+  'Hosts': 'Hosts',
+  'Estado, prioridades e distribuição dos alertas': 'Status, priorities and alert distribution',
+  'Filtre, ordene e abra a evidência completa': 'Filter, sort and open the full evidence',
+  'Prioridade por fusão de evidências entre pilares': 'Priority by cross-pillar evidence fusion',
+  'Ingestão de logs Zeek e relatório da execução': 'Zeek log ingestion and run report',
+  'carregando…': 'loading…',
+  'Hosts com alerta': 'Hosts with alerts',
+  'ranqueados por fusão': 'ranked by fusion',
+  'melhor host observado': 'top observed host',
+  'Registros no dataset': 'Dataset records',
+  'armazenamento local': 'local storage',
+  'Top hosts por fusão': 'Top hosts by fusion',
+  'Score ponderado de evidências (0 a 1). Passe o mouse para ver os pilares.': 'Weighted evidence score (0 to 1). Hover to see the pillars.',
+  'Alertas por pilar': 'Alerts per pillar',
+  'Distribuição observada. Clique em uma barra para filtrar os alertas.': 'Observed distribution. Click a bar to filter alerts.',
+  'Alertas prioritários': 'Priority alerts',
+  'Os alertas com maior score individual. Abra a lista completa para filtrar.': 'The alerts with the highest individual score. Open the full list to filter.',
+  'Ver todos os alertas': 'View all alerts',
+  'sem hosts': 'no hosts',
+  'Filtre, ordene e expanda cada alerta para ver a evidência completa como tabela.': 'Filter, sort and expand each alert to see the full evidence as a table.',
+  'Ordenar': 'Sort',
+  'Maior score': 'Highest score',
+  'Menor score': 'Lowest score',
+  'Mais recentes': 'Newest',
+  'Pilar': 'Pillar',
+  'Todos': 'All',
+  'Score mínimo': 'Minimum score',
+  'Buscar': 'Search',
+  'IP, host, domínio ou ID': 'IP, host, domain or ID',
+  'Ranking por score de fusão (desc). Clique em uma linha para ver a evidência de cada pilar.': 'Ranked by fusion score (desc). Click a row to see each pillar’s evidence.',
+  'Buscar host': 'Search host',
+  'Fusão': 'Fusion',
+  'Nenhum host carregado.': 'No hosts loaded.',
+  'Detalhes': 'Details',
+  'A API de fusão lista apenas hosts com pelo menos um alerta. Hosts sem alerta não aparecem nesta tabela.': 'The fusion API only lists hosts with at least one alert. Hosts without alerts do not appear in this table.',
+  'Ver alertas': 'View alerts',
+  'Ver hosts': 'View hosts',
+  'Estado do serviço': 'Service status',
+  'Versão, dataset e armazenamento informados pela API local.': 'Version, dataset and storage reported by the local API.',
+  '{n} pilares ativos': '{n} active pillars',
+  '{n} com múltiplos pilares': '{n} with multiple pillars',
+  '{n} partições · {n}': '{n} partitions · {n}',
+  '{n} de {n} alertas': '{n} of {n} alerts',
+  '{n} hosts': '{n} hosts',
+  'Sem evidência registrada.': 'No evidence recorded.',
+  'Período': 'Period',
+  'Regularidade': 'Regularity',
+  'p-valor': 'p-value',
+  'Significância': 'Significance',
+  'Observações': 'Observations',
+  'Sessão': 'Session',
+  'Partes': 'Parts',
+  'Falhas': 'Failures',
+  'Início': 'Start',
+  'Informação': 'Information',
+  'Entropia': 'Entropy',
+  'Únicos': 'Unique',
+  'Domínio': 'Domain',
+  'Contribuição': 'Contribution',
+  'Evidência completa': 'Full evidence',
+  'Nenhum alerta corresponde aos filtros.': 'No alerts match the filters.',
+  'Copiar JSON': 'Copy JSON',
+  'Copiado': 'Copied',
+  'Ver host': 'View host',
+  'Sem alerta neste pilar.': 'No alert in this pillar.',
+  'Abrir alerta': 'Open alert',
+  'Nenhum host com alerta.': 'No hosts with alerts.',
+  'Nenhum host corresponde à busca.': 'No hosts match the search.',
+  'Nenhum host com alerta para exibir.': 'No hosts with alerts to display.',
+  'Nenhum alerta para exibir.': 'No alerts to display.',
+  'Pilar {n}: m {n} · peso {n} · contribuição {n}': 'Pillar {n}: m {n} · weight {n} · contribution {n}',
+  'Pilar {n}: m {n} · contribuição {n}': 'Pillar {n}: m {n} · contribution {n}',
+  'Score de fusão: {n}': 'Fusion score: {n}',
+  'Alertas: {n}': 'Alerts: {n}',
+  '{n}% do total': '{n}% of total',
+  'Pilar {n}: {n} alertas': 'Pillar {n}: {n} alerts',
+  'Serviço indisponível.': 'Service unavailable.',
+  'Versão': 'Version',
+  'Modo': 'Mode',
+  'Registros': 'Records',
+  'Partições': 'Partitions',
+  'TTL (dias)': 'TTL (days)',
+  'Backend': 'Backend',
+  'Status': 'Status',
+  'Diretório': 'Directory',
+  'Logs conn': 'conn logs',
+  'Logs DNS': 'DNS logs',
+  'Schema de evidência': 'Evidence schema',
+  'P1 excluídos': 'P1 excluded',
+  'Análise concluída: {n} registros, {n} alertas e {n} hosts.': 'Analysis complete: {n} records, {n} alerts and {n} hosts.',
+  'Atualizado às {n}': 'Updated at {n}',
+  'sim': 'yes',
+  'não': 'no',
+  'PCR': 'PCR',
+  'JSD': 'JSD',
+  'Hosts por score de fusão': 'Hosts by fusion score',
+  'Distribuição de alertas por pilar': 'Alert distribution per pillar',
+  'Filtrar por pilar': 'Filter by pillar',
 };

apps/gui/ui/index.html

@@ -20,13 +20,17 @@
 
     <div class="side-title">Navegação</div>
     <nav class="nav" aria-label="Navegação principal">
-      <button type="button" class="nav-item active" data-target="overview">
+      <button type="button" class="nav-item active" data-target="overview" aria-current="page">
         <span class="nav-icon">◈</span>
-        <span><span class="nav-label">Visão geral</span><span class="nav-sub">painel e estado</span></span>
+        <span><span class="nav-label">Visão geral</span><span class="nav-sub">estado e prioridades</span></span>
       </button>
       <button type="button" class="nav-item" data-target="alerts">
         <span class="nav-icon">◎</span>
-        <span><span class="nav-label">Alertas</span><span class="nav-sub">evidências recentes</span></span>
+        <span><span class="nav-label">Alertas</span><span class="nav-sub">filtros e evidências</span></span>
+      </button>
+      <button type="button" class="nav-item" data-target="hosts">
+        <span class="nav-icon">▤</span>
+        <span><span class="nav-label">Hosts</span><span class="nav-sub">fusão por evidência</span></span>
       </button>
       <button type="button" class="nav-item" data-target="analysis">
         <span class="nav-icon">⌁</span>
@@ -44,67 +48,222 @@
         <span class="pill muted">pré-lançamento</span>
       </div>
       <div class="status-row">
-        <span id="version" class="mono" data-i18n-skip>—</span>
+        <span id="version" class="mono">—</span>
         <button id="updateBtn" type="button" class="link-btn">checar atualização</button>
       </div>
     </div>
   </aside>
 
   <main class="main">
-    <header class="topbar" id="overview">
+    <header class="topbar">
       <div>
         <p class="eyebrow">Acauã</p>
-        <h1>Caça a ameaças em rede</h1>
-        <p class="sub">Pesquisa determinística, sem IA opaca</p>
+        <h1 id="viewTitle">Visão geral</h1>
+        <p id="viewSub" class="sub">Estado, prioridades e distribuição dos alertas</p>
       </div>
+      <div class="top-actions">
+        <span id="lastUpdated" class="mono last-updated">—</span>
+        <button id="refreshBtn" type="button" class="btn">Atualizar status</button>
         <button id="settingsBtn" type="button" class="icon-btn" aria-label="Configurações" title="Configurações">⚙</button>
+      </div>
     </header>
 
-    <section class="notice">
-      <strong>Estado atual.</strong>
-      <span>Ingestão de conn.log e dns.log do Zeek, armazenamento Parquet/DuckDB e os pilares 1 a 4 em versão inicial, validados com tráfego público real. Ainda não: ingestão contínua automática, alertas persistidos entre reinícios, movimentação lateral e sessões UDP.</span>
+    <section class="view active" id="overview">
+      <div class="kpi-grid">
+        <article class="kpi">
+          <span class="kpi-label">Alertas</span>
+          <strong id="kpiAlerts" class="kpi-value">—</strong>
+          <span id="kpiAlertsSub" class="kpi-sub">carregando…</span>
+        </article>
+        <article class="kpi">
+          <span class="kpi-label">Hosts com alerta</span>
+          <strong id="kpiHosts" class="kpi-value">—</strong>
+          <span id="kpiHostsSub" class="kpi-sub">ranqueados por fusão</span>
+        </article>
+        <article class="kpi">
+          <span class="kpi-label">Maior score</span>
+          <strong id="kpiScore" class="kpi-value">—</strong>
+          <span id="kpiScoreSub" class="kpi-sub">melhor host observado</span>
+        </article>
+        <article class="kpi">
+          <span class="kpi-label">Registros no dataset</span>
+          <strong id="kpiRecords" class="kpi-value">—</strong>
+          <span id="kpiRecordsSub" class="kpi-sub">armazenamento local</span>
+        </article>
+      </div>
+
+      <div class="charts-grid">
+        <section class="panel chart-panel">
+          <div class="panel-head">
+            <div>
+              <h2>Top hosts por fusão</h2>
+              <p class="hint">Score ponderado de evidências (0 a 1). Passe o mouse para ver os pilares.</p>
+            </div>
+            <span class="panel-tag">m1 · m2 · m3</span>
+          </div>
+          <div class="chart-wrap">
+            <svg id="hostChart" class="chart" role="img" aria-label="Hosts por score de fusão"></svg>
+            <div id="hostTip" class="chart-tip" hidden></div>
+          </div>
+        </section>
+
+        <section class="panel chart-panel">
+          <div class="panel-head">
+            <div>
+              <h2>Alertas por pilar</h2>
+              <p class="hint">Distribuição observada. Clique em uma barra para filtrar os alertas.</p>
+            </div>
+            <span class="panel-tag">P1 · P2 · P3</span>
+          </div>
+          <div class="chart-wrap">
+            <svg id="pillarChart" class="chart" role="img" aria-label="Distribuição de alertas por pilar"></svg>
+            <div id="pillarTip" class="chart-tip" hidden></div>
+          </div>
+        </section>
+      </div>
+
+      <section class="panel">
+        <div class="panel-head">
+          <div>
+            <h2>Alertas prioritários</h2>
+            <p class="hint">Os alertas com maior score individual. Abra a lista completa para filtrar.</p>
+          </div>
+          <button id="seeAllAlerts" type="button" class="btn">Ver todos os alertas</button>
+        </div>
+        <div id="overviewAlerts" class="overview-alerts"></div>
+      </section>
+
+      <section class="pillars" aria-label="Pilares de detecção">
+        <article class="card" data-pillar-card="1" tabindex="0" role="button">
+          <span class="card-kicker">Pilar 1</span>
+          <h2>Beaconing <span class="card-count" data-pillar-count="1">0</span></h2>
+          <p>Periodograma de Rayleigh/Schuster com grade limitada ao intervalo observado.</p>
+          <span class="tag">versão inicial</span>
+        </article>
+        <article class="card" data-pillar-card="2" tabindex="0" role="button">
+          <span class="card-kicker">Pilar 2</span>
+          <h2>Sessões persistentes <span class="card-count" data-pillar-count="2">0</span></h2>
+          <p>Sessões TCP longas, inclusive as que o Zeek divide por inatividade.</p>
+          <span class="tag">versão inicial</span>
+        </article>
+        <article class="card" data-pillar-card="3" tabindex="0" role="button">
+          <span class="card-kicker">Pilar 3</span>
+          <h2>Anomalias de protocolo <span class="card-count" data-pillar-count="3">0</span></h2>
+          <p>Volume de informação (entropia de Shannon) em subdomínios DNS.</p>
+          <span class="tag">versão inicial</span>
+        </article>
+        <article class="card" data-pillar-card="4" tabindex="0" role="button">
+          <span class="card-kicker">Pilar 4</span>
+          <h2>Fusão de evidências</h2>
+          <p>Prioridade por host com evidência por alerta.</p>
+          <span class="tag" id="pillarFusionTag">sem hosts</span>
+        </article>
       </section>
 
       <section class="notice">
         <strong>Uso autorizado.</strong>
         <span>Use somente em redes próprias ou com autorização explícita. Nenhum pacote é enviado para fora.</span>
       </section>
-
-    <section class="pillars" aria-label="Pilares de detecção">
-      <article class="card">
-        <span class="card-kicker">Pilar 1</span>
-        <h2>Beaconing</h2>
-        <p>Periodograma de Rayleigh/Schuster com grade limitada ao intervalo observado.</p>
-        <span class="tag">versão inicial</span>
-      </article>
-      <article class="card">
-        <span class="card-kicker">Pilar 2</span>
-        <h2>Sessões persistentes</h2>
-        <p>Sessões TCP longas, inclusive as que o Zeek divide por inatividade.</p>
-        <span class="tag">versão inicial</span>
-      </article>
-      <article class="card">
-        <span class="card-kicker">Pilar 3</span>
-        <h2>Anomalias de protocolo</h2>
-        <p>Volume de informação (entropia de Shannon) em subdomínios DNS.</p>
-        <span class="tag">versão inicial</span>
-      </article>
-      <article class="card">
-        <span class="card-kicker">Pilar 4</span>
-        <h2>Fusão de evidências</h2>
-        <p>Prioridade por host com evidência por alerta.</p>
-        <span class="tag">versão inicial</span>
-      </article>
     </section>
 
-    <section class="panel" id="analysis">
+    <section class="view" id="alerts" hidden>
+      <section class="panel">
+        <div class="panel-head">
+          <div>
+            <h2>Alertas</h2>
+            <p class="hint">Filtre, ordene e expanda cada alerta para ver a evidência completa como tabela.</p>
+          </div>
+          <span id="alertCount" class="panel-tag">—</span>
+        </div>
+
+        <div class="toolbar">
+          <div class="chips" id="pillarFilters" role="group" aria-label="Filtrar por pilar">
+            <button type="button" class="chip active" data-pillar="all">Todos</button>
+            <button type="button" class="chip" data-pillar="1">Pilar 1</button>
+            <button type="button" class="chip" data-pillar="2">Pilar 2</button>
+            <button type="button" class="chip" data-pillar="3">Pilar 3</button>
+          </div>
+          <label class="field compact">
+            <span>Ordenar</span>
+            <select id="alertSort">
+              <option value="score-desc">Maior score</option>
+              <option value="score-asc">Menor score</option>
+              <option value="pillar">Pilar</option>
+              <option value="newest">Mais recentes</option>
+            </select>
+          </label>
+          <label class="field compact range-field">
+            <span>Score mínimo <output id="minScoreOut">0,00</output></span>
+            <input id="alertMin" type="range" min="0" max="1" step="0.01" value="0">
+          </label>
+          <label class="field compact search-field">
+            <span>Buscar</span>
+            <input id="alertSearch" type="search" placeholder="IP, host, domínio ou ID" autocomplete="off">
+          </label>
+        </div>
+
+        <div id="alertList" class="alert-cards">
+          <p class="empty">Nenhum alerta ainda. Analise um diretório de logs do Zeek.</p>
+        </div>
+      </section>
+    </section>
+
+    <section class="view" id="hosts" hidden>
+      <section class="panel">
+        <div class="panel-head">
+          <div>
+            <h2>Hosts observados</h2>
+            <p class="hint">Ranking por score de fusão (desc). Clique em uma linha para ver a evidência de cada pilar.</p>
+          </div>
+          <span id="hostCount" class="panel-tag">—</span>
+        </div>
+
+        <div class="toolbar toolbar-slim">
+          <label class="field compact search-field">
+            <span>Buscar host</span>
+            <input id="hostSearch" type="search" placeholder="192.168.1.50" autocomplete="off" spellcheck="false">
+          </label>
+          <div class="legend">
+            <span class="legend-item"><i class="swatch p1"></i>Pilar 1</span>
+            <span class="legend-item"><i class="swatch p2"></i>Pilar 2</span>
+            <span class="legend-item"><i class="swatch p3"></i>Pilar 3</span>
+          </div>
+        </div>
+
+        <div class="table-wrap">
+          <table class="host-table">
+            <thead>
+              <tr>
+                <th scope="col">#</th>
+                <th scope="col">Host</th>
+                <th scope="col">Fusão</th>
+                <th scope="col">P1</th>
+                <th scope="col">P2</th>
+                <th scope="col">P3</th>
+                <th scope="col">Alertas</th>
+                <th scope="col"><span class="sr-only">Detalhes</span></th>
+              </tr>
+            </thead>
+            <tbody id="hostRows">
+              <tr><td colspan="8" class="empty">Nenhum host carregado.</td></tr>
+            </tbody>
+          </table>
+        </div>
+
+        <p class="footnote">A API de fusão lista apenas hosts com pelo menos um alerta. Hosts sem alerta não aparecem nesta tabela.</p>
+      </section>
+    </section>
+
+    <section class="view" id="analysis" hidden>
+      <section class="panel">
         <div class="panel-head">
           <div>
             <h2>Analisar dataset</h2>
             <p class="hint">Aponte para um diretório de logs Zeek ou para um dataset local.</p>
           </div>
-        <button id="refreshBtn" type="button" class="btn">Atualizar status</button>
+          <span id="reportStatus" class="panel-tag">—</span>
         </div>
+
         <div class="field-row">
           <label class="field">
             <span>Diretório de logs</span>
@@ -112,19 +271,27 @@
           </label>
           <button id="analyzeBtn" type="button" class="btn primary">Analisar</button>
         </div>
+
+        <div id="reportSummary" class="summary-grid" hidden></div>
+
+        <div class="report-detail">
           <pre id="output" class="output">Nenhuma análise executada.</pre>
+          <div class="report-actions">
+            <button id="gotoAlerts" type="button" class="btn" hidden>Ver alertas</button>
+            <button id="gotoHosts" type="button" class="btn" hidden>Ver hosts</button>
+          </div>
+        </div>
       </section>
 
-    <section class="panel" id="alerts">
+      <section class="panel">
         <div class="panel-head">
           <div>
-          <h2>Alertas recentes</h2>
-          <p class="hint">Cada alerta carrega a evidência determinística que o sustenta.</p>
+            <h2>Estado do serviço</h2>
+            <p class="hint">Versão, dataset e armazenamento informados pela API local.</p>
           </div>
         </div>
-      <ul id="alertList" class="alert-list">
-        <li class="empty">Nenhum alerta ainda. Analise um diretório de logs do Zeek.</li>
-      </ul>
+        <div id="serviceSummary" class="summary-grid summary-grid-wide"></div>
+      </section>
     </section>
 
     <footer class="foot">