library

tool chips

Collapsible compact tool/message chip stack.

au-tool-chips

Installation

tokens.css + tool-chips.css + button.css

head.html

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/tool-chips/tool-chips.css">

Basic

Collapsible compact tool/message chip stack.

2 tool calls expanded

Planning the schedulethink

Write Schedule.tsx204 lines

Code

tool-chips.html + tool-chips.css

tool-chips

<style>
/* agent-ui / tool-chips — first-class component (promoted from host extracts). */
/* 05 Tool chips stack */
.au-tool-chips {
  background: var(--au-surface);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-lg);
  overflow: hidden;
}
.au-tool-chips > summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font: 500 13px/1.3 var(--au-font-sans);
  gap: 8px;
  list-style: none;
  padding: 12px;
}
@media (max-width: 640px) {
  .au-tool-chips > summary { min-height: 40px; }
}
.au-tool-chips > summary::-webkit-details-marker { display: none; }
.au-tool-chips__count { color: var(--au-fg-muted); font-weight: 400; }
.au-tool-chips__list {
  border-top: 1px solid var(--au-border-color);
  display: grid;
}
.au-tool-chips__row {
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--au-border-color) 70%, transparent);
  display: grid;
  gap: 8px;
  grid-template-columns: auto 1fr auto;
  padding: 8px 12px;
}
.au-tool-chips__row:last-child { border-bottom: 0; }
.au-tool-chips__name { color: var(--au-fg); font: 500 13px/1.3 var(--au-font-sans); }
.au-tool-chips__meta { color: var(--au-fg-subtle); font: 400 12px/1.3 var(--au-font-mono); }
</style>

<p class="fixture-note">Collapsible compact tool/message chip stack.</p><details class="au-tool-chips" data-au-component="tool-chips" data-au-state="idle" open><summary>2 tool calls <span class="au-tool-chips__count">expanded</span></summary><div class="au-tool-chips__list"><div class="au-tool-chips__row"><span class="au-tool-chips__name">Planning the schedule</span><span class="au-tool-chips__meta">think</span></div><div class="au-tool-chips__row"><span class="au-tool-chips__name">Write Schedule.tsx</span><span class="au-tool-chips__meta">204 lines</span></div></div></details><div hidden><details class="au-tool-chips" data-au-component="tool-chips" data-au-state="waiting"></details><details class="au-tool-chips" data-au-component="tool-chips" data-au-state="error"></details><details class="au-tool-chips" data-au-component="tool-chips" data-au-state="cancelled"></details></div>

Component contract

Install: tokens.css · tool-chips.css · button.css
States: Host-owned via data-au-state and documented variants
Host: content, state transitions, and execution behind actions

For agents

tool-chips.contract

# agent-ui / tool-chips
component: tool-chips
selector: .au-tool-chips
data_au_component: tool-chips
purpose: Collapsible compact tool/message chip stack.

install:
  - tokens.css
  - tool-chips.css
  - button.css when rendering actions

states: Host-owned via data-au-state and documented variants.
css_variables: Uses shared semantic tokens.
events: native form, focus, and click only — no custom events or runtime required
no_javascript: Markup and native controls remain usable without script.
host_owns: The host owns content, state transitions, and execution behind actions.
accessibility: Prefer labelled regions and text status, not color alone.
security: Escape untrusted model and tool text before insertion.

rules:
  - Host owns execution, authorization, persistence, validation, and state transitions.
  - Components render host-provided state; they never execute tools or imply approval.
  - Escape untrusted model output, tool args, and tool output before insertion.
  - Use only documented data-au-* attributes and data-au-state values.
  - Keep the no-JS path usable. Do not add React, Tailwind, bundlers, or remote assets.
source: components/tool-chips/tool-chips.{html,css} + README.md + fixture.html