Prompt de diagnóstico de desempenho do Grok em navegador com conversa longa

PROMPT: Você é um engenheiro de frontend encarregado de diagnosticar um problema de desempenho no Grok (interface web de chat) onde uma conversa muito longa faz a página carregar toda a conversa, causando lag. Observação: o aplicativo móvel funciona normalmente. Use este prompt para gerar um plano de diagnóstico completo. Instruções:

1) Reúna informações do usuário: navegador (ex.: Chrome), versão, sistema operacional, tamanho da conversa (número de mensagens), tamanho total em bytes, presença de multimídia, qualidade da conexão de rede.
2) Defina passos reproduzíveis claros para que a equipe possa observar o problema no ambiente de desenvolvimento e em produção.
3) Determine métricas a serem coletadas: tempo de carregamento (TTFB, First Contentful Paint), tempo para renderização completa, tempo até o scroll ficar responsivo, uso de CPU/memória, frames por segundo (FPS), tamanho/do DOM renderizado, payloads de rede, número de elementos por mensagem.
4) Liste causas prováveis: renderização de listas muito longas, DOM inflado, re-renderizações desnecessárias, watchers/observers acionando atualizações excessivas, vazamentos de memória, scripts bloqueantes, cargas de dados sincrônicas.
5) Forneça um plano de diagnóstico com ações acionáveis: coletas de HAR/network, profiling de performance (navegador/React/ou framework correspondente), uso de ferramentas de profiling de memória, análise de heap, verificação de renderização incremental e cache/local storage.
6) Sugira soluções frontend (sem depender de bibliotecas específicas): virtualização da lista de mensagens (windowing), lazy loading de mensagens, paginação incremental, divisão de mensagens em chunks, limitação de DOM, memoização de componentes, reduzir re-renders com React.memo/useMemo/useCallback (ou equivalentes), otimização de atualizações de estado, renderização condicional para mensagens antigas.
7) Forneça exemplos de código/pseudocódigo para implementar virtualization e lazy loading de mensagens (abordagem genérica, não dependente de biblioteca específica):
   - criar um componente de lista virtualizada que renderiza apenas mensagens visíveis com um buffer;
   - calcular índice de mensagens visíveis com base no scroll;
   - carregar mensagens adicionais conforme o usuário rola;
   - manter estado mínimo para o índice atual e o bloco visível.
8) Inclua um template de relatório de bug/PR com campos: Título, Descrição, Passos para Reproduzir, Resultado Esperado, Resultado Atual, Logs/Anexos, Versões (navegador, app, framework, build);
9) Defina Critérios de Aceitação (ex.: tempo de carregamento abaixo de X ms com Y mensagens, sem quedas de desempenho perceptíveis, RAM dentro de limite, etc.).
10) Liste perguntas a fazer ao usuário/equipe para coleta adicional (ex.: há mensagens com mídia? há extensões que afetam desempenho? qual é o tamanho médio da conversa? há diferenças entre redes e dispositivos?).
11) Indique qual ferramenta de IA é mais adequada para gerar esse tipo de prompt entre as opções: chatgpt, claude, deepseek, gemini, copilot, perplexity, explicando brevemente por que. Observação: a saída deve ser prática, acionável e diretamente utilizável pela equipe de desenvolvimento.