AgentSessionList
StableA list of assistant tasks grouped by what they need, with a Peek panel to read the latest and reply.
Also known as agent runs, sessions, task list
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Tasks grouped by need
Needs input1 session
- Find a cheaper flight12m
Asking which dates work best.AI-generated
Working1 session
- Sort the photo albums#12344m
Grouping photos by year.AI-generated
Completed1 session
- Update the guest list#12291h
All addresses updated.AI-generated
<AgentSessionList sessions={sessions} />Groups with no tasks are left out. Peek works on any row that has something to show.
When to use it
A home screen for assistants working in the background, sorted by what each one needs from you. Peek lets people read the latest and reply without leaving the list.
Made of: Group heading with count · Row (status icon, name, link label, age, Peek) · Summary written by AI · Peek panel (update or question, wait time, reply box) · Spoken update
Use it for
- Showing several assistant tasks at once, grouped into needs input, working, ready for review and completed.
- Answering a waiting assistant straight from the list.
- Showing a one-line summary, written by the assistant, for each task.
Not for
- Only the items that are waiting on the person, across all runs: use ApprovalInbox.
- A list of past chats: use ConversationList.
- One task broken into smaller tasks: use TaskTree.
Do and avoid
Needs input1 session
- Trip plan4m
Waiting for you to pick a hotelAI-generated
Completed1 session
- Invoice tidy-up1h
Sorted 32 invoices by clientAI-generated
Needs input2 sessions
- Trip plan4m
Still searching for flightsAI-generated
- Invoice tidy-up9m
Sorting invoices by clientAI-generated
Do
- Keep the AI-written label on summaries written by AI.
- Put Needs input first so waiting tasks are easy to find.
- Show how long a task has waited in the Peek panel.
Avoid
- Don't remove the AI-written label from summaries written by AI.
- Don't rely on heading color. The group name and count are words.
- Don't use amber on rows that are not waiting for a person.
On a phone
- Each row wraps, and the age and Peek button move under the name when the row is narrow.
- Opening a peek shows a reply field that is 44px tall with 16px text on a touch screen, so the page does not zoom.
- The summary and peek panel are indented 28px to line up with the name, which narrows them a little.
Seen in products
- Claude Code `claude agents` is a table with the groups Pinned, Ready for review, Needs input, Working and Completed.
- The Claude Code row shows a state icon (animated when working), a session name, a one-line status summary generated by a Haiku-class model, an age and a PR label (#1234).
- Claude Code Peek shows the latest output or question, a reply field, the linked PR and the wait duration.
- Claude Code also offers Attach, dispatching a new background session, pin, rename, reorder and stop.
- Claude Code notifies on needs-input, finished and failed, and the tab title reads "N awaiting input". These are disabled under reduced-motion and screen-reader modes.
- GitHub Copilot Agents Panel lists sessions across repositories with states active, stopped and archived.
- OpenAI Codex cloud gives each task its own workspace that keeps working while the computer sleeps.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| sessionsrequired | AgentSession[] | none | Sessions to list. Each has id, name, status, summary, age, and optional pr, peek and group. |
| onReply | (id: string, text: string) => void | none | Called when a reply is sent from Peek. The field clears afterwards. |
| labels | AgentSessionListLabels | none | Replace group names, button text and the AI badge text. |
| headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Level of the part's own heading, so it fits the page outline. |
| className | string | none | Extra classes on the wrapper. |
"Show code under the preview gives the code for the example on the stage."
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.
- grouped
- Sessions are grouped by status into Needs input, Working, Ready for review and Completed, and a group with no sessions is left out.
- peek open
- Pressing Peek on a session that has peek data opens its latest output or question and a reply box.
- reply sent
- Sending a reply calls onReply, clears the box and announces it to screen readers.
- empty
- With no sessions, nothing is shown.
- focus
- Peek, the reply box and the send button show a focus ring on keyboard focus.
Tokens
Change one of these and every part that uses it follows.
--surface--border--surface-sunken--fg-muted--fg-subtle--radius-field--radius-card
Built in
- Each group is named by its heading, and the count is read with the word sessions.
- Peek is a button that says whether it is open, and its name includes the task.
- The reply box and its send button are named with the task.
- Screen readers hear when a reply is sent.
- Each status icon has its own shape and a name for screen readers.
What you need to do
- Give every session a unique id: it links each Peek button to its panel.
- Set headingLevel so the group names fit your page outline. It is 3 unless you change it.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide