ToolCall

One action the assistant ran, or wants to run, with its input and result.

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { Button, Stack, ToolCall } from '@weft-js/warp'import type { AgentTool } from '@weft-js/warp'export function Approval() {  const call = state(ROLLBACK)  const approve = (args: string) => {    call.value = { ...call.value, args, state: 'running' }    setTimeout(() => { call.value = { ...call.value, state: 'done', ms: 1400, output: 'mobile-bff is on d-4801' } }, 1400)  }  return (    <Stack gap="related">      <ToolCall call={call.value} quiet alwaysAllow="Always allow rollbacks on mobile-bff" onApprove={approve} onDeny={() => (call.value = { ...call.value, state: 'denied' })} />      {call.value.state !== 'approval' && <Button emphasis="ghost" tone="neutral" size="sm" onClick={() => (call.value = ROLLBACK)}>Ask again</Button>}    </Stack>  )}const ROLLBACK: AgentTool = { id: 'rollback', name: 'rollback', args: '{\n  "project": "mobile-bff",\n  "to": "d-4801"\n}', state: 'approval' }

Installation

npm install @weft-js/warp

Usage

tsx

import { ToolCall } from '@weft-js/warp'

States

Each one is a word and an icon as well as a colour. Open a row for its input and output.

tsx

import { state } from '@weft-js/core'import { Stack, ToolCall } from '@weft-js/warp'export function States() {  return (    <Stack gap="related">      <ToolCall call={{ id: 'a', name: 'read_logs', args: ARGS, state: 'running' }} />      <ToolCall call={{ id: 'b', name: 'compare_deploys', args: '{ "from": "d-4801", "to": "d-4819" }', state: 'done', ms: 410, output: '1 file changed\nsrc/retry.ts: attempts 2 → 5' }} />      <ToolCall call={{ id: 'c', name: 'run_checks', args: ARGS, state: 'failed', exit: 1, output: '1 failed · ap-south · upstream timed out' }} />      <ToolCall call={{ id: 'd', name: 'delete_branch', args: '{ "name": "retry-spike" }', state: 'denied' }} />    </Stack>  )}const ARGS = '{ "deploy": "d-4819" }'

When to use

Use it for

Showing what the assistant did
Asking for approval before something changes

Accessibility

An approval that arrives during a run takes focus and is announced straight away. Pass quiet for one that was there on load.
Focus moves to the row after Approve or Deny.

API Reference

Prop	Type	Default	Description
`call`	`AgentTool`	—	The call: name, arguments, state and output.
`alwaysAllow`	`string`	—	Adds a tick box, scoped to this tool and resource.
`quiet`	`boolean`	`false`	The call was there on load.

Event	Type	Default	Description
`onApprove`	`((args: string, always: boolean) => void)`	—	Called with the arguments as edited, and whether "always allow" is ticked. Approval never auto-runs.
`onDeny`	`(() => void)`	—	Called when the call is denied.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="tool-call"] [data-part="tool-frame"]

tool-framenamesr-onlyargdurchevioapproveeyebrow