Components
TurnStatus (Trace)
The collapsible status row above a reply: thinking, web search, tool use, busy state and failed steps.
Done
v2: the summary row is 28px (padding 3.5 6, radius 8), sans 15/21 secondary; the 12px filled caret is the only button but its ::after covers the row, and turns 90° when open. The panel (8 above, 6 below) opens instantly. Steps sit in a radius-12 card with an inset 1px ring (black 8 % | white 4 %) and 1px dividers; each step is 8×12, 14/20 secondary.
Picking headless Vue component libraries for a themeable design system.
Reka UI: unstyled, accessible Vue componentsreka-ui.com(opens in new tab)- shadcn-vue: beautifully designed componentsshadcn-vue.com(opens in new tab)
- Tailwind CSS v4.0 release notes and upgrade guide for existing projectstailwindcss.com(opens in new tab)
- Nuxt 4: the intuitive Vue frameworknuxt.com(opens in new tab)
Recommending a component library and noting related community tools.
What you're describing is shadcn-vue: you copy component source into your project and restyle it.
Busy
While the turn works: a 20px mark, a shimmering secondary label (static with reduced motion) and a tabular timer. Finishing cross-fades the new label in.
Compact (Code transcript)
Compact density: card radius 10, steps 6×8.