); } // Lock icon function LockIcon({ color }) { return ( ); } // Warning icon function WarnIcon({ color }) { return ( ); } // Provider accent dot function ProviderDot({ model }) { const info = MODEL_PRICING[model]; const color = info ? info.color : '#888'; return ( ); } // TokenMeter (controlled) function TokenMeter({ model = 'claude-sonnet-4', usage = { inputTokens: 0, outputTokens: 0 }, budgetUsd, mode = 'compact', theme = 'light', onBudgetExceeded }) { injectTMStyles(); const [resolvedTheme, setResolvedTheme] = useState(resolveTheme(theme)); useEffect(() => { if (theme !== 'auto') { setResolvedTheme(theme); return; } const mq = window.matchMedia('(prefers-color-scheme: dark)'); const handler = e => setResolvedTheme(e.matches ? 'dark' : 'light'); mq.addEventListener('change', handler); return () => mq.removeEventListener('change', handler); }, [theme]); const tok = TOKENS[resolvedTheme] || TOKENS.light; const cost = computeCost(model, usage); const fraction = budgetUsd > 0 ? cost / budgetUsd : 0; const bState = budgetUsd > 0 ? budgetState(fraction) : null; // Fire onBudgetExceeded once when locked const exceededFired = useRef(false); useEffect(() => { if (bState === 'locked' && !exceededFired.current) { exceededFired.current = true; onBudgetExceeded && onBudgetExceeded(); } if (bState !== 'locked') exceededFired.current = false; }, [bState, onBudgetExceeded]); const pricing = MODEL_PRICING[model]; const modelLabel = pricing ? pricing.label : model; const pulseAnim = bState === 'amber' ? 'tm-pulse-amber 2s ease-in-out infinite' : bState === 'red' || bState === 'locked' ? 'tm-pulse-red 1.2s ease-in-out infinite' : 'none'; // ── Compact mode (single-line pill) ─────────────────────────────────────── if (mode === 'compact') { const statusColors = { green: tok.success, amber: tok.amber, red: tok.red, locked: tok.red }; const borderColor = bState ? (statusColors[bState] || tok.border) : tok.border; return (

{/* Model label */} {modelLabel} {/* Separator */} │ {/* Tokens */} / tok {/* Separator */} │ {/* Cost */} {/* Budget fraction if set */} {budgetUsd > 0 && ( <> / {formatCost(budgetUsd)} {bState === 'locked' && } {bState === 'red' && } {bState === 'amber' && } )}

); } // ── Expanded mode (card with breakdown) ─────────────────────────────────── const statusColors = { green: tok.success, amber: tok.amber, red: tok.red, locked: tok.red }; const borderColor = bState ? (statusColors[bState] || tok.border) : tok.border; return (

{/* Header */}

{modelLabel}

{bState === 'locked' && ( BUDGET LOCKED )} {bState === 'red' && !bState.includes('locked') && ( NEAR LIMIT )} {bState === 'amber' && ( BUDGET WARNING )}

{/* Token row */}

Input

{pricing && (

${pricing.inputPer1M}/M tok

)}

Output

{pricing && (

${pricing.outputPer1M}/M tok

)}

Cost

{budgetUsd > 0 && (

of {formatCost(budgetUsd)} cap

)}

{/* Budget bar */} {budgetUsd > 0 && (

{Math.round(fraction * 100)}% of budget {formatCost(Math.max(0, budgetUsd - cost))} remaining

)}

); } // TokenMeterContainer (AG-UI auto-wiring) /** * Wraps TokenMeter and listens to AG-UI events for token deltas. * * Supported events: * TEXT_MESSAGE_CHUNK { detail: { delta?, usage?: { inputTokens, outputTokens } } } * TOOL_CALL_END { detail: { usage?: { inputTokens, outputTokens } } } * * Props: same as TokenMeter, plus: * eventSource: EventTarget | EventEmitter * initialUsage?: { inputTokens, outputTokens } */ function TokenMeterContainer({ eventSource, model = 'claude-sonnet-4', initialUsage = { inputTokens: 0, outputTokens: 0 }, budgetUsd, mode = 'compact', theme = 'light', onBudgetExceeded, }) { const [usage, setUsage] = useState(initialUsage); const applyUsage = useCallback((patch) => { if (!patch) return; setUsage(prev => ({ inputTokens: patch.inputTokens != null ? patch.inputTokens : prev.inputTokens, outputTokens: patch.outputTokens != null ? patch.outputTokens : prev.outputTokens, })); }, []); useEffect(() => { if (!eventSource) return; function onChunk(e) { const d = e.detail || e; if (d.usage) applyUsage(d.usage); } function onToolEnd(e) { const d = e.detail || e; if (d.usage) applyUsage(d.usage); } if (typeof eventSource.addEventListener === 'function') { eventSource.addEventListener('TEXT_MESSAGE_CHUNK', onChunk); eventSource.addEventListener('TOOL_CALL_END', onToolEnd); return () => { eventSource.removeEventListener('TEXT_MESSAGE_CHUNK', onChunk); eventSource.removeEventListener('TOOL_CALL_END', onToolEnd); }; } if (typeof eventSource.on === 'function') { eventSource.on('TEXT_MESSAGE_CHUNK', onChunk); eventSource.on('TOOL_CALL_END', onToolEnd); return () => { eventSource.off('TEXT_MESSAGE_CHUNK', onChunk); eventSource.off('TOOL_CALL_END', onToolEnd); }; } }, [eventSource, applyUsage]); return ( ); } // Exports if (typeof module !== 'undefined') { module.exports = { TokenMeter, TokenMeterContainer, MODEL_PRICING }; }