InlineToolCall

Hero example

When to use

Reach for InlineToolCall whenever an agent has invoked a Matter API tool and the user should see what API call happened. Canonical mount: inside an assistant message row, between the assistant's prose and any rendered InlineCard ("I've drafted the consent. [InlineToolCall: POST /resolutions · 201 · 412ms]. Here it is: [BoardConsentCard]"). The pill carries enough information to verify the call without expanding into a full tool-call detail view.

Don't reach for InlineToolCall for non-API events (use Pill or a Timeline atom), for top-level navigation chrome (use EndpointBadge instead — it's tuned for documentation surfaces, not chat history), or for batched calls. If the agent ran 30 tool calls in a loop, render a summary InlineToolCall and link to the audit log.

Anatomy

A single <div class="tool-call"> with four inline children:

1. Status dot. 6×6 circle whose color resolves through data-status. ok → green, err → red, pending → amber. aria-hidden.
2. Method. Bold mono, the HTTP verb (GET, POST, PATCH, DELETE, etc.). 11px, 0.04em letter-spacing.
3. Path. Regular mono, the API path (/entities/ent_…). Truncates with ellipsis if it overflows the row.
4. Meta. Mono. The status label (200 OK) plus a non-breaking · separator plus latency (412ms).

The whole pill is a single visual unit with no internal interactivity. If you need the tool-call to be clickable (open the audit-log detail), wrap it in an <a> or <button> at the consumer layer.

Props

statusLabel defaults to "200 OK" and latency defaults to "412ms" — these are demo defaults; production usage always passes real values.

States

Three semantic states driven by status:

There's no cancelled or timeout state — those resolve to err with an appropriate statusLabel ("408 Timeout", "499 Cancelled").

Density

In compact, the pill height drops from 22 to 18px and font size from 11px to 10px. The dot stays 6×6.

Themes

Tokens consumed

Dot color reads --status-green, --status-red, --status-amber based on data-status. Method bold reads --fg; path and meta read --fg-muted.

Accessibility

• Keyboard interactions. None — the pill is non-interactive.
• ARIA roles and properties. The dot is aria-hidden. The data-status attribute is CSS-only. The pill announces its full text content (method, path, statusLabel, latency).
• Focus order. N/A.
• Screen-reader expectations. Reading order: "{METHOD} {path}, {statusLabel} · {latency}." Avoid prepending the dot — it's aria-hidden.
• Reduced motion. The pending state's dot pulse animation collapses to a static dot under prefers-reduced-motion: reduce.
• Forced colors. Status dot collapses to ButtonText. Method, path, and meta inherit system foreground.
• WIG rules. Mono caps via 0.04em letter-spacing (WIG typography minimum). Non-breaking space · separator between statusLabel and latency. aria-hidden on the decorative dot.

Do / Don't

Recipes

This component appears in:

• Docs corpus recipe — inline tool-call breadcrumbs inside agent replies.
• Board recipe — the activity-stream sidebar.
• API recipe — examples of tool calls invoked from the playground.

Code example

import { InlineToolCall } from "@matter/components";

export function AgentReplyToolCalls({ events }: { events: ToolCallEvent[] }) {
  return (
    <div className="agent-reply-toolcalls">
      {events.map((event) => (
        <InlineToolCall
          key={event.id}
          method={event.method}
          path={event.path}
          status={event.outcome === "success" ? "ok" : event.outcome === "in_flight" ? "pending" : "err"}
          statusLabel={event.status_display}
          latency={event.latency_ms ? `${event.latency_ms}ms` : undefined}
        />
      ))}
    </div>
  );
}

Source