Como ele é
Parece o painel em que um assistente de IA mostra o raciocínio enquanto trabalha. Um cartão branco traz no topo um ícone de brilho e o título Pensando, com um reflexo anil correndo pelas letras, que depois vira o tempo total gasto. Abaixo, cada etapa ganha um círculo com ícone de lâmpada, chave, lupa ou bandeira; enquanto roda, um anel anil gira em volta e o cronômetro conta. Ao concluir, um selo ciano aparece e a linha até a próxima etapa se preenche; erros ficam em vermelho. Os chips de ferramenta abrem caixas de entrada e saída com JSON colorido, e o cabeçalho recolhe tudo num resumo.
Você pode estar procurando isto se pediu algo assim
- mostrar o que o agente de IA está fazendo passo a passo
- aquela tela de pensando com as etapas do raciocínio da IA
- linha do tempo das ferramentas que o chatbot chamou
- deixar claro para o usuário o que a IA consultou antes de responder
- painel de execução do agente com o tempo de cada etapa
- ver a entrada e a saída das chamadas de API do agente
- indicador de progresso para um assistente que demora para responder
Também chamado de
- linha do tempo do agente
- painel de raciocínio
- rastro do agente
- agent run viewer
- agent activity timeline
- tool call viewer
- reasoning panel
- chain of thought UI
Quando usar
- Agentes de agendamento, triagem ou atendimento que precisam mostrar o que estão fazendo
- Copilotos internos em que a equipe confere quais ferramentas a IA usou
- Telas de depuração de agentes, com entrada e saída de cada chamada
- Respostas demoradas, em que acompanhar as etapas alivia a espera
Quando evitar
- Chats simples sem ferramentas, em que uma linha do tempo só adiciona ruído
- Públicos leigos, se o JSON técnico ficar à mostra; nesse caso, mantenha os detalhes recolhidos
Como pedir para a sua IA
Crie uma linha do tempo da atividade do agente de IA no meu chat de atendimento: etapas de raciocínio, ferramenta, busca e resultado com status animado e cronômetro, entrada e saída em JSON recolhíveis, resumo do tempo total e anúncios para leitor de tela.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Bastidores
Como ligo Bastidores ao meu agente de verdade?
Passe as etapas pela prop steps, cada uma com tipo, título, status e, se houver, nome da ferramenta, entrada, saída, erro e horários de início e fim. Bastidores atualiza a linha do tempo a cada mudança e mostra o cronômetro ao vivo nas etapas em execução. Sem a prop, o componente roda um roteiro de demonstração em loop.
Bastidores é acessível?
Sim. Bastidores avisa o leitor de tela, sem interromper a leitura, quando uma etapa começa, termina ou falha e quando a atividade acaba, com o tempo gasto. O cabeçalho e os chips de ferramenta são botões nativos com estado de aberto ou fechado, e o conteúdo recolhido sai da ordem de foco.
Bastidores respeita quem prefere menos movimento?
Sim. Com movimento reduzido, Bastidores desliga o anel giratório, o brilho do título e as transições, e a demonstração aparece direto no estado final, sem animar etapa por etapa. Além disso, o laço de animação só roda enquanto o painel está visível e há etapas em andamento.
