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

package/dist/index.js

@@ -2,6 +2,7 @@
 var ELEMENT_TAG = "ag-ui-chat";
 var SUBMIT_EVENT = "ag-ui-submit";
 var TOGGLE_EVENT = "ag-ui-toggle";
+var UNREAD_EVENT = "ag-ui-unread";
 var STATE_EVENT = "ag-ui-state";
 var ATTACHMENT_EVENT = "ag-ui-attachments";
 var MESSAGE_ROLE = {
@@ -34,6 +35,11 @@ var TOOL_DISPLAY = {
 };
 var COMPACTION_ACTIVITY_TYPE = "compaction";
 var LOAD_CAPABILITY_TOOL = "load_capability";
+var ICON_SEND = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 19.5V5m-6.5 6.5L12 5l6.5 6.5"/></svg>`;
+var ICON_STOP = `<svg class="glyph glyph--solid" viewBox="0 0 24 24" aria-hidden="true"><rect x="7" y="7" width="10" height="10" rx="2.5"/></svg>`;
+var ICON_ATTACH = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M17 8.5V15a5 5 0 0 1-10 0V7a3 3 0 0 1 6 0v7.5a1 1 0 0 1-2 0V8.5"/></svg>`;
+var ICON_VOICE = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 4a3 3 0 0 1 3 3v5a3 3 0 0 1-6 0V7a3 3 0 0 1 3-3z"/><path d="M5 11v1a7 7 0 0 0 14 0v-1"/><path d="M12 19v3"/></svg>`;
+var ICON_LAUNCHER = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5v8a2.5 2.5 0 0 1-2.5 2.5H9l-5 4z"/></svg>`;
 
 // src/skills/fill_template.ts
 var PLACEHOLDER_RE = /\{([a-zA-Z_][a-zA-Z0-9_]*)\}/g;
@@ -509,6 +515,7 @@ var DEFAULT_UI_STRINGS = {
   newChat: "New chat",
   collapse: "Collapse",
   expand: "Expand",
+  expandUnread: "Expand \u2014 {count} unread",
   toggleTheme: "Toggle theme",
   copyCode: "Copy",
   copied: "Copied",
@@ -4532,6 +4539,36 @@ var STYLES = `
   --_icon-size: var(--ag-ui-icon-size, 22px);
   --_icon-radius: var(--ag-ui-icon-radius, 4px);
 
+  /* Composer \u2014 one bordered surface holding the field and its tool row. */
+  --_composer-radius: var(--ag-ui-composer-radius, 14px);
+  --_composer-max-height: var(--ag-ui-composer-max-height, 40vh);
+  --_tool-btn-size: var(--ag-ui-tool-btn-size, 30px);
+  --_send-size: var(--ag-ui-send-size, 30px);
+  --_glyph-size: var(--ag-ui-glyph-size, 18px);
+  --_glyph-stroke: var(--ag-ui-glyph-stroke, 1.75);
+
+  /* Unread badge on the launcher. */
+  --_badge-bg: var(--ag-ui-badge-bg, var(--_danger));
+  --_badge-fg: var(--ag-ui-badge-fg, #ffffff);
+  --_badge-size: var(--ag-ui-badge-size, 18px);
+  --_badge-font-size: var(--ag-ui-badge-font-size, 11px);
+
+  /* The floating launcher a collapsed widget shrinks to. */
+  --_launcher-size: var(--ag-ui-launcher-size, 56px);
+  --_launcher-bg: var(--ag-ui-launcher-bg, var(--_header-bg));
+  --_launcher-fg: var(--ag-ui-launcher-fg, var(--_header-fg));
+  --_launcher-radius: var(--ag-ui-launcher-radius, 50%);
+  --_launcher-icon-size: var(--ag-ui-launcher-icon-size, 26px);
+  --_launcher-inset: var(--ag-ui-launcher-inset, auto 0 0 auto);
+
+  /* Motion. One duration and two curves drive every collapse, expand and
+     slide-over, so the whole widget accelerates and settles as one thing.
+     The default curve is a long-tailed ease-out (a fast start that decelerates
+     into place); the pop curve overshoots slightly, for something arriving. */
+  --_motion: var(--ag-ui-motion, 0.28s);
+  --_ease: var(--ag-ui-ease, cubic-bezier(0.32, 0.72, 0, 1));
+  --_ease-pop: var(--ag-ui-ease-pop, cubic-bezier(0.34, 1.36, 0.64, 1));
+
   /* Spacing \u2014 the density preset overrides these. */
   --_space: var(--ag-ui-space, 10px);
   --_pad: var(--ag-ui-pad, 16px);
@@ -4696,56 +4733,161 @@ var STYLES = `
   --_height: var(--ag-ui-height, 100vh);
   --_max-height: var(--ag-ui-max-height, 100vh);
   --_radius: var(--ag-ui-radius, 0);
-  transition: width 0.28s ease;
+  transition: width var(--_motion) var(--_ease);
 }
 
 :host([placement="sidebar"][data-side="left"]) {
   --_inset: var(--ag-ui-inset, 0 auto 0 0);
 }
 
+/* The docked panel is pinned to the edge it docks against rather than filling
+   the host as a flex child. Collapsing shrinks the host to the rail width, and
+   a flex child would be squashed to 52px on the way out instead of sliding out
+   at full width. */
 :host([placement="sidebar"]) .chat {
-  transition: transform 0.28s ease;
+  position: absolute;
+  inset: 0 0 0 auto;
+  width: var(--_width);
+  transform-origin: right center;
 }
 
-/* Collapsed sidebar: shrink the host to the rail width, hide the panel, and
-   reveal the rail. Higher specificity than the generic collapse rules, so it
-   wins regardless of source order. */
+:host([placement="sidebar"][data-side="left"]) .chat {
+  inset: 0 auto 0 0;
+  transform-origin: left center;
+}
+
+/* Collapsed sidebar: shrink the host to the rail width and slide the panel out
+   through the edge it docks against. Higher specificity than the generic
+   collapse rules, so it wins regardless of source order. */
 :host([placement="sidebar"][collapsed]) {
   width: var(--_rail-width);
   height: 100vh;
   max-height: 100vh;
   bottom: 0;
+  pointer-events: auto;
 }
 
 :host([placement="sidebar"][collapsed]) .chat {
-  display: none;
+  transform: translateX(100%);
 }
 
-/* The rail is a sibling of the panel (so it survives the panel being hidden);
-   shown only for a collapsed sidebar. */
-.rail {
-  display: none;
+:host([placement="sidebar"][data-side="left"][collapsed]) .chat {
+  transform: translateX(-100%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host([placement="sidebar"]),
+  :host([placement="sidebar"]) .chat {
+    transition: none;
+  }
+}
+
+/* \u2500\u2500 Launcher \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+   What a collapsed widget shrinks to: a round floating button by default, the
+   sidebar's slim edge rail under that placement. A sibling of the panel, so it
+   survives the panel being hidden, and the only part of a collapsed widget
+   that takes pointer events. */
+.launcher {
+  display: flex;
+  position: absolute;
+  inset: var(--_launcher-inset);
+  align-items: center;
+  justify-content: center;
+  width: var(--_launcher-size);
+  height: var(--_launcher-size);
+  padding: 0;
   border: none;
+  border-radius: var(--_launcher-radius);
+  background: var(--_launcher-bg);
+  color: var(--_launcher-fg);
+  box-shadow: var(--_shadow);
   font: inherit;
+  cursor: pointer;
+  pointer-events: auto;
+  opacity: 0;
+  transform: scale(0.4);
+  visibility: hidden;
+  transition:
+    opacity var(--_motion) var(--_ease),
+    transform var(--_motion) var(--_ease-pop),
+    visibility var(--_motion) var(--_ease);
+}
+
+/* The launcher grows out of the corner the panel shrank into.
+   It is laid out at rest rather than display:none, which is what lets it
+   animate in *and* out: an element that was not rendered has no before-change
+   style to transition from, and one whose display flips to none cannot
+   transition at all. visibility keeps it unpaintable, untabbable and
+   unclickable in between -- the expanded panel's own controls sit under it and
+   must stay reachable. */
+:host([collapsed]) .launcher {
+  opacity: 1;
+  transform: none;
+  visibility: visible;
 }
 
-:host([placement="sidebar"][collapsed]) .rail {
-  display: flex;
+:host([collapsed]) .launcher:hover {
+  transform: scale(1.06);
+}
+
+:host([collapsed]) .launcher:active {
+  transform: scale(0.94);
+}
+
+.launcher .icon-holder {
+  width: var(--_launcher-icon-size);
+  height: var(--_launcher-icon-size);
+}
+
+/* The unread badge rides the launcher's top-right corner. The ring in the
+   widget's own background is what separates it from the launcher underneath,
+   whatever colour the host themes either one. */
+.launcher-badge {
   position: absolute;
+  top: -2px;
+  right: -2px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: var(--_badge-size);
+  height: var(--_badge-size);
+  padding: 0 5px;
+  border-radius: 999px;
+  background: var(--_badge-bg);
+  color: var(--_badge-fg);
+  font-size: var(--_badge-font-size);
+  font-weight: 600;
+  line-height: 1;
+  box-shadow: 0 0 0 2px var(--_bg);
+}
+
+.launcher-badge[hidden] {
+  display: none;
+}
+
+/* The sidebar collapses to an edge rail instead: full height, square, flush
+   against the dock. It slides in with the panel rather than popping. */
+:host([placement="sidebar"][collapsed]) .launcher {
   inset: 0;
+  width: auto;
+  height: auto;
   align-items: flex-start;
-  justify-content: center;
   padding-top: 16px;
   border: 1px solid var(--_border);
+  border-radius: 0;
   background: var(--_header-bg);
   color: var(--_header-fg);
-  cursor: pointer;
+  box-shadow: none;
+  transform: none;
 }
 
+/* Every transition in this file is timed by --_motion, so collapsing it to a
+   frame is the whole reduced-motion story: states still change (and display
+   still flips at the end of its discrete transition), nothing travels. */
 @media (prefers-reduced-motion: reduce) {
-  :host([placement="sidebar"]),
-  :host([placement="sidebar"]) .chat {
-    transition: none;
+  :host {
+    --_motion: var(--ag-ui-motion, 0.001s);
   }
 }
 
@@ -4836,27 +4978,78 @@ var STYLES = `
   background: rgba(255, 255, 255, 0.18);
 }
 
-/* Collapsed: keep just the header bar \u2014 hide the whole body, and let the host
-   shrink to the header. (A host can also fully hide the element itself.) */
+/* \u2500\u2500 Collapse \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+   Collapsing shrinks the widget to the round floating launcher: the panel
+   scales down toward the launcher's corner and fades out, the launcher pops in
+   from that same point. Both halves are transform and opacity only, so the
+   morph runs on the compositor and never reflows the host page.
+
+   The host box keeps its expanded size. Animating it would animate layout, and
+   a dragged --ag-ui-width would then fight the launcher's own size. Nothing
+   paints there once the panel is gone, so the box only has to stop swallowing
+   clicks: pointer events go to none, and the launcher takes them back.
+
+   Two placements collapse to something else and restore what they need:
+   "sidebar" slides to its rail (below), while "embedded" and "page" keep the
+   original header bar \u2014 embedded is laid out by the host page, where a
+   floating circle would escape the layout, and page is a full-screen route
+   with no corner to float in. */
 :host([collapsed]) {
+  pointer-events: none;
+}
+
+:host([collapsed]) .chat {
+  opacity: 0;
+  transform: scale(0.94);
+  visibility: hidden;
+}
+
+/* visibility is what keeps the panel out of the tab order and the a11y tree at
+   rest without display:none killing the transition. It interpolates so that any
+   progress below 1 still counts as visible: the panel stays on screen for the
+   whole collapse and flips hidden exactly at the end, and on expand it is
+   visible from the first frame. */
+.chat {
+  transform-origin: bottom right;
+  transition:
+    opacity var(--_motion) var(--_ease),
+    transform var(--_motion) var(--_ease),
+    visibility var(--_motion) var(--_ease);
+}
+
+:host([placement="bottom-left"]) .chat {
+  transform-origin: bottom left;
+}
+
+/* The two in-flow placements keep the original collapse: hide the body, let
+   the host shrink to the header bar. */
+:host([collapsed]:is([placement="embedded"], [placement="page"])) {
   height: auto;
   max-height: none;
+  pointer-events: auto;
 }
 
-:host([collapsed]) .messages,
-:host([collapsed]) .input-row,
-:host([collapsed]) .skill-chips,
-:host([collapsed]) .skill-palette,
-:host([collapsed]) .skill-hint {
-  display: none;
+:host([collapsed]:is([placement="embedded"], [placement="page"])) .chat {
+  opacity: 1;
+  transform: none;
+  visibility: visible;
 }
 
-/* Edge-docked placements pin top *and* bottom, which would otherwise keep the
-   panel full-height when collapsed; unpin the bottom so it shrinks to the
-   header. (Floating/bottom-left pin only the bottom, so they already shrink.) */
-:host([collapsed][placement="side"]),
-:host([collapsed][placement="full"]) {
-  bottom: auto;
+/* These two keep the header bar, so the launcher must stay out of the way \u2014
+   an embedded host is position: static, which would otherwise leave an
+   absolutely-positioned circle to escape the layout entirely and land against
+   whatever the page happens to position. */
+:host([collapsed]:is([placement="embedded"], [placement="page"])) .launcher {
+  visibility: hidden;
+  opacity: 0;
+}
+
+:host([collapsed]:is([placement="embedded"], [placement="page"])) .messages,
+:host([collapsed]:is([placement="embedded"], [placement="page"])) .input-row,
+:host([collapsed]:is([placement="embedded"], [placement="page"])) .skill-chips,
+:host([collapsed]:is([placement="embedded"], [placement="page"])) .skill-palette,
+:host([collapsed]:is([placement="embedded"], [placement="page"])) .skill-hint {
+  display: none;
 }
 
 .messages {
@@ -5529,102 +5722,187 @@ var STYLES = `
   opacity: 0.35;
 }
 
+/* \u2500\u2500 Composer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+   One surface owns the border, the background and the focus ring; the field and
+   its tool row sit inside it. The row used to be four siblings stretched to the
+   textarea's height, which gave a paperclip the same visual weight as the field
+   and turned Send into a full-height slab. */
 .input-row {
   display: flex;
-  gap: 8px;
   padding: 12px;
   border-top: 1px solid var(--_border);
 }
 
-.input {
+.composer {
   flex: 1;
-  resize: none;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 6px 6px 6px 10px;
   background: var(--_input-bg);
   border: 1px solid var(--_border);
-  border-radius: 8px;
-  padding: 8px 10px;
+  border-radius: var(--_composer-radius);
+  transition: border-color var(--_motion) var(--_ease);
+}
+
+.composer:focus-within {
+  border-color: var(--_accent);
+}
+
+/* The field grows with its content (sized by #autoGrow) up to the ceiling,
+   then scrolls. border-box keeps that measurement stable: with content-box the
+   padding would be added to every scrollHeight read and the field would creep
+   taller on each keystroke. */
+.input {
+  box-sizing: border-box;
+  resize: none;
+  max-height: var(--_composer-max-height);
+  overflow-y: auto;
+  padding: 6px 4px 2px;
+  background: transparent;
+  border: none;
   font: inherit;
   color: inherit;
   outline: none;
 }
 
-.input:focus {
-  border-color: var(--_accent);
+.composer-tools {
+  display: flex;
+  align-items: center;
+  gap: 2px;
 }
 
-.send {
+/* Icon buttons: quiet at rest, so the field is what the eye lands on. */
+.attach-btn,
+.voice-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--_tool-btn-size);
+  height: var(--_tool-btn-size);
+  padding: 0;
   border: none;
   border-radius: 8px;
-  padding: 0 16px;
+  background: transparent;
+  color: var(--_muted);
+  font: inherit;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    background-color var(--_motion) var(--_ease),
+    color var(--_motion) var(--_ease);
+}
+
+.attach-btn:hover,
+.voice-btn:hover {
+  background: var(--_hover);
+  color: var(--_fg);
+}
+
+.attach-btn:disabled,
+.voice-btn:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+/* Send closes the row on the right: a circle, the only filled control in the
+   composer, so "the thing that acts" reads at a glance. */
+.send {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--_send-size);
+  height: var(--_send-size);
+  padding: 0;
+  border: none;
+  border-radius: 50%;
   background: var(--_accent);
   color: #ffffff;
   font: inherit;
-  font-weight: 600;
+  line-height: 1;
   cursor: pointer;
+  transition:
+    background-color var(--_motion) var(--_ease),
+    transform var(--_motion) var(--_ease-pop);
+}
+
+.send:hover {
+  transform: scale(1.08);
+}
+
+.send:active {
+  transform: scale(0.92);
 }
 
 .send:disabled {
   opacity: 0.5;
   cursor: default;
+  transform: none;
 }
 
-/* The composer button doubles as the Stop control while a run is in flight. */
+/* The composer button doubles as the Stop control while a run is in flight \u2014
+   same circle, different glyph, so nothing moves when a run starts. */
 .send[data-state="running"] {
   background: var(--_muted);
 }
 
-/* \u2500\u2500 File attachments \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-/* The \u{1F4CE} picker button sits left of the input; hidden until data-attachments-url. */
-.attach-btn {
-  border: 1px solid var(--_border);
-  border-radius: 8px;
-  padding: 0 10px;
-  background: var(--_input-bg);
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
-}
-
-.attach-btn:hover {
-  border-color: var(--_accent);
+.send[data-state="idle"] .send-stop,
+.send[data-state="running"] .send-send {
+  display: none;
 }
 
-.attach-input {
-  display: none;
+/* Glyphs \u2014 one class, painted from the button's own colour so every state
+   (hover, recording, running) carries the icon with it. */
+.glyph {
+  width: var(--_glyph-size);
+  height: var(--_glyph-size);
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--_glyph-stroke);
+  stroke-linecap: round;
+  stroke-linejoin: round;
 }
 
-/* The \u{1F3A4} mic button; shown only once #wireVoice mounts it. */
-.voice-slot {
-  display: contents;
+.glyph--solid {
+  fill: currentColor;
+  stroke: none;
 }
 
-.voice-btn {
-  border: 1px solid var(--_border);
-  border-radius: 8px;
-  padding: 0 10px;
-  background: var(--_input-bg);
-  color: inherit;
-  font: inherit;
-  cursor: pointer;
+/* In an icon holder (header brand, launcher) the glyph takes the holder's size
+   rather than the composer's. */
+.icon-holder .glyph {
+  width: 100%;
+  height: 100%;
 }
 
-.voice-btn:hover {
-  border-color: var(--_accent);
+/* \u2500\u2500 File attachments \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* The picker button sits in the composer's tool row; hidden until
+   data-attachments-url. */
+.attach-input {
+  display: none;
 }
 
-.voice-btn:disabled {
-  cursor: default;
-  opacity: 0.6;
+/* The mic button's mount point; filled only once #wireVoice mounts the
+   control. */
+.voice-slot {
+  display: contents;
 }
 
 /* Recording: a red tint + a gentle pulse so it's clearly "live". */
 .voice-btn[data-state="recording"] {
-  border-color: var(--_danger);
   background: var(--_danger);
   color: #ffffff;
   animation: ag-ui-voice-pulse 1.2s ease-in-out infinite;
 }
 
+.voice-btn[data-state="recording"]:hover {
+  background: var(--_danger);
+  color: #ffffff;
+}
+
 @keyframes ag-ui-voice-pulse {
   0%, 100% { opacity: 1; }
   50% { opacity: 0.6; }
@@ -6015,16 +6293,35 @@ var STYLES = `
   color: var(--_danger);
 }
 
-/* Chat-history drawer \u2014 a slide-over within the chat panel. */
+/* Chat-history drawer \u2014 a slide-over within the chat panel.
+   The hidden attribute stays the single source of truth for open/closed (no
+   JS-driven animation state): display is transitioned discretely, so on close
+   the drawer stays displayed for the whole exit and is removed only at the end,
+   which is what lets the backdrop fade and the panel slide out. */
 .drawer {
   position: absolute;
   inset: 0;
   z-index: 5;
   display: flex;
+  transition: visibility var(--_motion) var(--_ease);
 }
 
+/* Closed. The overlay keeps its box (display, not none) so the backdrop and
+   panel inside it stay rendered and can transition both ways; visibility is
+   what takes the whole subtree out of the tab order, the a11y tree and hit
+   testing at rest, and it holds off until the slide has finished. */
 .drawer[hidden] {
-  display: none;
+  display: flex;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.drawer[hidden] .drawer-backdrop {
+  opacity: 0;
+}
+
+.drawer[hidden] .drawer-panel {
+  transform: translateX(-100%);
 }
 
 .checkpoints {
@@ -6042,10 +6339,21 @@ var STYLES = `
   box-shadow: 0 6px 24px rgb(0 0 0 / 12%);
   max-height: 60%;
   overflow-y: auto;
+  transform-origin: top center;
+  transition:
+    opacity var(--_motion) var(--_ease),
+    transform var(--_motion) var(--_ease),
+    visibility var(--_motion) var(--_ease);
 }
 
+/* Same idiom as the drawer: laid out at rest, hidden by visibility, so the
+   popover can animate open and closed. */
 .checkpoints[hidden] {
-  display: none;
+  display: flex;
+  visibility: hidden;
+  pointer-events: none;
+  opacity: 0;
+  transform: scale(0.96) translateY(-6px);
 }
 
 .checkpoints-title {
@@ -6107,6 +6415,8 @@ var STYLES = `
   position: absolute;
   inset: 0;
   background: rgba(20, 20, 50, 0.32);
+  opacity: 1;
+  transition: opacity var(--_motion) var(--_ease);
 }
 
 .drawer-panel {
@@ -6119,6 +6429,8 @@ var STYLES = `
   border-right: 1px solid var(--_border);
   box-shadow: var(--_shadow);
   overflow: hidden;
+  transform: none;
+  transition: transform var(--_motion) var(--_ease);
 }
 
 .drawer-header {
@@ -6748,7 +7060,10 @@ var VoiceInput = class {
     this.element.type = "button";
     this.element.className = "voice-btn";
     this.element.setAttribute("part", "voice-button");
-    this.element.textContent = "\u{1F3A4}";
+    const glyph = document.createElement("slot");
+    glyph.name = "icon-voice";
+    glyph.innerHTML = ICON_VOICE;
+    this.element.append(glyph);
     this.#setState("idle");
     this.element.addEventListener("click", () => {
       void this.toggle();
@@ -7865,8 +8180,12 @@ var AgUiChat = class extends HTMLElement {
   #attachSlot;
   /** Optional built-in header theme toggle; shown only with `data-theme-toggle`. */
   #themeToggle;
-  /** The collapsed-sidebar rail (an expand affordance; shown only for `placement="sidebar"`). */
-  #rail;
+  /** What the collapsed widget shrinks to: the floating launcher, or the sidebar rail. */
+  #launcher;
+  /** The launcher's unread badge; hidden at zero, and when the host opts out. */
+  #badge;
+  // Answers that finished while the widget was collapsed. Expanding clears it.
+  #unread = 0;
   /** Empty-state region at the top of the message list; hidden once anything renders. */
   #emptyWrap;
   /** Upload tray; created on connect only when `data-attachments-url` is set. */
@@ -7939,7 +8258,8 @@ var AgUiChat = class extends HTMLElement {
     this.#attachSlot = document.createElement("div");
     this.#voiceSlot = document.createElement("span");
     this.#themeToggle = document.createElement("button");
-    this.#rail = document.createElement("button");
+    this.#launcher = document.createElement("button");
+    this.#badge = document.createElement("span");
     this.#emptyWrap = document.createElement("div");
     this.#skillsMenu = new SkillsMenu((skill) => this.#applySkill(skill));
     this.#drawer = new ThreadDrawer({
@@ -8002,6 +8322,7 @@ var AgUiChat = class extends HTMLElement {
       return;
     }
     this.#input.value = "";
+    this.#autoGrow();
     const endpoint = verb === "resume" ? index.resumeUrl(runId) : index.forkUrl(runId);
     const agent = this.agentFactory({
       endpoint,
@@ -8332,7 +8653,7 @@ var AgUiChat = class extends HTMLElement {
     if (this.#readScopedItem(COLLAPSED_KEY) === "1") {
       this.setAttribute("collapsed", "");
     }
-    this.#syncRail();
+    this.#syncLauncher();
     this.#initSkills();
     if (this.#storageNs !== "" && this.conversationStore instanceof SessionStorageStore) {
       this.conversationStore = new SessionStorageStore(this.#storageNs);
@@ -8690,12 +9011,14 @@ Use the read_attachment tool with an id to read a file's contents.`
       this.#skillHint.textContent = this.#strings.skillNeeds.replace("{title}", skill.title).replace("{fields}", missing.join(", "));
       this.#skillHint.hidden = false;
       this.#input.value = text2;
+      this.#autoGrow();
       this.#input.focus();
       this.#selectFirstPlaceholder(text2);
       return;
     }
     this.#skillHint.hidden = true;
     this.#input.value = text2;
+    this.#autoGrow();
     if (skill.sendImmediately === false) {
       this.#input.focus();
       return;
@@ -8733,7 +9056,7 @@ Use the read_attachment tool with an id to read a file's contents.`
       this.removeAttribute("collapsed");
     }
     sessionStorage.setItem(this.#storageKey(COLLAPSED_KEY), collapsed ? "1" : "0");
-    this.#syncRail();
+    this.#setUnread(0);
     this.dispatchEvent(
       new CustomEvent(TOGGLE_EVENT, {
         detail: { collapsed },
@@ -8742,6 +9065,15 @@ Use the read_attachment tool with an id to read a file's contents.`
       })
     );
   }
+  /**
+   * Answers that finished while the widget was collapsed, and that the user has
+   * therefore not seen. Expanding (or {@link newChat}) clears it. The launcher's
+   * badge renders this; {@link UNREAD_EVENT} announces every change, so a host
+   * chrome can render its own instead.
+   */
+  get unread() {
+    return this.#unread;
+  }
   /** Flip the collapsed state. Bound to the built-in header toggle. */
   toggleCollapsed() {
     this.setCollapsed(!this.collapsed);
@@ -8935,6 +9267,7 @@ Use the read_attachment tool with an id to read a file's contents.`
     this.#resetState();
     this.#threadId = this.conversationStore.threadId();
     this.#setRunning(false);
+    this.#setUnread(0);
   }
   /** Drop the in-memory run + transcript, leaving the thread id untouched. */
   #resetState() {
@@ -9233,17 +9566,27 @@ Use the read_attachment tool with an id to read a file's contents.`
     const inputRow = document.createElement("div");
     inputRow.className = "input-row";
     inputRow.setAttribute("part", "composer");
+    const composer = document.createElement("div");
+    composer.className = "composer";
+    composer.setAttribute("part", "composer-surface");
+    const tools = document.createElement("div");
+    tools.className = "composer-tools";
+    tools.setAttribute("part", "composer-tools");
     this.#input.className = "input";
     this.#input.setAttribute("part", "input");
     this.#input.setAttribute("aria-label", this.#strings.message);
-    this.#input.rows = 2;
+    this.#input.rows = 1;
     this.#input.placeholder = this.#strings.inputPlaceholder;
     this.#input.addEventListener("keydown", (event) => this.#onKeydown(event));
     this.#input.addEventListener("input", () => this.#onInput());
     this.#send.className = "send";
     this.#send.type = "button";
     this.#send.setAttribute("part", "send");
-    this.#send.textContent = this.#strings.send;
+    this.#send.append(
+      this.#glyphSlot("icon-send", "send-send", ICON_SEND),
+      this.#glyphSlot("icon-stop", "send-stop", ICON_STOP)
+    );
+    this.#send.title = this.#strings.send;
     this.#send.setAttribute("aria-label", this.#strings.send);
     this.#send.dataset["state"] = "idle";
     this.#send.addEventListener("click", () => {
@@ -9259,7 +9602,7 @@ Use the read_attachment tool with an id to read a file's contents.`
     this.#attachButton.className = "attach-btn";
     this.#attachButton.type = "button";
     this.#attachButton.setAttribute("part", "attach-button");
-    this.#attachButton.textContent = "\u{1F4CE}";
+    this.#attachButton.append(this.#glyphSlot("icon-attach", "attach-glyph", ICON_ATTACH));
     this.#attachButton.title = this.#strings.attachFiles;
     this.#attachButton.setAttribute("aria-label", this.#strings.attachFiles);
     this.#attachButton.hidden = true;
@@ -9273,7 +9616,9 @@ Use the read_attachment tool with an id to read a file's contents.`
     this.#voiceSlot.className = "voice-slot";
     const footer = document.createElement("slot");
     footer.name = "footer";
-    inputRow.append(this.#attachButton, this.#voiceSlot, this.#input, this.#send, this.#fileInput);
+    tools.append(this.#attachButton, this.#voiceSlot, this.#send);
+    composer.append(this.#input, tools);
+    inputRow.append(composer, this.#fileInput);
     this.#chat.append(
       header,
       this.#messages,
@@ -9286,12 +9631,19 @@ Use the read_attachment tool with an id to read a file's contents.`
       this.#drawer.element,
       this.#checkpoints.element
     );
-    this.#rail.className = "rail";
-    this.#rail.type = "button";
-    this.#rail.setAttribute("part", "launcher");
-    this.#rail.setAttribute("aria-label", this.#strings.expand);
-    this.#rail.append(this.#iconElement("launcher", "launcher-icon", "\u{1F4AC}"));
-    this.#rail.addEventListener("click", () => this.setCollapsed(false));
+    this.#launcher.className = "launcher";
+    this.#launcher.type = "button";
+    this.#launcher.setAttribute("part", "launcher");
+    this.#launcher.setAttribute("aria-label", this.#strings.expand);
+    this.#badge.className = "launcher-badge";
+    this.#badge.setAttribute("part", "launcher-badge");
+    this.#badge.setAttribute("aria-hidden", "true");
+    this.#badge.hidden = true;
+    this.#launcher.append(
+      this.#iconElement("launcher", "launcher-icon", ICON_LAUNCHER, this.#launcherIconUrl()),
+      this.#badge
+    );
+    this.#launcher.addEventListener("click", () => this.setCollapsed(false));
     this.#chat.append(
       createResizeHandle({
         axis: () => this.#resizeAxis(),
@@ -9305,7 +9657,7 @@ Use the read_attachment tool with an id to read a file's contents.`
         label: this.#strings.resizePanel
       })
     );
-    this.#root.append(style, this.#chat, this.#rail);
+    this.#root.append(style, this.#chat, this.#launcher);
   }
   /**
    * Build a header control button: a named slot a host can project markup into,
@@ -9332,16 +9684,37 @@ Use the read_attachment tool with an id to read a file's contents.`
     return button2;
   }
   /**
-   * An icon holder wrapping a `<slot>` so a host can project custom markup; with
-   * a `data-icon-url` `<img>` as the slot's fallback, or a glyph when given.
+   * A `<slot>` a host can project its own mark into, falling back to one of the
+   * built-in glyphs. The markup is an author-written constant, never user or
+   * server data, so it is assigned directly rather than sanitised.
+   */
+  #glyphSlot(slotName, className, markup) {
+    const slot = document.createElement("slot");
+    slot.name = slotName;
+    slot.className = className;
+    slot.innerHTML = markup;
+    return slot;
+  }
+  /**
+   * The launcher's own image URL. `data-launcher-icon-url` lets the collapsed
+   * button carry a different mark from the header's — a product logo reads at
+   * 22px in a header bar but rarely at 26px in a circle — and falls back to the
+   * header icon so a single `data-icon-url` still feeds both.
+   */
+  #launcherIconUrl() {
+    return this.getAttribute("data-launcher-icon-url") ?? this.getAttribute("data-icon-url");
+  }
+  /**
+   * An icon holder wrapping a `<slot>` so a host can project custom markup;
+   * with an `<img>` as the slot's fallback when an icon URL is configured, or
+   * the given glyph markup when it is not.
    */
-  #iconElement(slotName, part, fallbackGlyph) {
+  #iconElement(slotName, part, fallbackGlyph, iconUrl = this.getAttribute("data-icon-url")) {
     const holder = document.createElement("span");
     holder.className = "icon-holder";
     holder.setAttribute("part", part);
     const slot = document.createElement("slot");
     slot.name = slotName;
-    const iconUrl = this.getAttribute("data-icon-url");
     if (iconUrl !== null) {
       const img = document.createElement("img");
       img.className = "icon-img";
@@ -9349,14 +9722,63 @@ Use the read_attachment tool with an id to read a file's contents.`
       img.alt = "";
       slot.append(img);
     } else if (fallbackGlyph !== null) {
-      slot.append(document.createTextNode(fallbackGlyph));
+      slot.innerHTML = fallbackGlyph;
     }
     holder.append(slot);
     return holder;
   }
-  /** Reflect the collapsed state on the rail's `aria-expanded`. */
-  #syncRail() {
-    this.#rail.setAttribute("aria-expanded", String(!this.collapsed));
+  /**
+   * Reflect the collapsed state and the unread count on the launcher.
+   *
+   * The count is also the launcher's accessible name: a badge that only exists
+   * as a coloured dot says nothing to a screen reader, and "Expand" alone would
+   * be a lie once answers are waiting behind it.
+   */
+  #syncLauncher() {
+    this.#launcher.setAttribute("aria-expanded", String(!this.collapsed));
+    const unread = this.#unread;
+    this.#badge.textContent = unread > 9 ? "9+" : String(unread);
+    this.#badge.hidden = unread === 0 || !this.#badgeEnabled();
+    const label = this.#badge.hidden ? this.#strings.expand : this.#strings.expandUnread.replace("{count}", String(unread));
+    this.#launcher.setAttribute("aria-label", label);
+    this.#launcher.title = label;
+  }
+  /**
+   * The unread badge, unlike every other affordance here, is on by default:
+   * a collapsed widget is the one state where an answer can arrive with nothing
+   * on screen to say so. `data-unread-badge="false"` turns it off for a host
+   * that drives its own chrome from the `ag-ui-unread` event.
+   */
+  #badgeEnabled() {
+    return this.getAttribute("data-unread-badge") !== "false";
+  }
+  /**
+   * Set the unread count, repaint the badge, and tell the host.
+   *
+   * The count is kept whether or not the badge renders it, so `unread` stays
+   * truthful for a host chrome and switching the badge on mid-session doesn't
+   * start from a number that was never counted.
+   */
+  #setUnread(count) {
+    this.#unread = count;
+    this.#syncLauncher();
+    this.dispatchEvent(
+      new CustomEvent(UNREAD_EVENT, {
+        detail: { unread: count },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /**
+   * Count an answer the user cannot have seen: one that finished while the
+   * widget was collapsed. Expanding is what marks them read.
+   */
+  #noteUnread() {
+    if (!this.collapsed) {
+      return;
+    }
+    this.#setUnread(this.#unread + 1);
   }
   /** Hide the empty-state region once the message list holds anything else. */
   #updateEmptyState() {
@@ -9366,6 +9788,7 @@ Use the read_attachment tool with an id to read a file's contents.`
   #onInput() {
     this.#skillsMenu.onInput(this.#input.value);
     this.#skillHint.hidden = true;
+    this.#autoGrow();
   }
   #onKeydown(event) {
     if (this.#skillsMenu.onKeydown(event)) {
@@ -9392,14 +9815,32 @@ Use the read_attachment tool with an id to read a file's contents.`
     this.#confirmAbort?.abort();
     this.#client?.cancel();
   }
-  /** Swap the composer button between Send (idle) and Stop (running). */
+  /**
+   * Swap the composer button between Send (idle) and Stop (running).
+   *
+   * The glyph is swapped by CSS from `data-state` — both are mounted — so this
+   * only has to move the accessible name, which is the button's whole label now
+   * that it carries no text.
+   */
   #setRunning(running) {
     this.#running = running;
     const label = running ? this.#strings.stop : this.#strings.send;
-    this.#send.textContent = label;
+    this.#send.title = label;
     this.#send.setAttribute("aria-label", label);
     this.#send.dataset["state"] = running ? "running" : "idle";
   }
+  /**
+   * Size the field to its content: one row when empty, growing with what is
+   * typed until the CSS ceiling takes over and it scrolls.
+   *
+   * Resetting to `auto` first is what makes it shrink again — `scrollHeight`
+   * never reports less than the current height, so measuring without the reset
+   * would ratchet the composer taller and never back down.
+   */
+  #autoGrow() {
+    this.#input.style.height = "auto";
+    this.#input.style.height = `${this.#input.scrollHeight}px`;
+  }
   async #submit() {
     if (this.#running) {
       return;
@@ -9410,6 +9851,7 @@ Use the read_attachment tool with an id to read a file's contents.`
       return;
     }
     this.#input.value = "";
+    this.#autoGrow();
     if (this.#attachTray?.hasPending() === true) {
       this.#appendNotice(
         "\u{1F4CE}",
@@ -9678,6 +10120,7 @@ Use the read_attachment tool with an id to read a file's contents.`
         }
         attachCopyButtons(bubble, this.#strings);
         this.#streamingBubble = null;
+        this.#noteUnread();
       },
       onToolCall: (call) => {
         this.#hidePending();
@@ -9904,7 +10347,7 @@ function setControlValue(el, value) {
 }
 
 // src/version.ts
-var VERSION = "0.21.0";
+var VERSION = "0.22.0";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,
@@ -9928,6 +10371,7 @@ export {
   TOOL_CALL_STATUS,
   TOOL_DISPLAY,
   ToolCallCard,
+  UNREAD_EVENT,
   VERSION,
   X_CONFIRM_KEY,
   X_DESTRUCTIVE_KEY,