A operação aparece nos instrumentos.
Uma peça viva conecta configuração, ação e evidência. O agente local, a vitrine Shopify e a composição de squads mostram efeitos verificáveis no navegador: decisões se refletem em estados e instrumentos, com limites de simulação sempre legíveis.
Anatomia de uma peça operável
A peça relaciona o trabalho principal à leitura técnica lateral. A configuração precede o início; o instrumento acompanha a execução; eventos e método permitem confrontar o resultado sem confundir fixture com operação real.
-
Configuração antes do início
Cenário e conjunto definem o roteiro sintético. O agente começa parado; iniciar ou avançar representa uma intenção explícita do visitante.
-
Estado nomeado
Pausado, ativo e aguardando aprovação descrevem o comportamento. Retornar a uma aba oculta não deve reiniciar o stream automaticamente.
-
Etapas observáveis
A sequência mostra resumos operacionais e o próximo encaminhamento. Ela não representa raciocínio privado nem uma conexão a modelo de IA.
-
Instrumento com unidade
Latência, taxa e p95 vêm do modelo publicado na peça. Unidade e método acompanham o número; não são um benchmark de fornecedor.
-
Registro limitado
O ticker guarda até 60 eventos. Busca e filtro selecionam a consulta sem transformar ausência de correspondência em falha da operação.
-
Limite explícito da simulação
“Nenhuma chamada externa” identifica o alcance da peça. Os resumos e instrumentos são locais e sintéticos; a aprovação prepara um encaminhamento na demonstração, sem chamar modelo, criar pedido ou autorizar CRM sem consentimento.
Contratos de tokens CSS
Valor ou alias no tema claro, propriedade consumidora e limite de uso. Cores são apresentadas em RGB equivalente; a fonte continua no CSS de tokens. O inspetor mostra a resolução no tema escolhido.
| Token / expressão | Aplicação CSS | Regra |
|---|---|---|
--xq-linha-forte
rgb(97 115 104)
|
.xq-ai-console
border-color
|
Contorno de 1 px define o laboratório. A mesma tinta separa configuração, execução e leitura. |
--xq-superficie-alt
rgb(252 252 247)
|
.xq-ai-console
background
|
Plano opaco do console. Textura é isolada e não participa da semântica dos números. |
--xq-surface-specular
rgb(255 255 255 / 80%)
|
.xq-ai-console
box-shadow
|
Brilho interno no topo. Não adicionar halos como substituto de foco ou estado. |
--xq-superficie
rgb(231 231 222)
|
.xq-ai-bar
background
|
O cabeçalho mantém identidade estável enquanto o estado da peça muda. |
--xq-label-size
11px
|
.xq-ai-cell-head
font-size
|
11 px nos cabeçalhos técnicos, com entrelinha local de 1,5. |
--xq-label-tracking
0.12em
|
.xq-ai-cell-head
letter-spacing
|
0,12 em nos rótulos. A linguagem principal permanece com espaçamento de leitura normal. |
--xq-mono
'Xeque Mono', monospace
|
.xq-ai-metrics dd
font-family
|
Métricas usam mono e números tabulares para comparação entre atualizações. |
--xq-realce
rgb(36 71 53)
|
.xq-ai-steps li[aria-current="step"]
background
|
A etapa atual combina fundo, aria-current e texto; a seleção não depende só da cor. |
--xq-sobre-realce
rgb(247 248 242)
|
.xq-ai-steps li[aria-current="step"]
color
|
A tinta muda junto do plano de realce, preservando contraste nos temas. |
--xq-grafico-fundo
rgb(252 252 247)
|
.xq-ai-stream
background
|
Área do stream com suporte opaco. Não usar transparência sobre mídia. |
--xq-acento-texto
rgb(124 68 30)
|
.xq-ai-trace polyline
stroke
|
Traçado do instrumento lateral; legenda e unidade continuam responsáveis pelo significado. |
--xq-focus-width
2px
|
.xq-ai-stream:focus-visible
outline-width
|
2 px no foco da área de rolagem. A leitura por teclado não pode ficar sem localização visual. |
Uso correto × uso incorreto
Compare a mesma intenção em duas composições. Os exemplos são amostras de leitura; os controles operáveis ficam no playground.
Receber contexto.
- Planejar o encaminhamento01 / 04
- Aguardar revisão humanaLOCAL
Roteiro e medidas ilustrativos. Nenhuma chamada externa.
- Configuração, etapa e estado fazem parte da mesma operação visível.
- A evidência descreve o roteiro e explicita o alcance local da demonstração.
- O fluxo conserva revisão humana e bloqueios documentados.
Automação inteligente.
Resultado instantâneo e definitivo.
Executar tudoSem cenário, método, unidade ou revisão.
- Anuncia uma IA conectada sem que exista integração real.
- O resultado aparece sem instrumento, método ou unidade verificável.
- A ação esconde as dependências e não explica como recuperar uma falha.
Confrontar estado, etapa e registro
Este recorte testa a apresentação de uma peça, com mensagens próprias de execução e recuperação. As três peças completas permanecem acima: nelas, configuração e aprovação operam os fluxos locais reais do guia.
Próximo encaminhamento.
01 / 06- Receber contextoENTRADA
- Revisar encaminhamentoDECISÃO
O recorte está pausado e aguarda uma ação local.
Este laboratório não inicia stream, consulta modelo ou cria pedido. A operação completa está na peça correspondente.
Pronto. Altere um controle para inspecionar o contrato.
Ensaio local e determinístico. A ação percorre carregamento → sucesso; movimento reduzido entrega o estado final imediatamente. Repetir preserva os controles.
Inspecionar tokens resolvidos
--xq-linha-forte- rgb(97 115 104)
--xq-superficie-alt- rgb(252 252 247)
--xq-surface-specular- rgb(255 255 255 / 80%)
--xq-superficie- rgb(231 231 222)
--xq-label-size- 11px
--xq-label-tracking- 0.12em
--xq-mono- 'Xeque Mono', monospace
--xq-realce- rgb(36 71 53)
--xq-sobre-realce- rgb(247 248 242)
--xq-grafico-fundo- rgb(252 252 247)
--xq-acento-texto- rgb(124 68 30)
--xq-focus-width- 2px
Aplicar o contrato
Desmontar o que foi montado
Ao retirar uma peça da página, usar destroy com o mesmo escopo de init. Isso cancela quadros, observadores e ouvintes; reabrir a peça não deve duplicar o ciclo.
const raiz = document.querySelector("[data-xq-ai]");
XequeAgente.init(raiz);
// Antes de remover a raiz do documento:
XequeAgente.destroy(raiz);Inspecionar sem iniciar a operação
snapshot permite observar a instância montada. Use a leitura para confrontar interface e estado sem disparar stream, checkout ou avanço de etapa.
const raiz = document.querySelector("[data-xq-ai]");
const estado = XequeAgente.snapshot(raiz);
// Leitura local da instância; nenhuma chamada externa.Montar uma única instância por raiz
O módulo aceita a própria raiz ou um contêiner e inclui seus descendentes. init é idempotente: repetir a montagem não inicia outro stream. O agente começa parado; consultar snapshot preserva essa intenção. Ao desmontar, usar o mesmo escopo antes de remover o HTML.
const raiz = document.querySelector("[data-xq-ai]");
XequeAgente.init(raiz);
XequeAgente.init(raiz); // Mantém a instância existente.
const estado = XequeAgente.snapshot(raiz);
// Ao retirar a peça:
XequeAgente.destroy(raiz);
raiz.remove();Critérios de aceite
- Iniciar, pausar e trocar de aba: a retomada do stream exige ação explícita.
- Em CRM sem consentimento, aprovar não remove o bloqueio.
- Na vitrine, estoque zero bloqueia adicionar e a recusa oferece recuperação.
- No ciclo de vaga, retirar uma evidência invalida as etapas dependentes.
- Montar duas vezes, desmontar e remontar a mesma raiz: nenhum ouvinte, quadro ou stream pode se multiplicar.