Demonstração do Chassis Visual

Esta página existe para validar visualmente as quatro variantes de estilo do chassis compartilhado do Reversa. Use o botão no canto superior direito para alternar entre sober, premium, dense e exploratory. A escolha persiste em localStorage.

Cards e grid responsivo

Code City

Visualização 3D com cada arquivo como prédio. Altura por LOC, largura por complexidade.

3D

Module Map

Força repulsiva entre nós, força atrativa entre dependentes. Detecção de ciclos automática.

D3

Métricas

Treemap de tamanho por pasta, top 20 mais complexos, distribuição de LOC.

Highcharts

Findings de exemplo (Annotated PR)

SQL injection em endpoint /api/orders

CRITICAL src/api/orders.ts:47 OWASP A03:2021 

query = `SELECT * FROM orders WHERE id = ${userId}`

Concatenação direta de userId em SQL permite injeção. Use parameterized queries com prepared statements.

Cookie de sessão sem flag HttpOnly

HIGH src/auth/session.ts:23

Cookies de sessão devem usar flags HttpOnly, Secure e SameSite=Lax.

Validação de input parcial em /signup

MEDIUM src/api/signup.ts:12

Email tem regex, senha não. Adicionar validação de comprimento mínimo e complexidade.

Tipografia e código inline

O título da página usa --reversa-font-heading, enquanto o corpo usa --reversa-font-body. Em variante premium, o corpo vira serifa Lora; nas demais é Inter. 

function colorForModule(module) {
    if (module.isHotPath) return 0xff5a4f;
    return TYPE_COLORS[module.type] || 0xcccccc;
}