# Bastidores Painel que mostra, passo a passo, o que a IA está pensando, quais ferramentas chamou e quanto tempo cada etapa levou. > Bastidores é um componente exclusivo do THM Componentes que mostra, em linha do tempo, o que um agente de IA está fazendo: raciocínio, ferramentas, buscas e resultado, com status animado e cronômetro por etapa. As ferramentas abrem entrada e saída em JSON colorido. Serve para agentes de atendimento, triagem e agendamento que precisam de transparência. - Categoria: Interfaces de IA - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/bastidores/ ## 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 ```text 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. ## Componentes relacionados - [Aval](https://vibecode.thmtecnologia.com/componentes/aval/): Cartão em que a pessoa revisa o que a IA vai fazer e segura o botão para aprovar, ou então rejeita ou edita o pedido. - [Prosa](https://vibecode.thmtecnologia.com/componentes/prosa/): A resposta do assistente aparece aos poucos, palavra por palavra, saindo de um leve desfoque, como num chat de IA. - [Pingue-pongue](https://vibecode.thmtecnologia.com/componentes/pingue-pongue/): Conversa com a IA em que a resposta chega aos poucos, dá para gerar outra versão, editar a pergunta e avaliar. - [Quebra-cabeça](https://vibecode.thmtecnologia.com/componentes/quebra-cabeca/): Painel que a IA monta sozinha na tela, peça por peça, com métricas, gráficos, listas, formulários e botões. - [Embarque](https://vibecode.thmtecnologia.com/componentes/embarque/): Tela de espera que lista as etapas de um processo e marca cada uma como concluída enquanto avança. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.