@artooi/ag-ui-web-component 0.21.0 → 0.23.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,15 @@ 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>`;
+var ICON_FILE = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg>`;
+var ICON_FILE_IMAGE = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="4.5" width="17" height="15" rx="2.5"/><circle cx="9" cy="10" r="1.5"/><path d="M4.5 17.5 9 13.5l3.5 3 3-2.5 4.5 4"/></svg>`;
+var ICON_FILE_PDF = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><rect class="glyph--solid" x="7.5" y="13.5" width="9" height="4.5" rx="1"/></svg>`;
+var ICON_FILE_TEXT = `<svg class="glyph" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><path d="M8.5 13.5h7M8.5 17h4.5"/></svg>`;
 
 // src/skills/fill_template.ts
 var PLACEHOLDER_RE = /\{([a-zA-Z_][a-zA-Z0-9_]*)\}/g;
@@ -509,6 +519,7 @@ var DEFAULT_UI_STRINGS = {
   newChat: "New chat",
   collapse: "Collapse",
   expand: "Expand",
+  expandUnread: "Expand \u2014 {count} unread",
   toggleTheme: "Toggle theme",
   copyCode: "Copy",
   copied: "Copied",
@@ -716,7 +727,7 @@ function renderChip(ref) {
   const icon = document.createElement("span");
   icon.className = "attachment-chip-icon";
   icon.setAttribute("part", "attachment-chip-icon");
-  icon.textContent = iconFor(ref.mime);
+  icon.innerHTML = iconFor(ref.mime);
   icon.setAttribute("aria-hidden", "true");
   const name = document.createElement("span");
   name.className = "attachment-chip-name";
@@ -732,15 +743,15 @@ function renderChip(ref) {
 }
 function iconFor(mime) {
   if (mime.startsWith("image/")) {
-    return "\u{1F5BC}";
+    return ICON_FILE_IMAGE;
   }
   if (mime === "application/pdf") {
-    return "\u{1F4D5}";
+    return ICON_FILE_PDF;
   }
   if (mime.startsWith("text/")) {
-    return "\u{1F4C4}";
+    return ICON_FILE_TEXT;
   }
-  return "\u{1F4CE}";
+  return ICON_FILE;
 }
 function formatBytes(bytes) {
   if (bytes < 1024) {
@@ -906,7 +917,7 @@ var AttachmentTray = class {
     const icon = document.createElement("span");
     icon.className = "attachment-chip-icon";
     icon.setAttribute("part", "attachment-chip-icon");
-    icon.textContent = iconFor(item.file.type);
+    icon.innerHTML = iconFor(item.file.type);
     icon.setAttribute("aria-hidden", "true");
     const name = document.createElement("span");
     name.className = "attachment-chip-name";
@@ -4532,6 +4543,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 +4737,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;
+}
+
+: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, hide the panel, and
-   reveal the rail. Higher specificity than the generic collapse rules, so it
-   wins regardless of source order. */
+/* 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 +4982,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 +5726,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; }
@@ -5641,11 +5923,25 @@ var STYLES = `
   display: contents;
 }
 
+/* The padding is the only separation the tray gets: its slot is display:
+   contents, so the tray is a direct child of the .chat column, and that column
+   sets no gap. The bottom value keeps a chip off the composer's top edge.
+   The inline value here is only the default: the page placement overrides
+   padding-inline further down to compute its reading-column gutter, and wins
+   on specificity whichever way this declaration is written. Read the two
+   together before changing either. */
 .attachment-tray {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
-  padding: 8px 12px 0;
+  padding: 8px 12px;
+}
+
+/* The tray sets the hidden property while empty, and an author display beats
+   the UA stylesheet's rule for it, so without this the empty tray keeps
+   laying out and its padding is permanent dead space above the composer. */
+.attachment-tray[hidden] {
+  display: none;
 }
 
 .attachment-chips {
@@ -5681,15 +5977,29 @@ var STYLES = `
   overflow-wrap: anywhere;
 }
 
+/* A chip carries its own text colour because it carries its own background.
+   The same chip renders in two places with opposite inherited colours: in the
+   composer tray it inherits the panel's, but on a sent user bubble it inherits
+   the user foreground, which is white on the stock light theme. Against the
+   assistant surface underneath that was a 1.13:1 filename \u2014 invisible, and only
+   the size stayed legible because it sets its own muted colour. Pair the colour
+   with the background it belongs to, and both placements read the same.
+   Overridden below for an errored chip, which must keep its red. */
 .attachment-chip {
   display: inline-flex;
   align-items: center;
   gap: 6px;
+  /* Without this the 100% below caps the content box, so the chip still
+     overflows its container by its own padding and border. Invisible while a
+     character cap kept names short; routine once the container is what bounds
+     the name. */
+  box-sizing: border-box;
   max-width: 100%;
   padding: 4px 8px;
   border: 1px solid var(--_border);
   border-radius: 999px;
   background: var(--_assistant-bg);
+  color: var(--_text);
   font-size: 0.85em;
   position: relative;
 }
@@ -5699,11 +6009,31 @@ var STYLES = `
   color: var(--_danger);
 }
 
+/* The type mark. Painted from currentColor, so it carries the chip's state
+   with it and turns red along with an errored one; muted by opacity rather
+   than a colour, which is what keeps that true. Sized from the chip's own text
+   rather than --ag-ui-glyph-size, the way an icon holder's glyph takes the
+   holder's size: the composer's 18px buttons would make a chip button-height. */
+.attachment-chip-icon {
+  display: inline-flex;
+  flex: none;
+  opacity: 0.75;
+}
+
+.attachment-chip-icon .glyph {
+  width: 1.25em;
+  height: 1.25em;
+}
+
+/* No character cap: the chip is already max-width 100%, so its container is
+   what bounds the name, and a fixed cap only truncated names the chip had room
+   for. min-width: 0 is what lets the flex item shrink past its content, so the
+   ellipsis appears at the container edge instead of the chip overflowing. */
 .attachment-chip-name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 14ch;
+  min-width: 0;
 }
 
 .attachment-chip-size {
@@ -6015,16 +6345,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 +6391,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 +6467,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 +6481,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 +7112,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();
@@ -7742,14 +8109,17 @@ var AgUiChat = class extends HTMLElement {
     ...this.#toolRegistry.tools()
   ];
   /**
-   * Per-run context provider. Defaults to the compact page map (when a
-   * {@link getPageMap} provider is set and {@link autoInjectPageMap} is on)
-   * plus a one-line manifest of the files attached to the message being sent,
-   * so the agent knows which `read_attachment` ids are available.
+   * Per-run context provider. Defaults to the compact page map, when a
+   * {@link getPageMap} provider is set and {@link autoInjectPageMap} is on.
+   *
+   * It used to append a one-line manifest of the message's attachments too.
+   * The server now derives that manifest from the refs riding the messages, so
+   * the client's copy only duplicated it, on exactly the turn a file was
+   * attached. Attachments still reach the agent; they reach it through the
+   * message, which is where they were already.
    */
   getContext = () => [
-    ...createPageMapContext(this.getPageMap, this.autoInjectPageMap),
-    ...this.#attachmentContext()
+    ...createPageMapContext(this.getPageMap, this.autoInjectPageMap)
   ];
   /**
    * Navigable routes the agent can jump to via the built-in `route.*` tools.
@@ -7865,8 +8235,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. */
@@ -7877,8 +8251,6 @@ var AgUiChat = class extends HTMLElement {
   #voice = null;
   /** Whether the element is currently in the DOM; gates the connect-time warning. */
   #connected = false;
-  /** Refs attached to the message currently being sent (the context manifest). */
-  #runAttachments = [];
   #client = null;
   // Seed for the next client. Once one exists it owns the live value (the
   // agent applies STATE_SNAPSHOT / STATE_DELTA into it), so this is only the
@@ -7939,7 +8311,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 +8375,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 +8706,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);
@@ -8563,22 +8937,6 @@ var AgUiChat = class extends HTMLElement {
       }
     });
   }
-  /** The one-line manifest of the message's attachments, for the run context. */
-  #attachmentContext() {
-    if (this.#runAttachments.length === 0) {
-      return [];
-    }
-    const lines = this.#runAttachments.map(
-      (ref) => `- ${ref.name} (id: ${ref.id}, ${ref.mime || "unknown type"}, ${ref.size} bytes)`
-    );
-    return [
-      {
-        description: "Files the user attached to this message",
-        value: `${lines.join("\n")}
-Use the read_attachment tool with an id to read a file's contents.`
-      }
-    ];
-  }
   /**
    * When `data-threads-url` is set, route thread enumeration / load / rename /
    * delete through that server endpoint (wrapping the current store as the
@@ -8690,12 +9048,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 +9093,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 +9102,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 +9304,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() {
@@ -8946,7 +9316,6 @@ Use the read_attachment tool with an id to read a file's contents.`
     this.#toolCards.clear();
     this.#serverSettled.clear();
     this.#initialMessages = [];
-    this.#runAttachments = [];
     this.#attachTray?.clear();
     this.#messages.replaceChildren(this.#emptyWrap);
     this.#updateEmptyState();
@@ -9233,17 +9602,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 +9638,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 +9652,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 +9667,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 +9693,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 +9720,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.
    */
-  #iconElement(slotName, part, fallbackGlyph) {
+  #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, 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 +9758,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 +9824,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 +9851,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 +9887,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}",
@@ -9449,7 +9927,6 @@ Use the read_attachment tool with an id to read a file's contents.`
     if (attachments.length > 0) {
       bubble.appendChild(renderAttachmentChips(attachments));
     }
-    this.#runAttachments = attachments;
     this.dispatchEvent(
       new CustomEvent(SUBMIT_EVENT, {
         detail: { content, attachments },
@@ -9678,6 +10155,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();
@@ -9726,7 +10204,6 @@ Use the read_attachment tool with an id to read a file's contents.`
         this.#hidePending();
         this.#setRunning(false);
         this.#streamingBubble = null;
-        this.#runAttachments = [];
         for (const card of this.#toolCards.values()) {
           if (!card.settled) {
             card.settle(TOOL_CALL_STATUS.DONE, this.#strings.noResult);
@@ -9904,7 +10381,7 @@ function setControlValue(el, value) {
 }
 
 // src/version.ts
-var VERSION = "0.21.0";
+var VERSION = "0.23.0";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,
@@ -9928,6 +10405,7 @@ export {
   TOOL_CALL_STATUS,
   TOOL_DISPLAY,
   ToolCallCard,
+  UNREAD_EVENT,
   VERSION,
   X_CONFIRM_KEY,
   X_DESTRUCTIVE_KEY,