Tool call

Shows one tool an agent called.

Sizes

  • defaultdefault

  • sm

Tool

  • PASS  case 01  refund-policy  (12ms)
PASS  case 02  refund-policy  (15ms)
FAIL  case 03  refund-policy  (40ms)

    shell

  • 2 added 1 removed

    − const limit = 50;
+ const limit = 100;
+ const currency = "USD";

    edit

    1. GET/orders/ord_481220084ms
    2. POST/refunds42931ms
    3. POST/refunds201212ms

    http

  • ticketId
    tkt_4812
    priority
    high

    any other tool

List

  • Runningnpm run eval -- refund-policyRunning

    live

  • done

States

  • pending

  • Readingrefund-policy.mdRunning

    running

  • Readrefund-policy.mdDone90ms

    completed

  • The file does not exist.

    failed

  • Allow refund?

    Returns $48.00 to the customer's card. It cannot be undone.

    Refund $48.00 on ord_4812

    awaiting permission

  • Deniedrefund-policy.md

    denied

  • Readrefund-policy.mdStopped

    stopped

  • Resultfor call oOrphaned result

    orphan

  • hover

  • focus-visible

  • Damaged items are refunded in full within 30 days.

    open

Usage

When to use it
Use
An agent calls a tool and the person should see what it asked for and what came back.
Use
A call is paused for the person's permission, or was refused.
Not for
A long shell session the person reads in full. Use Code block.
Not for
One live phrase for the whole turn. Use Activity.

Rules

8 rules
Must
Give every event a per-call seq and dispatch all of them through toolCallsReducer (useToolCalls). Because a plain setState applies a duplicate or late running event over completed, so a finished call spins again.
Must
Send status: 'completed' or 'error' explicitly when a tool ends. Because the reducer reads a result with no status as an error, so a call that worked shows Failed.
Must
Dispatch {type: 'stop', gen} before the network cancel returns, and open the next turn with a newer gen. Because events that arrive while the cancel is awaited keep rows running, and reusing the stopped gen drops the next turn.
Must
Pass onReply to a waiting call and put what allowing does in permission.message. Because the card shows the question, that sentence and the detail in full with a flat Deny and the one green Allow; with no message the person decides blind.
Never
Make Deny a primary or Allow ink in custom actions; Deny is variant="secondary" and Allow variant="confirm". Because green glass is Glaze's yes to something proposed, and two glass keys in one footer split the eye.
Must
Use status: 'denied' with the person's feedback as reason for a refused call; never status: 'error'. Because a refusal is the person's choice; as an error it opens on a failure message and counts as failed in the turn's line.
Never
Stack ToolCalls in a div; put a turn's calls in a ToolCallList, with hideCompleted to hide finished ones. Because the list folds finished calls into one line and keeps running, waiting and failed rows in view; a hand filter drops the approval nobody then sees.
Should
Call registerTool(name, renderer, aliases) once at module scope for a product tool, with -ing, past and imperative verbs. Because every row, card question and turn summary reads its words from the registry; a label per call site drifts.

Accessibility

5 checks
A row that opens is a button with aria-expanded, named by its verb, detail, status word and time.
Every status has a word, read aloud when not shown; the glyph is aria-hidden; pending and running set aria-busy.
The approval card is a group named by its question; Deny comes before Allow in the tab order.
When Allow and Deny go, the row takes focus.
A result before its call waits 2s, then shows as "Orphaned result", never Done.

Keyboard

1 key
Enter, Space
Opens or closes the row's body; on the card, presses Deny or Allow.

Edge cases

6 edge cases
Long path or command
The detail truncates first on a wide screen and wraps on a phone; the card shows it in full.
No body
A plain row: no caret and no wash, the glyph cell kept.
Long output
Shell shows 24 lines, others 8, and 20,000 characters in all, with the cut said.
ANSI colours or a progress bar
Escapes are stripped and a carriage return keeps the last frame.
Duplicate or late events
Dropped and counted; a stale stop never cancels the next turn.
Failed call
Opens on its message at once.

API

11 props
call
ToolCallData default required
size
'default' | 'sm' default 'default'
onReply
(reply: 'once' | 'reject') => void
actions
ReactNode
label, doneLabel, detail, detailMono
string, string, string, boolean default from the registry
duration
number
children
ReactNode
ToolCallList calls, live, hideCompleted, orphanTtl, onReply, actions
list props default live: any call not ended
useToolCalls(initial)
[state, dispatch]
registerTool(name, renderer, aliases)
function
labels
ToolCallLabels default English

Tokens

16 tokens
--hover
rgb(5 5 5 / 0.06)
--pressed
rgb(5 5 5 / 0.10)
--field
#efefef
--radius-tag
6px
--radius-overlay
10px
--control
32px
--menu-row-sm
28px
--type-body-sm
400 13px/1.5 var(--font-sans)
--type-code-sm
400 calc(13px * var(--mono-scale))/1.5 var(--font-mono)
--text-1
rgb(5 5 5 / 0.80)
--text-2
rgb(5 5 5 / 0.60)
--text-3
rgb(5 5 5 / 0.45)
--fail-text
#b23c29
--glass-green-base
rgb(6 86 40 / 0.88)
--shell
#f1f1f0
--paper
#ffffff

By Arlan Marat

141

Install

For your coding agent

GitHub

Please star me pookie

141

Made by

Arlan Marat

A new design system every week

Leave your email before you copy the prompt.