Context window usage by source with linked hover, a near-limit warning, and a compact action.
import * as React from 'react'
import ContextBreakdown from '@/components/ui/context-breakdown'
const base = { files: 22180, tools: 12480, instructions: 7840 }
export default function Demo() {
const [conversation, setConversation] = React.useState(64000)
const [compacting, setCompacting] = React.useState(false)
const used = conversation + base.files + base.tools + base.instructions
const full = used / 128000 >= 0.86
React.useEffect(() => {
const timer = setTimeout(
() => {
if (compacting) {
setConversation(9200)
setCompacting(false)
} else if (full) setCompacting(true)
else setConversation((value) => value + 6400)
},
compacting ? 1600 : full ? 2200 : 650,
)
return () => clearTimeout(timer)
}, [compacting, full, conversation])
return (
<ContextBreakdown
className="w-full max-w-lg"
compacting={compacting}
limit={128000}
onCompact={() => setCompacting(true)}
segments={[
{ id: 'conversation', label: 'Conversation', tokens: conversation },
{ id: 'files', label: 'Project files', tokens: base.files },
{ id: 'tools', label: 'Tool definitions', tokens: base.tools },
{ id: 'instructions', label: 'Instructions', tokens: base.instructions },
]}
/>
)
}
Part of Pasta UI — browse the full library on 21st.dev.