Context Window Indicator — SSE Flow

Sequence diagram: how the context ring updates and alerts fire after each message

Switch UI Chat use-streaming-message.ts ContextRing component useContextUsageStore Zustand store keyed by sessionKey Hermes Agent port 8642 emits step_usage events useContextAlert hook effect on contextPercent thresholds: 35 / 75 / 90% session Storage per session 1 2 3 4 5 6 7 8 1. SSE event: step_usage { type: "step_usage", tokens_used: N, context_length: M, session_key } 2. updateContextPercent(sessionKey, pct) use-streaming-message.ts • pct = tokens_used / context_length store updates contextPercent[key] 3. state update 4. ContextRing re-renders arc fill % updates • color changes at 75% and 90% 5. useContextAlert effect runs watches contextPercent • checks threshold (35 / 75 / 90%) pct crossed threshold AND not yet alerted today? show ContextAlertModal YES branch NO → skip 7. user dismisses alert logged to sessionStorage ctx-alert-{key} per session per day 6 Transport emerald = Agent SSE cyan = UI → store call violet = store → component rose = alert effect

SSE event: step_usage

  • • Emitted by Hermes Agent after each model response
  • • Contains tokens_used and context_length for the session
  • • Handled in use-streaming-message.ts SSE event loop
  • • pct = tokens_used / context_length (0–1 float)

useContextUsageStore (Zustand)

  • • Map of sessionKey → contextPercent (0–100)
  • • updateContextPercent() called per SSE event
  • • Updates from non-active sessions are discarded
  • • ContextRing subscribes and re-renders on each update

Alert thresholds

  • • 35% — approaching agent auto-compact threshold (~40%)
  • • 75% — context is getting full; consider new session
  • • 90% — nearly exhausted; response quality may drop
  • • Each alert fires once per session per calendar day (sessionStorage)

Hermes Switch UI • context window flow • step_usage SSE event → Zustand → ContextRing → alert modal