AI and agents

<AgentRow name="Claude Code" meta="MCP · key Production · All endpoints · last call 12s ago" budget={{ used: 182.4, limit: 300 }} rule="Asks you above 50 cr" status="live" actions={<Button size="sm">Limits</Button>
<Button size="sm" variant="ghost">Pause</Button>} />
<AgentRow name="Clay table" meta="API key · key Clay table · enrich_profile · last call 3s ago" budget={{ used: 940, limit: 1000 }} rule="Never asks" status="live" actions={<Button size="sm">Limits</Button>
<Button size="sm" variant="ghost">Pause</Button>} />
<AgentRow name="Outbound SDR agent" meta="MCP · key Production · people_search · last call 2h ago" budget={{ used: 200, limit: 200 }} rule="Asks you above 25 cr" status="paused" actions={<Button size="sm">Limits</Button>
<Button size="sm">Resume</Button>} note="Paused itself at 09:14 when it hit its 200 cr daily cap" />

<div class="g-frame g-frame--xl"><div class="ra-agent"><span class="ra-avatar" role="img" aria-label="Claude Code">CC</span><div class="ra-agent__main"><b>Claude Code</b><small>MCP · key Production · All endpoints · last call 12s ago</small></div><div class="ra-agent__budget"><div class="ra-meter" role="meter" aria-label="Claude Code budget" aria-valuemin="0" aria-valuemax="300" aria-valuenow="182.4"><i class="ra-meter__fill" style="width:60.8%"></i></div><small>182.4 of 300 credits</small></div><small class="ra-agent__rule">Asks you above 50 cr</small><span class="ra-pill ra-pill--ok"><span class="ra-dot ra-dot--ok ra-dot--pulse" aria-hidden="true"></span> Live</span><div class="ra-agent__acts"><button type="button" class="ra-btn ra-btn--sm">Limits</button><button type="button" class="ra-btn ra-btn--ghost ra-btn--sm">Pause</button></div></div><div class="ra-agent"><span class="ra-avatar" role="img" aria-label="Clay table">CT</span><div class="ra-agent__main"><b>Clay table</b><small>API key · key Clay table · enrich_profile · last call 3s ago</small></div><div class="ra-agent__budget"><div class="ra-meter" role="meter" aria-label="Clay table budget" aria-valuemin="0" aria-valuemax="1000" aria-valuenow="940"><i class="ra-meter__fill" style="width:94%"></i></div><small>940 of 1,000 credits</small></div><small class="ra-agent__rule">Never asks</small><span class="ra-pill ra-pill--ok"><span class="ra-dot ra-dot--ok ra-dot--pulse" aria-hidden="true"></span> Live</span><div class="ra-agent__acts"><button type="button" class="ra-btn ra-btn--sm">Limits</button><button type="button" class="ra-btn ra-btn--ghost ra-btn--sm">Pause</button></div></div><div class="ra-agent ra-agent--paused"><span class="ra-avatar" role="img" aria-label="Outbound SDR agent">OS</span><div class="ra-agent__main"><b>Outbound SDR agent</b><small>MCP · key Production · people_search · last call 2h ago</small></div><div class="ra-agent__budget"><div class="ra-meter ra-meter--warn" role="meter" aria-label="Outbound SDR agent budget" aria-valuemin="0" aria-valuemax="200" aria-valuenow="200"><i class="ra-meter__fill" style="width:100%"></i></div><small>200 of 200 credits</small></div><small class="ra-agent__rule">Asks you above 25 cr</small><span class="ra-pill">Paused</span><div class="ra-agent__acts"><button type="button" class="ra-btn ra-btn--sm">Limits</button><button type="button" class="ra-btn ra-btn--sm">Resume</button></div><p class="ra-agent__note">Paused itself at 09:14 when it hit its 200 cr daily cap</p></div></div>

<ActivityLog items={[
  {
    id: "act_0",
    time: "09:41:12",
    agent: "Claude Code",
    tool: "enrich_company",
    args: "{\"domain\":\"linear.app\"}",
    cost: "1 cr",
    fresh: true,
  },
  {
    id: "act_1",
    time: "09:38:12",
    agent: "Claude Code",
    tool: "people_search",
    args: "{\"title\":\"Head of RevOps\"}",
    cost: "42 cr",
    fresh: false,
  },
  {
    id: "act_2",
    time: "09:35:12",
    agent: "Clay table",
    tool: "enrich_profile",
    args: "{\"linkedin_url\":\"linkedin.com/in/mia-chen\"}",
    cost: "1 cr",
    fresh: false,
  },
  {
    id: "act_3",
    time: "09:32:12",
    agent: "Claude Code",
    tool: "email_finder",
    args: "{\"domain\":\"notion.so\",\"full_name\":\"Ivan Zhao\"}",
    cost: "5 cr",
    fresh: false,
  },
  {
    id: "act_4",
    time: "09:29:12",
    agent: "Clay table",
    tool: "enrich_company",
    args: "{\"domain\":\"rippling.com\"}",
    cost: "1 cr",
    fresh: false,
  },
  {
    id: "act_5",
    time: "09:26:12",
    agent: "Claude Code",
    tool: "enrich_company",
    args: "{\"domain\":\"linear.app\"}",
    cost: "1 cr",
    fresh: false,
  },
  {
    id: "act_6",
    time: "09:23:12",
    agent: "Claude Code",
    tool: "people_search",
    args: "{\"title\":\"Head of RevOps\"}",
    cost: "42 cr",
    fresh: false,
  },
  {
    id: "act_7",
    time: "09:20:12",
    agent: "Clay table",
    tool: "enrich_profile",
    args: "{\"linkedin_url\":\"linkedin.com/in/mia-chen\"}",
    cost: "1 cr",
    fresh: false,
  },
  {
    id: "act_8",
    time: "09:17:12",
    agent: "Claude Code",
    tool: "email_finder",
    args: "{\"domain\":\"notion.so\",\"full_name\":\"Ivan Zhao\"}",
    cost: "5 cr",
    fresh: false,
  },
  {
    id: "act_9",
    time: "09:14:12",
    agent: "Clay table",
    tool: "enrich_company",
    args: "{\"domain\":\"rippling.com\"}",
    cost: "1 cr",
    fresh: false,
  },
]} live />

<div class="g-frame g-frame--xl"><section class="ra-activity" aria-label="Agent activity"><div class="ra-activity__head"><b>Agent activity</b><span class="ra-pill ra-pill--ok"><span class="ra-dot ra-dot--ok ra-dot--pulse" aria-hidden="true"></span> Streaming</span></div><div class="ra-activity__head-row" aria-hidden="true"><span>Time</span><span>Agent</span><span>Tool</span><span>Arguments</span><span>Cost</span></div><div role="log" aria-live="polite" aria-label="Agent activity" tabindex="0" class="ra-activity__rows"><div class="ra-activity__row" data-fresh="true"><span><span class="ra-sr-only">Time: </span>09:41:12</span><span><span class="ra-sr-only">Agent: </span>Claude Code</span><span class="ra-activity__tool"><span class="ra-sr-only">Tool: </span>enrich_company</span><span class="ra-activity__args" title="{&quot;domain&quot;:&quot;linear.app&quot;}"><span class="ra-sr-only">Arguments: </span>{&quot;domain&quot;:&quot;linear.app&quot;}</span><span><span class="ra-sr-only">Cost: </span>1 cr</span></div><div class="ra-activity__row"><span><span class="ra-sr-only">Time: </span>09:38:12</span><span><span class="ra-sr-only">Agent: </span>Claude Code</span><span class="ra-activity__tool"><span class="ra-sr-only">Tool: </span>people_search</span><span class="ra-activity__args" title="{&quot;title&quot;:&quot;Head of RevOps&quot;}"><span class="ra-sr-only">Arguments: </span>{&quot;title&quot;:&quot;Head of RevOps&quot;}</span><span><span class="ra-sr-only">Cost: </span>42 cr</span></div><div class="ra-activity__row"><span><span class="ra-sr-only">Time: </span>09:35:12</span><span><span class="ra-sr-only">Agent: </span>Clay table</span><span class="ra-activity__tool"><span class="ra-sr-only">Tool: </span>enrich_profile</span><span class="ra-activity__args" title="{&quot;linkedin_url&quot;:&quot;linkedin.com/in/mia-chen&quot;}"><span class="ra-sr-only">Arguments: </span>{&quot;linkedin_url&quot;:&quot;linkedin.com/in/mia-chen&quot;}</span><span><span class="ra-sr-only">Cost: </span>1 cr</span></div><div class="ra-activity__row"><span><span class="ra-sr-only">Time: </span>09:32:12</span><span><span class="ra-sr-only">Agent: </span>Claude Code</span><span class="ra-activity__tool"><span class="ra-sr-only">Tool: </span>email_finder</span><span class="ra-activity__args" title="{&quot;domain&quot;:&quot;notion.so&quot;,&quot;full_name&quot;:&quot;Ivan Zhao&quot;}"><span class="ra-sr-only">Arguments: </span>{&quot;domain&quot;:&quot;notion.so&quot;,&quot;full_name&quot;:&quot;Ivan Zhao&quot;}</span><span><span class="ra-sr-only">Cost: </span>5 cr</span></div><div class="ra-activity__row"><span><span class="ra-sr-only">Time: </span>09:29:12</span><span><span class="ra-sr-only">Agent: </span>Clay table</span><span class="ra-activity__tool"><span class="ra-sr-only">Tool: </span>enrich_company</span><span class="ra-activity__args" title="{&quot;domain&quot;:&quot;rippling.com&quot;}"><span class="ra-sr-only">Arguments: </span>{&quot;domain&quot;:&quot;rippling.com&quot;}</span><span><span class="ra-sr-only">Cost: </span>1 cr</span></div><div class="ra-activity__row"><span><span class="ra-sr-only">Time: </span>09:26:12</span><span><span class="ra-sr-only">Agent: </span>Claude Code</span><span class="ra-activity__tool"><span class="ra-sr-only">Tool: </span>enrich_company</span><span class="ra-activity__args" title="{&quot;domain&quot;:&quot;linear.app&quot;}"><span class="ra-sr-only">Arguments: </span>{&quot;domain&quot;:&quot;linear.app&quot;}</span><span><span class="ra-sr-only">Cost: </span>1 cr</span></div><div class="ra-activity__row"><span><span class="ra-sr-only">Time: </span>09:23:12</span><span><span class="ra-sr-only">Agent: </span>Claude Code</span><span class="ra-activity__tool"><span class="ra-sr-only">Tool: </span>people_search</span><span class="ra-activity__args" title="{&quot;title&quot;:&quot;Head of RevOps&quot;}"><span class="ra-sr-only">Arguments: </span>{&quot;title&quot;:&quot;Head of RevOps&quot;}</span><span><span class="ra-sr-only">Cost: </span>42 cr</span></div><div class="ra-activity__row"><span><span class="ra-sr-only">Time: </span>09:20:12</span><span><span class="ra-sr-only">Agent: </span>Clay table</span><span class="ra-activity__tool"><span class="ra-sr-only">Tool: </span>enrich_profile</span><span class="ra-activity__args" title="{&quot;linkedin_url&quot;:&quot;linkedin.com/in/mia-chen&quot;}"><span class="ra-sr-only">Arguments: </span>{&quot;linkedin_url&quot;:&quot;linkedin.com/in/mia-chen&quot;}</span><span><span class="ra-sr-only">Cost: </span>1 cr</span></div><div class="ra-activity__row"><span><span class="ra-sr-only">Time: </span>09:17:12</span><span><span class="ra-sr-only">Agent: </span>Claude Code</span><span class="ra-activity__tool"><span class="ra-sr-only">Tool: </span>email_finder</span><span class="ra-activity__args" title="{&quot;domain&quot;:&quot;notion.so&quot;,&quot;full_name&quot;:&quot;Ivan Zhao&quot;}"><span class="ra-sr-only">Arguments: </span>{&quot;domain&quot;:&quot;notion.so&quot;,&quot;full_name&quot;:&quot;Ivan Zhao&quot;}</span><span><span class="ra-sr-only">Cost: </span>5 cr</span></div><div class="ra-activity__row"><span><span class="ra-sr-only">Time: </span>09:14:12</span><span><span class="ra-sr-only">Agent: </span>Clay table</span><span class="ra-activity__tool"><span class="ra-sr-only">Tool: </span>enrich_company</span><span class="ra-activity__args" title="{&quot;domain&quot;:&quot;rippling.com&quot;}"><span class="ra-sr-only">Arguments: </span>{&quot;domain&quot;:&quot;rippling.com&quot;}</span><span><span class="ra-sr-only">Cost: </span>1 cr</span></div></div></section></div>

<AiPlan title="Find 40 VPs of Sales" steps={[
  {
    title: "Search companies",
    detail: "62 matches",
    status: "done",
  },
  {
    title: "Find people",
    detail: "VP of Sales, 11 to 200 staff",
    status: "running",
    progress: 40,
  },
  {
    title: "Reveal emails",
    detail: "About 200 credits",
    status: "todo",
  },
]} footer={<Button size="sm">Export CSV</Button>
<Button size="sm" variant="ghost">Export JSON</Button>} />

<div class="g-frame g-frame--md"><section class="ra-plan" aria-label="Find 40 VPs of Sales"><div class="ra-plan__head"><b>Find 40 VPs of Sales</b><span class="ra-pill">1 of 3 done</span></div><ol class="ra-plan__steps"><li class="ra-plan__step ra-plan__step--done"><span class="ra-plan__n" aria-hidden="true"><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"></path></svg></span><div><span class="ra-sr-only">Done: </span><b>Search companies</b><small>62 matches</small></div></li><li class="ra-plan__step ra-plan__step--running" aria-current="step"><span class="ra-plan__n" aria-hidden="true">2</span><div><span class="ra-sr-only">Running: </span><b>Find people</b><small>VP of Sales, 11 to 200 staff</small><div class="ra-meter" role="meter" aria-label="Step 2 progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="40"><i class="ra-meter__fill" style="width:40%"></i></div></div></li><li class="ra-plan__step ra-plan__step--todo"><span class="ra-plan__n" aria-hidden="true">3</span><div><span class="ra-sr-only"></span><b>Reveal emails</b><small>About 200 credits</small></div></li></ol><div class="ra-plan__foot"><button type="button" class="ra-btn ra-btn--sm">Export CSV</button><button type="button" class="ra-btn ra-btn--ghost ra-btn--sm">Export JSON</button></div></section></div>

<ThinkingSteps steps={[
  "Read run_8f2a",
  "Checked the provider status",
  "Found a 504 and a free retry",
]} open />

<details class="ra-thinking" open=""><summary>Show steps</summary><ol><li>Read run_8f2a</li><li>Checked the provider status</li><li>Found a 504 and a free retry</li></ol></details>

<Thread>
  <Message from="ai">
    <StreamingText streaming>
      The web_scrape call timed out after 30s, so it was not billed. I am checking whether
    </StreamingText>
  </Message>
</Thread>

<div class="g-frame g-frame--md"><div class="ra-thread" aria-live="polite"><div class="ra-msg ra-msg--ai"><span class="ra-msg__who">RichAPI</span><div class="ra-msg__body"><div class="ra-ai-text" aria-busy="true">The web_scrape call timed out after 30s, so it was not billed. I am checking whether<span class="ra-caret" aria-hidden="true"></span></div></div></div></div></div>

<Suggestions>
  <Button variant="ghost">Retry with another provider</Button>
  <Button variant="ghost">Show the failed runs</Button>
  <Button variant="ghost">Raise my daily limit</Button>
</Suggestions>

<div class="g-frame g-frame--sm"><div class="ra-suggest" role="group" aria-label="Suggestions"><button type="button" class="ra-btn ra-btn--ghost">Retry with another provider</button><button type="button" class="ra-btn ra-btn--ghost">Show the failed runs</button><button type="button" class="ra-btn ra-btn--ghost">Raise my daily limit</button></div></div>

<ConfirmDiff title="Change the daily limit" rows={[{ label: "Daily limit", before: "500", after: "1,000" }]} actions={<Button size="sm">Confirm</Button>
<Button size="sm" variant="ghost">Cancel</Button>} />

<div class="g-frame g-frame--sm"><div class="ra-confirm"><b>Change the daily limit</b><dl><div class="ra-confirm__row"><dt>Daily limit</dt><dd><del>500</del> <ins>1,000</ins></dd></div></dl><div class="ra-confirm__actions"><button type="button" class="ra-btn ra-btn--sm">Confirm</button><button type="button" class="ra-btn ra-btn--ghost ra-btn--sm">Cancel</button></div></div></div>

<Feedback />

<div class="ra-fb" role="group" aria-label="Was this helpful?"><span>Was this helpful?</span><button type="button" class="ra-btn ra-btn--ghost ra-btn--sm ra-btn--icon ra-tip" aria-label="Helpful" data-tip="Helpful" aria-pressed="false"><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24"><g><path d="M7 10v11H3V10zM7 10l4-8a2 2 0 0 1 2 2v4h6a2 2 0 0 1 2 2l-1 7a2 2 0 0 1-2 2H7"></path></g></svg></button><button type="button" class="ra-btn ra-btn--ghost ra-btn--sm ra-btn--icon ra-tip" aria-label="Not helpful" data-tip="Not helpful" aria-pressed="false"><svg class="ra-icon ra-icon--sm" viewBox="0 0 24 24"><g transform="rotate(180 12 12)"><path d="M7 10v11H3V10zM7 10l4-8a2 2 0 0 1 2 2v4h6a2 2 0 0 1 2 2l-1 7a2 2 0 0 1-2 2H7"></path></g></svg></button><span class="ra-sr-only" aria-live="polite"></span></div>