affectUI › Screens › App screens

Agent / Thread

One conversation with your orchestrator – it answers in plain text with small task and decision cards, folds its parallel tools into one line, and keeps working through a dropped connection, a slow upload or a long time away.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/agent-thread.json · Import from @/components/ui/agent-thread

When to use

• You work through one orchestrator in one thread – it launches the sub-agents in the background and you only see the conversation, the tasks it mentions and the decisions it needs
• A chat that has to hold up in real life: parallel tool calls, reading back while it streams, a dropped connection, slow uploads, dictation on a bad network, coming back after an hour

When not to use

• Picking a model per message – the orchestrator chooses its models itself; pass `models` for a picker, or use AI Chat / Start
• Watching every agent and trace of a run – use Agent / Orchestration or AI Chat / Run

Usage

import { AgentThreadScreen } from "@/components/ui/agent-thread";

export default function Page() {
  const { messages, send, stop, retry } = useOrchestrator(); // your stream – append to the last message as tokens arrive
  return (
    <AgentThreadScreen
      messages={messages}
      onSend={(text, attachments) => send(text, attachments)}
      onStop={stop}
      onRetry={retry}
      lastSeen={user.lastSeenAt}
      running={{ running: tasks.running, needs: inbox.open }}
      decisions={inbox.open}
      onDecide={(id, answer) => api.answer(id, answer)}
      onLater={(id) => api.snooze(id)}
      tasks={taskDetails}
      onShowTask={(id) => router.push(`/tasks?task=${id}`)}
      onOpenInbox={(item) => router.push(item ? `/inbox?item=${item}` : "/inbox")}
      upload={(file, progress, signal) => uploadWithProgress(file, progress, signal)}
      onNavigate={(label) => router.push(routes[label])}
    />
  );
}

Props

Keyboard

• Enter: Send – offline it queues and goes out once you're back
• Shift Enter: A new line – the field grows up to about ten lines, then scrolls
• Esc: In the field: stop the answer while it streams; while dictating, discard the clip
• End: Jump to the latest and follow it again – anywhere in the screen, as long as you're not typing
• /: Focus the field
• 1 / 2 / 3 / 4 / 5: Answer the docked decision with that row; the number after the last option goes to "Something else…"
• ↑ ↓ / ← → / Home / End / Enter: In the dock: move through the rows (← → on tiles), Enter answers the focused one; a click answers at once, like Claude
• Esc: In the dock: Later – it folds to one line above the field
• Tab: Through the tool groups (Enter opens or folds one), every card's Open or Decide, the artifact chips, Retry and the composer's buttons

Accessibility

• The conversation is role="log" with aria-live="polite" and aria-busy while an answer streams – a screen reader reads the finished answer, not every word
• The connection banner is role="status"; "Waiting to send", "Back online", "Stopped" and upload failures are announced in a polite live region
• The Jump pill is named with its count – "Jump to latest, 12 new lines, still writing" – and lists End as its shortcut
• Each tool group is a button with aria-expanded; folded rows are inert, so Tab skips them; each row says whether it runs, failed or is done
• Task cards are reached by their own Open, named with the task and its status
• The dock is a role="group" labelled by its question; its rows are a listbox with a roving tabindex and aria-keyshortcuts 1–5; "Answered: Kafka" is announced politely and, answered from the keyboard, the focus moves to the composer
• Where it asked, a button says "Asked: … · waiting" or "· answered below" – it brings the dock up (the focus lands on its option) or scrolls to your answer
• Every control shows the 2px accent focus ring for the keyboard only (:focus-visible); the text field never shows one – only its edge firms up while you type
• Shortcuts never fire while you type, apart from Enter, Shift Enter and Esc in the field

Responsive

• Fills its container – give it the full viewport height in your app
• One width, --th-col (680px): the orchestrator's text, every block – task cards, tool groups, the away card, error lines – the dock and the composer share the same edges; your bubbles stay right-aligned at most 80%
• The decision is its own card, 8px above the composer and as wide – not an overlay: the thread above shrinks with it, so the latest message and the Jump pill stay above it. The composer always starts a new prompt; your own answer goes in the card's last row
• Below 560px the column and the composer fill the width with 12px sides, bubbles take up to 88%, cards go full width and the composer hugs the edges
• Artifacts open in the App Shell's work area – a panel on the right, on phones the shell's sheet
• Touch: every control at least 36px. Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"

Requirements

• React 19
• @hugeicons/react
• @hugeicons/core-free-icons
• App Shell and Chat Composer – installed with it

Related

• Agent / Inbox – What your orchestrator needs from you, one question at a time – pick an option, a variant or approve, send it in a keystroke and the next one glides in
• Agent / Tasks – Your work as tasks, not agents – a calm list grouped by project, each row a ring, where it is in words and a small Needs you, and a click opens what happened so far and what it made
• AI Chat / Agents – Chat with an orchestrating agent, the agents at work, and a brief to fill in beside it
• Chat Composer – Prompt composer with model picker, voice input, app connections and approval request
• Thinking State – AI working panel with a live timer, searched sources and thinking steps that appear one by one
• Tool Call Card – An agent's tool call in one line – live timer, status and summary, folds open to highlighted arguments and result with copy, retry on errors and a group that sums them up