@artooi/ag-ui-web-component 0.17.0 → 0.19.0

package/CHANGELOG.md

@@ -7,6 +7,116 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.19.0] — 2026-08-11
+
+### Changed
+
+- **A tool card's arguments and its result are now two labelled regions, not one
+  block.** Compact mode emitted `args: {...}` and the result into a single
+  `<pre>` separated by a blank line, with nothing marking where the call ended
+  and the answer began. Both payloads now have their own heading, their own
+  `part` (`tool-card-args` / `tool-card-result`, headings via
+  `tool-card-section-label`, body via `tool-card-body`), and are pretty-printed.
+
+  ⚠ Breaking for anyone styling `tool-card-result` as a single combined block.
+  A call with no arguments no longer renders an empty `{}` in a box of its own.
+
+- ⭐ **`data-tool-display` is now live.** Changing it restyles every card already
+  in the transcript, the way `data-answer-well` always has. The modes are pure
+  visibility over **one DOM shape**, selected by the shadow CSS from the host
+  attribute; previously each card baked its structure at construction from the
+  value read at that moment, so a change reached only cards created afterwards
+  and the setting appeared not to work until the next conversation.
+
+  `ToolCallCard`'s constructor consequently no longer takes a mode argument.
+
+- **The confirmation card leaves once it is answered.** It stayed in the
+  transcript as a spent form with its buttons disabled, which read as an
+  outstanding question rather than a settled one. A prompt and a record are
+  different objects: the record is the tool card it gates, which settles to the
+  outcome and scrolls with the rest of the transcript.
+
+- ⛔ **The confirmation card was appended to the wrong parent**, and it is the
+  reason it drifted to the foot of a turn. Every other inline card — tool,
+  approval, `ask_user`, run notices — goes into the turn's answer group; this
+  one went into the message list, so it became a sibling *after* the group and
+  anything that streamed afterwards rendered above it. It now joins the group
+  like its siblings.
+
+### Added
+
+- **A gated call records the decision.** The tool card carries `approved by you`
+  / `declined by you` (part `tool-card-decision`, attribute `data-decision`).
+  Previously only a *refusal* left a trace — an approved call simply ran, making
+  a gated call's transcript identical to one that was never gated.
+
+- **Each header control takes its own icon slot** — `icon-history`,
+  `icon-checkpoints`, `icon-new`, `icon-collapse` — with the built-in glyph as
+  the fallback, so existing embeds are unchanged. The glyph used to be the
+  button's own `textContent`: a host could restyle a control through its `part`,
+  or swap one character for another with a CSS `content` override, but could
+  never supply a brand `<img>` or `<svg>`.
+
+- **`argumentsLabel`, `decisionApproved` and `decisionDeclined`** in `UiStrings`.
+  `resultLabel` / `errorLabel` / `declinedLabel` are now the result region's
+  heading rather than a toggle label, and `details` labels the toggle in every
+  mode.
+
+### Fixed
+
+- **The demo harness reused message ids**, which produced three symptoms that
+  all read as component bugs and were none of them. It streamed every follow-up
+  answer under a hardcoded id, and `@ag-ui/client` appends to a message id
+  already in its history rather than starting a new one — so repeating a prompt
+  grew a single entry, that entry replayed out of order after a reload (sitting
+  where it was first created, with the later prompts after it), and the
+  unfinished-run notice then fired correctly over the corrupted history. Fresh
+  ids per message, as a real server issues.
+
+## [0.18.0] — 2026-08-10
+
+### Added
+
+- **A copy button on code blocks in agent answers.** An agent answering with
+  code is answering with something the reader means to *use*, and selecting it
+  by hand out of a scrolling transcript — inside a shadow root, in a narrow
+  sidebar — was the one interaction the chat surface made harder than the page
+  around it.
+
+  Revealed on hover **and keyboard focus** (hidden-until-hover is invisible to a
+  keyboard user), styleable via the `code-copy` part, with `copyCode` /
+  `copied` / `copyFailed` in `UiStrings`.
+
+  ⚠ **It reports failure rather than always claiming success.** The Clipboard
+  API needs a secure context and is simply absent in some embeddings; a button
+  that always says "Copied" sends the reader off to paste stale clipboard
+  content and find out somewhere else entirely.
+
+### Fixed
+
+- **A bare `data-prompt-chips` or `data-slash-commands` now enables the
+  feature**, instead of silently disabling it. Both were compared against the
+  string `"true"`, so writing the attribute bare — the spelling every native
+  boolean attribute uses, and the one a reader reaches for first — turned off
+  the thing it names, with nothing to indicate why the chips never appeared.
+  `="false"` still turns them off.
+
+- **The checkpoint panel manages focus.** It declared `role="dialog"` and took
+  no focus at all, so a keyboard user was left behind an open dialog; the thread
+  drawer had done this correctly all along. Focus now moves in on open, is
+  restored on close, and Tab is trapped while it is open.
+
+  ⚠ **With no continuable runs the panel holds no controls**, so the panel
+  itself is focusable as the fallback — otherwise "move focus to the first
+  control" silently does nothing in exactly the case where the user has least to
+  go on.
+
+- **The README described a `dist/ag-ui-web-component.bundle.css` that the build
+  has never emitted.** The styles are a template literal injected into the
+  shadow root, so there is no sidecar to load — and a reader looking for the
+  file to override was looking for the wrong seam. Documented as CSS custom
+  properties and `part` attributes instead.
+
 ## [0.17.0] — 2026-08-10
 
 ### Added
@@ -833,7 +943,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Notes
 - First release — exercising the automated npm OIDC publish pipeline end-to-end.
 
-[Unreleased]: https://github.com/Artui/ag-ui-web-component/compare/v0.17.0...HEAD
+[Unreleased]: https://github.com/Artui/ag-ui-web-component/compare/v0.19.0...HEAD
+[0.19.0]: https://github.com/Artui/ag-ui-web-component/compare/v0.18.0...v0.19.0
+[0.18.0]: https://github.com/Artui/ag-ui-web-component/compare/v0.17.0...v0.18.0
 [0.17.0]: https://github.com/Artui/ag-ui-web-component/compare/v0.16.0...v0.17.0
 [0.16.0]: https://github.com/Artui/ag-ui-web-component/compare/v0.15.0...v0.16.0
 [0.15.0]: https://github.com/Artui/ag-ui-web-component/compare/v0.14.1...v0.15.0

package/README.md

@@ -150,8 +150,8 @@ That's the whole integration: an `endpoint` attribute pointing at your AG-UI ser
 | `title-text` | — | Header label; defaults to `"Assistant"`. The only **observed** attribute (live-updates the header). |
 | `data-tool-display` | `toolDisplay` | Tool-call card detail: `inline` / `minimal` / `compact` / `full` (default `full`). |
 | `data-text-animation` | — | Incoming-text reveal: `none` (default) / `fade` / `word`. |
-| `data-prompt-chips` | — | `"true"` to surface skills as chips. |
-| `data-slash-commands` | — | `"true"` to enable the `/`-command palette. |
+| `data-prompt-chips` | — | Present (bare, or any value but `"false"`) to surface skills as chips. |
+| `data-slash-commands` | — | Present (bare, or any value but `"false"`) to enable the `/`-command palette. |
 | `data-skills` | — | Inline JSON skill catalog. |
 | `data-skills-url` | — | URL of a JSON skill catalog (fetched with `headers`). |
 | `data-tools-url` | — | URL of a server tool-label catalog (`[{ name, summary, description? }]`), fetched with `headers`; labels tool-call cards for server-side tools. |
@@ -164,6 +164,16 @@ That's the whole integration: an `endpoint` attribute pointing at your AG-UI ser
 | `data-theme-toggle` | — | Boolean: show a built-in header light⇄dark toggle (persists per tab). Off by default. See [Theme toggle](#theme-toggle). |
 | `data-strings` | `strings` | Partial JSON override of the UI string table (localization). The property wins key-by-key over the attribute; see [Internationalization](#internationalization-i18n). |
 | `data-icon-url` | — | Header (and sidebar-rail) icon image URL. A slotted `slot="icon"` wins; see [Header & launcher icon](#header-and-launcher-icon). |
+
+Each header control also takes its own icon slot — `icon-history`, `icon-checkpoints`,
+`icon-new`, `icon-collapse` — with the built-in glyph as the fallback, so a host can project a
+brand `<img>` or `<svg>` rather than only restyling the character:
+
+```html
+<ag-ui-chat endpoint="/agent/">
+  <svg slot="icon-new" width="16" height="16"><!-- ... --></svg>
+</ag-ui-chat>
+```
 | `data-page-actions` | — | Opt-in built-in page-action tools: a comma list of `scroll` / `drag` (e.g. `"scroll,drag"`). See [Page-action tools](#page-action-tools). |
 | `data-side` | — | CSS-only, for `placement="sidebar"`: which edge it docks to — `right` (default) / `left`. |
 | `data-answer-well` | — | CSS-only boolean: box each assistant turn (its text, tool cards, and thinking) in one bordered "well". Off by default. See [The answer well](#the-answer-well). |
@@ -194,6 +204,10 @@ labels are fetched automatically — per card, `x-summary` → an explicit
 
 **Properties** (selected): `sharedState` — AG-UI shared state (documented under Tools & state).
 
+Code blocks in an agent's answer carry a **copy button**, revealed on hover or
+keyboard focus and styleable via the `code-copy` part. Override its labels with
+the `copyCode` / `copied` / `copyFailed` strings.
+
 **Methods**: `registerTool`, `registerPageState`, `setSkills`, `sendMessage`, `attachFile`,
 `appendMessage`, `newChat`, `setCollapsed`, `toggleCollapsed`.
 
@@ -502,8 +516,23 @@ property), one of `inline` / `minimal` / `compact` / `full` (default `full`):
   result behind its own toggle. Reads as one line of the answer — pairs with [the answer
   well](#the-answer-well).
 - `minimal` — tool name + status pill only.
-- `compact` — name + status, with args *and* result behind a single collapsed "Details" toggle.
-- `full` — args inline, result behind its own toggle (the original behaviour).
+- `compact` — name + status, with arguments *and* result behind a single collapsed toggle.
+- `full` — arguments visible, result behind the toggle (the default).
+
+Whichever mode is on, a settled card's body holds **two labelled regions** — `Arguments` and
+`Result` (or `Error` / `Declined`) — each with its own part and each pretty-printed. They are
+never run together into one block, so where the call ends and the answer begins is always
+visible. Style them via the `tool-card-args` / `tool-card-result` parts, their headings via
+`tool-card-section-label`, and the whole body via `tool-card-body`.
+
+**The attribute is live.** Changing `data-tool-display` restyles every card already in the
+transcript, the way `data-answer-well` does — the modes are pure visibility over one DOM shape,
+selected by the shadow CSS from the host attribute.
+
+A call gated behind the confirmation card also carries the decision (`approved by you` /
+`declined by you`, part `tool-card-decision`, attribute `data-decision`). The prompt itself
+disappears once answered: a prompt and a record are different objects, and the record is the
+card.
 
 If a tool's schema carries an `x-summary` string (use `X_SUMMARY_KEY`), the card shows it on the
 label instead of the raw tool name.
@@ -1189,10 +1218,14 @@ This produces, into `dist/`:
   them.
 - `ag-ui-web-component.bundle.js` — the **vendored** ESM bundle, every dependency inlined and
   minified, suitable for direct `<script type="module">` embedding.
-- `ag-ui-web-component.bundle.css` — the extracted CSS sidecar.
 - `index.d.ts` (+ source maps) — type declarations; emitted `.js` import specifiers are preserved
   so consumers resolve types without extra flags.
 
+There is **no CSS file to load**. The styles are a template literal injected into
+the shadow root at construction, so they ship inside the JS and cannot leak into
+the host page. Restyle through the [CSS custom properties](#theming-density-and-placement) and the
+`part` attributes, not a stylesheet override.
+
 Other workflow targets (all identical in name to the sibling Python packages):
 
 | Target | What it does |