diff --git a/.gitignore b/.gitignore index 1688ab8..9644dcb 100644 --- a/.gitignore +++ b/.gitignore @@ -17,6 +17,13 @@ pgdata/ *.log _inspect*.js whisper/ +logs/ +tmp/ +uploads/ + +# Ferramentas .claude +.pi/ +.impeccable/ .gitignore CONTEXTO.md diff --git a/.impeccable/critique/2026-06-23T14-35-01Z__src-public-chat-html.md b/.impeccable/critique/2026-06-23T14-35-01Z__src-public-chat-html.md deleted file mode 100644 index bed7746..0000000 --- a/.impeccable/critique/2026-06-23T14-35-01Z__src-public-chat-html.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -target: src/public/chat.html -total_score: 23 -p0_count: 0 -p1_count: 3 -timestamp: 2026-06-23T14-35-01Z -slug: src-public-chat-html ---- -# Design Critique: Chat — Chatc2 -**Target:** src/public/chat.html -**Score:** 23/40 (Acceptable) - -## Design Health Score - -| # | Heuristic | Score | Key Issue | -|---|-----------|-------|-----------| -| 1 | Visibility of System Status | 3 | Sem indicador de digitando, sem status de conexão, sem feedback de erro visível | -| 2 | Match System / Real World | 3 | Padrão WhatsApp familiar; termos como associar precisam de contexto | -| 3 | User Control and Freedom | 3 | Cancel em modais; sem undo em mensagens; sem reabertura direta | -| 4 | Consistency and Standards | 2 | 30+ violações de design system (cores/radii fora do DESIGN.md) | -| 5 | Error Prevention | 2 | Botão enviar ativo sem texto; sem confirmação ao finalizar | -| 6 | Recognition Rather Than Recall | 3 | Tabs com contagens; ícones ambíguos sem labels | -| 7 | Flexibility and Efficiency | 2 | Sem atalhos de teclado; zero ações em lote | -| 8 | Aesthetic and Minimalist Design | 3 | Visual limpo; painel direito pode sobrecarregar | -| 9 | Error Recovery | 1 | Zero indicadores visuais de erro em toda a interface | -| 10 | Help and Documentation | 1 | Sem tooltips, ajuda contextual ou onboarding | -| **Total** | | **23/40** | **Acceptable** | - -## Anti-Patterns Verdict -NAO parece gerado por IA. Interface com identidade própria (padrão WhatsApp). Detector: 34 advisories de drift de design system, 2 warnings (single-font = falso positivo intencional, dark-glow merece atenção). - -## Overall Impression -Tela de chat funcionalmente sólida, WhatsApp-style bem executado, dark mode completo, mobile responsivo. Problema crítico: resiliência — zero feedback de erro. Mais drift de design system e falta de atalhos para uso intensivo. - -## Priority Issues -[P1] Design system drift — 30+ valores fora do DESIGN.md. Cores e raios do chat precisam ser incorporados ou consolidados. -[P1] Zero visibilidade de erro — mensagem falhou, upload quebrou, conexão caiu: atendente fica no escuro. -[P1] Chat input com 5 botões competindo — ícones ambíguos, sem labels, peso visual similar. -[P2] Painel direito sobrecarregado — todas as seções visíveis, scroll excessivo. -[P2] Zero atalhos de teclado — 8h+/dia sem atalhos gera fadiga. - -## Persona Red Flags -Alex (Power User): Sem atalhos, sem notificação de novas conversas, 5 botões sempre visíveis. -Jordan (First-Timer): Ícones sem texto, toggle privada ambíguo, sem onboarding. -Sam (Accessibility): Botões emoji sem aria-label, enviar sem nome acessível, sem trap de foco em modais. - -## Minor Observations -- Padrão SVG do fundo é toque WhatsApp autêntico -- Botão Finalizar sem confirmação -- Drag-overlay excelente affordance -- border-radius: 22px vs 50% inconsistente -- Empresa-tag com border-radius inline diff --git a/.impeccable/design.json b/.impeccable/design.json deleted file mode 100644 index f7617d0..0000000 --- a/.impeccable/design.json +++ /dev/null @@ -1,377 +0,0 @@ -{ - "schemaVersion": 2, - "generatedAt": "2026-06-23T17:00:00.000Z", - "title": "Design System: Chatc2", - "extensions": { - "colorMeta": { - "indigo-funcional": { - "role": "primary", - "displayName": "Índigo Funcional", - "canonical": "#667eea", - "tonalRamp": [ - "#1a1a5e", "#2a2a7e", "#3a3a9e", "#4a4abe", - "#667eea", "#8888f0", "#aaaaf6", "#ccccfa" - ] - }, - "indigo-profundo": { - "role": "primary", - "displayName": "Índigo Profundo", - "canonical": "#5a67d8", - "tonalRamp": [ - "#151860", "#252878", "#353a90", "#454ca8", - "#5a67d8", "#7a84e6", "#9aa1f0", "#babff8" - ] - }, - "violeta-apoio": { - "role": "secondary", - "displayName": "Violeta de Apoio", - "canonical": "#764ba2", - "tonalRamp": [ - "#1e0a3c", "#2e1658", "#3e226e", "#4e2e84", - "#764ba2", "#9678c0", "#b69ed8", "#d6c4ee" - ] - }, - "meia-noite-inicio": { - "role": "neutral", - "displayName": "Meia-Noite Início", - "canonical": "#1e1b4b", - "tonalRamp": [ - "#0a0830", "#100e40", "#181450", "#1e1b4b", - "#2e2b68", "#3e3b82", "#4e4b9a", "#5e5bb0" - ] - }, - "meia-noite-fim": { - "role": "neutral", - "displayName": "Meia-Noite Fim", - "canonical": "#312e81", - "tonalRamp": [ - "#101040", "#1a1858", "#242270", "#312e81", - "#4a4898", "#6462ae", "#7e7cc4", "#9896da" - ] - }, - "papel-limpo": { - "role": "neutral", - "displayName": "Papel Limpo", - "canonical": "#ffffff", - "tonalRamp": [ - "#f0f0f0", "#f3f3f3", "#f6f6f6", "#f9f9f9", - "#ffffff", "#ffffff", "#ffffff", "#ffffff" - ] - }, - "papel-suave": { - "role": "neutral", - "displayName": "Papel Suave", - "canonical": "#f9fafb", - "tonalRamp": [ - "#e8eaed", "#edeff2", "#f2f4f6", "#f6f7f9", - "#f9fafb", "#fbfcfc", "#fdfdfd", "#fefefe" - ] - }, - "papel-frio": { - "role": "neutral", - "displayName": "Papel Frio", - "canonical": "#f3f4f6", - "tonalRamp": [ - "#e0e2e6", "#e5e7eb", "#eaecf0", "#eff0f3", - "#f3f4f6", "#f7f7f9", "#fafafb", "#fcfcfd" - ] - }, - "grafite": { - "role": "neutral", - "displayName": "Grafite", - "canonical": "#111827", - "tonalRamp": [ - "#0a0e14", "#0d1118", "#0f141e", "#101724", - "#111827", "#1f2937", "#374151", "#4b5563" - ] - }, - "verde-confirma": { - "role": "semantic", - "displayName": "Verde Confirma", - "canonical": "#059669", - "tonalRamp": [ - "#002a18", "#004228", "#005a34", "#007240", - "#059669", "#22b87a", "#40d492", "#60eaaa" - ] - }, - "vermelho-alerta": { - "role": "semantic", - "displayName": "Vermelho Alerta", - "canonical": "#ef4444", - "tonalRamp": [ - "#3c0000", "#5c0000", "#7c0808", "#9c1414", - "#ef4444", "#f47070", "#f89898", "#fcc0c0" - ] - }, - "ambar-aviso": { - "role": "semantic", - "displayName": "Âmbar Aviso", - "canonical": "#f59e0b", - "tonalRamp": [ - "#3c2400", "#5c3800", "#7c4c00", "#9c6000", - "#f59e0b", "#f7b840", "#f9ce70", "#fbe4a0" - ] - }, - "verde-whatsapp": { - "role": "semantic", - "displayName": "Verde WhatsApp", - "canonical": "#25d366", - "tonalRamp": [ - "#003d10", "#005d1a", "#007d24", "#009d2e", - "#25d366", "#45e880", "#65f0a0", "#85f8c0" - ] - }, - "bolha-agente": { - "role": "semantic", - "displayName": "Bolha Agente", - "canonical": "#dcf8c6", - "tonalRamp": [ - "#8cb870", "#a8d090", "#bce8a8", "#ccf0b6", - "#dcf8c6", "#e8fad6", "#f0fce6", "#f8fef0" - ] - }, - "bolha-privada-bg": { - "role": "semantic", - "displayName": "Bolha Privada Fundo", - "canonical": "#fef9c3", - "tonalRamp": [ - "#b0a840", "#c8c060", "#d8d480", "#e8e8a0", - "#fef9c3", "#fefbd6", "#fefde8", "#fffef4" - ] - }, - "chat-wallpaper": { - "role": "neutral", - "displayName": "Chat Wallpaper", - "canonical": "#e5ddd5", - "tonalRamp": [ - "#b0a898", "#c0b8a8", "#d0c8b8", "#d8d0c8", - "#e5ddd5", "#eae4de", "#f0ece8", "#f6f4f0" - ] - }, - "violeta-tab": { - "role": "primary", - "displayName": "Violeta Tab", - "canonical": "#a78bfa", - "tonalRamp": [ - "#403060", "#604890", "#8060c0", "#9070e0", - "#a78bfa", "#b8a0fc", "#c8b8fe", "#d8d0ff" - ] - }, - "vermelho-hover": { - "role": "semantic", - "displayName": "Vermelho Hover", - "canonical": "#dc2626", - "tonalRamp": [ - "#3c0000", "#5c0808", "#7c1010", "#9c1818", - "#dc2626", "#f05050", "#f88080", "#fcb0b0" - ] - }, - "cinza-borda-hover": { - "role": "neutral", - "displayName": "Cinza Borda Hover", - "canonical": "#d1d5db", - "tonalRamp": [ - "#a0a4aa", "#b0b4ba", "#c0c4ca", "#c8ccd2", - "#d1d5db", "#dce0e6", "#e8ecf0", "#f4f6f8" - ] - } - }, - "typographyMeta": { - "display": { - "displayName": "Display", - "purpose": "Título da página de login. Uso exclusivo em momentos de entrada." - }, - "title": { - "displayName": "Title", - "purpose": "Título da topbar e cabeçalhos de seção principal." - }, - "body": { - "displayName": "Body", - "purpose": "Texto corrido, labels, conteúdo de mensagens, células de tabela." - }, - "label": { - "displayName": "Label", - "purpose": "Rótulos de navegação, cabeçalhos de tabela, metadados. Sempre uppercase com tracking." - } - }, - "shadows": [ - { - "name": "ambient", - "value": "0 1px 3px rgba(0,0,0,0.08)", - "purpose": "Cards estáticos e topbar. Sombra padrão para separação sutil." - }, - { - "name": "floating", - "value": "0 4px 16px rgba(0,0,0,0.10)", - "purpose": "Elementos com destaque moderado: dropdowns, previews." - }, - { - "name": "modal", - "value": "0 20px 60px rgba(0,0,0,0.18)", - "purpose": "Exclusivo para overlays de modal, combinado com backdrop-filter blur." - } - ], - "motion": [ - { - "name": "ease-standard", - "value": "all 0.15s ease", - "purpose": "Transição padrão para todos os estados interativos: hover, focus, active." - }, - { - "name": "modal-enter", - "value": "0.18s ease", - "purpose": "Animação de entrada de modais: fade + scale(0.96 → 1)." - } - ], - "breakpoints": [ - { "name": "tablet", "value": "768px" }, - { "name": "desktop-sm", "value": "1024px" }, - { "name": "mobile-sm", "value": "480px" } - ] - }, - "components": [ - { - "name": "Primary Button", - "kind": "button", - "refersTo": "button-primary", - "description": "Ação principal. Fundo índigo funcional, resposta imediata ao hover e active.", - "html": "", - "css": ".ds-btn-primary { background: #667eea; color: #fff; border: 1px solid #667eea; padding: 9px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; } .ds-btn-primary:hover { background: #5a67d8; border-color: #5a67d8; } .ds-btn-primary:active { transform: scale(0.98); } .ds-btn-primary:focus-visible { outline: 2px solid #667eea; outline-offset: 2px; }" - }, - { - "name": "Secondary Button", - "kind": "button", - "refersTo": "button-secondary", - "description": "Ação secundária. Fundo branco com borda cinza. Hover suave para papel-suave.", - "html": "", - "css": ".ds-btn-secondary { background: #ffffff; color: #374151; border: 1px solid #e5e7eb; padding: 9px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; } .ds-btn-secondary:hover { background: #f9fafb; } .ds-btn-secondary:active { transform: scale(0.98); } .ds-btn-secondary:focus-visible { outline: 2px solid #667eea; outline-offset: 2px; }" - }, - { - "name": "Danger Button", - "kind": "button", - "refersTo": "button-danger", - "description": "Ação destrutiva. Exclusivo para excluir, finalizar, remover.", - "html": "", - "css": ".ds-btn-danger { background: #ef4444; color: #fff; border: 1px solid #ef4444; padding: 9px 18px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; } .ds-btn-danger:hover { background: #dc2626; border-color: #dc2626; } .ds-btn-danger:active { transform: scale(0.98); } .ds-btn-danger:focus-visible { outline: 2px solid #ef4444; outline-offset: 2px; }" - }, - { - "name": "Text Input", - "kind": "input", - "refersTo": "input-text", - "description": "Campo de texto padrão com ring de foco de 3px como assinatura de acessibilidade.", - "html": "", - "css": ".ds-input-text { width: 100%; padding: 10px 14px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #111827; background: #f9fafb; outline: none; transition: all 0.15s ease; } .ds-input-text:focus { border-color: #667eea; background: #ffffff; box-shadow: 0 0 0 3px rgba(102,126,234,0.12); } .ds-input-text::placeholder { color: #6b7280; } .ds-input-text.error { border-color: #ef4444; background: #fef2f2; }" - }, - { - "name": "Card", - "kind": "card", - "refersTo": "card", - "description": "Container padrão para conteúdo. Fundo branco, borda sutil, sombra ambient.", - "html": "
Conteúdo do card com informações relevantes para o atendente.