acaua/apps/gui/ui/index.html

<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Acauã</title>
<link rel="icon" href="/logo.png">
<link rel="stylesheet" href="/app.css">
</head>
<body>
<div class="app">
  <aside class="sidebar">
    <div class="brand">
      <img class="logo" src="/logo.png" alt="">
      <div>
        <strong>Acauã</strong>
        <small>caça a ameaças em rede</small>
      </div>
    </div>

    <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">
        <span class="nav-icon">◈</span>
        <span><span class="nav-label">Visão geral</span><span class="nav-sub">painel e estado</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>
      </button>
      <button type="button" class="nav-item" data-target="analysis">
        <span class="nav-icon">⌁</span>
        <span><span class="nav-label">Análise</span><span class="nav-sub">dataset Zeek</span></span>
      </button>
      <button type="button" class="nav-item" data-target="settings">
        <span class="nav-icon">⚙</span>
        <span><span class="nav-label">Configurações</span><span class="nav-sub">idioma e tema</span></span>
      </button>
    </nav>

    <div class="side-foot">
      <div class="status-row">
        <span id="connection" class="pill"><span class="dot"></span><span id="connectionText">Conectando…</span></span>
        <span class="pill muted">pré-lançamento</span>
      </div>
      <div class="status-row">
        <span id="version" class="mono" data-i18n-skip>—</span>
        <button id="updateBtn" type="button" class="link-btn">checar atualização</button>
      </div>
    </div>
  </aside>

  <main class="main">
    <header class="topbar" id="overview">
      <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>
      </div>
      <button id="settingsBtn" type="button" class="icon-btn" aria-label="Configurações" title="Configurações">⚙</button>
    </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>

    <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">
      <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>
      </div>
      <div class="field-row">
        <label class="field">
          <span>Diretório de logs</span>
          <input id="datasetPath" type="text" placeholder="/var/log/zeek/current" autocomplete="off" spellcheck="false">
        </label>
        <button id="analyzeBtn" type="button" class="btn primary">Analisar</button>
      </div>
      <pre id="output" class="output">Nenhuma análise executada.</pre>
    </section>

    <section class="panel" id="alerts">
      <div class="panel-head">
        <div>
          <h2>Alertas recentes</h2>
          <p class="hint">Cada alerta carrega a evidência determinística que o sustenta.</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>
    </section>

    <footer class="foot">
      <span>Acauã · pré-lançamento</span>
      <span class="mono">MIT OR Apache-2.0</span>
    </footer>
  </main>
</div>

<dialog id="settingsDlg" aria-labelledby="settingsTitle">
  <form method="dialog">
    <div class="dialog-head">
      <h2 id="settingsTitle">Configurações</h2>
      <button type="button" id="closeSettings" class="icon-btn" aria-label="Fechar configurações" title="Fechar">×</button>
    </div>
    <label class="field">
      <span>Idioma</span>
      <select id="langSel">
        <option value="auto">Auto</option>
        <option value="pt">Português</option>
        <option value="en">English</option>
      </select>
    </label>
    <div class="field">
      <span>Tema</span>
      <div class="segmented" id="themePick">
        <button type="button" data-theme-pick="auto">Auto</button>
        <button type="button" data-theme-pick="light">Claro</button>
        <button type="button" data-theme-pick="dark">Escuro</button>
      </div>
    </div>
    <menu>
      <button type="button" id="doneSettings" class="btn primary">Fechar</button>
    </menu>
  </form>
</dialog>

<script type="module" src="/app.js"></script>
</body>
</html>