Agent thread
One agent run as a thread: what started it, each step it took, and replies from the people who stepped in.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/agent-thread-default.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/agent-thread-default.json
Usage & API
Example
import { AgentMark } from "@/components/ai/agent-thread-default"
<AgentMark
agent={agent}
/>Props AgentMark
| Prop | Type & description | Required |
|---|---|---|
agent | { initials: string; tone: Tone } | Required |
size | "sm" | "md" | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The thread header shows the agent mark, the run title and a status chip. The body is the trigger that started it, then steps, messages and notes in time order. A step can expand its tool calls, each with the app monogram, the tool name, the summary and the input and output. Messages from people use their mark. The composer is labeled Message the agent, with a mention menu of the people you passed, Shift for a new line, and Send. A typing row appears while agentTyping is set. The details side lists Started by, Started, Duration, Status, the run id, the model, the customer, the people on the run and the tools used. The preview's breadcrumb runs from Inbox to the run.
Example
import { AgentMark } from "@/components/ai/agent-thread-activity"
<AgentMark
agent={agent}
/>Props AgentMark
| Prop | Type & description | Required |
|---|---|---|
agent | { initials: string; tone: Tone } | Required |
size | "sm" | "md" | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The log is a table of lines with a time, a kind and the text. Filters are All, Comments and Errors. Errors keeps lines whose kind is error, and the empty state says every step finished on the first try. Comments keeps lines that have a thread, or the line you are composing on. A switch shows or hides tool calls. Selecting a line opens its details: time, duration, input, output and the comments. Pressing C, or the comment control, starts a thread on that line. A comment can be marked resolved, with the person's name. The side panel also shows the agent, the model, the repo and the author for the previewed run. An empty selection says to select a line to see its details.
Choosing a layout
Use the thread when the run is something a person will reply to, the way they reply in a ticket, and the tools should sit inside the steps rather than in a separate trace. Use the activity log when the interesting part is the sequence and the exceptions, and comments are notes on a line rather than a new message in the story.
The queue of many runs is the agent inbox. Recovery after a failed step, with retry and skip, is run recovery. This thread assumes the events already happened and you are showing them. It does not edit tool arguments before they run. That is edit before run.
Who can be mentioned in the composer?
Only the people you pass in. The menu is that list, and the first person is treated as you. The agent is not a mention target. It already has its own messages and, when you set it, a typing row.
Does resolving a comment change the run status?
No. Resolve marks that event's thread resolved and records who did it. The run status chip is independent, and it stays on Needs you, Running, Failed or Done until you pass a different status.