@amos-ui/agent-timeline

Why this exists

Every AI product ends up rebuilding the same UI: what is the agent doing right now, what did that tool call cost, and how does a human approve the risky step? The chat frameworks (assistant-ui, CopilotKit, AI Elements) render messages — the *agent activity layer* is left to you. This is that layer, finished.

What you get

• TraceTimeline — live-updating activity stream; events with the same id update in place, so it reads like a story, not a log
• ToolCallCard — running/succeeded/failed states, durations, expandable input/output; failures auto-expand with the error
• ApprovalGate — severity-tinted (info/caution/danger) human decision points with optional countdown, collapsing to quiet receipts once decided
• ReasoningStep + CostMeter — streamed thinking; pinned cumulative spend with model + token detail
• fromUIMessages — Vercel AI SDK v5 adapter (structural typing, no dependency on the `ai` package)

Facts an agent should know

• Peer deps: react >= 18 only. ESM. Import `styles.css` once. Client components (use inside a `"use client"` boundary in Next.js App Router).
• Theming via `--amos-*` CSS custom properties; light/dark built in; `prefers-reduced-motion` respected.
• Ships with tests, full TypeScript declarations, AGENTS.md integration brief, and a runnable demo.

Delivery & license

Source delivered as a private repository invite within 24 hours of purchase. Single-product commercial license: use in any number of products, modify freely (including via your coding agent); no source redistribution or resale. See the license on the listing.

Interface

What you call, and what comes back. Types and signatures only — the implementation ships with the source.

  export function fromUIMessages( messages: UIMessageLike[], opts: { timestampFor?: (messageId: string, index: number);

  export type ApprovalDecision = "approved" | "denied";