ToolCall

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

SourcePackage @kerf-js/veneer

Preview

tsx

import { state } from '@kerf-js/core'import { Button, Stack, ToolCall } from '@kerf-js/veneer'import type { AgentTool } from '@kerf-js/veneer'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 @kerf-js/veneer

Usage

tsx

import { ToolCall } from '@kerf-js/veneer'

States

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

tsx

import { Stack, ToolCall } from '@kerf-js/veneer'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,      }}    />    <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" }'const output =  '1 file changed\nsrc/retry.ts: attempts 2 → 5'

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-onlyargdurchevio