# Grafo hub-and-spoke de orquestração — palco pontilhado, nós de vidro, fio âmbar vivo

Aprendido em 2026-09-05 no modo Orquestra da aba Nash Code (NASH,
`src/renderer/git/orquestra.js`), a partir de sete referências enviadas pelo
dono: dois diagramas hub-and-spoke monocromáticos (hub quadrado com logo,
nós-satélite ligados por curvas), o card "Multi-Model Orchestration" (seis
ícones convergindo num nó com brilho), um funil verde, um tablet em perspectiva
e dois renders do canvas do n8n (porta com brilho verde, rótulo na aresta).
Render-verificado: o protótipo (artifact) e a própria aba foram renderizados
em Chrome headless e olhados. Transplante de técnica, não réplica — a paleta
da casa ficou (âmbar, Archivo, preto); só a gramática do grafo veio das
referências.

- **Palco**: `#050506` com grade pontilhada
  `radial-gradient(rgba(255,255,255,.085) 1px, transparent 1.2px)`, passo
  20 px, deslocada 10/10 pra os pontos não caírem na borda. Um único brilho
  atrás do hub (`radial-gradient` âmbar .16 → .05 em 55 % → 0, 420×260,
  `blur(18px)`) — a única fonte de luz do palco.
- **Hub**: quadrado 116 px, raio 28, fundo
  `linear-gradient(180deg, #17181c, #0a0b0d)`, sombra
  `0 30px 60px rgba(0,0,0,.7)` + `inset 0 1px 0 rgba(255,255,255,.14)`. Aro
  de 1 px em gradiente (branco .28 → .08 em 45 % → .03) pelo truque de máscara
  `content-box`/xor. Em execução o aro vira o `conic-gradient` âmbar girando
  do botão primário da aba (4,5 s linear).
- **Feixe**: 1 px horizontal atravessando o hub por trás,
  `linear-gradient(90deg, transparent, branco .55 35 %, .85 50 %, .55 65 %,
  transparent)`, opacidade .55, de 12 % a 88 % da largura. A legenda do hub
  monta nele, à direita — embaixo colidia com os fios de saída (visto no
  primeiro render).
- **Nós**: tile 60 px raio 16, `rgba(14,15,18,.82)`, mesmo aro em gradiente,
  sombra `0 14px 30px rgba(0,0,0,.55)`; ícone 24 px, traço 1,6. Eyebrow mono
  9,5 px caixa alta tracking .08em acima; rótulo 12,5/600 e meta mono 10,5
  abaixo. Cor por papel: skill âmbar, subagente e workflow violeta `#b8a4f2`,
  ferramenta branco. Ativo: `0 0 0 1px` âmbar .35 + `0 0 26px` âmbar .28.
- **Fios**: cúbicas de Bézier com tangentes verticais —
  `M a C (a.x, a.y+k) (b.x, b.y-k) b`, `k = max(28, Δy/2)` — saem retas do nó
  e entram retas no hub. Feito: branco .22, 1 px. Pendente: branco .10,
  `dasharray 2 6`. Erro: vermelho .55. Ativo: âmbar 1,5 px `dasharray 7 9`
  correndo (`dashoffset -32` em 1,1 s) por cima de um halo âmbar 4 px,
  opacidade .55, `feGaussianBlur stdDeviation 3` — a lição do anel deste
  ledger: núcleo brilhante pede peso, não cor mais clara. Porta = círculo
  r 2,5 no destino; r 3,5 âmbar com blur 2,5 quando ativa.
- **Hierarquia pela natureza do evento**: só evento de superfície (tool/call,
  subagente, workflow) vira nó; evento log-only do harness (hook, aprovação,
  retry, compactação, comando) vira linha fina embaixo do palco. A distinção
  visual copia a que o próprio harness faz (`surfaceOp`).
- **Excluído de propósito**: o verde das referências (âmbar é a cor da casa;
  verde já é "conectado" na régua), a perspectiva dos renders promocionais, as
  scanlines da referência 1 (artefato do arquivo, não do design).
- **Conota**: hub-and-spoke é uma mente delegando — os fios são a delegação;
  a porta acesa diz "o sinal está chegando agora"; a grade pontilhada faz da
  tela uma bancada em construção, não uma página pra ler; nós de vidro fazem
  das ferramentas objetos que dá pra pegar; monocromático com um só acento
  faz a única cor ser a coisa viva.