code block — agent-ui component (HTML/CSS)

Installation

tokens.css + code-block.css

head.html

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/code-block/code-block.css">

File

Preview

app.jsjs

console.log("ok");

Code

code-block.html

<div class="au-codeblock" data-au-component="code-block" data-au-mode="file"><div class="au-codeblock__bar"><span class="au-codeblock__file">app.js</span><span class="au-codeblock__lang">js</span></div><pre class="au-codeblock__pre"><code>console.log("ok");</code></pre></div>

Diff

Preview

readme.md+2 −1

- old+ new  keep

Code

code-block.html

<div class="au-diff" data-au-component="code-block" data-au-mode="diff" data-au-view="unified"><div class="au-diff__bar"><span class="au-diff__file">readme.md</span><span class="au-diff__meta">+2 −1</span></div><pre class="au-diff__body"><code><span class="au-diff__del">- old</span><span class="au-diff__add">+ new</span><span class="au-diff__ctx">  keep</span></code></pre></div>

Component contract

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

For agents

code-block.contract

# agent-ui / code-block
component: code-block
selector: .au-code-block
data_au_component: code-block
purpose: Escaped code chrome with modes plain | file | diff (absorbs diff-viewer).

install:
  - tokens.css
  - code-block.css

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/code-block/code-block.{html,css} + README.md + fixture.html