## Summary
Replace the abrupt "cut in" with a 300ms fade + slide-from-bottom
entrance on each chat card so they feel connected to the streaming
response instead of popping in.
Follow-up polish on
[#4587](https://github.com/CopilotKit/CopilotKit/pull/4587).
## What changed
Added `animate-in fade-in slide-in-from-bottom-2 duration-300 ease-out`
to the root element of every tool render surface in the chat:
- `ToolCard` — `SpecializedToolCard` and `DefaultToolCard` (covers
`do_research`, `do_projections`, `navigate_and_filter`, dashboard ops,
`render_chat_visual`, etc.)
- `InlineChart` (both placeholder and rendered chart)
- `CashPositionCard` (both placeholder and full card)
- `InventoryReorderCard` (both placeholder and full card)
- `InvoiceApprovalCard` (both placeholder and full card)
## Why this approach
- **`tw-animate-css` is already imported** in
`examples/showcases/deep-agents-finance-erp/src/app/globals.css` — no
new dependencies.
- **Mount-time CSS animation, not Framer Motion** — the cards are
short-lived per turn and don't need orchestration; CSS keyframes resolve
to `animation-name: enter` exactly once on first paint and don't re-fire
on prop transitions, so swapping between `InProgress` and the populated
state stays smooth.
- 300ms `ease-out` matches the rest of the demo's transition timing.
## Test plan
- [x] Chat → "Cash Position" → cards slide+fade in (verified via
`getComputedStyle().animationName === "enter"`, `animationDuration ===
"0.3s"`).
- [x] Same animation fires for `do_research` / `do_projections` tool
cards, inline charts, approval cards, and inventory reorder cards.
- [x] No layout shift or jank in successive turns.
- [ ] Reviewer: visual verification on a non-mac browser if possible
(animation runs on standard CSS, but worth confirming).
## Notes
- No JS/runtime changes. Pure CSS class additions via Tailwind
utilities.
- Decoupled from the HITL fix in
[#4630](https://github.com/CopilotKit/CopilotKit/pull/4630) — landing
this independently is fine.
Replace the abrupt "cut in" with a 300ms fade + slide-from-bottom
entrance on each chat card so they feel connected to the streaming
response instead of popping in.
Applied to all five tool render surfaces:
- ToolCard (Specialized + Default variants — do_research, do_projections,
navigate_and_filter, dashboard ops, render_chat_visual, etc.)
- InlineChart
- CashPositionCard
- InventoryReorderCard
- InvoiceApprovalCard
Uses tw-animate-css utilities (`animate-in fade-in slide-in-from-bottom-2
duration-300 ease-out`), already imported in globals.css — no new deps.
The agent's request_approval tool calls copilotkit_interrupt() which
raises GraphInterrupt and the runtime emits a CUSTOM { name:
"on_interrupt" } event. The previous useHumanInTheLoop hook only handles
frontend-executed tools and was ignoring those events, so the approval
card flashed in then vanished without ever exposing Approve/Reject.
- Switch to useInterrupt for the interrupt-driven flow
- Add a no-op useRenderTool for request_approval to suppress the
wildcard tool renderer (which would otherwise show a half-finished
generic card during streaming)
- JSON-parse event.value (the runtime delivers the interrupt payload as
a string, not an object — accessing properties directly silently
returns undefined and filters the interrupt out)
- Persistent follow-up suggestion chips above the input; the third chip
rotates based on the currently loaded dashboard so we never suggest
switching to the dashboard the user is already viewing.
- Hide the assistant message toolbar except on hover and only on the
latest turn — drops the floating copy icon that previously appeared
mid-conversation between tool cards.
- Replace the raw markdown preview under do_research/do_projections
tool cards with a clean "Completed data gathering" status caption.
- Expand the orchestrator prompt with natural-language intent mapping
so spending / cash-flow / revenue / executive-overview questions
route to load_dashboard against the matching template (no save +
reset + update churn), and approval-context invoice queries route
to request_approval instead of just charting.
Finance ERP showcase powered by CopilotKit deep agents. Includes a
Next.js 16 frontend with 7 CopilotKit-registered tools, a LangGraph
multi-agent backend (orchestrator + research/projections subagents),
Postgres-backed dashboard gallery with 12 widget types and 4 templates,
and human-in-the-loop approval flows for invoices and inventory.
Jordan Ritter