@artooi/ag-ui-web-component 0.20.1 → 0.22.0

package/CHANGELOG.md

@@ -7,6 +7,195 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.22.0] — 2026-08-11
+
+Two complaints about how the widget *feels*, and both turned out to be structural
+rather than cosmetic.
+
+### Changed
+
+- **The composer is one surface, not four boxes.** The input row was a flat flex
+  row — attach, mic, textarea, send — with every sibling stretched to the
+  textarea's two-row height. That gave a paperclip the same visual weight as the
+  field it sits next to and made Send a full-height filled slab. The border,
+  background and focus ring now belong to a wrapping `composer-surface`: the
+  field is borderless and **grows with what is typed** (from one row up to
+  `--ag-ui-composer-max-height`, then scrolls), and a `composer-tools` row
+  underneath carries the paperclip and mic as quiet icon buttons with a circular
+  Send closing the right-hand end.
+
+  Send is now icon-only. Its accessible name still comes from the `send` /
+  `stop` strings (`aria-label` + `title`), and the run state swaps its glyph
+  rather than its text, so nothing moves when a run starts. A host that sized
+  `::part(send)` by its padding should switch to `--ag-ui-send-size`.
+
+- **Collapsing goes to a round floating launcher.** `collapsed` used to leave the
+  full-width header bar sitting on the page, which is most of a chat widget's
+  footprint for none of its use. The panel now scales down into a launcher in the
+  corner it already occupies and the launcher grows back out of that point;
+  `transform` and `opacity` are all that animate, so the morph is
+  compositor-only and cannot reflow the host page. `placement="sidebar"` keeps
+  its edge rail (and now genuinely *slides* out through the edge it docks
+  against — the transition was declared but never wired to a transform), and
+  `embedded` / `page` keep the header bar, being host-laid-out and full-screen
+  respectively.
+
+  This changes what an existing floating embed looks like when collapsed. The
+  collapsed host keeps its box with `pointer-events: none`, so the page beneath
+  stays interactive and the launcher takes the clicks.
+
+- **The chat-history drawer and the checkpoints panel slide.** Both were toggled
+  with `hidden` alone, which snaps. They now keep their box and hide with
+  `visibility`, which is what lets a surface animate *in and out* — an element
+  that was never rendered has no before-change style to animate from, and one
+  whose `display` flips to `none` cannot animate at all.
+
+- **The chrome's glyphs are inline SVG** (send, stop, paperclip, mic, launcher)
+  rather than emoji, each in a slot with the mark as its fallback:
+  `icon-send`, `icon-stop`, `icon-attach`, `icon-voice`, `launcher`.
+
+### Added
+
+- **An unread badge on the launcher.** A collapsed widget is the one state where
+  an answer can arrive with nothing on screen to say so, so the launcher now
+  counts the answers that finished while it was closed (capped at `9+`) and
+  expanding marks them read. It is the only affordance here that is **on by
+  default**; `data-unread-badge="false"` turns the badge off, and the count keeps
+  running so a host chrome can render its own from the new `ag-ui-unread` event
+  (`UNREAD_EVENT` / `UnreadDetail`, plus a `chat.unread` getter). The count is
+  also the launcher's accessible name — a coloured dot says nothing to a screen
+  reader — via the new `expandUnread` string. Tokens:
+  `--ag-ui-badge-{bg,fg,size,font-size}`; part `launcher-badge`.
+
+- **`data-launcher-icon-url`** — an icon for the collapsed launcher when it should
+  differ from the header's. Falls back to `data-icon-url`, so one attribute still
+  feeds both.
+
+- **Motion tokens** — `--ag-ui-motion`, `--ag-ui-ease`, `--ag-ui-ease-pop`. One
+  duration and two curves drive every collapse, expand and slide-over. Under
+  `prefers-reduced-motion` the duration collapses to a frame; `--ag-ui-motion: 0s`
+  switches the animation off outright.
+
+- **Launcher and composer tokens** — `--ag-ui-launcher-{size,bg,fg,radius,icon-size,inset}`,
+  `--ag-ui-composer-{radius,max-height}`, `--ag-ui-send-size`, `--ag-ui-tool-btn-size`,
+  `--ag-ui-glyph-{size,stroke}`; parts `composer-surface` and `composer-tools`.
+
+- **Motion tests that run in a real browser.** happy-dom runs no transitions, so
+  every assertion about this would pass on a stylesheet where nothing animates.
+  The Chromium project now asserts on `getAnimations()` — that the browser
+  actually *started* the transitions a collapse, an expand and a drawer open are
+  supposed to start.
+
+## [0.21.0] — 2026-08-11
+
+Ten findings from a real embed — a cross-origin, cookie-authenticated React host.
+Six of them are one defect: **the component assumed it owned the page.** It had
+only ever been embedded in its own playground and in `django-admin-agent`, two
+hosts that both arrange the page the way it expects.
+
+### Added
+
+- **`getHeaders`** — a function consulted immediately before **every** request, so
+  a rotating credential (a short-lived JWT, a re-issued CSRF token) reaches the
+  request that needs it. `headers` was a plain field the element never wrote to,
+  read at ten sites; configuring auth through `agentFactory` therefore
+  authenticated the run and nothing else, and thread history, attachments and the
+  catalogs went out anonymous and 401'd — which reads as a backend fault. The two
+  compose, merged per key with `getHeaders` winning, so adding a rotating header
+  cannot silently drop a static one.
+
+- **`credentials`** (attribute and property) — `omit` / `same-origin` / `include`,
+  applied to every request. There was previously no occurrence of `credentials`
+  anywhere in the source, so every request used the browser default and a host
+  serving its SPA and API from different subdomains sent no cookies, with **no way
+  to express the fix** short of replacing the transport. An unknown value is
+  rejected where it was written (the property throws; the attribute logs and stays
+  inert) rather than becoming a 401 later.
+
+- **`flash(el, options)`** — ring an element without moving focus.
+  `focusWithFlash` calls `el.focus()`, which for a helper named "flash" is
+  surprising: it takes focus off the composer, can fire blur validation on
+  whatever the user was mid-edit in, and can close a menu. Both now accept an
+  explicit `focus` option, and `focusWithFlash` focuses with `preventScroll: true`
+  so it no longer fights the scroll it just started.
+
+- **`openThreads()` / `openCheckpoints()` / `reload()`.** The header's controls all
+  live inside `::part(header)`, so a host rendering its own title bar and hiding it
+  lost thread switching entirely. The built-in buttons call exactly these methods,
+  so the two routes cannot drift. `reload()` re-runs the startup fetches once
+  credentials that arrive late have landed.
+
+- **`ScrollOptions`**, and `scrollIntoCenterView` now returns a promise that
+  resolves when the scroll has settled (`scrollend` where available, a short probe
+  when nothing moved, a 600 ms cap otherwise). Every DOM-driver primitive awaits it.
+
+### Changed
+
+- **CSS custom properties now work from an ancestor**, which is what the README
+  always described and the one thing that could not work: every `--ag-ui-*` default
+  was declared on `:host`, which sets the property *on the element*, and an
+  element's own value beats anything inherited. A consumer ran the full token map
+  on a wrapper for an entire build and concluded they had the names wrong. The
+  defaults now sit behind private aliases, so `:root`, a wrapper, the element and
+  an inline style all work and resolve in the usual order. **One vocabulary — the
+  public `--ag-ui-*` names are unchanged**, and a built-in `theme` / `density` /
+  `placement` preset still loses to an explicit page rule.
+
+- **The flash is an `outline`, not a `box-shadow`**, and holds for **1200 ms** with
+  a fade rather than 200 ms. A shadow paints outside the border box, so any
+  `overflow: hidden` ancestor sharing the element's box — a card, a table cell —
+  clipped it entirely while the tool reported success. And 200 ms is below the
+  threshold at which someone who does not know where to look notices anything.
+  ⭐ Neither our tests nor the consumer's could have found the second one:
+  headless Chromium hides the scroll race, and no automated check has an opinion
+  about whether a human sees a 200 ms ring.
+
+- **The flash colour comes from the target's `--ag-ui-accent`** rather than a
+  hardcoded indigo, so a themed page is flashed in its own colour.
+
+- **`prefersReducedMotion()` is now honoured where the README already claimed it
+  was.** The flash ignored it entirely while the docs said the preference was
+  "honoured throughout"; a consumer investigated reduced motion as the cause of an
+  invisible highlight on the strength of that sentence. Under reduced motion the
+  ring drops its fade but keeps its full hold — reduced motion asks for no
+  animation, not for no feedback. `typeInto` and `highlightThenClick` keep their
+  explicit-duration contract, and the docs now say so instead of overclaiming.
+
+- **The tool and skill catalog fetches are deferred by one microtask**, so a React
+  `ref` assigned in the same commit as insertion is honoured. ⚠ The thread-history
+  request is deliberately **not** deferred: a deferred replay can land after a
+  `sendMessage()` and duplicate the transcript. Configure before you insert, or
+  call `reload()`; the new React recipe in the README shows both.
+
+### Fixed
+
+- **The resize grip now sits on the corner that actually moves.** The element
+  measures which edges its host's layout holds still and stamps them as
+  `data-resize-anchor="<y>-<x>"`, but the rules meant to read it were written as
+  `[data-resize-anchor~="left"]` — and `~=` matches whitespace-separated words
+  while the stamped value is a single hyphenated token, so they could never
+  match. ⚠ **The cursor rules used `=` and did match**, so the pointer followed
+  the measurement while the grip stayed where `placement` had guessed: for any
+  host that aligns the panel the other way, the cursor promised a diagonal the
+  grip was not on, and the grip sat on the corner that stays put.
+
+  Each anchor rule now sets **both** sides of its axis. One that flipped a
+  single way could not undo a placement guess that had flipped the other, which
+  put the grip back on the anchored corner for an embedded panel its host
+  right-aligns.
+
+- **`placement="page"` gutters its composer to the same reading column as its
+  messages.** The rule was unscoped, which tied it on specificity with the base
+  `.input-row` rule that sets the `padding` shorthand later in the stylesheet;
+  source order decided and the shorthand won. ⇒ *No placement ever got the
+  gutter* — least of all the one it was written for, where the messages sat in a
+  centred column and the composer spanned the full width.
+
+  A duplicated copy of the whole resize block also sat earlier in the file,
+  welded to the preceding rule by a comment left between a selector and its
+  subject; it parsed as `:host([placement="page"]) .resize-handle`, scoping the
+  grip's base positioning to the one placement that hides it.
+
 ## [0.20.1] — 2026-08-11
 
 ### Fixed
@@ -1061,7 +1250,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.20.1...HEAD
+[Unreleased]: https://github.com/Artui/ag-ui-web-component/compare/v0.22.0...HEAD
+[0.22.0]: https://github.com/Artui/ag-ui-web-component/compare/v0.21.0...v0.22.0
+[0.21.0]: https://github.com/Artui/ag-ui-web-component/compare/v0.20.1...v0.21.0
 [0.20.1]: https://github.com/Artui/ag-ui-web-component/compare/v0.20.0...v0.20.1
 [0.20.0]: https://github.com/Artui/ag-ui-web-component/compare/v0.19.0...v0.20.0
 [0.19.0]: https://github.com/Artui/ag-ui-web-component/compare/v0.18.0...v0.19.0