library

code block

Escaped code chrome with modes plain | file | diff (absorbs diff-viewer).

au-code-block

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

app.jsjs

console.log("ok");

Code

code-block.html + code-block.css

code-block

<style>
/* agent-ui / code-block — first-class component (promoted from host extracts). */
/* 16 Code block chrome */
.au-codeblock {
  background: var(--au-surface);
  border: 1px solid color-mix(in srgb, var(--au-border-color) 85%, transparent);
  border-radius: var(--au-radius-lg);
  box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--au-border-color) 55%, transparent);
  overflow: hidden;
}
.au-codeblock__bar {
  align-items: center;
  background: transparent;
  border-bottom: 0.5px solid var(--au-border-color);
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 12px;
}
.au-codeblock__file { color: var(--au-fg); font: 500 12.5px/1.3 var(--au-font-mono); }
.au-codeblock__lang { color: var(--au-fg-subtle); font: 400 12px/1.3 var(--au-font-sans); }
.au-codeblock__pre {
  color: var(--au-fg-muted);
  font: 400 12.5px/1.55 var(--au-font-mono);
  margin: 0;
  max-height: 18rem;
  overflow: auto;
  padding: 12px 16px 16px;
  white-space: pre;
}
.au-codeblock__pre code { font: inherit; }

/* --- absorbed: diff-viewer → mode=diff --- */
/* agent-ui / diff-viewer — first-class component (promoted from host extracts). */
/* Diff viewer: escaped patch chrome. Host owns parse/apply. */
.au-diff {
  background: var(--au-surface-muted);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-lg);
  margin: 8px 0 0;
  min-width: 0;
  overflow: hidden;
}
.au-diff__bar {
  align-items: center;
  border-bottom: 1px solid var(--au-border-color);
  color: var(--au-fg-muted);
  display: flex;
  font: 500 12px/1.3 var(--au-font-sans);
  gap: 8px;
  justify-content: space-between;
  padding: 8px 12px;
}
.au-diff__file { color: var(--au-fg); }
.au-diff__meta { color: var(--au-fg-subtle); }
.au-diff__body,
.au-diff__pane {
  color: var(--au-fg-muted);
  font: 12px/1.55 var(--au-font-mono);
  margin: 0;
  min-width: 0;
  overflow: auto;
  padding: 12px 16px;
  white-space: pre;
}
.au-diff__body code,
.au-diff__pane code { display: block; font: inherit; }
.au-diff__add {
  background: color-mix(in srgb, var(--au-success) 12%, transparent);
  color: var(--au-success);
  display: block;
}
.au-diff__del {
  background: color-mix(in srgb, var(--au-danger) 12%, transparent);
  color: var(--au-danger);
  display: block;
}
.au-diff__ctx { color: var(--au-fg-muted); display: block; }
.au-diff__meta-line { color: var(--au-fg-subtle); display: block; }
.au-diff[data-au-view="split"] .au-diff__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.au-diff__pane + .au-diff__pane { border-left: 1px solid var(--au-border-color); }
.au-diff__pane-label {
  color: var(--au-fg-subtle);
  display: block;
  font: 500 11px/1.3 var(--au-font-sans);
  margin-bottom: 8px;
}
@media (max-width: 640px) {
  .au-diff[data-au-view="split"] .au-diff__split { grid-template-columns: 1fr; }
  .au-diff__pane + .au-diff__pane {
    border-left: 0;
    border-top: 1px solid var(--au-border-color);
  }


/* Alias stub root */
.au-code-block { /* prefer .au-codeblock */ }

/* Converge message prose .au-code onto code-block chrome */
.au-chat-message__body .au-code,
.au-chat-message__body .au-codeblock {
  margin-top: 12px;
}
</style>

<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

readme.md+2 −1

- old+ new  keep

Code

code-block.html + code-block.css

code-block

<style>
/* agent-ui / code-block — first-class component (promoted from host extracts). */
/* 16 Code block chrome */
.au-codeblock {
  background: var(--au-surface);
  border: 1px solid color-mix(in srgb, var(--au-border-color) 85%, transparent);
  border-radius: var(--au-radius-lg);
  box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--au-border-color) 55%, transparent);
  overflow: hidden;
}
.au-codeblock__bar {
  align-items: center;
  background: transparent;
  border-bottom: 0.5px solid var(--au-border-color);
  display: flex;
  gap: 8px;
  justify-content: space-between;
  padding: 12px;
}
.au-codeblock__file { color: var(--au-fg); font: 500 12.5px/1.3 var(--au-font-mono); }
.au-codeblock__lang { color: var(--au-fg-subtle); font: 400 12px/1.3 var(--au-font-sans); }
.au-codeblock__pre {
  color: var(--au-fg-muted);
  font: 400 12.5px/1.55 var(--au-font-mono);
  margin: 0;
  max-height: 18rem;
  overflow: auto;
  padding: 12px 16px 16px;
  white-space: pre;
}
.au-codeblock__pre code { font: inherit; }

/* --- absorbed: diff-viewer → mode=diff --- */
/* agent-ui / diff-viewer — first-class component (promoted from host extracts). */
/* Diff viewer: escaped patch chrome. Host owns parse/apply. */
.au-diff {
  background: var(--au-surface-muted);
  border: 1px solid var(--au-border-color);
  border-radius: var(--au-radius-lg);
  margin: 8px 0 0;
  min-width: 0;
  overflow: hidden;
}
.au-diff__bar {
  align-items: center;
  border-bottom: 1px solid var(--au-border-color);
  color: var(--au-fg-muted);
  display: flex;
  font: 500 12px/1.3 var(--au-font-sans);
  gap: 8px;
  justify-content: space-between;
  padding: 8px 12px;
}
.au-diff__file { color: var(--au-fg); }
.au-diff__meta { color: var(--au-fg-subtle); }
.au-diff__body,
.au-diff__pane {
  color: var(--au-fg-muted);
  font: 12px/1.55 var(--au-font-mono);
  margin: 0;
  min-width: 0;
  overflow: auto;
  padding: 12px 16px;
  white-space: pre;
}
.au-diff__body code,
.au-diff__pane code { display: block; font: inherit; }
.au-diff__add {
  background: color-mix(in srgb, var(--au-success) 12%, transparent);
  color: var(--au-success);
  display: block;
}
.au-diff__del {
  background: color-mix(in srgb, var(--au-danger) 12%, transparent);
  color: var(--au-danger);
  display: block;
}
.au-diff__ctx { color: var(--au-fg-muted); display: block; }
.au-diff__meta-line { color: var(--au-fg-subtle); display: block; }
.au-diff[data-au-view="split"] .au-diff__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.au-diff__pane + .au-diff__pane { border-left: 1px solid var(--au-border-color); }
.au-diff__pane-label {
  color: var(--au-fg-subtle);
  display: block;
  font: 500 11px/1.3 var(--au-font-sans);
  margin-bottom: 8px;
}
@media (max-width: 640px) {
  .au-diff[data-au-view="split"] .au-diff__split { grid-template-columns: 1fr; }
  .au-diff__pane + .au-diff__pane {
    border-left: 0;
    border-top: 1px solid var(--au-border-color);
  }


/* Alias stub root */
.au-code-block { /* prefer .au-codeblock */ }

/* Converge message prose .au-code onto code-block chrome */
.au-chat-message__body .au-code,
.au-chat-message__body .au-codeblock {
  margin-top: 12px;
}
</style>

<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