side_spy
Painel tático · Lua e React
Cada segundo com o painel aberto é um segundo sem enxergar o mundo. Isso é a restrição central do desenho.
- TypeScript e React
- 4.640 linhas
- Lua
- 2.644 linhas
- Famílias de dispositivo
- 3
Fonte verificada no repositório interno em 08/09/2026
O que faz
Em uso
Câmeras, escutas e rastreadores reunidos num painel só, com estado em tempo real, validade por dispositivo e permissão por grupo. Sem a limpeza automática do que expirou, cada dispositivo esquecido vira sujeira permanente no banco.
O sistema tem um documento de produto próprio dentro do resource, e ele é sobre restrição, não sobre estética: quem usa o painel é um operador em campo, muitas vezes com o personagem exposto, às vezes escondido dentro de um carro, em máquina modesta e tela pequena.
Evidência
Como o sistema aparece
Capturas da interface real, renderizada com payload de demonstração derivado dos contratos do resource — organizações, cargos, pessoas e identificadores são sintéticos. Onde não existe interface, entra visualização técnica, rotulada como tal.
Interface do sistema Visão geral: o estado de tudo que está plantado no mapa, e o que mudou desde a última abertura.
Interface do sistema Câmeras: cada dispositivo carrega validade — sem isso, o que foi esquecido vira sujeira permanente.
Interface do sistema Escutas: alvo, situação de transmissão e permissão por grupo.
Interface do sistema Rastreadores: densidade de informação em vez de efeito visual — o alvo é abrir, decidir e fechar.
Por dentro da engenharia
Decisões de implementação
Um bloco por decisão de implementação. Abra o que interessa.
Interface otimizada para consulta rápida
Problema
Um painel de vigilância é aberto durante a operação, não antes dela. Cada segundo procurando informação na tela é um segundo sem ver o que acontece em volta — o que, no jogo, custa a operação.
Solução
O alvo de desenho é abrir, decidir e fechar. Densidade de informação no lugar de efeito visual: a tela mostra o estado de tudo que está plantado no mapa e o que mudou desde a última abertura.
Por que foi feito assim
Quando o custo de uso é tempo de exposição, "bonito" e "usável" deixam de ser a mesma discussão. A métrica de sucesso é o operador fechar sem hesitar.
Anti-referências definidas antes do desenho visual
Problema
O reflexo para "militar tático" é verde de radar sobre preto, fonte monoespaçada e linhas de varredura. É o primeiro lugar onde todo mundo vai — e cai exatamente no visual cyberpunk que o pedido proibia.
Solução
As anti-referências foram escritas no documento de produto antes da primeira tela, com essa armadilha específica incluída mesmo sem ter sido citada no pedido. A identidade vem da densidade da informação e da estrutura da moldura, não de acender fósforo verde.
Por que foi feito assim
Registrar o que não se vai fazer é mais barato do que desenhar três versões até perceber que todas são a mesma. E torna a decisão revisável por outra pessoa.
Dispositivo que expira é dispositivo que se limpa sozinho
Problema
Equipamento instalado no mundo tem validade, mas ninguém volta para recolher o que expirou. Sem limpeza, o painel mostra ruído e a tabela cresce para sempre.
Solução
Validade e limpeza automática fazem parte do modelo desde o começo, junto com a permissão por grupo que decide quem enxerga o quê.
Por que foi feito assim
Ciclo de vida definido no modelo evita a manutenção manual que ninguém faz. O que não tem fim declarado acumula.
Stack
O que foi usado
Servidor
- Lua
- FiveM
- vRP
Interface
- React
- TypeScript
- Vite
Desenho
- Documento de produto no resource
- Anti-referências declaradas
- Restrição de tempo de tela como requisito