affectUI › Components › Agents

Parallel Attempts

An agent tries the same task several ways at once and the best one wins – every attempt races as a row with its model, approach and live bar, then gets a score; the best is marked and picked, and you can switch to another.

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

When to use

  • An agent tries a task several ways at once – different models, prompts or approaches – and the best result wins
  • Best-of-N runs, where you want to see them race, compare their scores and keep the say in which one is used
  • Code fixes, drafts or plans that are cheap to try in parallel and easy to score

When not to use

  • One run and where its time goes – use Trace Waterfall
  • Many small tasks spread over workers – use Fan-out Grid
  • A single decision the agent can't take alone – use Decision Tree

Usage

import { ParallelAttempts, type Attempt } from "@/components/ui/parallel-attempts";

const attempts: Attempt[] = [
  { id: "a", name: "Opus 5.5", approach: "Add a retry with backoff",
    status: "running", progress: 0.6, step: "Running tests 12/20" },
  { id: "b", name: "GPT-6 Sol", approach: "Mock the payment API",
    status: "done", score: 94, note: "20/20 runs green", took: 125000, cost: 0.27 },
];

export function Fix() {
  return <ParallelAttempts attempts={attempts} task="Fix the flaky checkout test" onPick={(a) => apply(a.id)} />;
}

Props

NameTypeDefaultDescription
attemptsAttempt[]{ id, name, approach, model?, icon?, status, progress?, step?, score?, note?, took?, cost? } – one per attempt, in the order the rows should show; name is usually the model, icon its logo (on a small tile before the name)
status"running" | "done" | "failed"Per attempt – picks the bar's tint: blue with a shine, green, red
progressnumberPer attempt, 0 to 1 – the bar's length while it runs (and where a failed one stopped)
stepstringPer attempt – what it does right now, shown on the right while it runs
scorenumberPer attempt, 0–100 once done – the highest is marked Best and picked unless you pick another
notestringPer attempt – one line about the outcome, or the error
taskstringWhat all of them try to do, next to the title
pickedstring | nullControlled pick – leave it out and the best finished attempt is picked on its own
onPick(attempt) => voidAnother attempt was picked with "Use this one"
formatCost(amount: number) => stringdollarsFormats every cost
titlestring"Best of N"Heading of the bar
classNamestringExtra class on the root

Keyboard

  • Tab: Moves to the finished attempts' "Use this one" buttons
  • Enter / Space: Uses the focused attempt

Accessibility

  • The rows are a radiogroup labelled with the title; each finished attempt's button is a radio with its name and score
  • Bars are decoration – what they show is in the text beside them

Responsive

  • Built on a container query: wide, name, bar and score sit in one line
  • Under 560px the bar moves under the name, the approach drops out and the score sits beside the name
  • Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"

Requirements

  • React 19

Related

  • Fan-out Grid – One agent hands a big job to many workers – every task a cell on a live grid that fills in as they get through it, with retries, failures, cost and the time left, and the details of any task on hover
  • Agent Lanes – Where every agent is right now – a live timeline with a lane per agent, tasks growing into “now”, hand-offs drawn between agents and approvals right on the block
  • Trace Waterfall – Where the time and money of an agent run go – every LLM call, tool call and sub-agent as a bar on a live timeline, with tokens and cost per step, the slowest call marked and branches that fold into their parent
  • Decision Tree – An agent stuck on a decision lays out its options as a tree – the consequences of each branch, the risky ones marked, its own pick highlighted – and you choose a path or write your own

Guides