@artooi/ag-ui-web-component 0.9.0 → 0.10.0

package/dist/index.js

@@ -591,7 +591,8 @@ var AttachmentTray = class {
       status: ATTACHMENT_STATUS.UPLOADING,
       progress: 0,
       ref: null,
-      error: ""
+      error: "",
+      controller: null
     };
     this.#items.push(item);
     const rejection = this.#reject(file);
@@ -629,11 +630,24 @@ var AttachmentTray = class {
     this.#items = this.#items.filter((item) => item.status === ATTACHMENT_STATUS.UPLOADING);
     this.#render();
   }
-  /** Drop every chip (a reset / new-chat). */
+  /** Drop every chip (a reset / new-chat), aborting any in-flight upload. */
   clear() {
+    for (const item of this.#items) {
+      item.controller?.abort();
+    }
     this.#items = [];
     this.#render();
   }
+  /**
+   * Abort every in-flight upload without touching the rendered chips — the
+   * teardown path when the host element is removed mid-upload, so a cancelled
+   * transfer doesn't orphan a server-side file.
+   */
+  dispose() {
+    for (const item of this.#items) {
+      item.controller?.abort();
+    }
+  }
   /** The size/type rejection reason for a file, or `null` when accepted. */
   #reject(file) {
     if (this.#config.maxBytes > 0 && file.size > this.#config.maxBytes) {
@@ -645,25 +659,41 @@ var AttachmentTray = class {
     return null;
   }
   #upload(item) {
+    const rejection = this.#reject(item.file);
+    if (rejection !== null) {
+      item.status = ATTACHMENT_STATUS.ERROR;
+      item.error = rejection;
+      this.#render();
+      this.#config.onChange?.();
+      return;
+    }
     item.status = ATTACHMENT_STATUS.UPLOADING;
     item.progress = 0;
     item.error = "";
+    const controller = new AbortController();
+    item.controller = controller;
     this.#render();
-    this.#config.upload(item.file, (fraction) => {
-      item.progress = fraction;
-      this.#render();
-    }).then((ref) => {
+    this.#config.upload(
+      item.file,
+      (fraction) => {
+        item.progress = fraction;
+        this.#render();
+      },
+      controller.signal
+    ).then((ref) => {
       item.status = ATTACHMENT_STATUS.READY;
       item.ref = ref;
     }).catch((error) => {
       item.status = ATTACHMENT_STATUS.ERROR;
       item.error = error instanceof Error ? error.message : this.#strings.uploadFailed;
     }).finally(() => {
+      item.controller = null;
       this.#render();
       this.#config.onChange?.();
     });
   }
   #remove(item) {
+    item.controller?.abort();
     this.#items = this.#items.filter((other) => other !== item);
     this.#render();
     this.#config.onChange?.();
@@ -3617,7 +3647,7 @@ var STYLES = `
   --ag-ui-radius: 0;
 }
 
-/* Page (PAGE-1): full-bleed background with a centred reading column. Unlike
+/* Page: full-bleed background with a centred reading column. Unlike
    "full" (edge-to-edge, left-aligned messages) the content sits in a column
    capped at --ag-ui-content-max-width. The column is produced by symmetric auto
    padding on the scroll area + composer (no per-row wrapper), so user pills
@@ -3659,7 +3689,7 @@ var STYLES = `
   max-width: 100%;
 }
 
-/* Sidebar (CUST-3): a full-height docked panel that slides open/closed and
+/* Sidebar: a full-height docked panel that slides open/closed and
    collapses to a slim icon rail (not the floating launcher). Docked right by
    default; data-side="left" docks it left. Overlay by default \u2014 set
    --ag-ui-position: static (and place this element in your own layout) for a
@@ -3769,7 +3799,7 @@ var STYLES = `
   white-space: nowrap;
 }
 
-/* Header / launcher icon holder (CUST-2): a slot, with a data-icon-url <img>
+/* Header / launcher icon holder: a slot, with a data-icon-url <img>
    fallback, sized via --ag-ui-icon-size. */
 .icon-holder {
   display: inline-flex;
@@ -3843,7 +3873,7 @@ var STYLES = `
   gap: var(--ag-ui-space);
 }
 
-/* Empty-state region (CUST-1 slot): centred while it's the only thing in the
+/* Empty-state region (slot): centred while it's the only thing in the
    list, hidden as soon as a message, card, or pending indicator renders. */
 .empty {
   margin: auto;
@@ -3855,7 +3885,7 @@ var STYLES = `
   display: none;
 }
 
-/* \u2500\u2500 Answer group / well (WELL-1) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+/* \u2500\u2500 Answer group / well \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
    One .answer per assistant turn wraps the streamed text, its tool cards,
    and the pending indicator so a whole answer reads (and can be boxed) as one
    unit. A flex column on the message-list gap, stretched to the list width so
@@ -4024,7 +4054,7 @@ var STYLES = `
   }
 }
 
-/* \u2500\u2500 Thoughts region (THINK-1) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+/* \u2500\u2500 Thoughts region \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
    A muted, collapsible chain-of-thought at the top of the answer group: open
    while the model reasons, folded once the answer text starts. */
 .thoughts {
@@ -4117,7 +4147,7 @@ var STYLES = `
   word-break: break-word;
 }
 
-/* Leading status icon (CARD-1). Empty in the DOM \u2014 the glyph/spinner is drawn
+/* Leading status icon. Empty in the DOM \u2014 the glyph/spinner is drawn
    here from the card's data-status, so it stays themeable. */
 .tool-call-icon {
   flex: none;
@@ -4165,7 +4195,7 @@ var STYLES = `
   }
 }
 
-/* Inline display mode (CARD-1): the lightest card \u2014 drop the box chrome so the
+/* Inline display mode: the lightest card \u2014 drop the box chrome so the
    status row reads as one line of the answer; the result toggle still expands
    below it. */
 .tool-call[data-display="inline"] {
@@ -4295,7 +4325,7 @@ var STYLES = `
   display: none;
 }
 
-/* The \u{1F3A4} mic button (VOICE-1); shown only once #wireVoice mounts it. */
+/* The \u{1F3A4} mic button; shown only once #wireVoice mounts it. */
 .voice-slot {
   display: contents;
 }
@@ -4810,6 +4840,9 @@ var ThoughtsBlock = class {
 
 // src/ui/relative_time.ts
 function relativeTime(timestamp, now = Date.now(), strings = DEFAULT_UI_STRINGS) {
+  if (!Number.isFinite(timestamp)) {
+    return strings.justNow;
+  }
   const seconds = Math.round((now - timestamp) / 1e3);
   if (seconds < 60) {
     return strings.justNow;
@@ -4841,6 +4874,8 @@ var ThreadDrawer = class {
   #strings;
   #threads = [];
   #activeId = "";
+  /** The element focused before the drawer opened, restored on close. */
+  #lastFocused = null;
   constructor(callbacks, strings = DEFAULT_UI_STRINGS) {
     this.#callbacks = callbacks;
     this.#strings = strings;
@@ -4856,7 +4891,9 @@ var ThreadDrawer = class {
     this.#panel.className = "drawer-panel";
     this.#panel.setAttribute("part", "drawer-panel");
     this.#panel.setAttribute("role", "dialog");
+    this.#panel.setAttribute("aria-modal", "true");
     this.#panel.setAttribute("aria-label", strings.chatHistory);
+    this.#panel.addEventListener("keydown", (event) => this.#onPanelKeydown(event));
     const header = document.createElement("div");
     header.className = "drawer-header";
     header.setAttribute("part", "drawer-header");
@@ -4892,13 +4929,55 @@ var ThreadDrawer = class {
     return !this.element.hidden;
   }
   open() {
+    if (this.isOpen()) {
+      return;
+    }
+    this.#lastFocused = this.#activeElement();
     this.element.hidden = false;
+    this.#newButton.focus();
   }
   close() {
+    if (!this.isOpen()) {
+      return;
+    }
     this.element.hidden = true;
+    this.#lastFocused?.focus();
+    this.#lastFocused = null;
   }
   toggle() {
-    this.element.hidden = !this.element.hidden;
+    if (this.isOpen()) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+  /** The currently-focused element within the drawer's root (shadow-aware). */
+  #activeElement() {
+    return this.element.getRootNode().activeElement;
+  }
+  /** Escape-to-close and a Tab focus trap while the dialog is open. */
+  #onPanelKeydown(event) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      this.close();
+      return;
+    }
+    if (event.key !== "Tab") {
+      return;
+    }
+    const focusables = Array.from(
+      this.#panel.querySelectorAll("button, input, [tabindex]")
+    ).filter((el) => !el.hidden);
+    const first = focusables[0];
+    const last = focusables[focusables.length - 1];
+    const active = this.#activeElement();
+    if (event.shiftKey && active === first) {
+      event.preventDefault();
+      last?.focus();
+    } else if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first?.focus();
+    }
   }
   /** Render the rows (or the empty state), highlighting the active thread. */
   setThreads(threads, activeId) {
@@ -4965,24 +5044,43 @@ var ThreadDrawer = class {
     row.append(select, actions);
     return row;
   }
-  /** Swap a row for an inline rename input; Enter commits, Escape cancels. */
+  /** Swap a row for an inline rename input; Enter/blur commits, Escape cancels. */
   #startRename(row, meta) {
     const input = document.createElement("input");
     input.type = "text";
     input.className = "drawer-rename-input";
     input.value = meta.title;
+    let done = false;
+    const commit = () => {
+      if (done) {
+        return;
+      }
+      done = true;
+      const value = input.value.trim();
+      if (value === "" || value === meta.title) {
+        this.#renderList();
+      } else {
+        this.#callbacks.onRename(meta.threadId, value);
+      }
+    };
+    const cancel = () => {
+      if (done) {
+        return;
+      }
+      done = true;
+      this.#renderList();
+    };
     input.addEventListener("keydown", (event) => {
       if (event.key === "Enter") {
-        const value = input.value.trim();
-        if (value === "") {
-          this.#renderList();
-        } else {
-          this.#callbacks.onRename(meta.threadId, value);
-        }
+        event.preventDefault();
+        commit();
       } else if (event.key === "Escape") {
-        this.#renderList();
+        event.preventDefault();
+        event.stopPropagation();
+        cancel();
       }
     });
+    input.addEventListener("blur", () => commit());
     row.replaceChildren(input);
     input.focus();
     input.select();
@@ -5078,6 +5176,9 @@ var ToolCallCard = class {
    * `inline`), or the args + result together (`compact`).
    */
   settle(status, text2) {
+    if (this.#settled) {
+      return;
+    }
     this.#settled = true;
     this.element.setAttribute("data-status", status);
     this.#status.textContent = statusLabels(this.#strings)[status];
@@ -5122,6 +5223,7 @@ var VoiceInput = class {
   #recorder = null;
   #stream = null;
   #chunks = [];
+  #disposed = false;
   constructor(options) {
     this.#transcribe = options.transcribe;
     this.#onText = options.onText;
@@ -5171,7 +5273,25 @@ var VoiceInput = class {
   #stop() {
     this.#recorder?.stop();
   }
+  /**
+   * Tear the control down — the teardown path when the host element is 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` back into a
+   * detached element.
+   */
+  dispose() {
+    this.#disposed = true;
+    if (this.#recorder !== null && this.#recorder.state !== "inactive") {
+      this.#recorder.stop();
+    }
+    this.#recorder = null;
+    this.#releaseStream();
+  }
   async #finish(mimeType) {
+    if (this.#disposed) {
+      return;
+    }
     this.#releaseStream();
     this.#setState("transcribing");
     const audio = new Blob(this.#chunks, { type: mimeType || "audio/webm" });
@@ -5329,7 +5449,7 @@ var AgUiClient = class {
         return;
       }
       const pending = [];
-      const runState = { terminal: false };
+      const runState = { terminal: false, errored: false };
       await this.#agent.runAgent(
         { tools: this.#getTools(), context: this.#getContext() },
         this.#buildSubscriber(pending, runState)
@@ -5341,6 +5461,9 @@ var AgUiClient = class {
       if (!runState.terminal) {
         throw new ConnectionLostError(this.#connectionLostMessage);
       }
+      if (runState.errored) {
+        return;
+      }
       if (this.#executeTool === null || pending.length === 0) {
         return;
       }
@@ -5391,7 +5514,7 @@ var AgUiClient = class {
       onToolCallResultEvent({ event }) {
         h.onToolResult(event.toolCallId, event.content);
       },
-      // Reasoning (THINK-1). `@ag-ui/client` already maps the deprecated
+      // Reasoning. `@ag-ui/client` already maps the deprecated
       // THINKING_* events onto these REASONING_* callbacks, so handling the
       // reasoning family alone covers both protocol versions.
       onReasoningStartEvent() {
@@ -5405,6 +5528,7 @@ var AgUiClient = class {
       },
       onRunErrorEvent({ event }) {
         runState.terminal = true;
+        runState.errored = true;
         h.onError(event.message);
       },
       onRunFinalized() {
@@ -5421,40 +5545,56 @@ function isAbortError(error) {
 // src/core/attachment.ts
 function messageAttachments(message) {
   const refs = message.attachments;
-  return Array.isArray(refs) ? refs : [];
+  return Array.isArray(refs) ? refs.filter(isAttachmentRef) : [];
+}
+function isAttachmentRef(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const ref = value;
+  return typeof ref["id"] === "string" && typeof ref["name"] === "string" && typeof ref["mime"] === "string" && typeof ref["size"] === "number" && (ref["url"] === void 0 || typeof ref["url"] === "string");
 }
 
 // src/core/conversation_store.ts
 import { randomUUID as randomUUID3 } from "@ag-ui/client";
-var THREAD_KEY = "ag-ui-chat:thread";
-var THREADS_KEY = "ag-ui-chat:threads";
-var MESSAGES_PREFIX = "ag-ui-chat:messages:";
-var CHECKPOINT_PREFIX = "ag-ui-chat:checkpoint:";
+var KEY_ROOT = "ag-ui-chat";
+var THREAD_SUFFIX = "thread";
+var THREADS_SUFFIX = "threads";
+var MESSAGES_SUFFIX = "messages:";
+var CHECKPOINT_SUFFIX = "checkpoint:";
 var TITLE_LIMIT = 60;
 var PREVIEW_LIMIT = 100;
 var DEFAULT_TITLE = "New conversation";
 var SessionStorageStore = class {
+  #root;
+  constructor(namespace = "") {
+    this.#root = namespace === "" ? KEY_ROOT : `${KEY_ROOT}@${namespace}`;
+    if (namespace !== "") {
+      this.#migrateLegacyKeys();
+    }
+  }
   threadId() {
-    const existing = sessionStorage.getItem(THREAD_KEY);
+    const key = this.#key(THREAD_SUFFIX);
+    const existing = sessionStorage.getItem(key);
     if (existing !== null) {
       return existing;
     }
     const id = randomUUID3();
-    sessionStorage.setItem(THREAD_KEY, id);
+    sessionStorage.setItem(key, id);
     return id;
   }
   loadMessages(threadId) {
-    return Promise.resolve(this.#readJson(MESSAGES_PREFIX + threadId));
+    return Promise.resolve(this.#readJson(this.#key(MESSAGES_SUFFIX + threadId)));
   }
   saveMessages(threadId, messages) {
-    sessionStorage.setItem(MESSAGES_PREFIX + threadId, JSON.stringify(messages));
+    sessionStorage.setItem(this.#key(MESSAGES_SUFFIX + threadId), JSON.stringify(messages));
     this.#touchThread(threadId, messages);
   }
   loadCheckpoint(threadId) {
-    return this.#readJson(CHECKPOINT_PREFIX + threadId);
+    return this.#readJson(this.#key(CHECKPOINT_SUFFIX + threadId));
   }
   saveCheckpoint(threadId, checkpoint) {
-    const key = CHECKPOINT_PREFIX + threadId;
+    const key = this.#key(CHECKPOINT_SUFFIX + threadId);
     if (checkpoint === null) {
       sessionStorage.removeItem(key);
       return;
@@ -5462,11 +5602,11 @@ var SessionStorageStore = class {
     sessionStorage.setItem(key, JSON.stringify(checkpoint));
   }
   clear(threadId) {
-    sessionStorage.removeItem(MESSAGES_PREFIX + threadId);
-    sessionStorage.removeItem(CHECKPOINT_PREFIX + threadId);
+    sessionStorage.removeItem(this.#key(MESSAGES_SUFFIX + threadId));
+    sessionStorage.removeItem(this.#key(CHECKPOINT_SUFFIX + threadId));
     this.#writeThreads(this.#readThreads().filter((thread) => thread.threadId !== threadId));
-    if (sessionStorage.getItem(THREAD_KEY) === threadId) {
-      sessionStorage.removeItem(THREAD_KEY);
+    if (sessionStorage.getItem(this.#key(THREAD_SUFFIX)) === threadId) {
+      sessionStorage.removeItem(this.#key(THREAD_SUFFIX));
     }
   }
   listThreads() {
@@ -5474,7 +5614,7 @@ var SessionStorageStore = class {
     return Promise.resolve(metas);
   }
   setActiveThread(threadId) {
-    sessionStorage.setItem(THREAD_KEY, threadId);
+    sessionStorage.setItem(this.#key(THREAD_SUFFIX), threadId);
   }
   renameThread(threadId, title) {
     const threads = this.#readThreads();
@@ -5510,14 +5650,48 @@ var SessionStorageStore = class {
     this.#writeThreads(threads);
   }
   #readThreads() {
-    return this.#readJson(THREADS_KEY) ?? [];
+    return this.#readJson(this.#key(THREADS_SUFFIX)) ?? [];
   }
   #writeThreads(threads) {
+    const key = this.#key(THREADS_SUFFIX);
     if (threads.length === 0) {
-      sessionStorage.removeItem(THREADS_KEY);
+      sessionStorage.removeItem(key);
       return;
     }
-    sessionStorage.setItem(THREADS_KEY, JSON.stringify(threads));
+    sessionStorage.setItem(key, JSON.stringify(threads));
+  }
+  /** This store's fully-qualified key for a suffix (namespaced when set). */
+  #key(suffix) {
+    return `${this.#root}:${suffix}`;
+  }
+  /**
+   * One-time move of pre-namespacing (`ag-ui-chat:*`) keys into this instance's
+   * namespace, so an existing conversation isn't orphaned by the upgrade. Only
+   * this store's own keys move (thread pointer, drawer index, per-thread
+   * messages/checkpoints) — the element's `collapsed`/`theme` keys are left
+   * alone. The first namespaced instance to mount adopts the legacy data; a
+   * second namespace finds it gone and starts fresh.
+   */
+  #migrateLegacyKeys() {
+    const legacyRoot = `${KEY_ROOT}:`;
+    const moves = [];
+    for (let i = 0; i < sessionStorage.length; i += 1) {
+      const key = sessionStorage.key(i);
+      if (key === null || !key.startsWith(legacyRoot)) {
+        continue;
+      }
+      const suffix = key.slice(legacyRoot.length);
+      if (isOwnedSuffix(suffix)) {
+        moves.push([key, this.#key(suffix)]);
+      }
+    }
+    for (const [from, to] of moves) {
+      const value = sessionStorage.getItem(from);
+      if (value !== null && sessionStorage.getItem(to) === null) {
+        sessionStorage.setItem(to, value);
+      }
+      sessionStorage.removeItem(from);
+    }
   }
   /** Parse a stored JSON value, returning `null` when absent or corrupt. */
   #readJson(key) {
@@ -5532,6 +5706,9 @@ var SessionStorageStore = class {
     }
   }
 };
+function isOwnedSuffix(suffix) {
+  return suffix === THREAD_SUFFIX || suffix === THREADS_SUFFIX || suffix.startsWith(MESSAGES_SUFFIX) || suffix.startsWith(CHECKPOINT_SUFFIX);
+}
 function deriveTitle(messages) {
   for (const message of messages) {
     if (message.role === "user") {
@@ -5638,7 +5815,10 @@ var RemoteConversationStore = class {
     if (response === null || !response.ok) {
       return this.#local.loadMessages(threadId);
     }
-    const body = await response.json();
+    const body = await this.#readJson(response);
+    if (body === null) {
+      return this.#local.loadMessages(threadId);
+    }
     return body.messages ?? null;
   }
   async #fetchThreads() {
@@ -5646,14 +5826,28 @@ var RemoteConversationStore = class {
     if (response === null || !response.ok) {
       return null;
     }
-    const body = await response.json();
+    const body = await this.#readJson(response);
+    if (body === null) {
+      return null;
+    }
     return body.threads ?? [];
   }
+  /** Parse a `Response` body as JSON, or `null` when it isn't valid JSON. */
+  async #readJson(response) {
+    try {
+      return await response.json();
+    } catch {
+      return null;
+    }
+  }
   #toMeta(row) {
     return {
       threadId: row.thread_id,
       title: this.#renamed.get(row.thread_id) ?? row.title,
-      updatedAt: row.updated_at === null ? 0 : Date.parse(row.updated_at),
+      // `null` or an unparseable date both become `NaN` (Date.parse's own
+      // signal), which `relativeTime` renders as a neutral label rather than
+      // "~2950w ago" (epoch 0) or "NaNw ago".
+      updatedAt: row.updated_at === null ? Number.NaN : Date.parse(row.updated_at),
       preview: row.preview
     };
   }
@@ -5929,7 +6123,7 @@ var AgUiChat = class extends HTMLElement {
   #attachButton;
   #fileInput;
   #attachSlot;
-  /** Optional built-in header theme toggle (THEME-1); shown only with `data-theme-toggle`. */
+  /** Optional built-in header theme toggle; shown only with `data-theme-toggle`. */
   #themeToggle;
   /** The collapsed-sidebar rail (an expand affordance; shown only for `placement="sidebar"`). */
   #rail;
@@ -5957,18 +6151,25 @@ var AgUiChat = class extends HTMLElement {
   // it; ≤1 ⇒ it arrived at once and the word reveal is appropriate.
   #streamDeltas = 0;
   #pending = null;
-  // The current assistant turn's grouping container (WELL-1). One `.answer`
+  // The current assistant turn's grouping container. One `.answer`
   // wraps everything a single answer produces — streamed text, tool cards, the
   // pending indicator — so it can be boxed as one "well" by CSS. Opened on the
   // turn's first run start, closed at settle, so it spans the whole multi-round
   // frontend-tool loop (which is several AG-UI runs), not one run. `null`
   // between turns; user bubbles never enter it.
   #currentGroup = null;
-  // The current turn's streamed-reasoning region (THINK-1), shown at the top of
+  // The current turn's streamed-reasoning region, shown at the top of
   // the answer group while a reasoning model thinks and collapsed once the
   // answer's first text token arrives. `null` outside a reasoning turn.
   #thoughts = null;
   #threadId = "";
+  // Per-instance suffix for the origin-scoped storage keys (collapsed / theme /
+  // active thread), so two instances on one origin don't clobber each other.
+  // Empty ⇒ the pre-namespacing global keys (back-compat). Resolved on connect.
+  #storageNs = "";
+  // Bumped on every #rehydrate; a replay whose generation is stale (a newer
+  // thread switch started while it awaited a slow store) drops its result.
+  #rehydrateGeneration = 0;
   #initialMessages = [];
   // Skill catalog by source; merged backend → embed → client (later wins).
   #backendSkills = [];
@@ -6112,27 +6313,44 @@ var AgUiChat = class extends HTMLElement {
     this.setAttribute("data-tool-display", value);
   }
   connectedCallback() {
+    this.#storageNs = this.id !== "" ? this.id : this.endpoint;
     this.#strings = mergeUiStrings({ ...this.#readStringOverrides(), ...this.strings });
     if (this.getAttribute("data-theme-toggle") !== null) {
-      const saved = sessionStorage.getItem(THEME_KEY);
+      const saved = this.#readScopedItem(THEME_KEY);
       if (saved !== null) {
         this.setAttribute("theme", saved);
       }
     }
     this.#render();
     this.#drawer.setStrings(this.#strings);
-    if (sessionStorage.getItem(COLLAPSED_KEY) === "1") {
+    if (this.#readScopedItem(COLLAPSED_KEY) === "1") {
       this.setAttribute("collapsed", "");
     }
     this.#syncRail();
     this.#initSkills();
     void this.#fetchToolCatalog();
+    if (this.#storageNs !== "" && this.conversationStore instanceof SessionStorageStore) {
+      this.conversationStore = new SessionStorageStore(this.#storageNs);
+    }
     this.#wireThreadStore();
     this.#wireAttachments();
     this.#wireVoice();
     this.#threadId = this.conversationStore.threadId();
     void this.#rehydrate();
   }
+  /**
+   * Tear down live resources when the element leaves the DOM (a removed node, a
+   * client-side route swap): cancel the in-flight run so its SSE stream closes,
+   * abort any in-flight uploads so they don't orphan server-side files, and
+   * release the mic so the browser's recording indicator clears. Without this a
+   * removed `<ag-ui-chat>` leaks a streaming request, uploads, and a live
+   * `MediaRecorder`.
+   */
+  disconnectedCallback() {
+    this.#cancelRun();
+    this.#attachTray?.dispose();
+    this.#voice?.dispose();
+  }
   /** Parse the inline `data-strings` JSON overrides (empty when absent/malformed). */
   #readStringOverrides() {
     const raw = this.getAttribute("data-strings");
@@ -6178,7 +6396,7 @@ var AgUiChat = class extends HTMLElement {
     if (url === null) {
       return null;
     }
-    return (file, onProgress) => uploadAttachment(file, { url, headers: this.headers, onProgress });
+    return (file, onProgress, signal) => uploadAttachment(file, { url, headers: this.headers, onProgress, signal });
   }
   /**
    * Reveal the composer's 🎤 mic button when transcription is possible — either
@@ -6382,7 +6600,7 @@ Use the read_attachment tool with an id to read a file's contents.`
     } else {
       this.removeAttribute("collapsed");
     }
-    sessionStorage.setItem(COLLAPSED_KEY, collapsed ? "1" : "0");
+    sessionStorage.setItem(this.#storageKey(COLLAPSED_KEY), collapsed ? "1" : "0");
     this.#syncRail();
     this.dispatchEvent(
       new CustomEvent(TOGGLE_EVENT, {
@@ -6405,9 +6623,25 @@ Use the read_attachment tool with an id to read a file's contents.`
   toggleTheme() {
     const next = this.getAttribute("theme") === "dark" ? "light" : "dark";
     this.setAttribute("theme", next);
-    sessionStorage.setItem(THEME_KEY, next);
+    sessionStorage.setItem(this.#storageKey(THEME_KEY), next);
     this.#syncThemeGlyph();
   }
+  /** This instance's namespaced form of an origin-scoped storage key. */
+  #storageKey(base) {
+    return this.#storageNs === "" ? base : `${base}:${this.#storageNs}`;
+  }
+  /**
+   * Read a namespaced origin-scoped value, falling back once to the legacy
+   * pre-namespacing global key (left in place) so an existing collapsed/theme
+   * preference survives the upgrade.
+   */
+  #readScopedItem(base) {
+    const scoped = sessionStorage.getItem(this.#storageKey(base));
+    if (scoped !== null || this.#storageNs === "") {
+      return scoped;
+    }
+    return sessionStorage.getItem(base);
+  }
   /** Reflect the current theme on the toggle: show the destination's glyph. */
   #syncThemeGlyph() {
     const dark = this.getAttribute("theme") === "dark";
@@ -6475,7 +6709,12 @@ Use the read_attachment tool with an id to read a file's contents.`
    * result from the page we landed on.
    */
   async #rehydrate() {
+    this.#rehydrateGeneration += 1;
+    const generation = this.#rehydrateGeneration;
     const messages = await this.conversationStore.loadMessages(this.#threadId);
+    if (generation !== this.#rehydrateGeneration) {
+      return;
+    }
     if (messages !== null) {
       this.#initialMessages = messages;
       for (const message of messages) {
@@ -6562,7 +6801,7 @@ Use the read_attachment tool with an id to read a file's contents.`
    * stays literal text (no need to parse what the user typed, and it avoids
    * rendering user-authored markup).
    *
-   * Assistant bubbles land in the current answer group (WELL-1), opening one if
+   * Assistant bubbles land in the current answer group, opening one if
    * needed; a user bubble closes the prior group and sits directly in the list
    * (the well wraps the *assistant* turn, the user message precedes it).
    */
@@ -6796,6 +7035,9 @@ Use the read_attachment tool with an id to read a file's contents.`
     this.#send.dataset["state"] = running ? "running" : "idle";
   }
   async #submit() {
+    if (this.#running) {
+      return;
+    }
     const content = this.#input.value.trim();
     const attachments = this.#attachTray?.readyRefs() ?? [];
     if (content === "" && attachments.length === 0) {
@@ -7113,7 +7355,7 @@ function setControlValue(el, value) {
 }
 
 // src/version.ts
-var VERSION = "0.9.0";
+var VERSION = "0.10.0";
 export {
   AgUiChat,
   AgUiClient,