react-ui: redesigned tool call timeline and thread polish

[shubham-thesys]

Requested by Shubham

What

Stacked on #1327. Redesigns the tool call timeline in AgentInterface and polishes the thread around it.

Before: tool calls showed static Lucide icons with labels like "Running the web_search tool", the reply loader was a separate mascot below the timeline, and a server-side tool's result could briefly render as a nameless tool.

After: each tool family has an animated line-art glyph and plain-language copy ("Searching the web", "Checked the weather"), the collapsed header ticks through the live step, and the "Working" state appears the moment a message is sent and hands over to the timeline without anything moving.

Changes

@openuidev/react-ui

• ToolGlyphs: animated glyphs (search, image, weather, artifact, terminal, thinking, error) based on Lucide shapes, CSS-only motion that stops under prefers-reduced-motion. toolIcon now lives here and returns a ToolGlyph.
• toolLabels: running / done / failed copy per tool family, a readable fallback from the tool name, and ToolLabelsProvider so apps can label their own tools. defaultLabel takes optional overrides.
• ToolCallTimeline: header ticker for the live step, thinking-text rows, one open row at a time, edge fades on the scrolling list, and an exported TimelineWorkingIndicator that replaces the thread's reply loader.
• ToolCall.Root / TimelineToolCard / TimelineEntry: optional controlled open + onOpenChange.
• A still Mascot component, shared with MascotLoader.
• Secondary text raised from 50% to 60% opacity (theme, default CSS and the docs value) to keep 4.5:1 contrast.
• Thread: a sent message rises from the composer into place, messages stay dimly visible under the floating header, and wrapped user bubbles get roomier padding.
• Import-order fixes lint flagged on AgentInterface: collapsed rail, pill composer, ChatHeader and welcome refresh #1327's branch.

@openuidev/react-headless

• processStreamedMessage flushes the debounced assistant update before a tool result, so the result never lands ahead of its call.

Test Plan

• lint:check, format:check, typecheck and test pass for react-ui (418 tests) and react-headless (221 tests).

• New tests: tool label copy, and call-before-result ordering.

• Not applicable (explain why)

• Verified locally

Checklist

• I linked a related issue, if applicable
• I updated docs/README when needed
• I considered backwards compatibility: toolIcon keeps its export and signature but now returns a ToolGlyph instead of a Lucide icon.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
openui-docs	Ready	Preview	Oct 9, 2026 6:47am UTC