feat: context usage indicator in composer footer

Shows a compact bar + label in the composer footer after the first
response, displaying input/output token counts, context window fill
percentage, and estimated cost. Bar turns yellow >50% and red >75%.

Updates on every response completion via the existing usage data from
the done SSE event. Hidden until first response (no usage data yet).

Inspired by PR #75 (@MartinNielsenDev).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Nathan Esquenazi
2026-04-04 14:11:28 -07:00
parent e2d24f57ac
commit 516062bd41
4 changed files with 38 additions and 1 deletions

View File

@@ -264,6 +264,10 @@
</svg>
</button>
</div>
<div class="ctx-indicator" id="ctxIndicator" style="display:none" title="Context window usage">
<span class="ctx-bar-wrap"><span class="ctx-bar" id="ctxBar"></span></span>
<span class="ctx-label" id="ctxLabel"></span>
</div>
<div class="composer-right">
<button class="send-btn" id="btnSend" title="Send message" style="display:none">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>