@artooi/ag-ui-web-component 0.41.3 → 0.42.0

package/dist/index.js

@@ -1731,11 +1731,19 @@ var ToolDispatch = class {
    * Execute one frontend tool call the round produced, against its own card:
    * refused when the page moved under the round, asked about when a rule gates
    * it, and settled with what the handler returned or threw.
+   *
+   * Every await below is a place the run can end, so each is followed by a
+   * check that it has not. A Stop while the host's predicate is pending ends
+   * the call there, and one while the card is open declines it. A handover
+   * during any of the three leaves the call with no transcript to draw in and
+   * no store to write to, so it does neither.
    */
   async execute(call) {
     if (skillNameFrom(call) !== null) {
       return null;
     }
+    const tenure = this.#host.tenure();
+    const threadId = this.#host.threadId();
     const card = this.#host.transcript.cardFor(call);
     this.#host.transcript.forgetCard(call.id);
     this.#host.transcript.setCardElement(call.id, card.element);
@@ -1752,7 +1760,12 @@ var ToolDispatch = class {
       this.#host.transcript.showPending();
       return { content: `Error: ${message}`, error: message, outcome: TOOL_OUTCOME.FAILED };
     }
+    const asking = this.#host.decision.open();
     const rule = await this.#confirmationRule(call, tool);
+    this.#host.decision.close();
+    if (asking.aborted) {
+      return this.#abandoned(card);
+    }
     if (rule === "unanswered") {
       const message = this.#host.strings().confirmCheckFailed;
       card.settle(TOOL_CALL_STATUS.DECLINED, message);
@@ -1776,6 +1789,9 @@ var ToolDispatch = class {
       this.#host.transcript.follow();
       const accepted = await decision;
       this.#host.decision.close();
+      if (this.#host.tenure() !== tenure) {
+        return null;
+      }
       card.recordDecision(accepted ? "approved" : "declined");
       if (!accepted) {
         const message = this.#host.strings().declinedAction;
@@ -1783,13 +1799,19 @@ var ToolDispatch = class {
         this.#host.transcript.showPending();
         return { content: message, outcome: TOOL_OUTCOME.DENIED };
       }
+      if (signal.aborted) {
+        return this.#abandoned(card);
+      }
     }
     const navigates = isNavigates(tool.parameters) && this.#host.navigate() === null;
     if (navigates) {
-      this.#host.conversationStore().saveCheckpoint(this.#host.threadId(), { toolCallId: call.id });
+      this.#host.conversationStore().saveCheckpoint(threadId, { toolCallId: call.id });
     }
     try {
       const result = await tool.handler(call.args, call.id);
+      if (this.#host.tenure() !== tenure) {
+        return null;
+      }
       if (tool.render !== void 0) {
         this.#host.transcript.renderToolOutput(tool.render, call);
       }
@@ -1802,8 +1824,11 @@ var ToolDispatch = class {
       this.#host.transcript.showPending();
       return { content };
     } catch (error) {
+      if (this.#host.tenure() !== tenure) {
+        return null;
+      }
       if (navigates) {
-        this.#host.conversationStore().saveCheckpoint(this.#host.threadId(), null);
+        this.#host.conversationStore().saveCheckpoint(threadId, null);
       }
       const message = error instanceof Error ? error.message : String(error);
       card.settle(TOOL_CALL_STATUS.ERROR, message);
@@ -1960,6 +1985,25 @@ var ToolDispatch = class {
     }
     return isDestructive(tool.parameters) ? "destructive" : null;
   }
+  /**
+   * Settle a call whose run ended while it waited, and give the loop nothing.
+   *
+   * The card is settled here because nothing else will: dispatch took it out
+   * of the end-of-run sweep before it waited, so left alone it read "running…"
+   * for good. It says the call did not finish, which is true -- nothing ran and
+   * nobody refused it.
+   *
+   * `null` rather than a result, because a stopped run has no next round to
+   * send one in. The loop moves on and finds the run stopped, and the call is
+   * left unanswered like every call after it in the round, so the client
+   * answers it as not finished on the next request -- in the same words as
+   * this card. After a handover the card is in a transcript already cleared,
+   * and settling it there is seen by no one.
+   */
+  #abandoned(card) {
+    card.settle(TOOL_CALL_STATUS.INTERRUPTED, this.#host.strings().callNotFinished);
+    return null;
+  }
   /**
    * Whether the page moved since the current round's context was built.
    *
@@ -3065,6 +3109,12 @@ var VoiceInput = class {
       this.#fail(this.#strings.transcriptionFailed);
       return;
     }
+    if (this.#disposed) {
+      for (const track of stream.getTracks()) {
+        track.stop();
+      }
+      return;
+    }
     this.#stream = stream;
     this.#chunks = [];
     this.#hitCap = false;
@@ -3095,10 +3145,16 @@ var VoiceInput = class {
     }
   }
   /**
-   * Tear the control down, for a host element removed mid-recording. Stops any
-   * live `MediaRecorder`, releases the mic tracks so the browser's recording
-   * indicator clears, and suppresses the pending transcription — a
-   * disconnected control must not fire `onText` into a detached element.
+   * Tear the control down, for a host element removed mid-recording or handed
+   * to the next principal. Stops any live `MediaRecorder`, releases the mic
+   * tracks so the browser's recording indicator clears, and suppresses the
+   * pending transcription — a disconnected control must not fire `onText` into
+   * a detached element.
+   *
+   * Disposal is final: nothing un-disposes an instance, and the host's next
+   * wiring builds a new one. So the disposed flag alone tells a stale
+   * continuation from a live one, and a clip already posted when this runs is
+   * dropped whenever its answer arrives.
    */
   dispose() {
     this.#disposed = true;
@@ -3118,6 +3174,9 @@ var VoiceInput = class {
     const audio = new Blob(this.#chunks, { type: mimeType || "audio/webm" });
     try {
       const text4 = await this.#transcribe(audio);
+      if (this.#disposed) {
+        return;
+      }
       this.#setState("idle");
       if (this.#hitCap) {
         this.element.title = fillUiString(this.#strings.recordingLimit, {
@@ -3141,6 +3200,9 @@ var VoiceInput = class {
     this.#stream = null;
   }
   #fail(message) {
+    if (this.#disposed) {
+      return;
+    }
     this.#releaseStream();
     this.#recorder = null;
     this.#setState("idle");
@@ -4104,6 +4166,8 @@ function toolStatusFromOutcome(outcome) {
 }
 
 // src/ui/history/conversation_history.ts
+var UNHELD = Object.freeze({ release: () => {
+} });
 var ConversationHistory = class {
   #host;
   /** The active thread's id. Empty until the element connects. */
@@ -4119,9 +4183,20 @@ var ConversationHistory = class {
    * 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.
+  /**
+   * Which restore may draw: bumped by every rehydrate, and by every clear of
+   * the conversation on screen. A restore whose generation is stale draws
+   * nothing more and resumes nothing: a newer one has started, or New chat, a
+   * thread switch or a `user-key` handover has cleared what it was restoring.
+   */
   #generation = 0;
+  /**
+   * The conversation the latest restore claimed, written by every restore as
+   * it starts; `null` before the first. It speaks for the restore now current
+   * only while its generation is the current one, because clearing the
+   * conversation moves that on. See `#forgetStopped` for the one reader.
+   */
+  #claim = null;
   /** Built lazily from `data-runs-url`; `null` when the host didn't opt in. */
   #runIndex = null;
   /**
@@ -4169,6 +4244,7 @@ var ConversationHistory = class {
   forgetRestored() {
     this.#restored = [];
     this.#cleared += 1;
+    this.#generation += 1;
   }
   /** Delete the active thread if nothing was ever sent in it. */
   reapUnsent() {
@@ -4281,6 +4357,7 @@ var ConversationHistory = class {
       this.#refuse(this.#host.strings().continueNeedsTurn);
       return;
     }
+    this.#host.recordTurn(content);
     this.#host.input.value = "";
     this.#host.autoGrow();
     const cleared = this.#cleared;
@@ -4357,48 +4434,197 @@ var ConversationHistory = class {
    * because the resume path answers it from the page the reload landed on; that
    * exclusion is held by "resumes with the landed page's result, and its card says
    * so" in `ag_ui_chat_reload_mid_run.test.ts`.
+   *
+   * **A restore that resumes holds the composer from before the load.** The
+   * resume is a run, and it starts only once the store has answered. With a
+   * remote store that is a real request, and a send, a Retry or a pick in it
+   * was refused by nothing: each built the conversation's client before the
+   * conversation had loaded, so a send went out carrying none of it and its
+   * first save replaced the stored one, and the resume then ran on that same
+   * client as a second run, answering a call the request no longer held. So
+   * the composer is held as a send holds it, and the resume gives way to
+   * nothing: what was typed parks behind the resumed run and goes out after its
+   * answer, and a host's send or Retry is refused as it is behind any run.
+   *
+   * The other way round, the resume standing down for the send, was rejected.
+   * The send that got in first had already gone out without the conversation,
+   * so standing down kept that loss, and it also dropped the run the navigation
+   * was part of, which the user asked for before the reload: the agent stopped
+   * halfway through the task, with the navigating call never answered.
+   *
+   * **A restore stops where it was stopped, held or not.** New chat, a thread
+   * switch, a `user-key` handover, a newer restore or the element leaving the
+   * page can each come while the store answers, and from host code the restore
+   * runs itself: the activity and tool renderers each replayed message draws
+   * through, and `navigationResult`. From then on it draws nothing more and
+   * resumes nothing. The hold cannot say so, because a restore with no run to
+   * resume holds nothing. So the restore asks its generation, which clearing
+   * the conversation moves on as a newer restore does, and asks it after the
+   * load, after each replayed message -- as a Retry asks after each one -- and
+   * once more before the resume. Stopped by anything but the element leaving
+   * the page, it also forgets the checkpoint it loaded, since that was a Stop
+   * for the run it would have resumed -- unless what replaced it is a restore
+   * of the same conversation, still current, which answers for that run
+   * instead; see `#forgetStopped`.
+   *
+   * What a restore with no run to resume still does not do is refuse a send
+   * made while it loads. That send goes out without the stored conversation,
+   * and its save replaces it.
    */
   async rehydrate() {
     this.#generation += 1;
     const generation = this.#generation;
-    this.#host.element.setAttribute("data-restoring", "");
-    let messages;
+    const threadId = this.#threadId;
+    const store = this.#host.conversationStore();
+    this.#claim = { generation, store, threadId };
+    const checkpoint = store.loadCheckpoint(threadId);
+    const hold = checkpoint === null ? UNHELD : this.#host.holdRun();
     try {
-      messages = await this.#host.conversationStore().loadMessages(this.#threadId);
-    } finally {
-      if (generation === this.#generation) {
-        this.#host.element.removeAttribute("data-restoring");
+      this.#host.element.setAttribute("data-restoring", "");
+      let messages;
+      try {
+        messages = await store.loadMessages(threadId);
+      } finally {
+        if (generation === this.#generation) {
+          this.#host.element.removeAttribute("data-restoring");
+        }
       }
-    }
-    if (generation !== this.#generation) {
-      return;
-    }
-    const checkpoint = this.#host.conversationStore().loadCheckpoint(this.#threadId);
-    if (messages !== null) {
-      const unfinished = this.#host.strings().callNotFinished;
-      const restored = answerUnansweredCalls(
-        messages,
-        // The shape the store holds for a call the client answered the same way:
-        // its tool message, with the outcome in its metadata.
-        (toolCallId) => ({
-          id: randomUUID3(),
-          role: "tool",
-          content: unfinished,
-          toolCallId,
-          metadata: { outcome: TOOL_OUTCOME.INTERRUPTED }
-        }),
-        new Set(checkpoint === null ? [] : [checkpoint.toolCallId])
-      );
-      this.#restored = restored;
-      for (const message of restored) {
-        this.replay(message);
+      if (!this.#restoring(generation)) {
+        this.#forgetStopped(store, threadId, checkpoint);
+        return;
+      }
+      if (messages !== null) {
+        const unfinished = this.#host.strings().callNotFinished;
+        const restored = answerUnansweredCalls(
+          messages,
+          // The shape the store holds for a call the client answered the same
+          // way: its tool message, with the outcome in its metadata.
+          (toolCallId) => ({
+            id: randomUUID3(),
+            role: "tool",
+            content: unfinished,
+            toolCallId,
+            metadata: { outcome: TOOL_OUTCOME.INTERRUPTED }
+          }),
+          new Set(checkpoint === null ? [] : [checkpoint.toolCallId])
+        );
+        this.#restored = restored;
+        for (const message of restored) {
+          this.replay(message);
+          if (!this.#restoring(generation)) {
+            this.#forgetStopped(store, threadId, checkpoint);
+            return;
+          }
+        }
       }
+      if (checkpoint !== null) {
+        await this.#resumeFrom(checkpoint, generation);
+        return;
+      }
+      this.#noticeIfRunUnfinished(messages);
+    } finally {
+      hold.release();
     }
-    if (checkpoint !== null) {
-      await this.#resumeFrom(checkpoint);
-      return;
+  }
+  /**
+   * Whether the restore that claimed `generation` may go on: nothing has
+   * replaced or cleared the conversation it is restoring, and the element is
+   * still on the page.
+   *
+   * On the page, because leaving it is the one stop that clears nothing: the
+   * element is not reset until it connects again, and connecting restores the
+   * conversation afresh. A restore with nothing to resume went on regardless,
+   * drawing into a node that had gone and running the host's renderers for it.
+   * One that resumes learnt it from the Stop letting go of its hold; nothing
+   * asks the hold that now, so this is what keeps the resume's request in.
+   *
+   * One `&&`, so coverage cannot tell whether either half is held. Removing the
+   * generation fails "draws nothing into a new chat started while it loads" in
+   * `conversation_history.test.ts`, and "drops a stale thread replay when a
+   * newer switch started" in `ag_ui_chat.test.ts`; removing the connection
+   * fails "draws nothing into an element that left the page while it loads".
+   */
+  #restoring(generation) {
+    return generation === this.#generation && this.#host.element.isConnected;
+  }
+  /**
+   * Forget the checkpoint a stopped restore loaded, when what stopped it also
+   * stopped the run it was about to resume.
+   *
+   * New chat, a thread switch, a `user-key` handover and a newer restore all
+   * move the generation, and each is a Stop for that run. Left in the store,
+   * the checkpoint outlived the Stop: coming back to the conversation later
+   * resumed the navigating call with whatever page was current by then.
+   * Forgotten, the call is answered as not finished there, as any stopped call
+   * is.
+   *
+   * Not while the restore now current claimed the same conversation, which it
+   * has in two cases. It is this restore, when only the element left the page,
+   * which moves no generation: a move or a framework re-render is not a
+   * farewell, and the restore connecting starts has to find the checkpoint to
+   * resume from. Or it is a newer restore of the same thread in the same store
+   * -- `reload()`, switching away and back, or the element connecting again --
+   * which read the checkpoint as it started, or found it gone, and answers for
+   * it from then on: its resume clears it, and when it is stopped in turn this
+   * same rule decides.
+   *
+   * The newer restore's case used to forget it too, on the grounds that the
+   * newer one had read it and would resume once from that copy. It did until
+   * the element left the page while the newer one loaded: that one stood down
+   * keeping the checkpoint for the reconnect, as a departure should, but the
+   * store no longer held it, so the element came back with no run to resume.
+   *
+   * Written to the store and the thread it was read from. After a handover
+   * that is the previous principal's: the built-in store's clear is a removal
+   * from a namespace the handover has already purged, so it changes nothing,
+   * and nothing reaches the next principal's. A host's store is the same object
+   * either side of a handover; one the host replaced is held by "still refuses
+   * a send for the newer restore once the older has stood down".
+   *
+   * Two conditions. Clearing with no checkpoint fails "draws nothing into a new
+   * chat started while it loads", which runs no store code for one. Clearing
+   * what the current restore claimed fails "resumes nothing once the element
+   * leaves the page while the store answers", where the claim is this
+   * restore's own and the re-inserted element resumes, and "resumes once the
+   * element is back when the host reloads and it then leaves the page", where
+   * it is the reload's. The claim's own three are named on `#claimedByCurrent`.
+   */
+  #forgetStopped(store, threadId, checkpoint) {
+    if (checkpoint !== null && !this.#claimedByCurrent(store, threadId)) {
+      store.saveCheckpoint(threadId, null);
     }
-    this.#noticeIfRunUnfinished(messages);
+  }
+  /**
+   * Whether the restore now current claimed the conversation a stopped restore
+   * read its checkpoint from: the same thread, in the same store.
+   *
+   * A claim from an earlier generation speaks for nobody: the conversation was
+   * cleared after it was made, so whatever it would have resumed was stopped,
+   * and that holds of a stopped restore's own claim as much as of any other.
+   * The store is compared as an object, because a store the host assigned
+   * since is a different record of the conversation, and the one the
+   * checkpoint was read from still has to forget it.
+   *
+   * As an object, a store the element builds for itself -- the built-in one
+   * under a namespace, and the remote one `data-threads-url` wraps around it
+   * -- is a different one after a reconnect, which builds it afresh over the
+   * same storage, so a restore from before the reconnect forgets the
+   * checkpoint there once it answers. The reconnect's own restore read it as
+   * it started and resumes from that copy, as a newer restore always did here;
+   * what that copy cannot survive is the element leaving again before the
+   * load answers.
+   *
+   * One `&&` of three, so coverage cannot tell whether any is held. Dropping
+   * the generation fails "forgets the checkpoint when New chat stops the
+   * resume, so the call ends as not finished", where the claim is the stopped
+   * restore's own; dropping the store fails "still refuses a send for the newer
+   * restore once the older has stood down", whose host replaces the store
+   * between the two; dropping the thread fails "forgets the checkpoint of a
+   * thread switched away from, though the next has one of its own".
+   */
+  #claimedByCurrent(store, threadId) {
+    const claim = this.#claim;
+    return claim?.generation === this.#generation && claim.store === store && claim.threadId === threadId;
   }
   /**
    * Notice a previous run that never produced a response.
@@ -4518,12 +4744,15 @@ var ConversationHistory = class {
    * guard is held by "resumes a checkpointed navigating tool call on mount" in
    * `ag_ui_chat.test.ts`, whose transcript never made the call.
    */
-  async #resumeFrom(checkpoint) {
+  async #resumeFrom(checkpoint, generation) {
     this.#host.conversationStore().saveCheckpoint(this.#threadId, null);
     const client = this.#host.ensureClient();
     const landed = JSON.stringify(
       this.#host.navigationResult().call(this.#host.element, checkpoint)
     );
+    if (!this.#restoring(generation)) {
+      return;
+    }
     client.addToolResult(checkpoint.toolCallId, landed);
     this.#host.transcript.card(checkpoint.toolCallId)?.settle(TOOL_CALL_STATUS.DONE, landed);
     await client.resume();
@@ -14999,8 +15228,10 @@ var AgUiClient = class {
   #unfinishedMessage;
   #declinedMessage;
   #maxToolRounds;
-  // Set by cancel(); reset at the top of each #run(). Checked by the loop so
-  // a cancel between frontend-tool rounds doesn't start another round.
+  // Set by cancel(); reset as send() or resume() begins, before either runs
+  // any host code. Checked by the loop so a cancel between frontend-tool
+  // rounds doesn't start another round, and again just before each request,
+  // so a cancel from host code the round itself runs is not sent anyway.
   #cancelled = false;
   constructor(config) {
     this.#agent = config.agent;
@@ -15056,6 +15287,7 @@ var AgUiClient = class {
    * {@link messageAttachments}.
    */
   async send(content, attachments = []) {
+    this.#cancelled = false;
     const message = {
       id: randomUUID4(),
       role: "user",
@@ -15071,11 +15303,14 @@ var AgUiClient = class {
    * can be asked again.
    *
    * Returns the retained history, or `null` when there is nothing to retry (no
-   * user message has been sent yet). **Truncates only** -- the caller re-renders
-   * from the returned list and then calls {@link resume}, because the transcript
-   * belongs to the element and a client that reached into it would own two
-   * things. Running here instead would stream the new answer in underneath the
-   * old one.
+   * user message has been sent yet). The shortened history is saved before it
+   * replaces the current one, so a save that throws changes nothing and the
+   * throw propagates.
+   *
+   * **Truncates only** -- the caller re-renders from the returned list and then
+   * calls {@link resume}, because the transcript belongs to the element and a
+   * client that reached into it would own two things. Running here instead
+   * would stream the new answer in underneath the old one.
    *
    * Re-running answers the question the agent was last asked, rather than
    * telling it its answer was wrong, which is what makes the result a
@@ -15097,8 +15332,8 @@ var AgUiClient = class {
       return null;
     }
     const kept = messages.slice(0, lastUser + 1);
+    this.#onPersist(kept);
     this.#agent.setMessages(kept);
-    this.#persist();
     return kept;
   }
   /**
@@ -15107,6 +15342,7 @@ var AgUiClient = class {
    * message; it continues the conversation already in history.
    */
   async resume() {
+    this.#cancelled = false;
     await this.#run();
   }
   /** Append a frontend tool result to history (used by the resume path). */
@@ -15120,13 +15356,19 @@ var AgUiClient = class {
    * disconnect). Safe to call with no run in flight. Partial text already
    * streamed stays in history; {@link AgUiClientHandlers.onCancelled} fires
    * instead of `onError`, and `onSettled` still follows.
+   *
+   * Also stops a {@link send} or {@link resume} whose request has not been made
+   * yet, when host code it runs on the way calls this: the save of the turn,
+   * the tool and context providers, the save answering a call left open. No
+   * request is made then, and `onCancelled` and `onSettled` fire as for any
+   * other Stop. A cancel with nothing in flight is forgotten when the next
+   * send or resume begins.
    */
   cancel() {
     this.#cancelled = true;
     this.#agent.abortRun();
   }
   async #run() {
-    this.#cancelled = false;
     try {
       await this.#runLoop();
       if (this.#cancelled) {
@@ -15284,6 +15526,9 @@ var AgUiClient = class {
         params.resume = resume;
       }
       this.#answerUnansweredCalls(resuming);
+      if (this.#cancelled) {
+        return;
+      }
       await this.#agent.runAgent(params, this.#buildSubscriber(pending, runState));
       resume = void 0;
       resuming = /* @__PURE__ */ new Set();
@@ -16206,9 +16451,12 @@ var StorageScope = class {
   // remounts, but re-resolves if the host answers the warning with an `id`.
   #generatedNs = "";
   #generatedFor = "";
-  // The `sessionStorage`-backed store, which the element may therefore re-scope
-  // on a principal change. `null` when the host injected a store of its own
-  // kind, whose keying the element does not know and must not guess at.
+  // The `sessionStorage`-backed store this scope handed out, which the element
+  // may therefore re-scope on a principal change -- while it is still the store
+  // in use, which rescopeStore asks, since a host can assign its own at any
+  // time. `null` until connecting has met the built-in store at all. A store of
+  // the host's own kind is never held here: the element does not know its
+  // keying and must not guess at it.
   #builtinStore = null;
   constructor(host) {
     this.#host = host;
@@ -16262,12 +16510,22 @@ var StorageScope = class {
     return this.#builtinStore;
   }
   /**
-   * Rebuild the built-in store under `namespace`, or `null` for a store of the
-   * host's own kind, which holds its data somewhere the element cannot see and
-   * has to scope itself.
+   * Rebuild the built-in store under `namespace`, or `null` when `current` --
+   * the store the element is using now, unwrapped from any remote it wrapped
+   * it in -- is not the one this scope handed out.
+   *
+   * Asked of the store in use rather than of what connecting remembered,
+   * because the two part company the moment a host assigns a store of its own
+   * to a connected element. Remembering was enough to tell a host's store from
+   * the built-in one at connect; after it, the built-in one was still
+   * remembered, so a key change replaced the host's store with a fresh
+   * `sessionStorage` one -- and a host that had chosen to keep message bodies
+   * off the client found every one of them cached in the tab again. A store
+   * the element did not make holds its data somewhere the element cannot see,
+   * and has to scope itself.
    */
-  rescopeStore(namespace) {
-    if (this.#builtinStore === null) {
+  rescopeStore(current, namespace) {
+    if (current !== this.#builtinStore) {
       return null;
     }
     this.#builtinStore = new SessionStorageStore(namespace);
@@ -16791,6 +17049,13 @@ var AgUiChat = class extends HTMLElement {
   #queuedRow = document.createElement("div");
   /** How far back the composer has been walked; null while the user is typing. */
   #recallIndex = null;
+  /**
+   * What the walk last put in the composer, read back from it. A walk is live
+   * only while the composer still holds exactly this, so a write from anywhere
+   * else ends it. Stale while no walk is in progress, which is harmless: the
+   * comparison can only ever end a walk, never start one.
+   */
+  #recalled = "";
   /**
    * Re-clamp the dragged launcher when the window changes size. Bound once as
    * a field so `removeEventListener` on disconnect gets the same reference.
@@ -16826,6 +17091,39 @@ var AgUiChat = class extends HTMLElement {
    * history replay would draw the conversation a second time beneath it.
    */
   #connectedBefore = false;
+  /**
+   * The `user-key` whose state the element holds -- the transcript, the recall
+   * history, the Always allow waivers and the shared state -- or `null` before
+   * the first connect, when it holds nobody's.
+   *
+   * Not the same thing as the attribute. The attribute names the principal the
+   * host says is here now, and it can change while the element is out of the
+   * document, where nothing acts on it; this is who the state still belongs
+   * to. Connecting compares the two, which is how a key changed while detached
+   * still gets the handover a live change gets.
+   */
+  #principalKey = null;
+  /**
+   * The current principal's tenure: replaced on every handover from one
+   * principal to another, and captured by each client as it is built, so that
+   * a client can tell whether the principal it was built for is still the one
+   * this element serves.
+   *
+   * A client outlives the handover that stops it. A stopped run saves what it
+   * had once its request closes, a tool handler cannot be aborted and its
+   * result is kept, and an event already read off the wire is still applied --
+   * all of it after the store was purged and scoped to whoever arrived, so
+   * each one wrote the previous principal's words into the next one's storage
+   * or state. Writing into the previous principal's store instead would only
+   * re-create what the purge just removed, so such a client writes nothing.
+   *
+   * An identity rather than the key itself, for two reasons. The key's first
+   * arrival is an adoption, not a handover, and a run in flight across it is
+   * the same person's and keeps saving. And a key that leaves and comes back
+   * is a second tenure: the first one's stopped run must not re-create a
+   * conversation the handover purged.
+   */
+  #tenure = {};
   /**
    * The remote store `data-threads-url` wrapped around the conversation store,
    * and the store inside it, so connecting again can wrap that store rather
@@ -16844,6 +17142,33 @@ var AgUiChat = class extends HTMLElement {
   // the Send⇄Stop button: `agent.isRunning` is false between frontend-tool
   // rounds, but the user must still be able to stop there.
   #running = false;
+  /**
+   * The send {@link sendMessage} has taken, or the retry {@link retryLastTurn}
+   * has, whose run has not started yet; null otherwise.
+   *
+   * `running` turns on when the client starts the run, a microtask after it is
+   * asked for one, and a send does two things before it asks: it draws the
+   * turn, and it dispatches the submit event, whose listeners run in the middle
+   * of the send. A send from one of them, or a second call in the same task,
+   * passed every guard and started a second run on the same client -- two
+   * requests, and the listener's turn drawn between the user's turn and its
+   * answer. It is the gap a picked checkpoint closes by counting from the pick,
+   * closed the same way for a send. A retry asks for its run the same way, so
+   * it takes the same hold, and so does a restore that will resume a run, from
+   * before it asks the store for the conversation, through the history host's
+   * `holdRun`.
+   *
+   * Let go of once the run starts, because `running` holds from then until the
+   * run settles, and a send held past that would refuse a host's follow-up from
+   * the run-finished event, which fires as the run settles. Let go of by the
+   * send's, the retry's or the restore's end when its run never starts.
+   *
+   * An object rather than a flag, so a send or a retry ending releases only
+   * what it took. By the time either ends, the turn queued behind it has
+   * usually taken the field for itself, and a Stop lets go of it for the next
+   * send to take; the earlier one ending must release neither.
+   */
+  #sending = null;
   /** The decision a run is suspended on, which a Stop abandons. */
   #decision = new PendingDecision();
   /**
@@ -16933,7 +17258,10 @@ var AgUiChat = class extends HTMLElement {
       approvalRenderer: () => this.approvalRenderer,
       getContext: () => this.getContext(),
       conversationStore: () => this.conversationStore,
-      threadId: () => this.#history.threadId
+      threadId: () => this.#history.threadId,
+      // Read live and compared, the way each client compares the one it was
+      // built with: see #tenure.
+      tenure: () => this.#tenure
     });
     this.#runHandlers = new RunHandlers({
       element: this,
@@ -17069,6 +17397,7 @@ var AgUiChat = class extends HTMLElement {
       // A continuation sends only what the composer holds. The tray is not
       // read, so nothing rides along to be drawn or announced.
       announceTurn: (content) => this.#announceTurn(content, []),
+      recordTurn: (content) => this.#recordTurn(content),
       autoGrow: () => autoGrow(this.#input),
       continuationEnded: () => this.#flushQueued(),
       client: () => this.#client,
@@ -17077,7 +17406,37 @@ var AgUiChat = class extends HTMLElement {
       releaseClient: () => {
         this.#client = null;
       },
-      running: () => this.#running,
+      // A held send or retry is as much in flight to a pick as a run is: it has
+      // asked this element's client for a run that has not started, and a
+      // continuation started beside it was a second run in one conversation.
+      // So is a restore that will resume a run, which holds through the same
+      // field from before the store answers.
+      running: () => this.#running || this.#sending !== null,
+      // The hold a send takes, taken for a restore that will resume a run, so
+      // what refuses a send held short of its run refuses one made while the
+      // store is still answering: `sendMessage` returns, Send parks the turn,
+      // a Retry and a pick refuse. The same field rather than a flag beside it,
+      // because what lets go of a send's hold is right for this one too. The
+      // resumed run starting lets go, in `#setRunning`, so there is no gap
+      // after the resume is asked for, and a Stop does, in `#cancelRun`. A flag
+      // the restore cleared itself would still be set when the resumed run
+      // settles and sends the parked turn, so that send would be refused after
+      // the turn had left the queue, and lost.
+      //
+      // Whether the restore was stopped is not read off this hold, because one
+      // with nothing to resume takes none; the restore asks its own generation.
+      holdRun: () => {
+        const hold = {};
+        this.#sending = hold;
+        return {
+          release: () => {
+            if (this.#sending === hold) {
+              this.#sending = null;
+              this.#flushQueued();
+            }
+          }
+        };
+      },
       cancelRun: () => this.#cancelRun(),
       resetState: () => this.#resetState(),
       setRunning: (running) => this.#setRunning(running)
@@ -17387,6 +17746,12 @@ var AgUiChat = class extends HTMLElement {
     }
     this.#syncLauncher();
     this.#skills.init();
+    const held = this.#principalKey;
+    const changed = held !== null && held !== this.userKey;
+    if (changed) {
+      this.#changePrincipal(held, this.userKey);
+    }
+    this.#principalKey = this.userKey;
     this.conversationStore = this.#storage.scopeStore(this.#unwrappedStore(), this.userKey);
     window.addEventListener("resize", this.#onViewportResize);
     window.visualViewport?.addEventListener("resize", this.#onViewportResize);
@@ -17398,6 +17763,9 @@ var AgUiChat = class extends HTMLElement {
     this.#history.adoptActiveThread();
     queueMicrotask(() => this.#startup());
     void this.#history.rehydrate();
+    if (changed) {
+      void this.#history.refreshDrawer();
+    }
     this.#connected = true;
   }
   /**
@@ -17722,23 +18090,49 @@ var AgUiChat = class extends HTMLElement {
    * logout, because a logout is a navigation (or, in a single-page app, not
    * even that) rather than a tab close. Nothing remounts, so the host naming
    * the new principal is the only signal the element will ever get.
+   *
+   * Two callers. A live change runs all of it. connectedCallback runs it for a
+   * key that changed while the element was out of the document, and there it
+   * runs before the store is scoped and before `#connected` is set -- which is
+   * what `live` reads, since `isConnected` is already true by then. That call
+   * does the half about what storage and the element still hold. The half
+   * about the principal arriving -- the store scoped under the new key, its
+   * active thread, the replay -- is what connecting goes on to do anyway, and
+   * run here too it would read the old store before the new one exists,
+   * minting a thread pointer in the namespace just purged and replaying the
+   * history twice. Nor would it leave alone a store the host assigned while
+   * the element was out.
    */
   #changePrincipal(previousKey, nextKey) {
+    this.#principalKey = nextKey;
+    const live = this.#connected;
     const previous = this.#storage.conversationNamespace(previousKey);
     const next = this.#storage.conversationNamespace(nextKey);
     if (previousKey === "") {
       SessionStorageStore.adopt(previous, next);
-      this.#rescopeStore(next);
+      if (live) {
+        this.#rescopeStore(next);
+      }
       return;
     }
+    this.#tenure = {};
     SessionStorageStore.purge(previous);
-    this.#rescopeStore(next);
+    if (live) {
+      this.#rescopeStore(next);
+    }
     this.#dispatch.forgetWaivers();
     this.#cancelRun();
     this.#resetState();
     this.#sharedState = {};
+    this.#input.value = "";
+    this.#onInput();
     this.#setRunning(false);
     this.#setUnread(0);
+    if (!live) {
+      return;
+    }
+    this.#voice.dispose();
+    this.#voice.wire();
     this.#history.adoptActiveThread();
     void this.#history.rehydrate();
     void this.#history.refreshDrawer();
@@ -17747,13 +18141,17 @@ var AgUiChat = class extends HTMLElement {
    * Rebuild the `sessionStorage` store under `namespace`, re-wrapping it for
    * `data-threads-url` exactly as connecting did.
    *
-   * A store of the host's own kind is left alone: a store that holds its data
-   * somewhere the element cannot see has to scope itself. The transcript on
+   * A store the host assigned is left alone, whether before connecting or
+   * since: a store that holds its data somewhere the element cannot see has to
+   * scope itself. The exception is a plain `SessionStorageStore` assigned
+   * before connecting, which connecting cannot tell from the default and so
+   * took for the element's own. Hence the unwrapped store in use is what the scope is asked
+   * about, rather than what it remembered when connecting. The transcript on
    * screen is still cleared either way — the host swapped principals, and that
    * much is the element's to act on.
    */
   #rescopeStore(namespace) {
-    const store = this.#storage.rescopeStore(namespace);
+    const store = this.#storage.rescopeStore(this.#unwrappedStore(), namespace);
     if (store === null) {
       return;
     }
@@ -17876,8 +18274,17 @@ var AgUiChat = class extends HTMLElement {
    *
    * History is truncated to the most recent user message inclusive and the run
    * repeats, so the agent answers what it was asked rather than being told its
-   * last answer was wrong. Returns `false` when there is nothing to retry or a
-   * run is already in flight.
+   * last answer was wrong. Returns `false` when there is nothing to retry, or
+   * while anything that refuses a send is in flight: a run, a send or another
+   * retry whose run has not started yet, a checkpoint continuation, or a
+   * reload's restore that will resume a run. Also `false` when host code it
+   * runs before its run starts -- the store's save, or an activity or tool
+   * renderer the replay draws through -- has stopped it by starting a new chat
+   * or changing `user-key`. A tool or context provider that stops it does so
+   * inside the client's resume, past the last point this can see: nothing is
+   * sent, and this resolves `true`, because both a run starting and a Stop let
+   * go of the hold it checks. Rejects with the store's error when the store
+   * refuses the save, and then the conversation is as it was.
    *
    * Public because a host with its own message UI wants the same button, and
    * because the failed-run notice reaches it from outside the action row.
@@ -17888,20 +18295,35 @@ var AgUiChat = class extends HTMLElement {
    * again -- unless the user waived it for this session.
    */
   async retryLastTurn() {
-    if (this.#running) {
-      return false;
-    }
-    const client = this.#ensureClient();
-    const kept = client.truncateToLastUser();
-    if (kept === null) {
+    if (this.#running || this.#sending !== null || this.#history.continuation !== null) {
       return false;
     }
-    this.#clearTranscript();
-    for (const message of kept) {
-      this.#history.replay(message);
+    const hold = {};
+    this.#sending = hold;
+    try {
+      const client = this.#ensureClient();
+      const kept = client.truncateToLastUser();
+      if (kept === null) {
+        return false;
+      }
+      if (this.#sending !== hold) {
+        return false;
+      }
+      this.#clearTranscript();
+      for (const message of kept) {
+        this.#history.replay(message);
+        if (this.#sending !== hold) {
+          return false;
+        }
+      }
+      await client.resume();
+      return true;
+    } finally {
+      if (this.#sending === hold) {
+        this.#sending = null;
+        this.#flushQueued();
+      }
     }
-    await client.resume();
-    return true;
   }
   /**
    * Append a message bubble and return it.
@@ -18213,6 +18635,9 @@ var AgUiChat = class extends HTMLElement {
    * which is what every shell and every coding agent means by this. Arrowing
    * forward past the newest empties the composer again rather than sticking on
    * it, so the way out is the same key that got you in.
+   *
+   * A walk ends with any write into the composer that is not its own, so that
+   * whatever was written is never replaced by the next step.
    */
   #recallHistory(event) {
     const back = event.key === "ArrowUp";
@@ -18223,6 +18648,9 @@ var AgUiChat = class extends HTMLElement {
     if (drafts.length === 0) {
       return;
     }
+    if (this.#input.value !== this.#recalled) {
+      this.#recallIndex = null;
+    }
     if (this.#recallIndex === null && (!back || this.#input.value !== "")) {
       return;
     }
@@ -18233,6 +18661,7 @@ var AgUiChat = class extends HTMLElement {
     event.preventDefault();
     this.#recallIndex = next < 0 ? null : next;
     this.#input.value = next < 0 ? "" : drafts[next];
+    this.#recalled = this.#input.value;
     this.#input.setSelectionRange(this.#input.value.length, this.#input.value.length);
     autoGrow(this.#input);
   }
@@ -18243,15 +18672,11 @@ var AgUiChat = class extends HTMLElement {
    * observes the disconnect).
    */
   #cancelRun() {
-    for (const text4 of this.#queued) {
-      if (this.#sentDrafts[0] !== text4) {
-        this.#sentDrafts.unshift(text4);
-      }
-    }
     this.#queued.length = 0;
     this.#renderQueued();
     this.#decision.abort();
     this.#client?.cancel();
+    this.#sending = null;
     this.#history.stopContinuation();
   }
   /**
@@ -18264,6 +18689,9 @@ var AgUiChat = class extends HTMLElement {
   #setRunning(running) {
     const settled = this.#running && !running;
     this.#running = running;
+    if (running) {
+      this.#sending = null;
+    }
     const label = running ? this.#strings.stop : this.#strings.send;
     this.#send.title = label;
     this.#send.setAttribute("aria-label", label);
@@ -18314,13 +18742,29 @@ var AgUiChat = class extends HTMLElement {
       this.#queuedRow.appendChild(chip);
     }
   }
+  /**
+   * Put a turn that has left the composer at the front of the recall history,
+   * and start the next walk from it.
+   *
+   * Every turn the user typed and pressed a key to send comes through here:
+   * sent at once, queued behind a run, or sent to continue a checkpoint. A
+   * host's own `sendMessage` does not, because its text was never in the
+   * composer, and the arrow keys walk back through what the user wrote there.
+   */
+  #recordTurn(content) {
+    if (content !== "" && this.#sentDrafts[0] !== content) {
+      this.#sentDrafts.unshift(content);
+    }
+    this.#recallIndex = null;
+  }
   async #submit() {
     const content = this.#input.value.trim();
     const attachments = this.#attachments.tray?.readyRefs() ?? [];
     if (content === "" && attachments.length === 0) {
       return;
     }
-    if (this.#running || this.#history.continuation !== null) {
+    this.#recordTurn(content);
+    if (this.#running || this.#sending !== null || this.#history.continuation !== null) {
       if (content !== "") {
         this.#queued.push(content);
         this.#renderQueued();
@@ -18329,10 +18773,6 @@ var AgUiChat = class extends HTMLElement {
       }
       return;
     }
-    if (content !== "" && this.#sentDrafts[0] !== content) {
-      this.#sentDrafts.unshift(content);
-    }
-    this.#recallIndex = null;
     this.#input.value = "";
     autoGrow(this.#input);
     if (this.#attachments.tray?.hasPending() === true) {
@@ -18360,19 +18800,34 @@ var AgUiChat = class extends HTMLElement {
    *
    * 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.
+   * first. A send is in flight from the moment it is taken rather than from
+   * its run's start, so this no-ops from a {@link SUBMIT_EVENT} listener and
+   * for a second call in the same task too.
+   * 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 || this.#history.continuation !== null || content === "" && attachments.length === 0) {
+    if (this.#running || this.#sending !== null || this.#history.continuation !== null || content === "" && attachments.length === 0) {
       return;
     }
-    if (this.#transcript.isEmpty()) {
-      this.setAttribute("data-composer-settling", "");
+    const send = {};
+    this.#sending = send;
+    try {
+      if (this.#transcript.isEmpty()) {
+        this.setAttribute("data-composer-settling", "");
+      }
+      this.#announceTurn(content, attachments);
+      if (this.#sending !== send) {
+        return;
+      }
+      await this.#client_send(content, attachments);
+    } finally {
+      if (this.#sending === send) {
+        this.#sending = null;
+        this.#flushQueued();
+      }
     }
-    this.#announceTurn(content, attachments);
-    await this.#client_send(content, attachments);
   }
   /**
    * Put a turn the user sent on screen, and tell the host it was sent.
@@ -18472,6 +18927,7 @@ var AgUiChat = class extends HTMLElement {
    */
   #buildClient(seed) {
     const threadId = this.#history.threadId;
+    const tenure = this.#tenure;
     const agent = this.agentFactory({
       endpoint: seed.endpoint,
       headers: this.#requestHeaders(),
@@ -18496,12 +18952,30 @@ var AgUiChat = class extends HTMLElement {
       // 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.
+      //
+      // Every message list a client saves reaches the store through here -- a
+      // send, a round's end, a tool's result, the answers it writes for calls
+      // left open or declined by a Stop, a Stop's last save -- and so does a
+      // `data-threads-url` store's local copy, which is the only thing that
+      // wrapper does on a save. So this is the one gate for them. `onSaved` is
+      // behind it as well: it hands the saved conversation on as the seed of
+      // the next client, which would be the next principal's.
       onPersist: (messages) => {
+        if (tenure !== this.#tenure) {
+          return;
+        }
         const conversation = [...seed.follows, ...messages];
         this.conversationStore.saveMessages(threadId, conversation);
         seed.onSaved?.(conversation);
       },
-      onStateChanged: (state) => this.#onSharedStateChanged(state),
+      // Shared state is the next principal's first `RunAgentInput.state`, and
+      // the handover has just emptied it. A snapshot already read off the wire
+      // is applied after the Stop, and would put it back.
+      onStateChanged: (state) => {
+        if (tenure === this.#tenure) {
+          this.#onSharedStateChanged(state);
+        }
+      },
       connectionLostMessage: this.#strings.connectionLost,
       unfinishedMessage: this.#strings.callNotFinished,
       declinedMessage: this.#strings.declinedAction,
@@ -18663,7 +19137,7 @@ function setControlValue(el2, value) {
 }
 
 // src/version.ts
-var VERSION = "0.41.3";
+var VERSION = "0.42.0";
 export {
   ATTACHMENT_EVENT,
   AgUiChat,