v0.6.0
ComponentsTool Call

Tool Call

atom

An AI agent’s tool receipt — mono name, args, a status dot and an expandable result.

Tool call
An AI agent's tool receipt — status dot, mono name, expandable result.
search_invoicesstatus: overdue · limit: 10Done
2 results
#00009  Tuple, Inc       $2,000.00   14 days overdue
#00008  Vantage Retail  $21,400.00   8 days overdue
draft_reminderinvoice: #00009 · tone: friendlyRunning
send_emailto: [email protected]Failed
SMTP 550 — recipient rejected. Check the address and retry.

Recipe CSS

This is the exact CSS your kit ships for Tool Call — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Tool call ===
   The "assistant used a tool" card in an AI thread — the receipt of an action,
   not a message. A native <details> (zero-JS disclosure): a mono tool name, a
   one-line args summary and a status dot in the summary row; open it for the
   raw result. Status is ONE axis on the root:
     .tool-call--running   in flight (info dot)
     .tool-call--done      finished (success dot)
     .tool-call--error     failed (danger dot + danger name)
   Stack several between a question and the answer; sits inside .msg after the
   body, or standalone in a feed. Quiet by design — a surface-2 well in caption
   type, so the conversation stays the foreground. */
.tool-call {
  border: var(--k-bw) solid var(--k-border);
  border-radius: var(--k-radius-md);
  background: var(--k-surface-2);
  font-size: var(--k-type-caption);
}
.tool-call + .tool-call { margin-top: var(--k-s-4); }
.tool-call summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--k-s-6);
  min-width: 0;
  padding: var(--k-s-6) var(--k-s-10);
  cursor: pointer;
}
.tool-call summary::-webkit-details-marker { display: none; }
.tool-call__name {
  font-family: var(--k-font-mono);
  font-weight: var(--k-weight-medium);
  color: var(--k-fg);
  flex: none;
}
.tool-call__meta {
  color: var(--k-fg-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.tool-call__status {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--k-s-6);
  color: var(--k-fg-muted);
}
/* The status dot — the same --k-marker series dot the chart legend wears. */
.tool-call__status::before {
  content: '';
  width: var(--k-marker);
  height: var(--k-marker);
  border-radius: 50%;
  background: var(--k-fg-faint);
}
.tool-call--running .tool-call__status::before { background: var(--k-info); }
.tool-call--done .tool-call__status::before { background: var(--k-success); }
.tool-call--error .tool-call__status::before { background: var(--k-danger); }
.tool-call--error .tool-call__name { color: var(--k-danger); }
.tool-call__chevron {
  width: var(--k-icon-xs);
  height: var(--k-icon-xs);
  color: var(--k-fg-faint);
  flex: none;
  transition: transform var(--k-dur, 200ms) var(--k-ease, ease);
}
.tool-call[open] .tool-call__chevron { transform: rotate(180deg); }
.tool-call__body {
  margin: 0;
  border-top: var(--k-divider);
  padding: var(--k-s-8) var(--k-s-10);
  font-family: var(--k-font-mono);
  color: var(--k-fg-muted);
  white-space: pre-wrap;
  overflow-x: auto;
}