Alembic × Hermes · visual-teach · referência viva

Galeria de blocos & demos

Todo bloco que o curso sabe construir, ao vivo e interativo, em um só lugar — agora com conteúdo do próprio Alembic. É a prova de que o vocabulário visual está mapeado e funcionando: fluxogramas com losango de decisão, comparativos, calculadoras de custo, flashcards, previsão, exemplo resolvido, revisão cumulativa, contadores, gráficos e animação — todos no design canônico Warm-Neutral, claro e escuro. Use como referência ao montar uma lição.

Objetivos — o que esta galeria prova

Que cada tipo de diagrama/fluxograma/SVG tem um padrão pronto, animado e seguro nos dois temas.
Que a interatividade (sliders, abas, flashcards, previsão, quiz) já está fiada no course.js compartilhado via window.lessonInit.
Que a pedagogia (objetivos, exemplo-antes-da-abstração, recuperação, revisão espaçada, feedback específico) é estrutural, não enfeite.
Que tudo é self-contained: abre do file://, sem build, sem rede, zero erros de console.

Mapeia: lesson-generator (objectives) + a barra de progresso no topo que marca ◇→◆ conforme você rola.

Fluxograma

Mapeia demo: 13 · flowchart-diagram · 16 · implementation-plan. Caixas + losango de decisão + setas; caminho tracejado animado (.flow) e traço que se desenha no reveal (.draw). Conteúdo: a pipeline de gates do Alembic (Lição 17).

A pipeline de gates — cada um falha fechado (fail-closed)

Leia esquerda → direita: Scope → Council → Proof → Validator → Publish. Qualquer NO_GO ou proof não-zero aborta a run. O ReviewGate do loop de aprendizado pertence à mesma família fail-closed.

Diagrama comparativo

Mapeia demo: 14/15 · research-explainer. Dois lados, mesma escala, a diferença salta aos olhos: dependência injetada × hardcoded (a disciplina ports-and-injection da Lição 05).

Dependência injetada (testável) × hardcoded (acoplada)

Mesma escala: à esquerda o store recebe FsPort e Clock e o teste injeta fakes; à direita ele importa fs e chama Date.now() — o teste fica acoplado ao disco e ao relógio. ADR-0009.

Calculadora de custo por Tier

Mapeia demo: 20 · prompt-tuner / 06 · component-variants — um controle muda uma variável e o SVG + o número recalculam ao vivo. Conteúdo: costPer1k…Usd do registro real (Lição 27).

Tier T2 Tokens (in+out) 500k

custo ≈ (preço por 1k) × (tokens ÷ 1000) — barra contra o teto do T3

Arraste os controles: T0/LOCAL é sempre $0 (offline); a barra fica âmbar no T2 e vermelha no T3, onde 1k tokens custam ~300× o T2. É a escada de Tiers, ao vivo.

Cintura estreita — chamada com guardas

Mapeia demo: 07 · prototype-animation — um ponteiro analógico mostra a fração de chamadas que passam pela cintura (runWithGuards) em vez de estourar. Conteúdo: never-throws da Lição 14.

Taxa de falha do provedor 20% Retries do guard 2

chamadas que retornam Result.ok ≈ 1 − falha^(retries+1) (teto teórico)

Mesmo com o provedor falhando, o circuit-breaker + retry da cintura recuperam a maioria das chamadas — e o que sobra volta como Result.err, nunca como exceção. É a Lição 14, ao vivo.

Abas Simples / Técnico

Mapeia demo: 04 · code-understanding + a pedagogia "explique simples, depois preciso". O mesmo conceito (a cintura estreita) em duas profundidades.

A cintura estreita é o único ponto por onde toda chamada de modelo passa. Em vez de espalhar try/catch pelo código, há um contrato: a chamada sempre devolve um resultado — "deu certo" ou "deu erro" —, nunca uma exceção que derruba a run.

runWithGuards envolve cada chamada: valida a entrada com Zod, abre um try/catch, aplica circuit-breaker + retry com backoff, e uma rede de segurança externa converte qualquer throw remanescente num ModelRunResult discriminado em ok. O contrato Result<T, Error> de @alembic/contracts é fail-closed por construção.

Flashcards

Mapeia demo: 06 · component-variants + a recuperação ativa do learn. Clique (ou Enter/Espaço) para virar; tente lembrar antes.

Invariante

O que a cintura estreita garante?

clique pra virar ↻

Resposta

run-never-throws: toda chamada devolve Result.ok ou Result.err, jamais uma exceção. ADR-0009.

Gates

Quais são os 5 gates, em ordem?

clique pra virar ↻

Resposta

Scope → Council → Proof → Validator → Publish. Cada um falha fechado.

Fusão

As 4 decisões da matriz?

clique pra virar ↻

Resposta

CLONE · ADAPT · MERGE · IGNORE — uma por capacidade do Hermes. Delegação é IGNORE (o swarm já existe).

Custo

Quanto custa um token no Tier T0/LOCAL?

clique pra virar ↻

Resposta

$0 — offline e determinístico. costPer1kInputUsd e …OutputUsd são ambos 0 no registro.

Previsão

Mapeia: a previsão-antes-da-revelação do learn. Comprometa um palpite e a resposta aparece.

Preveja antes de revelar

Um turno do passe de aprendizado (reviewAndLearn) divide as propostas em buckets. Quantos buckets existem — 2, 3 ou 4 — e quais?

Três: aplicado, rejeitado e falho. O ReviewGate (com scoreThresholdGate(0.7)) decide aplicado×rejeitado; "falho" captura o que estourou no caminho — controle de fluxo fail-closed. É a Lição 08.

Exemplo resolvido

Mapeia demo: 16 · implementation-plan + o worked-example→try-it do learn. Passos numerados, depois você repete.

Qual o custo de 500k tokens (in+out) num Tier T2?

Modelo T2 mais barato: deepseek-v4-pro — $0.0001/1k in + $0.0004/1k out = $0.0005 por 1k.

Tokens em milhares: 500k ÷ 1k = 500.

Custo: 500 × $0.0005 = $0.25.

O mesmo volume no T3 ($0.03 + $0.15 = $0.18/1k) custaria 500 × $0.18 = $90 — ~360× mais. Por isso o funil só sobe de tier quando precisa.

Agora você: refaça para T1 (qwen3.7-plus = $0.00015 + $0.0005 = $0.00065/1k). E para T0/LOCAL?

Quiz com feedback

Mapeia demo: 15 · concept-explainer. Opções do mesmo tamanho (sem pista pela forma) e feedback específico: por que a certa é certa e por que cada errada falha.

O que acontece quando um unit.proof[] retorna código de saída não-zero?

Falha fechado. Cada string de unit.proof[] vira um bash -c; saída não-zero falha a run e o resultado é persistido em units/<id>/proof-results.jsonl. "Continua" erra: gates são fail-closed por design. "Retry e ignora" erra: não há ignore — a evidência é exigida. É a Lição 17.

Revisão cumulativa

Mapeia: a revisão espaçada do lesson-generator. Um placar corre por todas as perguntas do bloco.

Recupere de memória

Quantas invariantes o motor sustenta?

Quatro. run-never-throws · adapter/store-agnóstico · IDs content-addressed & run-dir determinístico · dissenso preservado pelo Verifier. Seis e duas são inventados. Lição 16.

Por que o cliente MCP está marcado como parado/IGNORE na matriz?

O swarm já cobre. A matriz marca delegação como IGNORE: orchestrator→lead→worker já entrega o valor. As outras opções são afirmações inventadas. Lição 03/21.

Contadores

Mapeia demo: 11 · status-report. Números que sobem (count-up) ao entrarem na tela.

lições · PT-BR

subsistemas @alembic/hermes

invariantes · 5 gates

testes no engine

Gráfico de barras

Mapeia demo: 11 · status-report / 15. Barras que crescem no reveal (.gbar, origem à esquerda). Conteúdo: custo por 1k tokens por Tier (registro real).

Custo por 1k tokens (in+out) por Tier — escala log-ish, do registro

T0/LOCAL é grátis; T1 e T2 são frações de centavo; o T3 dá um salto de ~300× — a razão de o funil reservar o T3 para o gate de emissão (council+verifier). Lição 27.

SVG animado

Mapeia demo: 07/08 · prototype-animation/interaction · 10 · svg-illustrations. Quatro animações: fluxo (.flow), pulso (.lit), flutuar (.float) e desenhar (.draw). Conteúdo: uma chamada de modelo atravessando a cintura estreita.

Uma chamada de modelo fluindo pela cintura estreita

As setas tracejadas correm (fluxo), a cintura pulsa (é onde todo throw é capturado), a saída flutua e a última linha se desenha ao aparecer. Nada escapa como exceção.

Cartões de fonte

Mapeia demo: 14 · feature-explainer. Fontes primárias como links reais clicáveis — nunca escondidas em JS. Aqui, os próprios docs do repositório.

Alembic — blueprint as-built

docs/alembic-blueprint.html

Arquitetura (visual-doc)

docs/architecture.html

Council & Verifier

docs/concept-council.html

O software factory

docs/factory.html

Blocos de prosa

Mapeia demo: 12 · incident-report / 17 · pr-writeup. Os blocos que carregam a explicação: callout, spotlight, recall, citação e tabela comparativa.

Callout. O destaque calmo para uma ideia de apoio — borda oliva, fundo suave. Use para "lembre-se que…". Ex.: módulos de plano (alembic.plan.ts) não podem usar Date.now() nem Math.random() — a VM rejeita.

Spotlight

O destaque forte — borda âmbar — para a ideia central da seção. Aqui mora a frase que o leitor precisa levar embora: o motor nunca lança; toda fronteira devolve um Result.

"O código vence: builder ≠ validator, Proof-Gate em tudo, nenhum progresso vale sem prova na fronteira real."— síntese do método de engenharia reversa (Lição 20)

Recall: cinco gates, fail-closed, em ordem — Scope → Council → Proof → Validator → Publish. Volta em quase toda lição do Módulo 3.

Tier	Exemplo	$/1k (in+out)	Papel no funil
T0 / LOCAL	local-default	$0	destilação offline
T1	qwen3.7-plus	~$0.00065	extração barata
T2	deepseek-v4-pro	~$0.0005	metered
T3	council+verifier	~$0.18	gate de emissão

Esta galeria é a referência viva do vocabulário visual-teach. Toda lição do curso é montada com estes blocos — e toda nova lição deve usá-los, nunca reinventar.

← Voltar ao curso Começar pela Lição 01 →

Galeria de blocos & demos · pilha visual-teach do Alembic (Warm-Neutral). Cada bloco é self-contained e funciona nos dois temas.
Fontes: packages/contracts/src/registry.ts (custos) · docs/alembic-blueprint.html · docs/architecture.html · ADR-0009/0018 · packages/coda/src/ (gates).