ResearchRun
StableA long research run: its phases, how many sources it has read, Stop, then the report.
Also known as deep research, research progress, research report
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Researching a question
Research
Which European cities cut traffic deaths the most since 2015, and how?
- Planning the search(done)
- Searching the web(now)
- Reading sources(next)
- Writing the report(next)
19 sources read · 2 min
Reading itf-oecd.org
Now: Searching the web
<ResearchRun
question="Which European cities cut traffic deaths the most since 2015, and how?"
status="running"
phases={phases}
sourcesRead={34}
elapsed="4 min"
activity="Reading itf-oecd.org"
onStop={stop}
onOpenReport={openReport}
/>Watch the phases and count move, press Stop, or wait for the report.
When to use it
Keeps people informed and in control during a long research run, so the wait feels like progress, not silence.
Made of: Question · Phases · Sources read and time · What it is reading now · Stop · Summary and Open report
Use it for
- Deep research that searches and reads many sources.
- Any long run with a few clear phases and a count.
Not for
- An agent's steps with tools and approvals: use StepTimeline.
- A short wait: use ShimmerText.
- Generating images or video: use GenerationProgress.
Do and avoid
Research
Which EU airlines refund fastest?
- Planning(done)
- Searching the web(now)
- Writing the report(next)
23 sources read · 4 min
Reading europa.eu
Now: Searching the web
Researching…
Do
- Show a count that moves, so the wait feels like progress.
- Keep Stop in reach the whole time.
- When stopped, still offer the report of what was read.
Avoid
- Do not announce every source to screen readers.
- Do not show a percentage you cannot know.
- Do not hide which phase it is in.
On a phone
- The activity line ends with an ellipsis on one line.
- Stop and Open report wrap under the summary.
Seen in products
- Claude's Research runs multiple searches that build on each other and returns a report with citations.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| questionrequired | string | none | What is being researched, in the person's words. |
| statusrequired | "running" | "done" | "stopped" | "failed" | none | Where the run is. |
| phasesrequired | ResearchPhase[] | none | The phases: { id, label, state: "done" | "active" | "waiting" }. |
| sourcesReadrequired | number | none | Sources read so far. |
| elapsedrequired | string | none | Time so far, in words. |
| activity | string | none | What it is doing this moment. Shown while running. |
| onStop | () => void | none | Stops the run. Shown while running. |
| onOpenReport | () => void | none | Opens the report. Shown when done or stopped. |
| onRetry | () => void | none | Tries again after a failure. |
| labels | ResearchRunLabels | none | Overrides every line of text. |
| headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Level of the part's heading. |
| className | string | none | Extra classes on the root. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one ResearchRun switches all of this from its properties panel, across 4 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Status | status | Running, Done, Stopped, Failed |
| Question | question | Any text |
| Activity | activity | Any text |
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- running
- Done phases have a check, the current one a lime ring, the rest wait in grey. Sources read, time so far, what it is reading now, and Stop.
- done
- One line says how many sources were read and how long it took, with Open report.
- stopped
- Says the report covers what was read so far, with Open report.
- failed
- A red line and Try again.
Tokens
Change one of these and every part that uses it follows.
--surface--line--lime--success-soft--success-fg--danger-fg--radius-card
Built in
- The phases are an ordered list; the current one is marked as the current step and said as now.
- Screen readers hear each new phase once, and the summary when it ends, through a status line.
- The pulse on the current phase stops when people turn off motion in their system settings.
What you need to do
- Keep phase names short and in plain words.
- Pass the time already in words, such as 4 min.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide