Claude
8df36f8d7e
The panel reported one number for the whole prompt and one flat fill bar, so "3412 / 4000 tokens" never said which section was spending it. Replace the fill with a stacked bar — one segment per context section, scaled to the budget so the leftover width is the remaining headroom — plus a legend ordered biggest-first with each section's share and token count. Hovering either the bar or a legend row dims the rest; clicking a row jumps to that section's text below, and each section header now carries its own share. Section colours move out of CSS into a single SECTION_COLORS map applied inline, so the bar, the legend and the section headers cannot drift apart, and related sections keep their hue family without sharing an exact shade (two identical colours read as one segment in a stacked bar). The narrow side panel only fits one legend column, so the long tail folds behind a "+N smaller sections" toggle. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011BC7Dsg4gSQm3NLcZcG5SK
React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Oxc
- @vitejs/plugin-react-swc uses SWC
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the Oxlint configuration
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and Oxlint's TypeScript related rules in your project.