library

tool result card

Typed tool result cards: note | weather (absorbs notepad, weather).

au-tool-result-card

Installation

tokens.css + tool-result-card.css + button.css

head.html

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

Note

Host-escaped note body.

Code

tool-result-card.html + tool-result-card.css

tool-result-card

<style>
/* agent-ui / tool-result-card — note | weather */

/* agent-ui / notepad — first-class component (promoted from host extracts). */
/* tool-ui/notepad.tsx — host-composed note card (untrusted text escaped by host) */
.au-notepad {
  background: color-mix(in srgb, var(--au-surface) 70%, transparent);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-lg);
  margin-block: 12px;
  max-width: 40rem;
}

.au-notepad__bar {
  align-items: center;
  display: flex;
  gap: 8px;
  padding: 12px;
}

.au-notepad__title {
  font: 600 13px/1.3 var(--au-font-sans);
  margin: 0;
  min-width: 0;
}

.au-notepad__actions {
  display: flex;
  gap: 2px;
  margin-inline-start: auto;
}

.au-notepad__body {
  color: var(--au-fg);
  font: 400 15px/1.7 var(--au-font-sans);
  padding: 2px 16px 16px;
  white-space: pre-wrap;
}

.au-notepad[data-au-state="streaming"] .au-notepad__title {
  animation: au-dictate-pulse 1.2s ease-in-out infinite;
}


/* agent-ui / weather — first-class component (promoted from host extracts). */
/* static weather summary (effects runtime deferred) */
.au-weather {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--au-action) 72%, var(--au-canvas)) 0%,
    color-mix(in srgb, var(--au-action) 38%, var(--au-surface)) 55%,
    var(--au-surface-muted) 100%
  );
  border-radius: var(--au-radius-xl);
  color: var(--au-fg);
  max-width: 22rem;
  overflow: hidden;
  padding: 16px;
}

.au-weather__loc {
  font: 600 13px/1.2 var(--au-font-sans);
  opacity: 0.8;
}

.au-weather__temp {
  font: 500 40px/1 var(--au-font-sans);
  letter-spacing: -0.03em;
  margin-top: 8px;
}

.au-weather__cond {
  font: 400 14px/1.3 var(--au-font-sans);
  margin-top: 4px;
}

.au-weather__row {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.au-weather__day {
  flex: 1;
  font: 500 12px/1.3 var(--au-font-sans);
  text-align: center;
}




.au-tool-result-card[data-au-variant="note"] .au-weather { display: none; }

.au-tool-result-card[data-au-variant="weather"] .au-notepad { display: none; }
</style>

<article class="au-notepad au-tool-result-card" data-au-component="tool-result-card" data-au-variant="note"><div class="au-notepad__bar"><h3 class="au-notepad__title">Note</h3></div><div class="au-notepad__body">Host-escaped note body.</div></article>

Weather

Tokyo

22°

Partly cloudy

Code

tool-result-card.html + tool-result-card.css

tool-result-card

<style>
/* agent-ui / tool-result-card — note | weather */

/* agent-ui / notepad — first-class component (promoted from host extracts). */
/* tool-ui/notepad.tsx — host-composed note card (untrusted text escaped by host) */
.au-notepad {
  background: color-mix(in srgb, var(--au-surface) 70%, transparent);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-lg);
  margin-block: 12px;
  max-width: 40rem;
}

.au-notepad__bar {
  align-items: center;
  display: flex;
  gap: 8px;
  padding: 12px;
}

.au-notepad__title {
  font: 600 13px/1.3 var(--au-font-sans);
  margin: 0;
  min-width: 0;
}

.au-notepad__actions {
  display: flex;
  gap: 2px;
  margin-inline-start: auto;
}

.au-notepad__body {
  color: var(--au-fg);
  font: 400 15px/1.7 var(--au-font-sans);
  padding: 2px 16px 16px;
  white-space: pre-wrap;
}

.au-notepad[data-au-state="streaming"] .au-notepad__title {
  animation: au-dictate-pulse 1.2s ease-in-out infinite;
}


/* agent-ui / weather — first-class component (promoted from host extracts). */
/* static weather summary (effects runtime deferred) */
.au-weather {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--au-action) 72%, var(--au-canvas)) 0%,
    color-mix(in srgb, var(--au-action) 38%, var(--au-surface)) 55%,
    var(--au-surface-muted) 100%
  );
  border-radius: var(--au-radius-xl);
  color: var(--au-fg);
  max-width: 22rem;
  overflow: hidden;
  padding: 16px;
}

.au-weather__loc {
  font: 600 13px/1.2 var(--au-font-sans);
  opacity: 0.8;
}

.au-weather__temp {
  font: 500 40px/1 var(--au-font-sans);
  letter-spacing: -0.03em;
  margin-top: 8px;
}

.au-weather__cond {
  font: 400 14px/1.3 var(--au-font-sans);
  margin-top: 4px;
}

.au-weather__row {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.au-weather__day {
  flex: 1;
  font: 500 12px/1.3 var(--au-font-sans);
  text-align: center;
}




.au-tool-result-card[data-au-variant="note"] .au-weather { display: none; }

.au-tool-result-card[data-au-variant="weather"] .au-notepad { display: none; }
</style>

<div class="au-weather au-tool-result-card" data-au-component="tool-result-card" data-au-variant="weather"><div class="au-weather__loc">Tokyo</div><div class="au-weather__temp">22°</div><div class="au-weather__cond">Partly cloudy</div></div>

Component contract

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

For agents

tool-result-card.contract

# agent-ui / tool-result-card
component: tool-result-card
selector: .au-tool-result-card
data_au_component: tool-result-card
purpose: Typed tool result cards: note | weather (absorbs notepad, weather).

install:
  - tokens.css
  - tool-result-card.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-result-card/tool-result-card.{html,css} + README.md + fixture.html