Research progress
Progress for a long research job: the current phase, sources found, elapsed time and what it’s reading.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/research-progress-default.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/research-progress-default.json
Usage & API
Example
import { ResearchProgress } from "@/components/ai/research-progress-default"
<ResearchProgress
topic="…"
phases={[]}
current={1}
progress={1}
elapsed={1}
/>Props ResearchProgress
| Prop | Type & description | Required |
|---|---|---|
topic | string | Required |
phases | ResearchPhase[] | Required |
current | numberIndex of the phase in progress. phases.length means finished. | Required |
progress | number0 to 1 overall. | Required |
elapsed | number | Required |
latest | stringLatest thing the agent looked at. | Optional |
summary | stringShown once finished, e.g. "6 pages, 31 citations". | Optional |
onStop | () => void | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The header is a dot, Researching or Researched, the topic, and a clock. The dot pulses until current reaches phases.length. Stop sits in the header only while the job is unfinished and onStop is set. Under the header, an unfinished job shows a progressbar labeled Research progress, with a value from 0 to 100 taken from progress. The phase list marks done with a check, the active phase with a pulse, and the rest with an empty circle. detail is shown on done and active phases and hidden on phases that have not started. latest renders under the list and is replaced when it changes. A finished job hides the bar, the phases, latest and Stop, and shows summary or Report ready.
Example
import { ResearchFieldNotes } from "@/components/ai/research-progress-field-notes"
<ResearchFieldNotes
topic="…"
notes={[]}
status="researching"
/>Props ResearchFieldNotes
| Prop | Type & description | Required |
|---|---|---|
topic | string | Required |
notes | ResearchNote[] | Required |
status | "researching" | "complete" | "stopped" | Required |
onStop | () => void | Optional |
Dependencies
- React
- Tailwind CSS
- lucide-react
Implementation notes
The header is a book mark, the topic as a heading, and a status line. Research in progress, Research stopped, and Research complete are the three sentences, followed by the note count. Stop is a button only while status is researching. The list is a vertical trail. Each note's title links to url in a new tab. finding is plain text under the link. The reading row is not a note and has no id. It disappears for complete and for stopped. Notes you have not added yet are simply absent. The component does not animate a placeholder note into the list.
Choosing a layout
Use the phase view when a research run takes long enough that a silent reply feels stuck. The bar answers whether it is moving. The phases answer what kind of work it is doing. latest answers what it is touching, which is the line people look at when they wonder if it is stuck on one page. Pass onStop if the job can be cancelled. The button calls that callback and does not change current by itself. Set current to phases.length when the job is actually done, and pass summary if the default Report ready is too vague.
Use the notes view when the partial product is a set of findings, not a phase index. A web search lists hits for one query. These notes are what the agent kept from the pages it decided to read, and they accumulate. Research progress is a poor fit for a checklist of engineering tasks. That is a todo list. It is a poor fit for a general run log with nested checks and start times. That is a step timeline. Leave this in the reply for a job the person is waiting on, and fold it, by finishing current or by switching status, when the written answer takes over.
How is the job marked finished?
On the phase view, set current to phases.length. The header switches to Researched, Stop disappears, and the body becomes the summary line. progress is no longer shown, so it does not need to be 1, though the bar will look unfinished if you leave current short of the end. On the notes view, set status to complete, or to stopped if the person stopped it. Both hide Stop and the reading row. The notes you already passed stay on screen.
What is progress for, if current already says which phase is active?
progress is the 0 to 1 fill of the bar, and current is an index into phases. A job can be mid-phase with the bar only partly across, which is why they are separate props. detail on the active phase is the place for a count such as how many sources have been found. latest is the single line under the list, not a history. The notes layout is the one that keeps every finding.