@artooi/ag-ui-web-component 0.48.0 → 0.50.0

package/dist/index.js

@@ -284,7 +284,7 @@ function createChatSurfaceTools(surface) {
         if (!report.movable) {
           return {
             moved: false,
-            reason: report.fullBleed ? "the panel fills the screen, so there is nowhere to move it to" : report.collapseTo === "bar" || report.collapseTo === "none" ? "the panel is docked: it rises from the page's bottom bar and stays there" : report.draggable === false ? "this page has turned off moving the panel" : `the "${report.placement ?? ""}" placement owns the panel's position`,
+            reason: report.fullBleed ? "the panel fills the screen, so there is nowhere to move it to" : report.draggable === false ? "this page has turned off moving the panel" : `the "${report.placement ?? ""}" placement owns the panel's position`,
             suggestion: report.collapsible ? "minimise_chat" : null
           };
         }
@@ -5810,12 +5810,14 @@ function boxAt(grip, axis, rect, x2, y2) {
 var CORNER = {
   collapseTo: "launcher",
   launcherDraggable: true,
+  panelMovable: true,
   resizeAxis: "both",
   startsCollapsed: true
 };
 var DOCKED = {
   collapseTo: "launcher",
   launcherDraggable: false,
+  panelMovable: false,
   resizeAxis: "width",
   startsCollapsed: false
 };
@@ -5831,22 +5833,36 @@ var SURFACES = /* @__PURE__ */ new Map([
     {
       collapseTo: "launcher",
       launcherDraggable: false,
+      panelMovable: false,
       resizeAxis: "none",
       startsCollapsed: false
     }
   ],
   [
     "page",
-    { collapseTo: null, launcherDraggable: false, resizeAxis: "none", startsCollapsed: false }
+    {
+      collapseTo: null,
+      launcherDraggable: false,
+      panelMovable: false,
+      resizeAxis: "none",
+      startsCollapsed: false
+    }
   ],
   [
     "embedded",
-    { collapseTo: "header", launcherDraggable: false, resizeAxis: "both", startsCollapsed: false }
+    {
+      collapseTo: "header",
+      launcherDraggable: false,
+      panelMovable: false,
+      resizeAxis: "both",
+      startsCollapsed: false
+    }
   ]
 ]);
 var UNKNOWN = {
   collapseTo: "launcher",
   launcherDraggable: false,
+  panelMovable: false,
   resizeAxis: "both",
   startsCollapsed: false
 };
@@ -5868,6 +5884,7 @@ var DRAG_HEIGHT = "--_drag-height";
 var DOCK_BOTTOM = "--_dock-bottom";
 var DOCK_RIGHT = "--_dock-right";
 var LAUNCHER_KEY = "ag-ui-chat:launcher";
+var DOCK_KEY = "ag-ui-chat:dock";
 function asPoint(value) {
   if (typeof value !== "object" || value === null) {
     return null;
@@ -5878,6 +5895,18 @@ function asPoint(value) {
 function coversViewport(box, viewport) {
   return box.width >= viewport.width - 1 && box.height >= viewport.height - 1;
 }
+function hangsOff(box, viewport, screen) {
+  const slack = 0.5;
+  return box.left < viewport.left - slack || box.top < viewport.top - slack || box.right > screen.width + slack || box.bottom > screen.height + slack;
+}
+function atStartOf(viewport, box) {
+  return {
+    left: viewport.left,
+    top: viewport.top,
+    right: viewport.left + (box.right - box.left),
+    bottom: viewport.top + (box.bottom - box.top)
+  };
+}
 function insetFrom(corner, box, screen) {
   const side = (value) => `${Math.round(value)}px`;
   return [
@@ -5907,8 +5936,9 @@ var PanelPlacement = class {
    * header on screen, and the launcher is the handle then.
    */
   enablePanelDrag(header) {
+    this.#header = header;
     enablePanelDrag(header, {
-      enabled: () => !this.#host.collapsed() && this.#launcherDraggable(),
+      enabled: () => !this.#host.collapsed() && this.#canDragPanel(),
       rect: () => this.#host.element.getBoundingClientRect(),
       apply: (box, from) => this.#movePanel(box, from),
       commit: (box, from) => this.#commitPanel(box, from)
@@ -5931,12 +5961,19 @@ var PanelPlacement = class {
   }
   /** Build the eight resize grips into `chat`, with one of them in the tab order. */
   mountResizeGrips(chat) {
+    this.#resizing = false;
     for (const grip of RESIZE_GRIPS) {
       const handle = createResizeHandle(grip, {
         axis: () => this.#resizeAxis(),
         rect: () => this.#host.element.getBoundingClientRect(),
-        apply: (box) => this.#applyResize(grip, box),
-        commit: (box) => this.#commitResize(grip, box),
+        apply: (box) => {
+          this.#resizing = true;
+          this.#applyResize(grip, box);
+        },
+        commit: (box) => {
+          this.#resizing = false;
+          this.#commitResize(grip, box);
+        },
         label: this.#host.strings().resizePanel
       });
       handle.tabIndex = -1;
@@ -5954,13 +5991,63 @@ var PanelPlacement = class {
    * Drop the dragged size and its stored copy, so the placement's own size and
    * the host's tokens apply again. For a host entering a sized state of its
    * own, which a user's drag would otherwise outrank.
+   *
+   * A docked panel the user dragged off its dock goes back to it as well, and
+   * the stored spot with it: there the position is part of the same resting
+   * state the host is asking for. A corner panel keeps a dragged position, as
+   * it always has.
    */
   resetSize() {
+    const sized = this.#host.element.getBoundingClientRect();
     this.#host.element.style.removeProperty(DRAG_WIDTH);
     this.#host.element.style.removeProperty(DRAG_HEIGHT);
     this.#host.clearPreference(SIZE_KEY);
+    if (this.#docked()) {
+      if (this.#dockPos !== null) {
+        this.#host.element.style.removeProperty("--ag-ui-inset");
+      }
+      this.#dockPos = null;
+      this.#storeDockPosition(null);
+    } else {
+      this.#carrySpotWithSize(sized);
+    }
     this.syncResizeAnchor();
   }
+  /**
+   * Carry a stated corner spot along with a dragged size coming off.
+   *
+   * The size comes off toward the corner the layout holds still, so the top-left
+   * the spot is kept as moves with it, and a restore from the old one would swing
+   * the panel away from its launcher. Only that movement goes onto the spot, not
+   * where the box stands: in a window narrower than the spot the box is held
+   * short of it, and that is not something the user stated.
+   *
+   * Left alone while a host's own size is in force, because that cannot be told
+   * from the dragged size coming off, and it may be a state the host is about to
+   * leave: counting it would throw the spot off by as much as that state is
+   * bigger. A panel that is the screen needs no case of its own: the small-viewport
+   * block ignores a dragged size, so its box does not move.
+   *
+   * Left alone too under data-launcher-drag="false", where a spot left over from
+   * before the attribute is a record kept for the day it comes off, and nothing
+   * that happens to the box now is a statement about it.
+   */
+  #carrySpotWithSize(sized) {
+    const element = this.#host.element;
+    const box = element.getBoundingClientRect();
+    const spot = this.#cornerSpot ?? this.#readLauncherPosition();
+    const style = getComputedStyle(element);
+    if (spot?.panel === void 0 || !this.#launcherDraggable() || style.getPropertyValue("--ag-ui-width") !== "" || style.getPropertyValue("--ag-ui-height") !== "") {
+      return;
+    }
+    this.#writeCornerSpot({
+      ...spot,
+      panel: {
+        left: spot.panel.left + box.left - sized.left,
+        top: spot.panel.top + box.top - sized.top
+      }
+    });
+  }
   /**
    * A zero-sized box carrying the host's viewport insets as padding, so they
    * can be read back as used pixel lengths. See the `.viewport-probe` rule for
@@ -5985,6 +6072,49 @@ var PanelPlacement = class {
    * from the launcher would move the panel the user just placed.
    */
   #panelPos = null;
+  /**
+   * The spot #launcherPos and #panelPos were last stated as, or null while
+   * nothing has been stated since this element connected.
+   *
+   * Those two say where the launcher and the panel stand now, held inside the
+   * viewport, because that is where a press finds them and a drag starts from.
+   * This is what the user asked for, kept apart so that a window narrower than
+   * the spot, or a phone that took the panel full-bleed, gives it back unchanged
+   * once there is room again. Only a gesture, a move or a dragged size coming off
+   * changes it; re-applying it against a viewport never does, which is the difference from a clamped
+   * position quietly becoming the record one resize at a time.
+   */
+  #cornerSpot = null;
+  /**
+   * The inset a grip wrote on a corner panel with no spot, or null. A grip on an
+   * edge the layout holds moves the panel without stating a spot, so this is the
+   * only way to tell its inline inset from one a host wrote there, which stays,
+   * and to give it back once a phone has taken the panel full-bleed.
+   */
+  #gripInset = null;
+  /**
+   * The inset standing a panel with no spot at the start of a window a host's
+   * size fills, or null. Told apart from a host's own for the same reason, and it
+   * lasts only as long as that size does.
+   */
+  #fillInset = null;
+  /**
+   * Where the user dragged a docked panel, in viewport coordinates, or null
+   * while it stands on the bar or the anchor.
+   *
+   * Apart from the two corner positions above because it moves nothing else:
+   * a docked panel has no launcher to carry, and the corner it opens from is
+   * the dock's. Held as the user stated it and never as clamped, so a bar that
+   * grew, or a phone that took the panel full-bleed, gives the spot back
+   * unchanged once there is room for it again.
+   */
+  #dockPos = null;
+  /**
+   * The line a docked panel stays above, in viewport coordinates: the bar's
+   * top, or the anchor's. Infinite where neither is drawn. Measured by
+   * syncDock, which runs on every change either can make.
+   */
+  #dockTop = Number.POSITIVE_INFINITY;
   /**
    * The corner the panel opens away from, once this element is placing itself.
    * Null means the host's layout still decides, and the anchor is measured.
@@ -5996,6 +6126,10 @@ var PanelPlacement = class {
    * second while the panel is already being laid out on every one of them.
    */
   #anchor = { x: "right", y: "bottom" };
+  /** The header the panel drag listens on, stamped by #stampHeader. */
+  #header = null;
+  /** Whether a grip has applied a box it has not committed yet. */
+  #resizing = false;
   /** The eight grips, by name, so the keyboard-reachable one can be moved. */
   #resizeHandles = /* @__PURE__ */ new Map();
   /**
@@ -6013,7 +6147,7 @@ var PanelPlacement = class {
    * rather than collapsed to nothing.
    */
   #withinViewport(box) {
-    const viewport = this.#viewport();
+    const viewport = this.#docked() && this.#panelMovable() ? this.#dockRoom() : this.#viewport();
     const left = viewport.left + SCREEN_EDGE_MARGIN;
     const top = viewport.top + SCREEN_EDGE_MARGIN;
     const right = viewport.left + viewport.width - SCREEN_EDGE_MARGIN;
@@ -6030,10 +6164,12 @@ var PanelPlacement = class {
    *
    * Read from the stamp the drag helpers already set, rather than tracked
    * separately: one source of truth, and it clears on `pointercancel` as well
-   * as `pointerup`, which is the end a touch gesture usually gets.
+   * as `pointerup`, which is the end a touch gesture usually gets. The one
+   * gesture that stamps nothing is an arrow key on a grip, which applies a box
+   * per key and states it only when the key comes up, hence #resizing.
    */
   dragging() {
-    return this.#host.launcher.hasAttribute("data-dragging") || this.#host.root.querySelector(".header[data-dragging]") !== null;
+    return this.#resizing || this.#host.launcher.hasAttribute("data-dragging") || this.#host.root.querySelector(".header[data-dragging], .resize-handle[data-dragging]") !== null;
   }
   /** The report behind `AgUiChat.describeSurface`, whose doc is the contract. */
   describeSurface() {
@@ -6045,8 +6181,13 @@ var PanelPlacement = class {
       collapseTo: this.#surface().collapseTo,
       collapsed: this.#host.collapsed(),
       collapsible: this.#host.collapsible(),
-      movable: this.#launcherDraggable() && !fullBleed,
-      draggable: this.#launcherDraggable(),
+      movable: this.#panelMovable() && !fullBleed,
+      // The page's setting alone: true for every placement unless the host set
+      // `data-launcher-drag="false"`. Whether this panel moves is `movable`,
+      // and reading the launcher or the dock in here made the field change
+      // with `collapse-to`, so a docked sidebar reported that the page had
+      // turned moving off when the placement owned its position.
+      draggable: this.#host.element.getAttribute("data-launcher-drag") !== "false",
       fullBleed,
       box: {
         left: Math.round(box.left),
@@ -6064,7 +6205,7 @@ var PanelPlacement = class {
   }
   /** The move behind `AgUiChat.moveTo`, whose doc is the contract. */
   moveTo(corner, options = {}) {
-    if (!this.#launcherDraggable()) {
+    if (!this.#panelMovable()) {
       return false;
     }
     const restore = options.announce === true ? this.#captureGeometry() : null;
@@ -6074,11 +6215,22 @@ var PanelPlacement = class {
       return false;
     }
     const [edgeY, edgeX] = corner.split("-");
-    const nearX = viewport.left + EDGE_MARGIN;
-    const nearY = viewport.top + EDGE_MARGIN;
-    const left = edgeX === "left" ? nearX : Math.max(nearX, viewport.left + viewport.width - EDGE_MARGIN - box.width);
-    const top = edgeY === "top" ? nearY : Math.max(nearY, viewport.top + viewport.height - EDGE_MARGIN - box.height);
+    const docked = this.#docked();
+    const room = docked ? this.#dockRoom() : viewport;
+    const nearX = room.left + EDGE_MARGIN;
+    const nearY = room.top + EDGE_MARGIN;
+    const left = edgeX === "left" ? nearX : Math.max(nearX, room.left + room.width - EDGE_MARGIN - box.width);
+    const top = edgeY === "top" ? nearY : Math.max(nearY, room.top + room.height - EDGE_MARGIN - box.height);
     const host = { left, top, right: left + box.width, bottom: top + box.height };
+    if (docked) {
+      this.#dockPos = { left, top };
+      this.#writeDockInset(host);
+      this.#storeDockPosition(this.#dockPos);
+      if (restore !== null) {
+        this.#host.announceSurfaceChange(this.#host.strings().chatMoved, restore);
+      }
+      return true;
+    }
     const launcherWidth = this.#host.launcher.offsetWidth;
     const launcherHeight = this.#host.launcher.offsetHeight;
     this.#placePanelAndLauncher(host, {
@@ -6102,6 +6254,13 @@ var PanelPlacement = class {
    * puts the box back and animates it out of the wrong side. Absent values are
    * captured as absent and removed on the way back, rather than written as
    * empty strings that would outrank the placement.
+   *
+   * The surface may have changed by the time of the undo, so the two halves are
+   * put back apart. Both records are, always, each to its own store, so the
+   * memory and the storage cannot disagree and the surface they belong to finds
+   * them when it comes back. The inline values only mean something to the surface
+   * they were read from: written on any other, they pin a sidebar to where a
+   * floating panel used to be.
    */
   #captureGeometry() {
     const inset2 = this.#host.element.style.getPropertyValue("--ag-ui-inset");
@@ -6109,26 +6268,44 @@ var PanelPlacement = class {
     const corner = this.#host.element.getAttribute("data-expand-corner");
     const launcherPos = this.#launcherPos;
     const panelPos = this.#panelPos;
+    const dockPos = this.#dockPos ?? this.#readDockPosition();
     const expandCorner = this.#expandCorner;
+    const cornerSpot = this.#cornerSpot ?? this.#readLauncherPosition();
+    const owner = this.#positionOwner();
     return () => {
-      this.#restoreProperty("--ag-ui-inset", inset2);
-      this.#restoreProperty("--ag-ui-launcher-inset", launcherInset);
-      if (corner === null) {
-        this.#host.element.removeAttribute("data-expand-corner");
+      this.#dockPos = dockPos;
+      this.#storeDockPosition(dockPos);
+      if (cornerSpot === null) {
+        this.#cornerSpot = null;
+        this.#host.clearPreference(LAUNCHER_KEY);
       } else {
-        this.#host.element.setAttribute("data-expand-corner", corner);
+        this.#writeCornerSpot(cornerSpot);
       }
-      this.#launcherPos = launcherPos;
-      this.#panelPos = panelPos;
-      this.#expandCorner = expandCorner;
-      if (launcherPos === null) {
-        this.#host.clearPreference(LAUNCHER_KEY);
+      if (owner === this.#positionOwner()) {
+        this.#restoreProperty("--ag-ui-inset", inset2);
+        this.#restoreProperty("--ag-ui-launcher-inset", launcherInset);
+        if (corner === null) {
+          this.#host.element.removeAttribute("data-expand-corner");
+        } else {
+          this.#host.element.setAttribute("data-expand-corner", corner);
+        }
+        this.#launcherPos = launcherPos;
+        this.#panelPos = panelPos;
+        this.#expandCorner = expandCorner;
       } else {
-        this.#storeLauncherPosition();
+        this.#forgetCornerPosition();
       }
+      this.restoreLauncherPosition();
       this.syncResizeAnchor();
     };
   }
+  /** Which of the three kinds of surface decides where the panel stands. */
+  #positionOwner() {
+    if (this.#docked()) {
+      return "dock";
+    }
+    return this.#surface().launcherDraggable ? "corner" : "placement";
+  }
   /**
    * Which axes the current placement allows.
    *
@@ -6189,6 +6366,18 @@ var PanelPlacement = class {
     this.#anchor = anchor;
     this.#host.element.setAttribute("data-resize-anchor", `${anchor.y}-${anchor.x}`);
     this.#focusableGrip();
+    this.#stampHeader();
+  }
+  /**
+   * Tell the stylesheet whether the panel is the screen, for the header's cursor.
+   *
+   * Only this half of what refuses a header drag: the resting rules already answer
+   * for the placement and for data-launcher-drag="false", and neither of those
+   * re-applies anything when it changes, so a stamp taking them in would go on
+   * refusing, in the cursor, a drag the header would take.
+   */
+  #stampHeader() {
+    this.#header?.toggleAttribute("data-fills-screen", this.#fillsScreen());
   }
   /** Put a custom property back to a previous value, or remove it if there was none. */
   #restoreProperty(name, value) {
@@ -6242,7 +6431,10 @@ var PanelPlacement = class {
     const element = this.#host.element;
     return surfaceFor(element.getAttribute("placement"), element.getAttribute("collapse-to"));
   }
-  /** Whether the panel rises from the bottom bar or the host's anchor. */
+  /**
+   * Whether the panel rises from the bottom bar or the host's anchor, until the
+   * user drags it somewhere else.
+   */
   #docked() {
     const target = this.#surface().collapseTo;
     return target === "bar" || target === "none";
@@ -6275,8 +6467,98 @@ var PanelPlacement = class {
       element.style.removeProperty(DOCK_RIGHT);
     }
     element.toggleAttribute("data-dock-anchored", target === "none" && anchor !== null);
+    this.#dockTop = target === "bar" && height > 0 ? bar.getBoundingClientRect().top : target === "none" && anchor !== null ? anchor.getBoundingClientRect().top : Number.POSITIVE_INFINITY;
+    this.#placeDocked();
     return height;
   }
+  /**
+   * The part of the usable viewport a docked panel may stand in: all of it
+   * above the dock's line. The bar is what it minimises to, and the anchor is
+   * the host's own way back, so a dragged panel never covers either.
+   */
+  #dockRoom() {
+    const viewport = this.#viewport();
+    const bottom = Math.min(viewport.top + viewport.height, this.#dockTop);
+    return { ...viewport, height: Math.max(0, bottom - viewport.top) };
+  }
+  /**
+   * Put a docked panel back where the user dragged it, held inside its room.
+   *
+   * The inline inset comes off first, which is both how the panel's resting
+   * box is measured and what leaves a phone full-bleed: the small-viewport
+   * block reads the host's inset before its own, so a dragged spot written
+   * there would hold the panel off the screen's edges. The spot itself stays,
+   * for the next time there is room for it.
+   */
+  #placeDocked() {
+    if (!this.#docked() || !this.#panelMovable() || this.dragging()) {
+      return;
+    }
+    const at2 = this.#dockPos ?? this.#readDockPosition();
+    if (at2 === null) {
+      return;
+    }
+    this.#dockPos = at2;
+    this.#host.element.style.removeProperty("--ag-ui-inset");
+    const rest = this.#host.element.getBoundingClientRect();
+    if (coversViewport(rest, this.#viewport())) {
+      return;
+    }
+    this.syncResizeAnchor();
+    this.#writeDockInset(
+      clampPanel(
+        { left: at2.left, top: at2.top, right: at2.left + rest.width, bottom: at2.top + rest.height },
+        this.#dockRoom(),
+        SCREEN_EDGE_MARGIN
+      )
+    );
+  }
+  /** Write the inset that stands a docked panel at `box`. */
+  #writeDockInset(box) {
+    this.#host.element.style.setProperty(
+      "--ag-ui-inset",
+      insetFrom(this.#anchor, box, this.#screen())
+    );
+  }
+  /** Remember a docked panel's dragged spot, or forget it for null. */
+  #storeDockPosition(at2) {
+    if (at2 === null) {
+      this.#host.clearPreference(DOCK_KEY);
+      return;
+    }
+    this.#host.writePreference(DOCK_KEY, JSON.stringify({ left: at2.left, top: at2.top }));
+  }
+  /** The stored spot of a docked panel, or null for none or anything corrupt. */
+  #readDockPosition() {
+    const raw = this.#host.readPreference(DOCK_KEY);
+    if (raw === null) {
+      return null;
+    }
+    try {
+      return asPoint(JSON.parse(raw));
+    } catch {
+      return null;
+    }
+  }
+  /**
+   * Whether the header drag and moveTo may move the open panel: the
+   * placement's answer, unless the host turned moving off.
+   */
+  #panelMovable() {
+    return this.#host.element.getAttribute("data-launcher-drag") !== "false" && this.#surface().panelMovable;
+  }
+  /**
+   * Whether a header drag may start now. A panel that is the screen, on a phone
+   * or by a host's own sizing, has nowhere to go, and a drag there would pull it
+   * off the edges it fills.
+   */
+  #canDragPanel() {
+    return this.#panelMovable() && !this.#fillsScreen();
+  }
+  /** Whether the panel covers the usable viewport, as it stands now. */
+  #fillsScreen() {
+    return coversViewport(this.#host.element.getBoundingClientRect(), this.#viewport());
+  }
   /**
    * Whether this placement lets the launcher be dragged, read per interaction
    * because `placement` is a live attribute. `data-launcher-drag="false"` opts
@@ -6408,9 +6690,6 @@ var PanelPlacement = class {
    * back rather than leaving a stale inline one behind.
    */
   #applyLauncherPlacement(at2) {
-    if (!this.#launcherDraggable()) {
-      return;
-    }
     this.#launcherPos = at2;
     this.#panelPos = null;
     const panel = this.#host.element.getBoundingClientRect();
@@ -6431,6 +6710,7 @@ var PanelPlacement = class {
   }
   /** Move the launcher live during a drag, without persisting. */
   #moveLauncher(left, top) {
+    this.#cornerSpot = { left, top };
     this.#applyLauncherPlacement({ left, top });
   }
   /** Move the launcher and remember where, per tab, like the dragged size. */
@@ -6453,6 +6733,12 @@ var PanelPlacement = class {
    * other still names the old one would move the launcher for no reason.
    */
   #movePanel(box, from) {
+    if (this.#docked()) {
+      const held2 = clampPanel(box, this.#dockRoom(), SCREEN_EDGE_MARGIN);
+      this.#dockPos = { left: held2.left, top: held2.top };
+      this.#writeDockInset(held2);
+      return { held: held2, launcher: null };
+    }
     if (!this.#launcherDraggable()) {
       return { held: box, launcher: null };
     }
@@ -6492,6 +6778,10 @@ var PanelPlacement = class {
    */
   #commitPanel(box, from) {
     const { held, launcher } = this.#movePanel(box, from);
+    if (this.#docked()) {
+      this.#storeDockPosition({ left: held.left, top: held.top });
+      return;
+    }
     if (launcher === null) {
       return;
     }
@@ -6525,9 +6815,6 @@ var PanelPlacement = class {
    * its own right.
    */
   #restorePanelPosition(at2) {
-    if (!this.#launcherDraggable()) {
-      return;
-    }
     const rect = this.#host.element.getBoundingClientRect();
     const held = clampPanel(
       { left: at2.left, top: at2.top, right: at2.left + rect.width, bottom: at2.top + rect.height },
@@ -6553,6 +6840,9 @@ var PanelPlacement = class {
    * with it, the panel goes back where it was put; without it, the panel is
    * re-derived from the launcher and opens into whatever room the viewport has
    * now.
+   *
+   * Every caller is a gesture ending or a move being made, so where the two
+   * stand now is what was stated. A restore never calls this.
    */
   #storeLauncherPosition() {
     const position = this.#launcherPos;
@@ -6560,34 +6850,140 @@ var PanelPlacement = class {
       return;
     }
     const panel = this.#panelPos;
-    this.#host.writePreference(
-      LAUNCHER_KEY,
-      JSON.stringify(panel === null ? position : { ...position, panel })
-    );
+    this.#writeCornerSpot(panel === null ? position : { ...position, panel });
+  }
+  /** Make `spot` the stated one, and remember it. */
+  #writeCornerSpot(spot) {
+    this.#cornerSpot = spot;
+    this.#host.writePreference(LAUNCHER_KEY, JSON.stringify(spot));
   }
   /**
    * Re-apply the dragged position against the current viewport: on connect,
    * whenever the window resizes, and before an expand. The viewport that
    * stored a position may since have shrunk, and a launcher past the edge is
    * unreachable -- it is the only way back to a collapsed conversation.
+   *
+   * The one gate on whether a stored position is this element's to honour: the
+   * gestures check their own before they ever reach the placing below.
    */
   restoreLauncherPosition() {
-    const stored = this.#readLauncherPosition();
-    const launcher = this.#launcherPos ?? stored;
-    if (launcher === null) {
+    this.#placeFromRecord(true);
+    this.#stampHeader();
+  }
+  /**
+   * Re-apply it for a change in the panel's own layout, which needs no window or
+   * reopen to happen: a line typed in the composer is one. A position waiting to
+   * be handed back under data-launcher-drag="false" waits on, because a panel that leaves for the
+   * host's corner as the reader starts typing is a jump with no cause they can see.
+   */
+  settleLauncherPosition() {
+    this.#placeFromRecord(false);
+    this.#stampHeader();
+  }
+  /** The placing behind {@link restoreLauncherPosition}. */
+  #placeFromRecord(handBack) {
+    if (this.#docked()) {
+      this.#placeDocked();
+      return;
+    }
+    if (!this.#surface().launcherDraggable) {
       return;
     }
-    const panel = this.#panelPos ?? stored?.panel ?? null;
-    if (panel !== null) {
-      this.#launcherPos = { left: launcher.left, top: launcher.top };
-      this.#restorePanelPosition(panel);
+    const draggable = this.#launcherDraggable();
+    if (!draggable && this.#launcherPos !== null) {
+      if (!handBack) {
+        return;
+      }
+      this.releaseLauncherPosition();
+    }
+    const spot = draggable ? this.#cornerSpot ?? this.#readLauncherPosition() : null;
+    if (spot === null) {
+      this.#placeUnstated();
+      return;
+    }
+    if (this.#standFullBleed(spot)) {
+      return;
+    }
+    if (spot.panel !== void 0) {
+      this.#launcherPos = { left: spot.left, top: spot.top };
+      this.#restorePanelPosition(spot.panel);
       return;
     }
     const box = this.#launcherBox();
     this.#applyLauncherPlacement(
-      clampLauncher({ ...box, left: launcher.left, top: launcher.top }, this.#viewport())
+      clampLauncher({ ...box, left: spot.left, top: spot.top }, this.#viewport())
     );
   }
+  /**
+   * Leave a corner panel full-bleed if it has become the screen, and say whether
+   * it has.
+   *
+   * The inline inset comes off, because the small-viewport block reads the
+   * host's inset before its own: a spot written there holds the panel off the
+   * edges it should fill, and past them by the same amount, since its size is
+   * the screen's. What the panel covers is read before that, from the size
+   * alone, which no inset changes.
+   *
+   * The launcher stays a place of its own. It is positioned from the host box,
+   * so it is measured again from the box that has just moved, and it is held on
+   * the screen, because it is the way back from a collapsed conversation. The
+   * spot itself is untouched, for the next time there is room for it.
+   *
+   * Above the breakpoint nothing in the stylesheet takes the panel to the edges.
+   * A host's own size makes it the screen while the resting inset still spends a
+   * gutter on one corner, which hangs the box off the opposite one, so there it
+   * stands at the start of the room the host left free and keeps that inset. A
+   * box the placement already holds on the screen has no inset to keep, which is
+   * every phone, and a host's rule that placed the box itself.
+   */
+  #standFullBleed(spot) {
+    const element = this.#host.element;
+    const viewport = this.#viewport();
+    if (!coversViewport(element.getBoundingClientRect(), viewport)) {
+      return false;
+    }
+    element.style.removeProperty("--ag-ui-inset");
+    const rest = element.getBoundingClientRect();
+    const hanging = hangsOff(rest, viewport, this.#screen());
+    const box = hanging ? atStartOf(viewport, rest) : rest;
+    const launcher = { ...this.#launcherBox(), left: spot.left, top: spot.top };
+    this.#placePanelAndLauncher(box, { ...launcher, ...clampLauncher(launcher, viewport) });
+    if (!hanging) {
+      element.style.removeProperty("--ag-ui-inset");
+    }
+    return true;
+  }
+  /**
+   * Place a corner panel that has no spot, the half of {@link #standFullBleed}
+   * with nothing stated to keep and no launcher of its own to measure.
+   *
+   * Only an inset this element wrote comes off or goes back. One the host wrote
+   * inline is a token a host may state on a phone as anywhere else, and with no
+   * spot it never came from here.
+   */
+  #placeUnstated() {
+    const element = this.#host.element;
+    const inline = element.style.getPropertyValue("--ag-ui-inset");
+    const viewport = this.#viewport();
+    if (!coversViewport(element.getBoundingClientRect(), viewport)) {
+      if (inline === "" || inline === this.#fillInset) {
+        this.#restoreProperty("--ag-ui-inset", this.#gripInset ?? "");
+        this.syncResizeAnchor();
+      }
+      this.#fillInset = null;
+      return;
+    }
+    if (inline === this.#gripInset || inline === this.#fillInset) {
+      element.style.removeProperty("--ag-ui-inset");
+    }
+    const rest = element.getBoundingClientRect();
+    const screen = this.#screen();
+    if (element.style.getPropertyValue("--ag-ui-inset") === "" && hangsOff(rest, viewport, screen)) {
+      this.#fillInset = insetFrom({ x: "left", y: "top" }, atStartOf(viewport, rest), screen);
+      element.style.setProperty("--ag-ui-inset", this.#fillInset);
+      this.syncResizeAnchor();
+    }
+  }
   /** The persisted position for this instance, or null. */
   #readLauncherPosition() {
     const raw = this.#host.readPreference(LAUNCHER_KEY);
@@ -6615,12 +7011,22 @@ var PanelPlacement = class {
    * the switch inline and pins a sidebar to wherever the floating launcher was.
    */
   releaseLauncherPosition() {
+    if (this.#dockPos !== null && !(this.#docked() && this.#panelMovable())) {
+      this.#dockPos = null;
+      this.#host.element.style.removeProperty("--ag-ui-inset");
+    }
     if (this.#launcherDraggable()) {
       return;
     }
+    this.#forgetCornerPosition();
+  }
+  /** Take everything off that placed a corner panel, leaving its record alone. */
+  #forgetCornerPosition() {
     this.#launcherPos = null;
     this.#panelPos = null;
     this.#expandCorner = null;
+    this.#gripInset = null;
+    this.#fillInset = null;
     this.#host.element.style.removeProperty("--ag-ui-inset");
     this.#host.element.style.removeProperty("--ag-ui-launcher-inset");
     this.#host.element.removeAttribute("data-expand-corner");
@@ -6641,7 +7047,7 @@ var PanelPlacement = class {
    */
   #applyResize(grip, box) {
     box = this.#withinViewport(box);
-    if (this.#docked()) {
+    if (this.#docked() && this.#dockPos === null) {
       const now = this.#host.element.getBoundingClientRect();
       box = {
         left: grip.x === this.#anchor.x ? now.left : box.left,
@@ -6653,28 +7059,40 @@ var PanelPlacement = class {
       return box;
     }
     this.#applySize({ width: box.right - box.left, height: box.bottom - box.top });
-    if (grip.x !== this.#anchor.x && grip.y !== this.#anchor.y) {
-      return box;
-    }
-    const anchor = this.#anchor;
-    this.#host.element.style.setProperty("--ag-ui-inset", insetFrom(anchor, box, this.#screen()));
-    if (this.#launcherPos !== null) {
-      const size = this.#host.launcher.offsetWidth;
-      this.#launcherPos = {
-        left: anchor.x === "left" ? box.left : box.right - size,
-        top: anchor.y === "top" ? box.top : box.bottom - size
-      };
+    if (this.#docked()) {
+      this.#dockPos = { left: box.left, top: box.top };
+    }
+    if (grip.x === this.#anchor.x || grip.y === this.#anchor.y) {
+      const anchor = this.#anchor;
+      const inset2 = insetFrom(anchor, box, this.#screen());
+      this.#host.element.style.setProperty("--ag-ui-inset", inset2);
+      this.#gripInset = this.#launcherPos === null && !this.#docked() ? inset2 : null;
+      if (this.#launcherPos !== null) {
+        const size = this.#host.launcher.offsetWidth;
+        this.#launcherPos = {
+          left: anchor.x === "left" ? box.left : box.right - size,
+          top: anchor.y === "top" ? box.top : box.bottom - size
+        };
+      }
     }
-    if (this.#panelPos !== null) {
-      this.#panelPos = { left: box.left, top: box.top };
+    if (this.#panelPos !== null && !this.#docked()) {
+      const drawn = this.#host.element.getBoundingClientRect();
+      this.#panelPos = { left: drawn.left, top: drawn.top };
     }
     return box;
   }
   /** Finish a resize: keep the box, remember it, and re-read the pinned edges. */
   #commitResize(grip, box) {
     const held = this.#applyResize(grip, box);
+    if (this.#host.element.style.getPropertyValue("--ag-ui-inset") === this.#fillInset) {
+      this.#gripInset = this.#fillInset;
+      this.#fillInset = null;
+    }
     this.#persistSize({ width: held.right - held.left, height: held.bottom - held.top });
     this.#storeLauncherPosition();
+    if (this.#dockPos !== null) {
+      this.#storeDockPosition(this.#dockPos);
+    }
     this.syncResizeAnchor();
   }
   /**
@@ -8914,7 +9332,11 @@ var DOCK_STYLES = `
    The cap follows the token block's rule: what the host left free less the
    one gutter the anchored edge spends, so a panel grown to the cap runs from
    just above the bar to the far edge. A host therefore needs no inset to keep
-   the panel off its bar; --ag-ui-inset still wins when set.
+   the panel off its bar; --ag-ui-inset still wins when set. A panel the user
+   dragged off its dock is written there inline, which is how the dragged spot
+   outranks every rule below, the anchor gap included; the element holds that
+   spot above the bar or the anchor itself, and drops it on a phone, where the
+   small-viewport block reads the same property first.
 
    These blocks restate tokens and nothing else, and sit ahead of the phone
    block at no more weight than it has, so on a phone the panel is the screen
@@ -9891,7 +10313,8 @@ ${GROUPED} .tool-group[data-open="false"] .tool-group-list {
 
 /* A card inside the group is one line of the list: icon, name, and its
    Details control at the end, with the arguments and result opening under
-   the whole row. */
+   the whole row. Its ink is the second ink in every theme, unless the host
+   set the tool token, which then reaches the grouped calls too. */
 ${GROUPED} .tool-group .tool-call {
   max-width: 100%;
   align-self: stretch;
@@ -9902,7 +10325,7 @@ ${GROUPED} .tool-group .tool-call {
   border: 0;
   border-radius: 0;
   background: transparent;
-  color: var(--_ink-2);
+  color: var(--_tool-fg-set, var(--_ink-2));
   font-family: inherit;
   font-size: var(--_text-sm);
 }
@@ -10517,6 +10940,15 @@ var FRAME_STYLES = `
   touch-action: auto;
 }
 
+/* A panel that is the screen has nowhere to go, so its header refuses the drag
+   and must not offer it. No selector can see that a host has sized the panel to
+   the window, so the placement stamps this from the measurement that refuses the
+   drag. :host is carried for the specificity, not the scope, as below. Before the
+   dragging rule, so a drag the header did take keeps its grabbing cursor. */
+:host .header[data-fills-screen] {
+  cursor: auto;
+}
+
 /* :host is carried for the specificity, not the scope: the placement rules
    above are a host selector plus a class plus an attribute, and a bare
    .header[data-dragging] loses to them -- silently, because the drag still
@@ -10566,6 +10998,14 @@ var FRAME_STYLES = `
   flex: none;
 }
 
+/* Under every theme: once the host sets the header text, the header behind the
+   buttons is the host's colour, so their rest opacity goes. The frame's 0.85
+   lets the header through the glyph, which took white on a mid-blue header from
+   5.1:1 to 4.2:1. With the header text set, the opacity below reads a colour,
+   which no opacity can be, so it is invalid at computed-value time and falls to
+   the initial 1; unset, it reads the fallback. The glyph is each theme's own
+   business: this inherits the header text, and a theme that draws the buttons
+   in another ink reads the same switch to yield. */
 .header-btn {
   display: inline-flex;
   flex: 0 0 auto;
@@ -10582,12 +11022,15 @@ var FRAME_STYLES = `
   padding: 0;
   border-radius: 6px;
   cursor: pointer;
-  opacity: 0.85;
+  opacity: var(--_header-fg-set, 0.85);
 }
 
+/* The square is the host's own when it set one; otherwise it is mixed from the
+   header text when the host set that, so it reads on any header the host
+   painted; otherwise it is the theme's own. See the alias in the token defaults. */
 .header-btn:hover {
   opacity: 1;
-  background: rgba(255, 255, 255, 0.18);
+  background: var(--_header-btn-hover);
 }
 `;
 
@@ -10662,6 +11105,24 @@ var TOKEN_STYLES = `
   --_tool-fg: var(--ag-ui-tool-fg, var(--_ink-2));
   --_header-bg: var(--ag-ui-header-bg, var(--_bg));
   --_header-fg: var(--ag-ui-header-fg, var(--_fg));
+  /* Switches: a public token read with no fallback, named for it with -set.
+     With the token unset the switch computes to the guaranteed-invalid value,
+     so a rule that reads it with a fallback gets the fallback; that is how a
+     rule tells a token the host set from the theme's default for it. Every
+     theme's header buttons follow the header text only once a host sets it,
+     and a step group's calls follow the tool token only once a host sets it
+     (classic defaults --_tool-fg to the accent, which a group never drew). */
+  --_header-fg-set: var(--ag-ui-header-fg);
+  --_tool-fg-set: var(--ag-ui-tool-fg);
+  /* The header buttons' hover square, by default, once the header text is
+     set. Here it is the text at about a fifth, which every browser can mix;
+     where relative colour syntax is supported (see the block at the end) it
+     is the text's opposite instead. It reads the switch, so it is unset with
+     it, and the square below falls to the theme's own: the panel's hover shade
+     here, restated by each theme that draws another, so one rule in the frame
+     paints them all. */
+  --_header-btn-hover-auto: color-mix(in srgb, var(--_header-fg-set) 18%, transparent);
+  --_header-btn-hover: var(--ag-ui-header-btn-hover, var(--_header-btn-hover-auto, var(--_hover)));
   --_border: var(--ag-ui-border, var(--_line));
   --_radius: var(--ag-ui-radius, 12px);
   /* The panel's own frame, which is the one corner a placement can put against
@@ -11034,6 +11495,19 @@ var TOKEN_STYLES = `
     --_on-accent: var(--ag-ui-on-accent, #ffffff);
   }
 }
+
+/* The header buttons' default hover square as the header text's opposite,
+   so white text gets a darker square and dark text a lighter one. A square
+   mixed from the text itself moves the ground toward the glyph: white on a
+   mid-blue header fell from 5.1:1 to 3.75:1 under the pointer. Moving away
+   from it can only raise what the host's own pair reads. Gated on this
+   exact expression, so a browser that cannot compute it keeps the square
+   mixed from the text rather than losing the square altogether. */
+@supports (color: rgb(from red calc(255 - r) calc(255 - g) calc(255 - b))) {
+  :host {
+    --_header-btn-hover-auto: color-mix(in srgb, rgb(from var(--_header-fg-set) calc(255 - r) calc(255 - g) calc(255 - b)) 18%, transparent);
+  }
+}
 `;
 
 // src/ui/themes/classic_styles.ts
@@ -11087,6 +11561,7 @@ var CLASSIC_TOKENS = `
   --_tool-fg: var(--ag-ui-tool-fg, var(--_accent));
   --_header-bg: var(--ag-ui-header-bg, light-dark(var(--_accent), #1f1f30));
   --_header-fg: var(--ag-ui-header-fg, light-dark(#ffffff, #e8e8f2));
+  --_header-btn-hover: var(--ag-ui-header-btn-hover, var(--_header-btn-hover-auto, rgba(255, 255, 255, 0.18)));
   --_border: var(--ag-ui-border, light-dark(#e2e2ec, #33334a));
   --_muted: var(--ag-ui-muted, light-dark(#6b7280, #9aa0b4));
   --_success: var(--ag-ui-success, #15803d);
@@ -11173,14 +11648,15 @@ var LEDGER_STYLES = `
   vertical-align: 1px;
 }
 
+/* Both inks yield once the host sets the header text, since the header behind
+   them is then the host's colour (see the switches in the token defaults). */
 :host([theme~="ledger"]) .header-btn {
-  color: var(--_ink-3);
+  color: var(--_header-fg-set, var(--_ink-3));
   border-radius: 3px;
 }
 
 :host([theme~="ledger"]) .header-btn:hover {
-  background: var(--_hover);
-  color: var(--_fg);
+  color: var(--_header-fg-set, var(--_fg));
 }
 
 :host([theme~="ledger"]) .message--user {
@@ -11330,6 +11806,7 @@ var LEDGER_TOKENS = `
   --_msg-radius: var(--ag-ui-msg-radius, 0px);
   --_composer-radius: var(--ag-ui-composer-radius, 4px);
   --_user-bg: var(--ag-ui-user-bg, transparent);
+  --_header-btn-hover: var(--ag-ui-header-btn-hover, var(--_header-btn-hover-auto, var(--_hover)));
   --_frame-shadow: var(--ag-ui-frame-shadow, 0 0 0 1px var(--_line-strong), 0 20px 40px -28px rgb(0 0 0 / 0.45));
   --_launcher-bg: var(--ag-ui-launcher-bg, var(--_fg));
   --_launcher-fg: var(--ag-ui-launcher-fg, var(--_bg));
@@ -11448,14 +11925,17 @@ ${THEME_HOST.quiet} .header-title {
   letter-spacing: -0.01em;
 }
 
+/* The buttons sit back in the third ink on the panel. Once the host sets the
+   header text they draw in it instead, since the header behind them is then
+   the host's colour (see the switches in the token defaults). */
 ${THEME_HOST.quiet} .header-btn {
-  color: var(--_ink-3);
+  color: var(--_header-fg-set, var(--_ink-3));
   border-radius: 8px;
 }
 
+/* The glyph takes the header text, which is the full ink when that is unset. */
 ${THEME_HOST.quiet} .header-btn:hover {
-  color: var(--_fg);
-  background: var(--_hover);
+  color: var(--_header-fg);
 }
 
 ${THEME_HOST.quiet} .message--user {
@@ -11598,14 +12078,15 @@ var SOFT_STYLES = `
   background: linear-gradient(140deg, color-mix(in oklch, var(--_accent) 55%, var(--_bg)), var(--_accent));
 }
 
+/* Both inks yield once the host sets the header text, since the header behind
+   them is then the host's colour (see the switches in the token defaults). */
 :host([theme~="soft"]) .header-btn {
-  color: var(--_ink-3);
+  color: var(--_header-fg-set, var(--_ink-3));
   border-radius: 10px;
 }
 
 :host([theme~="soft"]) .header-btn:hover {
-  background: var(--_tint-2);
-  color: var(--_accent-ink);
+  color: var(--_header-fg-set, var(--_accent-ink));
 }
 
 :host([theme~="soft"]) .messages {
@@ -11726,6 +12207,7 @@ var SOFT_TOKENS = `
   --_tint: var(--ag-ui-tint, color-mix(in oklch, var(--_accent) 5%, var(--_bg)));
   --_tint-2: var(--ag-ui-tint-2, color-mix(in oklch, var(--_accent) 13%, var(--_bg)));
   --_header-bg: var(--ag-ui-header-bg, var(--_tint));
+  --_header-btn-hover: var(--ag-ui-header-btn-hover, var(--_header-btn-hover-auto, var(--_tint-2)));
   --_user-bg: var(--ag-ui-user-bg, var(--_tint-2));
   --_border: var(--ag-ui-border, color-mix(in oklch, var(--_accent) 14%, var(--_bg)));
   --_radius: var(--ag-ui-radius, 16px);
@@ -19612,13 +20094,26 @@ var AgUiChat = class extends HTMLElement {
    * a field so `removeEventListener` on disconnect gets the same reference.
    */
   #onViewportResize = () => {
-    this.#placement.publishVisualViewport();
-    this.#syncDock();
-    if (this.#placement.dragging()) {
-      return;
+    if (this.#readyToPlace()) {
+      this.#placement.restoreLauncherPosition();
+    }
+  };
+  /**
+   * The same for a change only the panel's own layout shows: a host's size, a
+   * viewport inset token, a line typed in the composer. Not a moment to hand a
+   * position back, so a panel under data-launcher-drag="false" stays put.
+   */
+  #onLayoutChange = () => {
+    if (this.#readyToPlace()) {
+      this.#placement.settleLauncherPosition();
     }
-    this.#placement.restoreLauncherPosition();
   };
+  /** Bring the viewport's readings up to date, and say whether placing may follow. */
+  #readyToPlace() {
+    this.#placement.publishVisualViewport();
+    this.#syncDock();
+    return !this.#placement.dragging();
+  }
   /** Mic button mount point (input row); the control mounts on connect when enabled. */
   #voiceSlot;
   /** The composer's mic, mounted on connect when transcription is available. */
@@ -20411,6 +20906,12 @@ var AgUiChat = class extends HTMLElement {
     const dockObserver = new ResizeObserver(() => this.#syncDock());
     dockObserver.observe(this.#dockBar);
     this.#connection.signal.addEventListener("abort", () => dockObserver.disconnect());
+    const layoutObserver = new ResizeObserver(this.#onLayoutChange);
+    layoutObserver.observe(this.#messages);
+    this.#connection.signal.addEventListener("abort", () => layoutObserver.disconnect());
+    this.#placement.probe.addEventListener("transitionrun", this.#onLayoutChange, {
+      signal: this.#connection.signal
+    });
     this.#syncDock();
     if (this.#surface().collapseTo === "none") {
       this.dispatchEvent(
@@ -20800,7 +21301,9 @@ var AgUiChat = class extends HTMLElement {
    * `movable` folds two separate reasons into the one answer a caller needs:
    * a placement that places itself owns its position, and a panel that fills
    * the screen has nowhere to go. Reporting them apart would make every caller
-   * re-derive the same conjunction.
+   * re-derive the same conjunction. A corner panel docked under
+   * `collapse-to="bar"` or `"none"` is movable on a wide viewport, like the
+   * corner panel it is.
    */
   describeSurface() {
     return this.#placement.describeSurface();
@@ -20814,7 +21317,8 @@ var AgUiChat = class extends HTMLElement {
    * the corner it opens from is re-picked, and switching placement hands
    * everything back. What it must not do is claim a move it did not make --
    * hence the boolean, and hence {@link describeSurface} existing so a caller
-   * can ask first.
+   * can ask first. A docked panel moves too, within the room above its bar or
+   * anchor, and remembers the spot as a header drag would.
    */
   moveTo(corner, options = {}) {
     return this.#placement.moveTo(corner, options);
@@ -20822,6 +21326,9 @@ var AgUiChat = class extends HTMLElement {
   /**
    * Drop a size the user dragged, and its stored copy, so the placement's
    * default and the host's `--ag-ui-width` / `--ag-ui-height` apply again.
+   * Under `collapse-to="bar"` or `"none"` it also returns a panel the user
+   * dragged off its dock to the dock, and forgets the stored spot; a corner
+   * panel keeps a dragged position.
    */
   resetSize() {
     this.#placement.resetSize();
@@ -21337,6 +21844,8 @@ var AgUiChat = class extends HTMLElement {
     const probe = this.#placement.probe;
     probe.className = "viewport-probe";
     probe.setAttribute("aria-hidden", "true");
+    probe.style.borderRadius = "var(--_viewport-inset-top) var(--_viewport-inset-right) var(--_viewport-inset-bottom) var(--_viewport-inset-left)";
+    probe.style.transition = "border-radius 1ms";
     this.#root.replaceChildren(probe, this.#announcer.region, this.#chat, this.#dockBar);
   }
   /**
@@ -21984,7 +22493,7 @@ function setControlValue(el2, value) {
 }
 
 // src/version.ts
-var VERSION = "0.48.0";
+var VERSION = "0.50.0";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,