Hook Context Timeline — visualización browser en vivo del context de Claude

Qué es#

Abre una ventana de browser donde visualizás en tiempo real:

• El context window actual (cuánto consume Claude)
• Subagent activity y orquestación
• Tool usage secuencial
• Timeline completo de la sesión

Hook events: SessionStart, PreToolUse, PostToolUse, Stop. Captura todo el ciclo.

Comparado con Claude HUD (statusline integrado al editor): Timeline es ventana separada con histórico visual completo. HUD es bar inline; Timeline es dashboard.

Tabla resumen#

Cómo se instala#

npx claude-code-templates@latest --hook monitoring/context-timeline

Para Claude:

Instalé el hook monitoring/context-timeline. Abrí una sesión nueva y
mostrame qué URL local sirve la visualización.

Qué podés hacer con esto#

Monitor visual de sesiones largas#

Para /goal o /loop autónomos: dejás el browser abierto en otra pantalla y ves qué hace Claude en tiempo real.

Debugging de orquestación#

Si tu sesión usa subagents, ver la timeline ayuda a entender qué dispara qué y cuánto demora cada paso.

Demos en vivo#

Para presentar Claude Code a alguien, la timeline visual es más impactante que mirar la terminal.

Análisis post-mortem#

Después de una sesión, podés revisar el timeline para ver dónde se gastó tiempo o tokens.

Cuándo NO conviene#

Bajalo de la fuente#

• Ficha en aitmpl.com: Context Timeline Hook — comando exacto.
• Config JSON: context-timeline.json.

Recursos relacionados#

• Claude HUD Plugin — alternativa inline en lugar de browser separado.
• Command Logger Hook — log textual de tool usage.
• Change Tracker Hook — log simple de mutaciones.