@artooi/ag-ui-web-component 0.39.0 → 0.40.0

package/dist/index.js

@@ -982,6 +982,7 @@ var DEFAULT_UI_STRINGS = {
   attachmentsStillUploading: "{n} file still uploading \u2014 it was not sent with this message and is still attached.",
   notConnected: "This chat isn\u2019t connected to an agent, so the message wasn\u2019t sent.",
   continueNeedsTurn: "Type the next turn in the composer first, then pick a run to continue.",
+  continueWhileRunning: "Wait for the current answer or stop it, then pick a run to continue.",
   skillNeeds: "\u201C{title}\u201D needs {fields} \u2014 fill it in below, then send.",
   message: "Message",
   inputPlaceholder: "Ask anything\u2026",
@@ -1418,12 +1419,12 @@ var ToolCatalog = class {
           },
           required: ["question"]
         },
-        handler: (args) => this.#askUser(args)
+        handler: (args, callId) => this.#askUser(args, callId)
       }
     ];
   }
   /** Render the `ask_user` question card and resolve with the user's answer. */
-  async #askUser(args) {
+  async #askUser(args, callId) {
     const question = typeof args["question"] === "string" ? args["question"] : "";
     const request = { question };
     const rawOptions = args["options"];
@@ -1435,19 +1436,59 @@ var ToolCatalog = class {
     }
     const signal = this.#host.decision.open();
     this.#host.hidePending();
-    const renderer = this.#host.askUserRenderer();
-    const answer = renderer !== null ? (
-      // Called on the element, as `this.askUserRenderer(...)` always was.
-      await renderer.call(this.#host.element, request, { signal })
-    ) : await requestQuestion(this.#host.ensureGroup(), request, {
+    const builtIn = () => requestQuestion(this.#host.ensureGroup(), request, {
       signal,
       strings: this.#host.strings()
     });
+    const renderer = this.#host.askUserRenderer();
+    let answer;
+    if (renderer === null) {
+      answer = await builtIn();
+    } else {
+      try {
+        answer = await renderer.call(this.#host.element, request, { signal });
+      } catch (error) {
+        answer = await this.#afterRendererFailed(error, signal, callId, builtIn);
+      }
+    }
     this.#host.decision.close();
     this.#host.updateEmptyState();
     this.#host.follow();
     return answer;
   }
+  /**
+   * Answer an `ask_user` call whose host renderer threw or rejected instead of
+   * answering: put the question to the built-in card.
+   *
+   * The same answer `approvalRenderer` gets for the same failure, and for the
+   * same reason: a renderer is presentation, not a policy. It decides how the
+   * question looks, never whether the agent's question is put to the user.
+   * Uncaught, the throw escaped the handler, so the call's card settled as an
+   * error quoting the host's message, that message went on to the agent as the
+   * tool result -- a detail of the host's page, never written for the model --
+   * and the pending decision was never closed, so the next Stop, in whatever
+   * round, aborted the signal of a wait that had already ended rather than
+   * finding nothing open. The built-in card still asks,
+   * and the run carries on as if no renderer had been set. Reported the way a
+   * failed `render` is, and for the same reason: survived is not the same as
+   * findable.
+   *
+   * Except when the wait was already abandoned. A renderer honouring its signal
+   * rejects once a Stop fires it, which is the signal working rather than the
+   * renderer failing, and a card drawn then would ask about a run the user just
+   * ended. So it resolves with the empty answer the built-in card resolves with
+   * on the same abort, and says nothing.
+   */
+  #afterRendererFailed(error, signal, callId, builtIn) {
+    if (signal.aborted) {
+      return Promise.resolve("");
+    }
+    console.warn(
+      `ag-ui-chat: askUserRenderer failed for tool call ${callId}, so the built-in question card asks instead`,
+      error
+    );
+    return builtIn();
+  }
 };
 
 // src/skills/skill_name_from.ts
@@ -2711,8 +2752,15 @@ var ComposerAttachments = class {
    * built-in multipart endpoint: reveal the 📎 button, wire the hidden file
    * input + drag-and-drop, and mount the tray. With neither, the affordance
    * stays hidden and the chat degrades to text-only.
+   *
+   * Called on every connect, so it starts by taking down the tray the last
+   * connection mounted: that one was disposed when the element left, and the
+   * attributes that decide whether there is a tray at all may have changed
+   * since. The shell outlives a connection, so its listeners go under `signal`.
    */
-  wire() {
+  wire(signal) {
+    this.#tray?.element.remove();
+    this.#tray = null;
     const url = this.#host.element.getAttribute("data-attachments-url");
     const upload = this.#host.uploadHandler() ?? this.#defaultUploadHandler(url);
     if (upload === null) {
@@ -2734,8 +2782,8 @@ var ComposerAttachments = class {
     this.#host.slot.appendChild(this.#tray.element);
     this.#host.fileInput.accept = accept;
     this.#host.button.hidden = false;
-    this.#enableDragAndDrop();
-    this.#enablePaste(tray);
+    this.#enableDragAndDrop(signal);
+    this.#enablePaste(tray, signal);
   }
   /** The queueing behind `AgUiChat.attachFile`, whose doc is the contract. */
   attach(file) {
@@ -2779,25 +2827,37 @@ var ComposerAttachments = class {
     return Number.isFinite(parsed) && parsed >= 0 ? parsed : DEFAULT_ATTACHMENT_MAX_BYTES;
   }
   /** Accept files dropped anywhere on the chat shell into the tray. */
-  #enableDragAndDrop() {
+  #enableDragAndDrop(signal) {
     const chat = this.#host.chat;
-    chat.addEventListener("dragover", (event) => {
-      event.preventDefault();
-      chat.classList.add("chat--dragover");
-    });
-    chat.addEventListener("dragleave", () => {
-      chat.classList.remove("chat--dragover");
-    });
-    chat.addEventListener("drop", (event) => {
-      event.preventDefault();
-      chat.classList.remove("chat--dragover");
-      const files = event.dataTransfer?.files;
-      if (files !== void 0) {
-        for (const file of Array.from(files)) {
-          this.#tray?.add(file);
+    chat.addEventListener(
+      "dragover",
+      (event) => {
+        event.preventDefault();
+        chat.classList.add("chat--dragover");
+      },
+      { signal }
+    );
+    chat.addEventListener(
+      "dragleave",
+      () => {
+        chat.classList.remove("chat--dragover");
+      },
+      { signal }
+    );
+    chat.addEventListener(
+      "drop",
+      (event) => {
+        event.preventDefault();
+        chat.classList.remove("chat--dragover");
+        const files = event.dataTransfer?.files;
+        if (files !== void 0) {
+          for (const file of Array.from(files)) {
+            this.#tray?.add(file);
+          }
         }
-      }
-    });
+      },
+      { signal }
+    );
   }
   /**
    * Turn a very long text paste into an attachment instead of a wall of text.
@@ -2867,24 +2927,28 @@ var ComposerAttachments = class {
    * clipboard, and swallowing the words someone meant to paste in order to
    * attach a picture they did not is the worse of the two failures.
    */
-  #enablePaste(tray) {
-    this.#host.chat.addEventListener("paste", (event) => {
-      const clipboard = event.clipboardData ?? null;
-      if (clipboard === null) {
-        return;
-      }
-      const files = Array.from(clipboard.files);
-      if (files.length === 0) {
-        this.#pasteLongTextAsFile(event, clipboard, tray);
-        return;
-      }
-      if (clipboard.getData("text/plain") === "") {
-        event.preventDefault();
-      }
-      for (const file of files) {
-        this.#tray?.add(named(file));
-      }
-    });
+  #enablePaste(tray, signal) {
+    this.#host.chat.addEventListener(
+      "paste",
+      (event) => {
+        const clipboard = event.clipboardData ?? null;
+        if (clipboard === null) {
+          return;
+        }
+        const files = Array.from(clipboard.files);
+        if (files.length === 0) {
+          this.#pasteLongTextAsFile(event, clipboard, tray);
+          return;
+        }
+        if (clipboard.getData("text/plain") === "") {
+          event.preventDefault();
+        }
+        for (const file of files) {
+          this.#tray?.add(named(file));
+        }
+      },
+      { signal }
+    );
   }
   /** Tell the host what the tray now holds — see {@link ATTACHMENT_EVENT}. */
   #dispatch(tray) {
@@ -3112,8 +3176,13 @@ var ComposerVoice = class {
    * built-in POST endpoint. The control records via `MediaRecorder` and drops
    * the transcript into the composer; with neither configured the mic stays
    * hidden and the chat is text-only.
+   *
+   * Called on every connect, so it starts by taking down the mic the last
+   * connection mounted, which was released when the element left.
    */
   wire() {
+    this.#voice?.element.remove();
+    this.#voice = null;
     const url = this.#host.element.getAttribute("data-transcribe-url");
     const transcribe = this.#host.transcribeHandler() ?? this.#defaultTranscribeHandler(url);
     if (transcribe === null) {
@@ -3622,26 +3691,39 @@ ${quoted}`;
     this.#pageQuote?.detach();
     this.#pageQuote = null;
   }
-  /** Build the offer and listen for settled selections in the transcript. */
-  mount() {
+  /**
+   * Build the offer and listen for settled selections in the transcript.
+   *
+   * The button and the transcript outlive a connection, so the listeners go
+   * under `signal`, which the element aborts when it leaves the document.
+   */
+  mount(signal) {
     const button2 = this.button;
     button2.className = "quote-selection";
     button2.type = "button";
     button2.setAttribute("part", "quote-selection");
     button2.textContent = this.#host.strings().quoteSelection;
     button2.hidden = true;
-    button2.addEventListener("mousedown", (event) => {
-      event.preventDefault();
-    });
-    button2.addEventListener("click", () => {
-      this.#host.quote(this.#quoting);
-      window.getSelection()?.removeAllRanges();
-      this.#hide();
-    });
+    button2.addEventListener(
+      "mousedown",
+      (event) => {
+        event.preventDefault();
+      },
+      { signal }
+    );
+    button2.addEventListener(
+      "click",
+      () => {
+        this.#host.quote(this.#quoting);
+        window.getSelection()?.removeAllRanges();
+        this.#hide();
+      },
+      { signal }
+    );
     const messages = this.#host.messages;
-    messages.addEventListener("mouseup", (event) => this.#onSelectionSettled(event));
-    messages.addEventListener("keyup", () => this.#onSelectionSettled());
-    messages.addEventListener("mousedown", () => this.#hide());
+    messages.addEventListener("mouseup", (event) => this.#onSelectionSettled(event), { signal });
+    messages.addEventListener("keyup", () => this.#onSelectionSettled(), { signal });
+    messages.addEventListener("mousedown", () => this.#hide(), { signal });
   }
   /** Whether the transcript offers to quote what the user selects. */
   #enabled() {
@@ -4022,10 +4104,16 @@ var ConversationHistory = class {
   /** The active thread's id. Empty until the element connects. */
   #threadId = "";
   /**
-   * The messages the last restore replayed, which seed the next client the
-   * element builds. Emptied with the rest of the in-memory run.
+   * The conversation as last written for the next client the element builds to
+   * start from: what the last restore replayed, or what a checkpoint
+   * continuation last saved after it. Emptied with the rest of the in-memory run.
    */
   #restored = [];
+  /**
+   * Counts the conversations cleared away, so a continuation can tell whether
+   * the one it continued is still on screen when it saves.
+   */
+  #cleared = 0;
   // Bumped on every rehydrate; a replay whose generation is stale (a newer
   // thread switch started while it awaited a slow store) drops its result.
   #generation = 0;
@@ -4043,10 +4131,14 @@ var ConversationHistory = class {
   get threadId() {
     return this.#threadId;
   }
-  /** The messages the last restore replayed, for seeding the next client. */
+  /** The conversation as last written, for seeding the next client. */
   get restored() {
     return this.#restored;
   }
+  /** The checkpoint continuation in flight, or `null` when none is running. */
+  get continuation() {
+    return this.#continuation;
+  }
   /** Point at the thread the store says is active. */
   adoptActiveThread() {
     this.#threadId = this.#host.conversationStore().threadId();
@@ -4071,6 +4163,7 @@ var ConversationHistory = class {
   /** Forget the messages the last restore seeded, with the rest of the run. */
   forgetRestored() {
     this.#restored = [];
+    this.#cleared += 1;
   }
   /** Delete the active thread if nothing was ever sent in it. */
   reapUnsent() {
@@ -4156,43 +4249,76 @@ var ConversationHistory = class {
    * Uses a short-lived agent pointed at the resume / fork endpoint and seeded
    * with no history, because those endpoints supply the prior turns from the
    * snapshot and re-sending them would duplicate. A separate agent makes that
-   * structural — the main agent keeps its own history — and mints the fresh
-   * `run_id` the endpoints also require.
+   * structural and mints the fresh `run_id` the endpoints also require.
    *
    * Built by the same construction as the conversation's own client, so the
    * continuation streams into the same transcript the user is looking at and
    * runs under the same state, tools and bounds. It is the run in flight while
    * it lasts: {@link stopContinuation} is how the element's Stop reaches it.
+   *
+   * What it adds joins the conversation. Its saves write the conversation on
+   * screen ahead of its exchange, and each one hands that whole list to the
+   * next client the element builds, so the next ordinary message is sent with
+   * the exchange it follows. The conversation's own client never held it, and
+   * was sending without it.
    */
   async continueRun(runId, verb) {
     const index = this.runs();
     if (index === null) {
       return;
     }
+    if (this.#host.running() || this.#continuation !== null) {
+      this.#refuse(this.#host.strings().continueWhileRunning);
+      return;
+    }
     const content = this.#host.input.value.trim();
     if (content === "") {
-      this.#host.hint.textContent = this.#host.strings().continueNeedsTurn;
-      this.#host.hint.hidden = false;
-      this.#host.input.focus();
+      this.#refuse(this.#host.strings().continueNeedsTurn);
       return;
     }
     this.#host.input.value = "";
     this.#host.autoGrow();
+    const cleared = this.#cleared;
     const client = this.#host.buildClient({
       endpoint: verb === "resume" ? index.resumeUrl(runId) : index.forkUrl(runId),
       // The seed the endpoints assume: nothing. The snapshot is the history.
       initialMessages: [],
-      // Nor does it write the store. Its agent holds only the new turn and its
-      // answer, and a store keeps one list per thread, so saving what this
-      // client has would replace the conversation with its last exchange.
-      persist: false
+      // What its saves write ahead of the exchange: the conversation on screen,
+      // in the form the store holds it. From the conversation's own client when
+      // there is one, because that client keeps how each call ended beside its
+      // messages rather than on them; otherwise what the last restore or
+      // continuation wrote, which is already in that form.
+      //
+      // All of it, even where this forks an earlier run and the server's
+      // snapshot stops there: what is saved is what the screen shows.
+      follows: this.#host.client()?.annotatedMessages ?? this.#restored,
+      onSaved: (conversation) => {
+        if (cleared !== this.#cleared) {
+          return;
+        }
+        this.#restored = conversation;
+        this.#host.releaseClient();
+      }
     });
     this.#continuation = client;
-    await client.send(content);
-    if (this.#continuation === client) {
-      this.#continuation = null;
+    try {
+      await client.send(content);
+    } finally {
+      if (this.#continuation === client) {
+        this.#continuation = null;
+        this.#host.continuationEnded();
+      }
     }
   }
+  /**
+   * Say at the composer why a picked run did not continue, and put the caret
+   * there. The hint clears itself on the next keystroke.
+   */
+  #refuse(reason) {
+    this.#host.hint.textContent = reason;
+    this.#host.hint.hidden = false;
+    this.#host.input.focus();
+  }
   /**
    * Restore the conversation from the store on mount, then — if a navigating
    * tool reloaded the page mid-run — resume the loop by supplying that tool's
@@ -4784,6 +4910,7 @@ var STEP = 16;
 var COARSE_STEP = 64;
 function enableLauncherDrag(launcher, options) {
   let suppressClick = false;
+  const { signal } = options;
   launcher.addEventListener(
     "click",
     (event) => {
@@ -4794,54 +4921,58 @@ function enableLauncherDrag(launcher, options) {
       event.stopPropagation();
       event.preventDefault();
     },
-    true
+    { capture: true, signal }
   );
-  launcher.addEventListener("pointerdown", (event) => {
-    suppressClick = false;
-    if (!options.enabled()) {
-      return;
-    }
-    const start = options.rect();
-    const originX = event.clientX;
-    const originY = event.clientY;
-    let dragging = false;
-    const onMove = (move) => {
-      const dx = move.clientX - originX;
-      const dy = move.clientY - originY;
-      if (!dragging && Math.hypot(dx, dy) < DRAG_THRESHOLD) {
-        return;
-      }
-      dragging = true;
-      launcher.setAttribute("data-dragging", "true");
-      const next = clampLauncher(
-        { ...start, left: start.left + dx, top: start.top + dy },
-        options.viewport()
-      );
-      options.apply(next.left, next.top);
-    };
-    const onUp = (up) => {
-      window.removeEventListener("pointermove", onMove);
-      window.removeEventListener("pointerup", onUp);
-      window.removeEventListener("pointercancel", onUp);
-      if (!dragging) {
+  launcher.addEventListener(
+    "pointerdown",
+    (event) => {
+      suppressClick = false;
+      if (!options.enabled()) {
         return;
       }
-      launcher.removeAttribute("data-dragging");
-      suppressClick = true;
-      const next = clampLauncher(
-        {
-          ...start,
-          left: start.left + (up.clientX - originX),
-          top: start.top + (up.clientY - originY)
-        },
-        options.viewport()
-      );
-      options.commit(next.left, next.top);
-    };
-    window.addEventListener("pointermove", onMove);
-    window.addEventListener("pointerup", onUp);
-    window.addEventListener("pointercancel", onUp);
-  });
+      const start = options.rect();
+      const originX = event.clientX;
+      const originY = event.clientY;
+      let dragging = false;
+      const onMove = (move) => {
+        const dx = move.clientX - originX;
+        const dy = move.clientY - originY;
+        if (!dragging && Math.hypot(dx, dy) < DRAG_THRESHOLD) {
+          return;
+        }
+        dragging = true;
+        launcher.setAttribute("data-dragging", "true");
+        const next = clampLauncher(
+          { ...start, left: start.left + dx, top: start.top + dy },
+          options.viewport()
+        );
+        options.apply(next.left, next.top);
+      };
+      const onUp = (up) => {
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        window.removeEventListener("pointercancel", onUp);
+        if (!dragging) {
+          return;
+        }
+        launcher.removeAttribute("data-dragging");
+        suppressClick = true;
+        const next = clampLauncher(
+          {
+            ...start,
+            left: start.left + (up.clientX - originX),
+            top: start.top + (up.clientY - originY)
+          },
+          options.viewport()
+        );
+        options.commit(next.left, next.top);
+      };
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+      window.addEventListener("pointercancel", onUp);
+    },
+    { signal }
+  );
   let pending = null;
   const settle = () => {
     if (pending === null) {
@@ -4851,32 +4982,36 @@ function enableLauncherDrag(launcher, options) {
     pending = null;
     options.commit(left, top);
   };
-  launcher.addEventListener("keydown", (event) => {
-    if (!options.enabled()) {
-      return;
-    }
-    const step = event.shiftKey ? COARSE_STEP : STEP;
-    const rect = options.rect();
-    let moved = null;
-    if (event.key === "ArrowLeft") {
-      moved = { left: rect.left - step, top: rect.top };
-    } else if (event.key === "ArrowRight") {
-      moved = { left: rect.left + step, top: rect.top };
-    } else if (event.key === "ArrowUp") {
-      moved = { left: rect.left, top: rect.top - step };
-    } else if (event.key === "ArrowDown") {
-      moved = { left: rect.left, top: rect.top + step };
-    }
-    if (moved === null) {
-      return;
-    }
-    event.preventDefault();
-    const next = clampLauncher({ ...rect, ...moved }, options.viewport());
-    options.apply(next.left, next.top);
-    pending = next;
-  });
-  launcher.addEventListener("keyup", settle);
-  launcher.addEventListener("blur", settle);
+  launcher.addEventListener(
+    "keydown",
+    (event) => {
+      if (!options.enabled()) {
+        return;
+      }
+      const step = event.shiftKey ? COARSE_STEP : STEP;
+      const rect = options.rect();
+      let moved = null;
+      if (event.key === "ArrowLeft") {
+        moved = { left: rect.left - step, top: rect.top };
+      } else if (event.key === "ArrowRight") {
+        moved = { left: rect.left + step, top: rect.top };
+      } else if (event.key === "ArrowUp") {
+        moved = { left: rect.left, top: rect.top - step };
+      } else if (event.key === "ArrowDown") {
+        moved = { left: rect.left, top: rect.top + step };
+      }
+      if (moved === null) {
+        return;
+      }
+      event.preventDefault();
+      const next = clampLauncher({ ...rect, ...moved }, options.viewport());
+      options.apply(next.left, next.top);
+      pending = next;
+    },
+    { signal }
+  );
+  launcher.addEventListener("keyup", settle, { signal });
+  launcher.addEventListener("blur", settle, { signal });
 }
 
 // src/ui/placement/place_widget.ts
@@ -5123,8 +5258,9 @@ var PanelPlacement = class {
    * away and unclickable behind the open panel, so a drag there would move
    * something nobody can see.
    */
-  enableLauncherDrag() {
+  enableLauncherDrag(signal) {
     enableLauncherDrag(this.#host.launcher, {
+      signal,
       enabled: () => this.#host.collapsed() && this.#launcherDraggable(),
       rect: () => this.#launcherBox(),
       viewport: () => this.#viewport(),
@@ -5509,20 +5645,26 @@ var PanelPlacement = class {
     if (visual === null || visual === void 0) {
       return;
     }
-    if (Math.abs(visual.height - window.innerHeight) < 1) {
+    const layout = this.#screen().height;
+    if (Math.abs(visual.height - layout) < 1) {
       this.#host.element.style.removeProperty("--ag-ui-visual-viewport-height");
       this.#host.element.style.removeProperty("--ag-ui-visual-viewport-inset-bottom");
+      this.#host.element.style.removeProperty("--ag-ui-visual-viewport-inset-top");
       return;
     }
     this.#host.element.style.setProperty(
       "--ag-ui-visual-viewport-height",
       `${Math.round(visual.height)}px`
     );
-    const hidden = window.innerHeight - visual.height - visual.offsetTop;
+    const hidden = layout - visual.height - visual.offsetTop;
     this.#host.element.style.setProperty(
       "--ag-ui-visual-viewport-inset-bottom",
       `${Math.max(0, Math.round(hidden))}px`
     );
+    this.#host.element.style.setProperty(
+      "--ag-ui-visual-viewport-inset-top",
+      `${Math.max(0, Math.round(visual.offsetTop))}px`
+    );
   }
   /**
    * The launcher's box in viewport coordinates, with its transform divided out.
@@ -6665,7 +6807,24 @@ var STYLES = `
      keyboard changes no viewport-percentage length -- not vh, not dvh, not svh
      -- so a full-bleed panel on a phone has to be told the height rather than
      deriving it. The value to publish there is the visual viewport's. */
-  --_viewport-height: var(--ag-ui-viewport-height, var(--_visual-viewport-height));
+  --_viewport-height: var(
+    --ag-ui-viewport-height,
+    calc(
+      min(var(--_visual-viewport-inset-top) + var(--_visual-viewport-height), 100dvh - var(--_viewport-inset-bottom)) -
+        var(--_viewport-inset-top) - var(--_keyboard-inset-top)
+    )
+  );
+  /* That default is the host's box cut to the part of the screen the user can
+     see: from the top the panel starts at, the host's reserved top moved down
+     by the keyboard inset below, to whichever is further up, the bottom of the
+     visible area or the host's reserved bottom. Where nothing has measured, the
+     visible area is the layout viewport with no pan, and this is the host's
+     box exactly.
+
+     Cut rather than replaced. A measured height used as the whole answer kept
+     a bar the host reserved at the top in the position and out of the height,
+     so the panel ran that far past the bottom of the visible area, with its
+     composer behind the keyboard. */
   /* The measured height of the part of the screen the user can actually see,
      written by the element from the visual viewport and falling back to the
      layout viewport where nothing has measured yet.
@@ -6678,11 +6837,15 @@ var STYLES = `
 
      Separate from the token above so a host that states the usable height
      outright still wins: the element writes this one inline, and an inline
-     value would otherwise outrank the host's own rule. */
-  --_visual-viewport-height: var(
-    --ag-ui-visual-viewport-height,
-    calc(100vh - var(--_viewport-inset-top) - var(--_viewport-inset-bottom))
-  );
+     value would otherwise outrank the host's own rule.
+
+     The fallback is dvh rather than vh because the browser's own bars do move
+     it, where a keyboard does not. iOS Safari resolves vh to the viewport with
+     its bars collapsed, so on a page that does not scroll them away a panel
+     sized from it ran under the address bar by the bars' height -- 40px on
+     the phone measured -- with a docked composer underneath. dvh is the
+     viewport with the bars as they are. */
+  --_visual-viewport-height: var(--ag-ui-visual-viewport-height, 100dvh);
   /* How much of the layout viewport is hidden below the visible one, measured
      and written by the element alongside the height above.
 
@@ -6697,6 +6860,24 @@ var STYLES = `
      A host wanting no keyboard lift at all sets --ag-ui-keyboard-inset: 0px. */
   --_keyboard-inset: var(--ag-ui-keyboard-inset, var(--_visual-viewport-inset-bottom));
   --_visual-viewport-inset-bottom: var(--ag-ui-visual-viewport-inset-bottom, 0px);
+  /* How far a panel anchored at the top moves down for a keyboard, below the
+     top the host reserved. With the same two-token shape as the lift above;
+     0px keeps the panel at the host's top.
+
+     To show the field being typed into, a browser pans the visible area down
+     the layout viewport, and a fixed element stays against the layout top, so
+     a panel that did not move showed only its lower part, from the pan down,
+     with its header off the screen and an empty band under it. It moves by
+     what the pan goes past the host's reserved top, not by the whole pan: the
+     pan scrolls a bar reserved there away with the rest of the page rather
+     than pushing it down, and adding the two put the panel a whole bar below
+     the visible area. A corner panel anchored at the bottom does not use this,
+     because the band below already accounts for the pan. */
+  --_keyboard-inset-top: var(--ag-ui-keyboard-inset-top, max(0px, var(--_visual-viewport-inset-top) - var(--_viewport-inset-top)));
+  /* How much of the layout viewport is hidden above the visible one: how far
+     the browser panned. Measured and written by the element with the two
+     above. */
+  --_visual-viewport-inset-top: var(--ag-ui-visual-viewport-inset-top, 0px);
   --_viewport-width: var(
     --ag-ui-viewport-width,
     calc(100vw - var(--_viewport-inset-left) - var(--_viewport-inset-right))
@@ -6833,7 +7014,7 @@ var STYLES = `
 }
 
 :host([placement="side"]) {
-  --_inset: var(--ag-ui-inset, var(--_viewport-inset-top) var(--_viewport-inset-right) var(--_viewport-inset-bottom) auto);
+  --_inset: var(--ag-ui-inset, calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right) var(--_viewport-inset-bottom) auto);
   --_width: var(--ag-ui-width, 420px);
   --_height: var(--ag-ui-height, var(--_viewport-height));
   --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
@@ -6843,7 +7024,8 @@ var STYLES = `
 :host([placement="full"]) {
   --_inset: var(
     --ag-ui-inset,
-    var(--_viewport-inset-top) var(--_viewport-inset-right) var(--_viewport-inset-bottom) var(--_viewport-inset-left)
+    calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right)
+      var(--_viewport-inset-bottom) var(--_viewport-inset-left)
   );
   --_width: var(--ag-ui-width, var(--_viewport-width));
   --_height: var(--ag-ui-height, var(--_viewport-height));
@@ -6860,7 +7042,8 @@ var STYLES = `
 :host([placement="page"]) {
   --_inset: var(
     --ag-ui-inset,
-    var(--_viewport-inset-top) var(--_viewport-inset-right) var(--_viewport-inset-bottom) var(--_viewport-inset-left)
+    calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right)
+      var(--_viewport-inset-bottom) var(--_viewport-inset-left)
   );
   --_width: var(--ag-ui-width, var(--_viewport-width));
   --_height: var(--ag-ui-height, var(--_viewport-height));
@@ -6926,7 +7109,7 @@ var STYLES = `
   :host([placement=""]:not([data-small-viewport="off"])) {
     --_inset: var(
       --ag-ui-inset,
-      var(--_viewport-inset-top) var(--_viewport-inset-right)
+      calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right)
         calc(var(--_viewport-inset-bottom) + var(--_keyboard-inset))
         var(--_viewport-inset-left)
     );
@@ -6956,7 +7139,7 @@ var STYLES = `
    --ag-ui-position: static (and place this element in your own layout) for a
    host-managed push instead. */
 :host([placement="sidebar"]) {
-  --_inset: var(--ag-ui-inset, var(--_viewport-inset-top) var(--_viewport-inset-right) var(--_viewport-inset-bottom) auto);
+  --_inset: var(--ag-ui-inset, calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) var(--_viewport-inset-right) var(--_viewport-inset-bottom) auto);
   --_width: var(--ag-ui-width, 420px);
   --_height: var(--ag-ui-height, var(--_viewport-height));
   --_max-height: var(--ag-ui-max-height, var(--_viewport-height));
@@ -6965,7 +7148,11 @@ var STYLES = `
 }
 
 :host([placement="sidebar"][data-side="left"]) {
-  --_inset: var(--ag-ui-inset, var(--_viewport-inset-top) auto var(--_viewport-inset-bottom) var(--_viewport-inset-left));
+  --_inset: var(
+    --ag-ui-inset,
+    calc(var(--_viewport-inset-top) + var(--_keyboard-inset-top)) auto var(--_viewport-inset-bottom)
+      var(--_viewport-inset-left)
+  );
 }
 
 /* The docked panel is pinned to the edge it docks against rather than filling
@@ -7722,6 +7909,64 @@ var STYLES = `
   border-block-start-color: transparent;
 }
 
+/* On a phone the composer stays at the foot and the greeting takes the room
+   above it, which is the other way round from everything above.
+
+   Centring is a shape for a screen with room to spare: the composer reads as
+   the one thing on the page, and whichever way the rows grow there is space
+   left on both sides of them. A phone has no space to spare, and the keyboard
+   is what takes it -- opening one leaves a 426px-tall visible area with the
+   composer halfway up it and an empty band underneath, which is the half of
+   the screen a thumb is already resting on. Docked, the field sits directly
+   over the keyboard, where every chat on the platform puts it, and the
+   greeting keeps the rest.
+
+   Both rules restate the selector they override, with the breakpoint's own
+   opt-out added: this is part of the shape a host keeps its desktop layout
+   instead of, so it goes the same way as the rest of that shape. Restating
+   rather than adding conditions to the originals keeps each of those rules
+   readable as one decision, and source order settles the pair. */
+@media (max-width: 600px) {
+  :host([data-empty]:not([data-restoring]):not([data-small-viewport="off"])) .chat::after {
+    flex-grow: 0;
+  }
+
+  /* The empty region fills the transcript instead of being centred in it as a
+     block, so the two things in it can go to different places: the prompts the
+     host offers to the foot, against the composer, and the greeting to the
+     middle of what they leave.
+
+     A prompt chip is a way into the conversation. Against the field it starts,
+     it reads as one; under the greeting halfway up the panel, with the field
+     at the foot, it reads as decoration next to something else. Nothing here
+     moves them on a screen where the composer is still centred: there the
+     whole region hangs at the foot of the upper half, directly over the
+     composer, and the prompts are already against it.
+
+     Auto block margins on the greeting are what centre it, and they take the
+     free space whether or not there are prompts below to leave any, so a host
+     that offers none gets a greeting in the middle of the transcript rather
+     than one clinging to the composer.
+     The region declares a display here, which outranks the rule collapsing a
+     hidden one, so it says it is not hidden itself. Nothing sets the two
+     apart today -- the transcript writes the hidden property and the host's
+     data-empty from one expression -- and that is exactly why: a rule holding
+     because of how a method in another file happens to be written is a rule
+     holding by luck. */
+  :host([placement="page"][data-empty]:not([data-greeting="off"]):not([data-restoring]):not([data-small-viewport="off"])) .empty:not([hidden]),
+  :host([placement="embedded"][data-greeting][data-empty]:not([data-greeting="off"]):not([data-restoring]):not([data-small-viewport="off"])) .empty:not([hidden]) {
+    margin: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  :host([placement="page"][data-empty]:not([data-greeting="off"]):not([data-restoring]):not([data-small-viewport="off"])) .greeting,
+  :host([placement="embedded"][data-greeting][data-empty]:not([data-greeting="off"]):not([data-restoring]):not([data-small-viewport="off"])) .greeting {
+    margin-block: auto;
+  }
+}
+
 /* Nor does the greeting paint while a restore is in flight. Hidden rather than
    removed, so it keeps its place and nothing around it moves when it shows. */
 :host([data-restoring]) .greeting {
@@ -8205,6 +8450,17 @@ var STYLES = `
   gap: 3px;
 }
 
+/* A call with no arguments drops the region rather than framing an empty
+   object, and a settled card drops the result region until it has one -- both
+   by setting the hidden property, and an author display beats the user-agent
+   rule for that attribute. Without this the region kept laying out: 42px of
+   card holding the ARGUMENTS heading over nothing, on every call the agent
+   made with no arguments, in the display mode that shows arguments by
+   default. */
+.tool-call-section[hidden] {
+  display: none;
+}
+
 /* The heading that tells the two payloads apart. Without it the arguments and
    the result were one run of text and a reader had to guess the boundary. */
 .tool-call-section-label {
@@ -8875,8 +9131,8 @@ var STYLES = `
   display: none;
 }
 
-/* The mic button's mount point; filled only once #wireVoice mounts the
-   control. */
+/* The mic button's mount point; filled only once ComposerVoice.wire mounts
+   the control, which it skips unless transcription is configured. */
 .voice-slot {
   display: contents;
 }
@@ -9553,6 +9809,15 @@ var STYLES = `
   padding: 10px 12px;
 }
 
+/* The row is hidden whenever the host offers no skills, which is most elements
+   most of the time, and an author display beats the user-agent rule for the
+   hidden attribute. Without this it kept its padding: 20px of panel between
+   the transcript and the composer, under every placement, reading as the gap
+   under whatever the transcript ends with. */
+.skill-chips[hidden] {
+  display: none;
+}
+
 .skill-chip {
   border: 1px solid var(--_border);
   border-radius: 999px;
@@ -13846,12 +14111,17 @@ var Transcript = class {
   /**
    * Start following the foot of the list, and wire the jump button to it.
    * Called while rendering rather than at construction: the viewport has to
-   * exist and the observer has to have something to observe.
+   * exist and the observer has to have something to observe. The button
+   * outlives a connection, so its listener goes under `signal`.
    */
-  mountScroller(jumpButton) {
-    jumpButton.addEventListener("click", () => {
-      this.jump();
-    });
+  mountScroller(jumpButton, signal) {
+    jumpButton.addEventListener(
+      "click",
+      () => {
+        this.jump();
+      },
+      { signal }
+    );
     this.#scroller = createStickToBottom({
       viewport: this.#host.messages,
       onMissedContent: (missed) => {
@@ -14533,20 +14803,31 @@ var AgUiClient = class {
    * unannotated save quietly threw the annotations away.
    */
   #persist() {
+    this.#onPersist(this.annotatedMessages);
+  }
+  /**
+   * The history in the form a save writes it: {@link messages}, with how each
+   * tool call ended annotated onto its result -- exactly what
+   * {@link AgUiClientConfig.onPersist} is handed.
+   *
+   * For writing the conversation somewhere other than a save. The element needs
+   * it when a checkpoint continuation adds to a conversation this client holds:
+   * the continuation's saves write the conversation ahead of the exchange, and
+   * the bare {@link messages} would drop the annotations, so a declined card
+   * turned green on the next reload.
+   */
+  get annotatedMessages() {
     const messages = this.#agent.messages;
     if (this.#outcomes.size === 0) {
-      this.#onPersist(messages);
-      return;
+      return messages;
     }
-    this.#onPersist(
-      messages.map((message) => {
-        if (message.role !== "tool") {
-          return message;
-        }
-        const outcome = this.#outcomes.get(message.toolCallId);
-        return outcome === void 0 ? message : { ...message, outcome };
-      })
-    );
+    return messages.map((message) => {
+      if (message.role !== "tool") {
+        return message;
+      }
+      const outcome = this.#outcomes.get(message.toolCallId);
+      return outcome === void 0 ? message : { ...message, outcome };
+    });
   }
   async #runLoop() {
     let resume;
@@ -15771,6 +16052,8 @@ var AgUiChat = class extends HTMLElement {
    * Optional full replacement for the `ask_user` question UI, resolving with
    * the answer; the same seam as {@link approvalRenderer}, styled via `strings`
    * and the `question*` `::part()`s when left unset. Requires {@link askUser}.
+   * A renderer that throws or rejects hands the question to the built-in card,
+   * as a failing {@link approvalRenderer} does, unless Stop already fired.
    */
   askUserRenderer = null;
   /**
@@ -16075,10 +16358,37 @@ var AgUiChat = class extends HTMLElement {
   #voice;
   /** Whether the element is currently in the DOM; gates the connect-time warning. */
   #connected = false;
+  /**
+   * Aborted when the element leaves the document, and replaced when it comes
+   * back.
+   *
+   * Every listener connecting adds to an element that outlives the connection
+   * -- the composer, Send, the launcher, the shell -- is added under this
+   * signal. Connecting runs again on every insertion, so a listener added
+   * without it is a second listener the next time: one click on Stop stopped
+   * the run three times, and one press of the built-in theme toggle flipped it
+   * twice, back to where it started.
+   */
+  #connection = new AbortController();
+  /**
+   * Whether the element has connected before, which makes this connection a
+   * re-insertion: there is a transcript on screen from last time, and the
+   * history replay would draw the conversation a second time beneath it.
+   */
+  #connectedBefore = false;
+  /**
+   * The remote store `data-threads-url` wrapped around the conversation store,
+   * and the store inside it, so connecting again can wrap that store rather
+   * than the wrapper.
+   */
+  #threadStore = null;
   #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
-  // starting point — `sharedState` reads through to the client when present.
+  // starting point — `sharedState` reads through to the client when present,
+  // and to a running checkpoint continuation before that. Every client mirrors
+  // its changes here, which is what the client built after a continuation is
+  // seeded from.
   #sharedState = {};
   // Whether an interaction is in flight (first onRunStart → onSettled). Drives
   // the Send⇄Stop button: `agent.isRunning` is false between frontend-tool
@@ -16285,7 +16595,9 @@ var AgUiChat = class extends HTMLElement {
       }
     });
     this.#checkpoints = new CheckpointMenu((runId, verb) => {
-      void this.#history.continueRun(runId, verb);
+      void this.#history.continueRun(runId, verb).catch((error) => {
+        console.warn("<ag-ui-chat>: continuing a run failed", error);
+      });
     });
     this.#history = new ConversationHistory({
       element: this,
@@ -16305,8 +16617,14 @@ var AgUiChat = class extends HTMLElement {
       requestCredentials: () => this.#requestCredentials(),
       appendMessage: (role, content) => this.appendMessage(role, content),
       autoGrow: () => autoGrow(this.#input),
+      continuationEnded: () => this.#flushQueued(),
+      client: () => this.#client,
       ensureClient: () => this.#ensureClient(),
       buildClient: (seed) => this.#buildClient(seed),
+      releaseClient: () => {
+        this.#client = null;
+      },
+      running: () => this.#running,
       cancelRun: () => this.#cancelRun(),
       resetState: () => this.#resetState(),
       setRunning: (running) => this.#setRunning(running)
@@ -16388,11 +16706,32 @@ var AgUiChat = class extends HTMLElement {
    * from {@link registerPageState}, which exposes host state as ordinary tools.
    */
   get sharedState() {
-    return this.#client?.state ?? this.#sharedState;
+    return this.#liveClient()?.state ?? this.#sharedState;
   }
   set sharedState(state) {
     this.#sharedState = { ...state };
-    this.#client?.setState(this.#sharedState);
+    this.#liveClient()?.setState(this.#sharedState);
+  }
+  /**
+   * The client holding the conversation's live shared state: a checkpoint
+   * continuation while one runs, otherwise the conversation's own client, and
+   * `null` before either exists.
+   *
+   * The continuation first, because the state it streams is applied to its own
+   * agent. Reading the conversation's client alone returned what the state was
+   * before the continuation began, for as long as that client lived.
+   *
+   * It now lives no longer than the continuation's first save, which hands the
+   * conversation to the next client built, seeded from the mirror every client
+   * writes -- so the next run sends what the continuation left. That release
+   * alone makes the getter's fallback give the same answer, and no test can
+   * tell the two apart; reading the continuation keeps the getter right
+   * without depending on when the other client is let go. The setter has no
+   * such fallback, and is held by "reads the shared state it changed while it
+   * runs, not the conversation's" in `ag_ui_chat_checkpoints.test.ts`.
+   */
+  #liveClient() {
+    return this.#history.continuation ?? this.#client;
   }
   /** Bind a piece of host page state to `read_<name>` / `set_<name>` tools. */
   registerPageState(binding) {
@@ -16569,6 +16908,11 @@ var AgUiChat = class extends HTMLElement {
     this.setAttribute("data-tool-display", value);
   }
   connectedCallback() {
+    this.#connection = new AbortController();
+    if (this.#connectedBefore) {
+      this.#resetConversation();
+    }
+    this.#connectedBefore = true;
     this.#storage.claim();
     this.#placement.restoreSize();
     requestAnimationFrame(() => {
@@ -16590,13 +16934,13 @@ var AgUiChat = class extends HTMLElement {
     }
     this.#syncLauncher();
     this.#skills.init();
-    this.conversationStore = this.#storage.scopeStore(this.conversationStore, this.userKey);
+    this.conversationStore = this.#storage.scopeStore(this.#unwrappedStore(), this.userKey);
     window.addEventListener("resize", this.#onViewportResize);
     window.visualViewport?.addEventListener("resize", this.#onViewportResize);
     window.visualViewport?.addEventListener("scroll", this.#onViewportResize);
     this.#placement.publishVisualViewport();
     this.#wireThreadStore();
-    this.#attachments.wire();
+    this.#attachments.wire(this.#connection.signal);
     this.#voice.wire();
     this.#history.adoptActiveThread();
     queueMicrotask(() => this.#startup());
@@ -16661,6 +17005,7 @@ var AgUiChat = class extends HTMLElement {
    */
   disconnectedCallback() {
     this.#connected = false;
+    this.#connection.abort();
     window.removeEventListener("resize", this.#onViewportResize);
     window.visualViewport?.removeEventListener("resize", this.#onViewportResize);
     window.visualViewport?.removeEventListener("scroll", this.#onViewportResize);
@@ -16768,17 +17113,34 @@ var AgUiChat = class extends HTMLElement {
    * thread id, the navigation checkpoint) keep their local store either way.
    */
   #wireThreadStore() {
+    this.#threadStore = null;
     const url = this.getAttribute("data-threads-url");
     if (url !== null) {
-      this.conversationStore = new RemoteConversationStore(
+      const inner = this.conversationStore;
+      const remote = new RemoteConversationStore(
         url,
         () => this.#headersFor(url),
-        this.conversationStore,
+        inner,
         () => this.#requestCredentials(),
         this.getAttribute("data-threads-cache") !== "false"
       );
+      this.#threadStore = { remote, inner };
+      this.conversationStore = remote;
     }
   }
+  /**
+   * The conversation store without the remote this element wrapped it in.
+   *
+   * An element removed and inserted again connects again, and wrapping the
+   * wrapper stacked a second remote on the first, so every rename and delete
+   * reached the server twice. Unwrapping first also lets a `data-threads-url`
+   * removed while detached take the remote away. A store the host assigned
+   * since is theirs, and comes back as it is.
+   */
+  #unwrappedStore() {
+    const wrapped = this.#threadStore;
+    return wrapped !== null && this.conversationStore === wrapped.remote ? wrapped.inner : this.conversationStore;
+  }
   /**
    * Replace the host-supplied (client) skill catalog. Merged after the embedded
    * and fetched skills (so a client skill overrides a same-named server one).
@@ -17020,12 +17382,22 @@ var AgUiChat = class extends HTMLElement {
   }
   /** Drop the in-memory run + transcript, leaving the thread id untouched. */
   #resetState() {
+    this.#resetConversation();
+    this.#sentDrafts.length = 0;
+    this.#recallIndex = null;
+  }
+  /**
+   * Drop the in-memory run and transcript, and nothing the user typed.
+   *
+   * Split from {@link #resetState} for re-insertion, which rebuilds the
+   * conversation from history but is not a new one, so the composer's recall
+   * history stays.
+   */
+  #resetConversation() {
     this.#client = null;
     this.#runHandlers.detach();
     this.#clearTranscript();
     this.#history.forgetRestored();
-    this.#sentDrafts.length = 0;
-    this.#recallIndex = null;
   }
   /**
    * Wipe the rendered transcript and everything that indexes into it.
@@ -17091,7 +17463,19 @@ var AgUiChat = class extends HTMLElement {
   appendMessage(role, content) {
     return this.#transcript.append(role, content);
   }
+  /**
+   * Build the chrome, from the attributes as they stand.
+   *
+   * Runs on every connect, not once, because removing and re-inserting the
+   * element is the documented way to apply a connect-time attribute written
+   * late. So it has to build the same element the second time as the first:
+   * the elements made here are new each time, the long-lived ones it fills
+   * are filled with `replaceChildren` rather than appended to, and every
+   * listener on a long-lived one goes under the connection's signal. Appending
+   * gave a re-inserted element two headers and two composers.
+   */
   #render() {
+    const { signal } = this.#connection;
     this.#chat.className = "chat";
     this.#chat.setAttribute("part", "panel");
     const header = document.createElement("div");
@@ -17128,7 +17512,7 @@ var AgUiChat = class extends HTMLElement {
       this.#themeToggle.setAttribute("part", "header-button theme-toggle");
       this.#themeToggle.title = this.#strings.toggleTheme;
       this.#themeToggle.setAttribute("aria-label", this.#strings.toggleTheme);
-      this.#themeToggle.addEventListener("click", () => this.toggleTheme());
+      this.#themeToggle.addEventListener("click", () => this.toggleTheme(), { signal });
       this.#syncThemeGlyph();
       controls.append(this.#themeToggle);
     }
@@ -17144,8 +17528,8 @@ var AgUiChat = class extends HTMLElement {
     this.#jumpButton.type = "button";
     this.#jumpButton.setAttribute("part", "jump-latest");
     this.#jumpButton.textContent = this.#strings.jumpToLatest;
-    this.#excerpts.mount();
-    this.#transcript.mountScroller(this.#jumpButton);
+    this.#excerpts.mount(signal);
+    this.#transcript.mountScroller(this.#jumpButton, signal);
     this.#announcer.mount();
     this.#emptyWrap.className = "empty";
     this.#emptyWrap.setAttribute("part", "empty");
@@ -17157,7 +17541,6 @@ var AgUiChat = class extends HTMLElement {
     greetingSlot.append(this.#greetingText);
     greeting.append(greetingSlot);
     this.#syncGreeting();
-    this.#emptyWrap.append(greeting);
     const emptySlot = document.createElement("slot");
     emptySlot.name = "empty";
     const starters = renderStarterChips(this, this.#strings, (prompt) => {
@@ -17166,7 +17549,7 @@ var AgUiChat = class extends HTMLElement {
     if (starters !== null) {
       emptySlot.append(starters);
     }
-    this.#emptyWrap.append(emptySlot);
+    this.#emptyWrap.replaceChildren(greeting, emptySlot);
     this.#queuedRow.className = "queued";
     this.#queuedRow.setAttribute("part", "queued");
     this.#queuedRow.setAttribute("role", "group");
@@ -17188,41 +17571,47 @@ var AgUiChat = class extends HTMLElement {
     this.#input.setAttribute("aria-label", this.#strings.message);
     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.#input.addEventListener("keydown", (event) => this.#onKeydown(event), { signal });
+    this.#input.addEventListener("input", () => this.#onInput(), { signal });
     this.#send.className = "send";
     this.#send.type = "button";
     this.#send.setAttribute("part", "send");
-    this.#send.append(
+    this.#send.replaceChildren(
       glyphSlot("icon-send", "send-send", ICON_SEND),
       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", () => {
-      if (this.#running) {
-        this.#cancelRun();
-        return;
-      }
-      void this.#submit();
-    });
+    this.#send.addEventListener(
+      "click",
+      () => {
+        if (this.#running) {
+          this.#cancelRun();
+          return;
+        }
+        void this.#submit();
+      },
+      { signal }
+    );
     this.#composerHint.className = "skill-hint";
     this.#composerHint.setAttribute("part", "skill-hint");
     this.#composerHint.hidden = true;
     this.#attachButton.className = "attach-btn";
     this.#attachButton.type = "button";
     this.#attachButton.setAttribute("part", "attach-button");
-    this.#attachButton.append(glyphSlot("icon-attach", "attach-glyph", ICON_ATTACH));
+    this.#attachButton.replaceChildren(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;
-    this.#attachButton.addEventListener("click", () => this.#fileInput.click());
+    this.#attachButton.addEventListener("click", () => this.#fileInput.click(), { signal });
     this.#fileInput.className = "attach-input";
     this.#fileInput.type = "file";
     this.#fileInput.multiple = true;
     this.#fileInput.hidden = true;
-    this.#fileInput.addEventListener("change", () => this.#attachments.onFilesPicked());
+    this.#fileInput.addEventListener("change", () => this.#attachments.onFilesPicked(), {
+      signal
+    });
     this.#attachSlot.className = "attachment-slot";
     this.#voiceSlot.className = "voice-slot";
     const footer = document.createElement("slot");
@@ -17231,8 +17620,8 @@ var AgUiChat = class extends HTMLElement {
     composer.append(this.#input, tools);
     inputRow.append(composer, this.#fileInput);
     this.#messagesWrap.className = "messages-wrap";
-    this.#messagesWrap.append(this.#messages, this.#jumpButton, this.#excerpts.button);
-    this.#chat.append(
+    this.#messagesWrap.replaceChildren(this.#messages, this.#jumpButton, this.#excerpts.button);
+    this.#chat.replaceChildren(
       header,
       this.#messagesWrap,
       this.#skillsMenu.palette,
@@ -17245,16 +17634,20 @@ var AgUiChat = class extends HTMLElement {
       this.#drawer.element,
       this.#checkpoints.element
     );
-    this.#chat.addEventListener("pointerdown", (event) => {
-      if (!this.#checkpoints.open_) {
-        return;
-      }
-      const path = event.composedPath();
-      if (path.includes(this.#checkpoints.element) || path.includes(checkpoints)) {
-        return;
-      }
-      this.#checkpoints.close();
-    });
+    this.#chat.addEventListener(
+      "pointerdown",
+      (event) => {
+        if (!this.#checkpoints.open_) {
+          return;
+        }
+        const path = event.composedPath();
+        if (path.includes(this.#checkpoints.element) || path.includes(checkpoints)) {
+          return;
+        }
+        this.#checkpoints.close();
+      },
+      { signal }
+    );
     this.#launcher.className = "launcher";
     this.#launcher.type = "button";
     this.#launcher.setAttribute("part", "launcher");
@@ -17267,19 +17660,19 @@ var AgUiChat = class extends HTMLElement {
     this.#railLabel.setAttribute("part", "rail-label");
     this.#railLabel.setAttribute("aria-hidden", "true");
     this.#railLabel.textContent = this.getAttribute("title-text") ?? this.#strings.title;
-    this.#launcher.append(
+    this.#launcher.replaceChildren(
       iconElement("launcher", "launcher-icon", ICON_LAUNCHER, readLauncherIconUrl(this)),
       this.#railLabel,
       this.#badge
     );
-    this.#launcher.addEventListener("click", () => this.setCollapsed(false));
-    this.#placement.enableLauncherDrag();
+    this.#launcher.addEventListener("click", () => this.setCollapsed(false), { signal });
+    this.#placement.enableLauncherDrag(signal);
     this.#placement.mountResizeGrips(this.#chat);
     adoptStyles(this.#root);
     const probe = this.#placement.probe;
     probe.className = "viewport-probe";
     probe.setAttribute("aria-hidden", "true");
-    this.#root.append(probe, this.#announcer.region, this.#chat, this.#launcher);
+    this.#root.replaceChildren(probe, this.#announcer.region, this.#chat, this.#launcher);
   }
   /**
    * Reflect the collapsed state and the unread count on the launcher.
@@ -17434,6 +17827,9 @@ var AgUiChat = class extends HTMLElement {
    * other shape would be a second sender racing the guard above.
    */
   #flushQueued() {
+    if (this.#running || this.#history.continuation !== null) {
+      return;
+    }
     const next = this.#queued.shift();
     this.#renderQueued();
     if (next !== void 0) {
@@ -17471,7 +17867,7 @@ var AgUiChat = class extends HTMLElement {
     if (content === "" && attachments.length === 0) {
       return;
     }
-    if (this.#running) {
+    if (this.#running || this.#history.continuation !== null) {
       if (content !== "") {
         this.#queued.push(content);
         this.#renderQueued();
@@ -17509,12 +17905,14 @@ var AgUiChat = class extends HTMLElement {
    * `attachments` are durable {@link AttachmentRef}s — what {@link attachFile}
    * resolves to and what {@link ATTACHMENT_EVENT} reports.
    *
-   * No-ops on an empty message, and while a run is in flight, since a second
-   * concurrent run would orphan the first. Unlike the built-in Send it does not
-   * consult the tray: what you pass is what is sent.
+   * No-ops on an empty message, and while a run or a picked checkpoint's
+   * continuation is in flight, since a second concurrent run would orphan the
+   * first. Unlike the built-in Send it does not queue: it returns, and the
+   * caller keeps what it tried to send. Nor does it consult the tray -- what
+   * you pass is what is sent.
    */
   async sendMessage(content, attachments = []) {
-    if (this.#running || content === "" && attachments.length === 0) {
+    if (this.#running || this.#history.continuation !== null || content === "" && attachments.length === 0) {
       return;
     }
     if (this.#transcript.isEmpty()) {
@@ -17587,7 +17985,8 @@ var AgUiChat = class extends HTMLElement {
       this.#client = this.#buildClient({
         endpoint: this.endpoint,
         initialMessages: this.#history.restored,
-        persist: true
+        // Its history is the whole conversation, so nothing goes ahead of it.
+        follows: []
       });
     }
     return this.#client;
@@ -17624,9 +18023,15 @@ var AgUiChat = class extends HTMLElement {
       getContext: () => this.#dispatch.buildContext(),
       executeTool: (call) => this.#dispatch.execute(call),
       resolveInterrupts: (interrupts) => this.#dispatch.resolveInterrupts(interrupts),
-      ...seed.persist ? {
-        onPersist: (messages) => this.conversationStore.saveMessages(threadId, messages)
-      } : {},
+      // Every client saves the whole conversation, because a store keeps one
+      // list per thread. For the conversation's own client that is its
+      // history; a continuation holds only what it adds, and writes the
+      // conversation it continues ahead of that.
+      onPersist: (messages) => {
+        const conversation = [...seed.follows, ...messages];
+        this.conversationStore.saveMessages(threadId, conversation);
+        seed.onSaved?.(conversation);
+      },
       onStateChanged: (state) => this.#onSharedStateChanged(state),
       connectionLostMessage: this.#strings.connectionLost,
       unfinishedMessage: this.#strings.callNotFinished,
@@ -17789,7 +18194,7 @@ function setControlValue(el2, value) {
 }
 
 // src/version.ts
-var VERSION = "0.39.0";
+var VERSION = "0.40.0";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,