trackfw 6.0.0 → 6.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trackfw",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "description": "Governance CLI for AI-native software delivery and AI coding agents. Enforces traceability: ADR → REQ → ROADMAP → kanban. Native support for Codex, Claude Code, Gemini CLI, Cursor, Copilot, Windsurf, and Amazon Q.",
   "keywords": [
     "cli",

package/src/generators/roadmap.js

@@ -419,10 +419,12 @@ function newRoadmap(title, reqPath) {
   const filename = `${backlogDir}/ROADMAP-${date}-${slug}.md`
   fs.mkdirSync(backlogDir, { recursive: true })
 
+  const reqField = reqPath ? `"${reqPath}"` : '""'
+
   const body = `---
 status: backlog
 date: ${date}
-req: ""
+req: ${reqField}
 squad: ""
 ---
 
@@ -434,6 +436,11 @@ squad: ""
 <!-- What problem does this roadmap solve? Link the REQ. -->
 REQ: ${reqPath || ''}
 
+## Acceptance Criteria
+<!-- Consolidated criteria for this roadmap. Detail per ML in the waves below. -->
+- [ ]
+- [ ]
+
 ## Wave 1 — <name> (parallel MLs)
 > Dependencies: none
 
@@ -509,7 +516,7 @@ function newRoadmapFromReq(reqPath) {
   const body = `---
 status: backlog
 date: ${date}
-req: "${basename}"
+req: "${reqPath}"
 squad: ""
 ---
 
@@ -521,6 +528,11 @@ squad: ""
 <!-- Derived from REQ: ${basename} -->
 REQ: ${reqPath}${adrRef}
 
+## Acceptance Criteria
+<!-- Consolidated criteria for this roadmap. Detail per ML in the waves below. -->
+- [ ]
+- [ ]
+
 ${mlSection}
 `
 

package/src/serve/static/app.js

@@ -1,5 +1,5 @@
 /* trackfw dashboard — app.js
-   Tecnologias: HTMX + marked.js + Chart.js + D3.js (todos via CDN)
+   Tecnologias: Tailwind CSS + marked.js + DOMPurify + Chart.js + D3.js (todos via CDN)
    Sem bundler, sem npm no runtime.
 */
 
@@ -14,6 +14,12 @@ let _burnChart   = null;     // instância Chart.js burndown
 let _d3Sim       = null;     // simulação D3 force
 let _drawerPath  = null;     // path atualmente aberto no drawer
 
+// ─── Views de lista (ADRs / REQs) ──────────────────────────────────────────────
+let _listState = {
+  adr: { search: '', status: '' },
+  req: { search: '', status: '' },
+};
+
 // ─── Auto-refresh ─────────────────────────────────────────────────────────────
 let _refreshInterval = parseInt(localStorage.getItem('trackfw_refresh_interval') || '60');
 let _refreshPaused   = localStorage.getItem('trackfw_refresh_paused') === 'true';
@@ -98,6 +104,8 @@ function switchView(view) {
     loadChain();
   } else if (view === 'metrics') {
     loadMetrics();
+  } else if (view === 'adr' || view === 'req') {
+    loadListView(view);
   }
 }
 
@@ -572,6 +580,169 @@ function renderChain(data) {
   });
 }
 
+// ─── View: ADRs / REQs (listas navegáveis) ────────────────────────────────────
+
+function normalizeText(str) {
+  return (str || '')
+    .toString()
+    .normalize('NFD')
+    .replace(/\p{Diacritic}/gu, '')
+    .toLowerCase();
+}
+
+async function loadListView(type) {
+  hide(`${type}-error`);
+
+  // Reusa o cache de /api/chain já usado pela aba Chain. Se o cache já foi
+  // aquecido (ex.: usuário visitou a aba Chain antes), o spinner nunca chega
+  // a ser exibido por show('${type}-loading') — mas ele parte visível no
+  // HTML (sem classe "hidden"), então precisa ser escondido explicitamente
+  // aqui também, não só no ramo de erro/loading do fetch abaixo.
+  hide(`${type}-loading`);
+  if (_chainData) {
+    renderListView(type);
+    return;
+  }
+
+  show(`${type}-loading`);
+
+  try {
+    const res = await fetch('/api/chain');
+    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    _chainData = await res.json();
+    hide(`${type}-loading`);
+    renderListView(type);
+  } catch (err) {
+    hide(`${type}-loading`);
+    const errEl = el(`${type}-error`);
+    if (errEl) {
+      errEl.textContent = `Erro ao carregar ${type === 'adr' ? 'ADRs' : 'REQs'}: ${err.message}`;
+      errEl.classList.remove('hidden');
+    }
+  }
+}
+
+function getListNodes(type) {
+  if (!_chainData) return [];
+  return (_chainData.nodes || []).filter(n => n.type === type);
+}
+
+// Popula o <select> de status a partir dos valores distintos presentes na
+// resposta do /api/chain. NUNCA hardcodar uma lista fixa de estados aqui:
+// state é texto livre e uma lista fixa esconderia silenciosamente artefatos
+// com status inesperado (ex.: "unknown").
+function populateStatusFilter(type, nodes) {
+  const select = el(`${type}-status-filter`);
+  if (!select) return;
+
+  const current = select.value;
+  const states = Array.from(new Set(nodes.map(n => n.state || 'unknown'))).sort((a, b) => a.localeCompare(b));
+
+  select.innerHTML = '<option value="">Todos</option>';
+  states.forEach(state => {
+    const opt = document.createElement('option');
+    opt.value = state;
+    opt.textContent = state;
+    select.appendChild(opt);
+  });
+
+  if (states.includes(current)) {
+    select.value = current;
+  } else {
+    select.value = '';
+    _listState[type].status = '';
+  }
+}
+
+function renderListView(type) {
+  const nodes = getListNodes(type);
+  populateStatusFilter(type, nodes);
+  applyListFilters(type);
+}
+
+function onListSearch(type, value) {
+  _listState[type].search = value;
+  applyListFilters(type);
+}
+
+function onListStatusChange(type, value) {
+  _listState[type].status = value;
+  applyListFilters(type);
+}
+
+function applyListFilters(type) {
+  const nodes = getListNodes(type);
+  const { search, status } = _listState[type];
+  const normSearch = normalizeText(search);
+
+  const filtered = nodes.filter(n => {
+    if (status && (n.state || 'unknown') !== status) return false;
+    if (!normSearch) return true;
+    const haystack = normalizeText(`${n.title || ''} ${n.id || ''}`);
+    return haystack.includes(normSearch);
+  });
+
+  renderListRows(type, filtered, nodes.length);
+}
+
+function renderListRows(type, filtered, total) {
+  const listEl  = el(`${type}-list`);
+  const emptyEl = el(`${type}-empty`);
+  const countEl = el(`${type}-count`);
+  if (!listEl) return;
+
+  const typeLabel = type === 'adr' ? 'ADRs' : 'REQs';
+  listEl.innerHTML = '';
+
+  if (countEl) {
+    countEl.textContent = `${filtered.length} de ${total} ${typeLabel}`;
+  }
+
+  if (filtered.length === 0) {
+    if (emptyEl) {
+      emptyEl.textContent = total === 0
+        ? `Nenhum ${type === 'adr' ? 'ADR' : 'REQ'} encontrado.`
+        : 'Nenhum item corresponde à busca/filtro atual.';
+      emptyEl.classList.remove('hidden');
+    }
+    return;
+  }
+
+  if (emptyEl) emptyEl.classList.add('hidden');
+
+  filtered
+    .slice()
+    .sort((a, b) => (a.id || '').localeCompare(b.id || ''))
+    .forEach(node => listEl.appendChild(createListRow(node)));
+}
+
+function createListRow(node) {
+  const identifier = (node.id || '').split('/').pop();
+  const title      = node.title || identifier;
+  const state      = node.state || 'unknown';
+
+  const row = document.createElement('div');
+  row.className = 'list-row';
+  row.setAttribute('tabindex', '0');
+  row.setAttribute('role', 'button');
+  row.setAttribute('aria-label', `Abrir: ${title}`);
+
+  row.innerHTML = `
+    <span class="list-row-id">${escapeHtml(identifier)}</span>
+    <span class="list-row-title">${escapeHtml(title)}</span>
+    <span class="status-chip" data-state="${escapeHtml(state.toLowerCase())}">${escapeHtml(state)}</span>`;
+
+  row.addEventListener('click', () => openDrawer(node.id));
+  row.addEventListener('keydown', e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      openDrawer(node.id);
+    }
+  });
+
+  return row;
+}
+
 // ─── View: Metrics ────────────────────────────────────────────────────────────
 
 async function loadMetrics() {
@@ -699,6 +870,85 @@ function renderMetrics(data) {
 
 // ─── Drawer lateral ───────────────────────────────────────────────────────────
 
+// Allowlist do DOMPurify: cobre o markdown legítimo de ADRs/REQs/roadmaps
+// (headings, listas ordenadas/não ordenadas, blockquote, code inline e em bloco,
+// tabelas, links e checklists GFM `- [ ]`). Não inclui `img`, `iframe`, `style`,
+// `on*` (event handlers) nem `script` — nenhum é usado pelo markdown do projeto
+// e cada um ampliaria a superfície de ataque sem necessidade.
+const MARKDOWN_SANITIZE_CONFIG = {
+  ALLOWED_TAGS: [
+    'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+    'p', 'br', 'hr',
+    'ul', 'ol', 'li',
+    'blockquote', 'pre', 'code',
+    'strong', 'em', 'b', 'i', 'del', 's', 'u',
+    'a',
+    'table', 'thead', 'tbody', 'tfoot', 'tr', 'th', 'td',
+    'input',
+  ],
+  ALLOWED_ATTR: ['href', 'title', 'class', 'id', 'align', 'type', 'checked', 'disabled'],
+  ALLOW_DATA_ATTR: false,
+};
+
+/**
+ * Converte markdown em HTML e sanitiza o resultado antes de expor ao DOM.
+ * Fail-safe: se DOMPurify não estiver carregado (CDN fora do ar, SRI falhou,
+ * uso offline), NUNCA devolve HTML — devolve null para o chamador decidir
+ * como degradar (texto puro / erro). Não há caminho silencioso e inseguro.
+ */
+function renderMarkdownSafe(md) {
+  if (typeof DOMPurify === 'undefined') {
+    return null;
+  }
+  const html = marked.parse(md || '');
+  return DOMPurify.sanitize(html, MARKDOWN_SANITIZE_CONFIG);
+}
+
+/**
+ * Resolve um href de link markdown relativo ao documento atualmente aberto no
+ * drawer, devolvendo um caminho normalizado relativo à raiz do repositório.
+ *
+ * Todos os links `.md` encontrados em docs/ são relativos ao documento que os
+ * contém (nunca à raiz) — ver ADR-2026-08-01. Formas tratadas:
+ *   - "./ARQUIVO.md"              → mesma pasta do documento atual
+ *   - "ARQUIVO.md"  (sem prefixo) → mesma pasta do documento atual
+ *   - "../dir/ARQUIVO.md"         → sobe um nível a partir da pasta atual
+ *   - "../../dir/ARQUIVO.md"      → ".." encadeados, sobe N níveis
+ *
+ * Algoritmo: concatena o href com o dirname do documento atual e resolve os
+ * segmentos com uma pilha — "." é descartado, ".." remove o topo da pilha (ou
+ * é descartado silenciosamente se a pilha já estiver vazia, para nunca deixar
+ * o resultado escapar acima da raiz do repositório).
+ *
+ * Este helper NÃO é idempotente para um caminho já completo (ex.:
+ * "docs/adr/X.md") — se recebesse um como `href`, o resultado ficaria
+ * prefixado incorretamente pelo dirname do documento atual. A segurança aqui
+ * não vem do algoritmo, vem do isolamento do ponto de chamada: os três
+ * pontos de entrada que já passam caminho completo (card do Board, nó do
+ * grafo Chain, linha das listas ADR/REQ) chamam `openDrawer` diretamente e
+ * nunca passam pelo interceptador de links do markdown renderizado — o único
+ * lugar onde este helper é invocado. O levantamento do corpus em docs/ (ver
+ * ADR-2026-08-01) confirma zero links `.md` raiz-relativos dentro de
+ * documentos, então este helper nunca recebe, na prática, algo que já não
+ * seja relativo ao documento que o contém.
+ */
+function resolveRelativeMdHref(href, currentDocPath) {
+  const lastSlash = (currentDocPath || '').lastIndexOf('/');
+  const baseDir = lastSlash === -1 ? '' : currentDocPath.slice(0, lastSlash);
+  const combined = baseDir ? `${baseDir}/${href}` : href;
+
+  const stack = [];
+  combined.split('/').forEach(part => {
+    if (part === '' || part === '.') return;
+    if (part === '..') {
+      if (stack.length > 0) stack.pop();
+      return;
+    }
+    stack.push(part);
+  });
+  return stack.join('/');
+}
+
 async function openDrawer(path) {
   if (!path) return;
   _drawerPath = path;
@@ -732,7 +982,11 @@ async function openDrawer(path) {
 
   try {
     const res = await fetch(`/api/file?path=${encodeURIComponent(path)}`);
-    if (!res.ok) throw new Error(`HTTP ${res.status}`);
+    if (!res.ok) {
+      const httpErr = new Error(`HTTP ${res.status}`);
+      httpErr.status = res.status;
+      throw httpErr;
+    }
     const raw = await res.text();
 
     hide('drawer-loading');
@@ -743,23 +997,42 @@ async function openDrawer(path) {
       renderFrontmatterTable(frontmatter);
     }
 
-    // Renderizar markdown
+    // Renderizar markdown (sanitizado — ver renderMarkdownSafe)
     if (mdEl) {
-      mdEl.innerHTML = marked.parse(body || raw);
-
-      // Interceptar links internos .md
-      mdEl.querySelectorAll('a[href]').forEach(a => {
-        const href = a.getAttribute('href');
-        if (!href) return;
-        const isExternal = href.startsWith('http://') || href.startsWith('https://');
-        const isMdLink   = href.endsWith('.md');
-        if (!isExternal && isMdLink) {
-          a.addEventListener('click', e => {
-            e.preventDefault();
-            openDrawer(href);
-          });
+      const safeHtml = renderMarkdownSafe(body || raw);
+      if (safeHtml === null) {
+        // Fail-safe: sem DOMPurify carregado, nunca renderizar HTML bruto.
+        mdEl.textContent = body || raw;
+        const errEl = el('drawer-error');
+        if (errEl) {
+          errEl.textContent = 'Aviso: sanitizador de HTML indisponível — conteúdo exibido como texto puro.';
+          errEl.classList.remove('hidden');
         }
-      });
+      } else {
+        mdEl.innerHTML = safeHtml;
+
+        // Interceptar links internos .md
+        mdEl.querySelectorAll('a[href]').forEach(a => {
+          const href = a.getAttribute('href');
+          if (!href) return;
+          const isExternal = href.startsWith('http://') || href.startsWith('https://');
+          // Um link pode carregar uma âncora de seção (ex.: "outro.md#secao").
+          // O drawer não tem conceito de rolagem para âncora dentro do markdown
+          // renderizado, então a âncora é descartada na resolução — apenas o
+          // caminho do arquivo é usado para decidir se é um link .md e para
+          // montar o caminho a buscar.
+          const hashIndex = href.indexOf('#');
+          const hrefPath  = hashIndex === -1 ? href : href.slice(0, hashIndex);
+          const isMdLink  = hrefPath.endsWith('.md');
+          if (!isExternal && isMdLink) {
+            const resolved = resolveRelativeMdHref(hrefPath, _drawerPath);
+            a.addEventListener('click', e => {
+              e.preventDefault();
+              openDrawer(resolved);
+            });
+          }
+        });
+      }
     }
 
     show('drawer-content');
@@ -767,7 +1040,11 @@ async function openDrawer(path) {
     hide('drawer-loading');
     const errEl = el('drawer-error');
     if (errEl) {
-      errEl.textContent = `Erro ao carregar arquivo: ${err.message}`;
+      if (err.status === 403) {
+        errEl.textContent = `Arquivo fora dos diretórios permitidos: ${path}`;
+      } else {
+        errEl.textContent = `Erro ao carregar arquivo: ${err.message}`;
+      }
       errEl.classList.remove('hidden');
     }
   }

package/src/serve/static/index.html

@@ -4,16 +4,28 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>trackfw — dashboard</title>
-  <!-- Tailwind CSS CDN -->
+  <!-- Tailwind CSS CDN: URL não-versionada (JIT em runtime), HTTP/2 302 — sem integrity de propósito.
+       Um hash fixo aqui quebraria o dashboard inteiro no próximo release deles. Migrar para uma
+       build versionada exige auditoria visual completa e é escopo de REQ própria. -->
   <script src="https://cdn.tailwindcss.com"></script>
-  <!-- HTMX -->
-  <script src="https://unpkg.com/htmx.org@2.0.4/dist/htmx.min.js"></script>
   <!-- marked.js -->
-  <script src="https://cdn.jsdelivr.net/npm/marked@12.0.0/marked.min.js"></script>
+  <script
+    src="https://cdn.jsdelivr.net/npm/marked@12.0.0/marked.min.js"
+    integrity="sha384-NNQgBjjuhtXzPmmy4gurS5X7P4uTt1DThyevz4Ua0IVK5+kazYQI1W27JHjbbxQz"
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"></script>
   <!-- Chart.js -->
-  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
+  <script
+    src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"
+    integrity="sha384-NrKB+u6Ts6AtkIhwPixiKTzgSKNblyhlk0Sohlgar9UHUBzai/sgnNNWWd291xqt"
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"></script>
   <!-- D3.js -->
-  <script src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"></script>
+  <script
+    src="https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"
+    integrity="sha384-CjloA8y00+1SDAUkjs099PVfnY2KmDC2BZnws9kh8D/lX1s46w6EPhpXdqMfjK6i"
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"></script>
   <link rel="stylesheet" href="/static/style.css" />
 </head>
 <body class="bg-gray-50 text-gray-900 min-h-screen flex flex-col">
@@ -40,6 +52,18 @@
         class="tab-btn px-4 py-1.5 rounded text-sm font-medium transition-colors"
         aria-pressed="false"
       >Metrics</button>
+      <button
+        id="tab-adr"
+        onclick="switchView('adr')"
+        class="tab-btn px-4 py-1.5 rounded text-sm font-medium transition-colors"
+        aria-pressed="false"
+      >ADRs</button>
+      <button
+        id="tab-req"
+        onclick="switchView('req')"
+        class="tab-btn px-4 py-1.5 rounded text-sm font-medium transition-colors"
+        aria-pressed="false"
+      >REQs</button>
     </nav>
   </header>
 
@@ -175,6 +199,76 @@
       </div>
     </section>
 
+    <!-- View: ADRs -->
+    <section id="view-adr" class="view-section w-full hidden p-6 overflow-auto" aria-label="Lista de ADRs">
+      <div class="flex items-center gap-3 flex-wrap mb-4">
+        <input
+          type="search"
+          id="adr-search"
+          oninput="onListSearch('adr', this.value)"
+          placeholder="Buscar por título ou identificador..."
+          class="text-sm border border-gray-300 rounded px-3 py-1.5 bg-white flex-1 min-w-[220px]"
+          aria-label="Buscar ADRs por título ou identificador"
+        />
+        <label for="adr-status-filter" class="text-sm font-medium text-gray-600 sr-only">Filtrar por status</label>
+        <select
+          id="adr-status-filter"
+          onchange="onListStatusChange('adr', this.value)"
+          class="text-sm border border-gray-300 rounded px-2 py-1.5 bg-white"
+          aria-label="Filtrar ADRs por status"
+        >
+          <option value="">Todos</option>
+        </select>
+        <span id="adr-count" class="text-xs text-gray-500 ml-auto" aria-live="polite"></span>
+      </div>
+
+      <div id="adr-loading" class="flex items-center gap-2 text-gray-500 text-sm">
+        <svg class="animate-spin h-4 w-4 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
+        </svg>
+        Carregando ADRs...
+      </div>
+      <div id="adr-error" class="hidden text-red-600 text-sm mt-4" role="alert"></div>
+      <div id="adr-empty" class="hidden text-sm text-gray-400 text-center py-8"></div>
+      <div id="adr-list" class="list-view-container"></div>
+    </section>
+
+    <!-- View: REQs -->
+    <section id="view-req" class="view-section w-full hidden p-6 overflow-auto" aria-label="Lista de REQs">
+      <div class="flex items-center gap-3 flex-wrap mb-4">
+        <input
+          type="search"
+          id="req-search"
+          oninput="onListSearch('req', this.value)"
+          placeholder="Buscar por título ou identificador..."
+          class="text-sm border border-gray-300 rounded px-3 py-1.5 bg-white flex-1 min-w-[220px]"
+          aria-label="Buscar REQs por título ou identificador"
+        />
+        <label for="req-status-filter" class="text-sm font-medium text-gray-600 sr-only">Filtrar por status</label>
+        <select
+          id="req-status-filter"
+          onchange="onListStatusChange('req', this.value)"
+          class="text-sm border border-gray-300 rounded px-2 py-1.5 bg-white"
+          aria-label="Filtrar REQs por status"
+        >
+          <option value="">Todos</option>
+        </select>
+        <span id="req-count" class="text-xs text-gray-500 ml-auto" aria-live="polite"></span>
+      </div>
+
+      <div id="req-loading" class="flex items-center gap-2 text-gray-500 text-sm">
+        <svg class="animate-spin h-4 w-4 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
+          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z"></path>
+        </svg>
+        Carregando REQs...
+      </div>
+      <div id="req-error" class="hidden text-red-600 text-sm mt-4" role="alert"></div>
+      <div id="req-empty" class="hidden text-sm text-gray-400 text-center py-8"></div>
+      <div id="req-list" class="list-view-container"></div>
+    </section>
+
   </main>
 
   <!-- Overlay do drawer -->
@@ -233,6 +327,12 @@
     </div>
   </aside>
 
+  <!-- DOMPurify (sanitização de HTML do drawer) -->
+  <script
+    src="https://cdn.jsdelivr.net/npm/dompurify@3.4.12/dist/purify.min.js"
+    integrity="sha384-piCcpDdJ7qVeK4Tv8Z6Hpcr3ZBIgP16TxQTPVfsLFdZ5uDgwc3Y8Ho7oUnqf12qu"
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"></script>
   <script src="/static/app.js"></script>
 </body>
 </html>

package/src/serve/static/style.css

@@ -205,6 +205,85 @@
   animation: attentionRing 2s ease-in-out infinite;
 }
 
+/* ─── Views de lista (ADRs / REQs) ─────────────────────────────────────────── */
+.list-view-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.list-row {
+  display: grid;
+  grid-template-columns: 220px 1fr auto;
+  align-items: center;
+  gap: 0.75rem;
+  background-color: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  padding: 0.6rem 0.9rem;
+  cursor: pointer;
+  transition: box-shadow 0.15s ease, transform 0.1s ease, background-color 0.15s ease;
+}
+
+.list-row:hover {
+  background-color: #ffffff;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  transform: translateY(-1px);
+}
+
+.list-row:focus-visible {
+  outline: 2px solid #3b82f6;
+  outline-offset: 2px;
+}
+
+.list-row-id {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.78rem;
+  color: #6b7280;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.list-row-title {
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: #1f2937;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.status-chip {
+  display: inline-block;
+  font-size: 0.72rem;
+  font-weight: 600;
+  padding: 0.15rem 0.55rem;
+  border-radius: 999px;
+  background-color: #e5e7eb;
+  color: #374151;
+  white-space: nowrap;
+}
+
+/* Cores conhecidas de status (fallback cinza acima cobre qualquer texto livre) */
+.status-chip[data-state="accepted"] { background-color: #dcfce7; color: #15803d; }
+.status-chip[data-state="proposed"] { background-color: #fef3c7; color: #92400e; }
+.status-chip[data-state="done"]     { background-color: #dbeafe; color: #1d4ed8; }
+.status-chip[data-state="closed"]   { background-color: #f3f4f6; color: #374151; }
+.status-chip[data-state="unknown"]  { background-color: #fee2e2; color: #991b1b; }
+
+@media (max-width: 640px) {
+  .list-row {
+    grid-template-columns: 1fr auto;
+    grid-template-areas:
+      "id status"
+      "title title";
+  }
+  .list-row-id    { grid-area: id; }
+  .list-row-title { grid-area: title; }
+  .status-chip    { grid-area: status; justify-self: end; }
+}
+
 /* Banner de atenção (entre header e main) */
 .attention-banner {
   display: flex;

package/src/validator/index.js

@@ -754,7 +754,7 @@ function validateRefTargetsExist() {
       const content = readFileForRule('ref_targets_exist', path.join(dir, name), warnings)
       if (content === null) continue
       const ref = extractRefPath(content, 'REQ')
-      if (ref && !referenceExists(ref, [cfg.reqDir])) {
+      if (ref && !referenceExists(ref)) {
         warnings.push(`roadmap "${name}" links to REQ "${ref}" which does not exist`)
       }
     }
@@ -766,11 +766,11 @@ function validateRefTargetsExist() {
     if (content === null) continue
     const name = path.basename(filePath)
     const adrRef = extractRefPath(content, 'ADR')
-    if (adrRef && !referenceExists(adrRef, cfg.adrDirs)) {
+    if (adrRef && !referenceExists(adrRef)) {
       warnings.push(`req "${name}" links to ADR "${adrRef}" which does not exist`)
     }
     const roadmapRef = extractRefPath(content, 'Roadmap')
-    if (roadmapRef && !referenceExists(roadmapRef, [cfg.roadmapDir])) {
+    if (roadmapRef && !referenceExists(roadmapRef)) {
       warnings.push(`req "${name}" links to Roadmap "${roadmapRef}" which does not exist`)
     }
   }
@@ -778,7 +778,7 @@ function validateRefTargetsExist() {
   return warnings
 }
 
-function referenceExists(ref, roots) {
+function referenceExists(ref) {
   const expandedRef = config.expandPath ? config.expandPath(ref) : ref
   if (fs.existsSync(expandedRef)) return true
   return false