Companion · Agente HITL

Agente no código.

EXTRACT

motion

BANDAHigh-end
PEÇAS20

Paper é a fonte visual. Aqui os 20 primitivos para copiar.

Os 20 primitivos HITL. Demos vivos iguais ao specimen. Cada um com Copiar.

Padrões de beautifului.dev · visual Grupo Ecom / extract.sys · --duration 600ms

01 · Loading

Estado de carga

Quatro variantes: Pontos, Órbita, Grade, Surfer/Drive. Relógio JS. Motion só nos tokens.

Processando0.0s
Pontos
Órbita
Grade
Surfer / Drive
Surfando o índice
HTML 
<div class="load-card"><span class="label">Pontos</span><div class="loading-dots"><span class="anim-dots"></span><span class="anim-dots"></span><span class="anim-dots"></span></div></div>

02 · Thinking

Pensamento

Traces expansíveis. Shimmer no passo ativo. Pulse blink. Toggle no cabeçalho.

Passos
  1. Ler o pedido do usuário
  2. Buscar no índice interno
  3. Redigir a resposta
Raciocínio

O patch toca três arquivos. A escrita no repositório pede HITL no passo 2 — não pular.

Busca

4 trechos em docs/onboarding.md e agent/flow.ts.

HTML 
<div class="think"><button class="think-head" type="button" data-think-toggle aria-expanded="true"><strong>Pensando</strong></button><div class="think-body" data-think-body>…</div></div>

03 · Streaming

Fluxo

Typewriter + caret-blink. Fontes sobem com fade-up quando o texto fecha.

HTML 
<p class="stream"><span data-stream-out data-text="…"></span><span class="caret anim-caret"></span></p>

04 · Approval

Aprovação

Placa invertida em ácido. Escolhas entram com pop-in.

Escrever o patch no repositório?

Três arquivos. Sem isso, o agente só descreve o diff.

Ação proposta write · agent/flow.ts + tests/onboarding.spec.ts
HTML 
<div class="approval"><h3>Escrever o patch?</h3><div class="approval-actions"><button class="pill-btn" type="button">Aprovar</button></div></div>

05 · Chips

Chips de ferramenta

S / R / W com chip-in e pop-in em stagger.

3 chamadas · 1 mensagem
S search ok R read ok W write espera
HTML 
<span class="tool anim-chip-in"><i>S</i> search <span class="st">ok</span></span>

06 · Tasks

Tarefas

Marca em curso gira com spin-task. Concluída fica estática.

Ler o spec de onboardingdocs/onboarding.md
Concluída
Montar a trilha de aprovaçãoHITL · passo 2
Em curso
Escrever testestests/onboarding.spec.ts
Na fila
Abrir o diff3 arquivos
Na fila
HTML 
<div class="task is-run"><span class="mark anim-spin-task"></span><div><span class="name">Montar HITL</span></div></div>

07 · Chat

Conversa

Bolhas user / agente entram com fade-up.

Você Revisa o fluxo de onboarding e me diz onde o humano entra.
Agente No passo 2. Qualquer write espera o cartão de aprovação — o resto pode correr sozinho.
HTML 
<div class="bubble bubble-agent anim-fade-up"><small>Agente</small>…</div>

08 · Prompt

Prompt

Barra CSS only. Sem WebGL, sem glimm.

HTML 
<form class="prompt" action="#" onsubmit="return false;"><input type="text" placeholder="Prompt"><button class="icon-btn send" type="button">Enviar</button></form>

09 · Reco

Recomendação

Cartão + medidor com transição de largura em --duration-slow.

Quer que eu enfileire o patch?

Escrever os testes primeiro, depois o fluxo. A aprovação continua no passo 2.

confiança alta
HTML 
<div class="reco"><h3>Enfileirar o patch?</h3><div class="meter is-on" data-meter><span></span></div></div>

10 · Context

Contexto

Chunks e fontes sobem com fade-up.

Regra de HITL

Toda escrita no repositório passa por um humano. Leitura e busca não.

docs/onboarding.md

Assinatura do fluxo

run(task) devolve um cartão de aprovação quando o plano inclui write.

agent/flow.ts
HTML 
<article class="anim-fade-up"><h3>Regra de HITL</h3><p>Toda escrita passa por um humano.</p></article>

11 · Diff

Diff

Linhas entram com fade-in em stagger.

CampoAntesDepois
HITLopcionalobrigatório em write
Retries33
Timeout8s12s
Auto-commitligadoremovido
HTML 
<table class="data"><tr class="diff-add"><td>Timeout</td><td class="was">8s</td><td class="now">12s</td></tr></table>

12 · Records

Registros

Pontos records-pulse nas linhas ao vivo.

TarefaDonoEstadoAtualizado
Onboarding HITL Anaem curso2h
Índice interno Miguelfila5h
Spec de tools Liaok1d
Patch de testes Anaespera3h
Diff da tabela Jeffok4d
HTML 
<td><span class="live-dot anim-records-pulse"></span>Onboarding HITL</td>

13 · Filter

Filtro

Chips JS. Linhas visíveis sobem com fade-up.

TarefaQuandoEstadoDono
Indexar o spechojeFilaMiguel
Montar HITLhojeEm cursoAna
Escrever testesamanhãFilaAna
Revisar diffhojeEm cursoJeff
Publicar tokensontemOkLia
HTML 
<div data-filter><div class="filters"><button type="button" data-filter-chip="all" aria-pressed="true">Todas</button></div></div>

14 · Sidebar

Lateral

Hover com glide em --duration --ease.

Caixa. Três threads abertas — onboarding, patch de testes, revisão de diff.
HTML 
<nav class="side-rail"><a class="is-on" href="#s14">Caixa</a></nav>

15 · Search

Busca

Filtro JS. Resultados entram com fade-in.

/
  • Fila 12 tarefas abertas
  • Montar HITL Ana · em curso
  • Escrever testes Ana · fila
  • Revisar diff Jeff · em curso
HTML 
<div class="search-field"><input type="search" data-search placeholder="Buscar"></div>

16 · Insights

Insights

Três cartões. Barras eq-bounce em CSS. Sem canvas.

Latência 1.8s média do turno
HITL 94% aprovadas no passo 2
Fila 12 tarefas abertas
HTML 
<article class="insight"><small>Latência</small><strong>1.8s</strong><div class="eq"><i class="anim-eq-bounce"></i></div></article>

17 · Code

Código

Listing + botão copiar.

agent/flow.ts · TypeScript 
// HITL antes de qualquer write
export async function run(task) {
  const plan = await think(task)
  if (plan.needsWrite) {
    return approval(plan)
  }
  return reply(plan)
}
HTML 
<div class="code"><div class="code-bar"><button type="button" data-copy>Copiar</button></div><pre data-copy-src>export async function run(task) { … }</pre></div>

18 · Tune

Ajuste

Sliders. Sem WebGL.

HTML 
<label><div class="row">Temperatura <span data-tune-out="temp">0.4</span></div><input type="range" data-tune="temp"></label>

19 · Select

Seleção

Barra pop-in / fade-up quando uma linha é marcada.

0 linhas
TarefaEstado
Indexar specFila
Montar HITLEm curso
Escrever testesFila
Revisar diffEm curso
HTML 
<div class="sel-bar" data-sel-bar><strong><span data-sel-count>0</span> linhas</strong></div>

20 · Flow

Fluxo

Canvas pontilhado em CSS + conectores SVG. is-now estático. Sem drag.

TRIGGER Pedido HITL Aprovar WRITE Patch
HTML 
<svg class="flow" viewBox="0 0 640 220"><rect class="flow-node" x="250" y="70" width="140" height="80" rx="16"/></svg>

Licença

MIT

Copyright (c) 2026 Shane Levine. Padrões de Beautiful UI (beautifului.dev/license).

Identidade visual: extract.sys / High-end. Isto é a camada de motion — não um clone visual. Prata, Plus Jakarta, um invert.

MIT License

Copyright (c) 2026 Shane Levine

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.