@artooi/ag-ui-web-component 0.3.1 → 0.5.0

package/dist/index.js

@@ -239,7 +239,7 @@ function actionButton(modifier, label) {
   button.textContent = label;
   return button;
 }
-function requestConfirmation(host, request) {
+function requestConfirmation(host, request, options = {}) {
   return new Promise((resolve) => {
     const card = document.createElement("div");
     card.className = "confirm";
@@ -256,7 +256,12 @@ function requestConfirmation(host, request) {
     actions.className = "confirm-actions";
     const cancel = actionButton("cancel", "Cancel");
     const confirm = actionButton("confirm", "Confirm");
+    let settled = false;
     const close = (accepted) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
       cancel.disabled = true;
       confirm.disabled = true;
       card.setAttribute("data-resolved", accepted ? "confirmed" : "declined");
@@ -264,9 +269,14 @@ function requestConfirmation(host, request) {
     };
     cancel.addEventListener("click", () => close(false));
     confirm.addEventListener("click", () => close(true));
+    options.signal?.addEventListener("abort", () => close(false), { once: true });
     actions.append(cancel, confirm);
     card.append(body, args, actions);
     host.appendChild(card);
+    if (options.signal?.aborted === true) {
+      close(false);
+      return;
+    }
     confirm.focus();
   });
 }
@@ -3449,6 +3459,19 @@ var STYLES = `
   cursor: default;
 }
 
+/* The composer button doubles as the Stop control while a run is in flight. */
+.send[data-state="running"] {
+  background: var(--ag-ui-muted);
+}
+
+/* Muted "\u23F9 Stopped" line after a cancelled run \u2014 a note, not an error bubble. */
+.stopped-note {
+  align-self: flex-start;
+  color: var(--ag-ui-muted);
+  font-size: 12px;
+  padding: 2px 4px;
+}
+
 /* Inline confirmation card \u2014 lives in the transcript, no focus-stealing overlay. */
 .confirm {
   align-self: stretch;
@@ -3579,8 +3602,370 @@ var STYLES = `
   font-size: 0.85em;
   color: var(--ag-ui-danger);
 }
+
+/* Chat-history drawer \u2014 a slide-over within the chat panel. */
+.drawer {
+  position: absolute;
+  inset: 0;
+  z-index: 5;
+  display: flex;
+}
+
+.drawer[hidden] {
+  display: none;
+}
+
+.drawer-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(20, 20, 50, 0.32);
+}
+
+.drawer-panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: min(300px, 85%);
+  height: 100%;
+  background: var(--ag-ui-bg);
+  border-right: 1px solid var(--ag-ui-border);
+  box-shadow: var(--ag-ui-shadow);
+  overflow: hidden;
+}
+
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ag-ui-space);
+  padding: var(--ag-ui-pad);
+  border-bottom: 1px solid var(--ag-ui-border);
+}
+
+.drawer-title {
+  font-weight: 600;
+}
+
+.drawer-new {
+  border: 1px solid var(--ag-ui-border);
+  border-radius: var(--ag-ui-radius);
+  background: var(--ag-ui-bg);
+  color: var(--ag-ui-accent);
+  padding: 4px 10px;
+  font: inherit;
+  font-size: 0.85em;
+  cursor: pointer;
+}
+
+.drawer-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.drawer-empty {
+  padding: var(--ag-ui-pad);
+  font-size: 0.9em;
+  color: var(--ag-ui-muted);
+}
+
+.drawer-row {
+  display: flex;
+  align-items: stretch;
+  border-bottom: 1px solid var(--ag-ui-border);
+}
+
+.drawer-row--active {
+  background: var(--ag-ui-assistant-bg);
+}
+
+.drawer-row-select {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 12px;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.drawer-row-title {
+  font-weight: 600;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.drawer-row-time {
+  font-size: 0.72em;
+  color: var(--ag-ui-muted);
+}
+
+.drawer-row-preview {
+  font-size: 0.8em;
+  color: var(--ag-ui-muted);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.drawer-row-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0 6px;
+}
+
+.drawer-row-rename,
+.drawer-row-delete {
+  border: none;
+  background: none;
+  color: var(--ag-ui-muted);
+  font-size: 0.9em;
+  padding: 4px;
+  cursor: pointer;
+}
+
+.drawer-rename-input {
+  flex: 1;
+  min-width: 0;
+  margin: 6px 10px;
+  padding: 4px 8px;
+  border: 1px solid var(--ag-ui-accent);
+  border-radius: 6px;
+  background: var(--ag-ui-input-bg);
+  color: var(--ag-ui-fg);
+  font: inherit;
+}
+
+.drawer-confirm {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  font-size: 0.85em;
+}
+
+.drawer-confirm-label {
+  color: var(--ag-ui-danger);
+}
+
+.drawer-confirm-yes {
+  border: none;
+  border-radius: 6px;
+  background: var(--ag-ui-danger);
+  color: #ffffff;
+  padding: 3px 10px;
+  font: inherit;
+  cursor: pointer;
+}
+
+.drawer-confirm-no {
+  border: 1px solid var(--ag-ui-border);
+  border-radius: 6px;
+  background: none;
+  color: inherit;
+  padding: 3px 10px;
+  font: inherit;
+  cursor: pointer;
+}
+
+/* Embedded placement: an inline, flush side panel rather than a dimmed,
+   floating slide-over. */
+:host([placement="embedded"]) .drawer-backdrop {
+  background: none;
+}
+
+:host([placement="embedded"]) .drawer-panel {
+  width: 100%;
+  border-right: none;
+  box-shadow: none;
+}
 `;
 
+// src/ui/relative_time.ts
+function relativeTime(timestamp, now = Date.now()) {
+  const seconds = Math.round((now - timestamp) / 1e3);
+  if (seconds < 60) {
+    return "just now";
+  }
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60) {
+    return `${minutes}m ago`;
+  }
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) {
+    return `${hours}h ago`;
+  }
+  const days = Math.round(hours / 24);
+  if (days < 7) {
+    return `${days}d ago`;
+  }
+  return `${Math.round(days / 7)}w ago`;
+}
+
+// src/ui/thread_drawer.ts
+var ThreadDrawer = class {
+  /** The drawer root (backdrop + panel). Append to the chat shell; hidden until opened. */
+  element;
+  #callbacks;
+  #list;
+  #threads = [];
+  #activeId = "";
+  constructor(callbacks) {
+    this.#callbacks = callbacks;
+    this.element = document.createElement("div");
+    this.element.className = "drawer";
+    this.element.hidden = true;
+    const backdrop = document.createElement("div");
+    backdrop.className = "drawer-backdrop";
+    backdrop.addEventListener("click", () => this.close());
+    const panel = document.createElement("div");
+    panel.className = "drawer-panel";
+    panel.setAttribute("role", "dialog");
+    panel.setAttribute("aria-label", "Chat history");
+    const header = document.createElement("div");
+    header.className = "drawer-header";
+    const heading = document.createElement("span");
+    heading.className = "drawer-title";
+    heading.textContent = "Chats";
+    const newButton = document.createElement("button");
+    newButton.type = "button";
+    newButton.className = "drawer-new";
+    newButton.textContent = "New chat";
+    newButton.addEventListener("click", () => {
+      this.close();
+      this.#callbacks.onNew();
+    });
+    header.append(heading, newButton);
+    this.#list = document.createElement("div");
+    this.#list.className = "drawer-list";
+    panel.append(header, this.#list);
+    this.element.append(backdrop, panel);
+  }
+  isOpen() {
+    return !this.element.hidden;
+  }
+  open() {
+    this.element.hidden = false;
+  }
+  close() {
+    this.element.hidden = true;
+  }
+  toggle() {
+    this.element.hidden = !this.element.hidden;
+  }
+  /** Render the rows (or the empty state), highlighting the active thread. */
+  setThreads(threads, activeId) {
+    this.#threads = threads;
+    this.#activeId = activeId;
+    this.#renderList();
+  }
+  #renderList() {
+    this.#list.replaceChildren();
+    if (this.#threads.length === 0) {
+      const empty = document.createElement("div");
+      empty.className = "drawer-empty";
+      empty.textContent = "No conversations yet.";
+      this.#list.appendChild(empty);
+      return;
+    }
+    for (const meta of this.#threads) {
+      this.#list.appendChild(this.#renderRow(meta));
+    }
+  }
+  #renderRow(meta) {
+    const row = document.createElement("div");
+    row.className = "drawer-row";
+    if (meta.threadId === this.#activeId) {
+      row.classList.add("drawer-row--active");
+    }
+    const select = document.createElement("button");
+    select.type = "button";
+    select.className = "drawer-row-select";
+    const title = document.createElement("span");
+    title.className = "drawer-row-title";
+    title.textContent = meta.title;
+    const time = document.createElement("span");
+    time.className = "drawer-row-time";
+    time.textContent = relativeTime(meta.updatedAt);
+    const preview = document.createElement("span");
+    preview.className = "drawer-row-preview";
+    preview.textContent = meta.preview;
+    select.append(title, time, preview);
+    select.addEventListener("click", () => {
+      this.close();
+      this.#callbacks.onSelect(meta.threadId);
+    });
+    const rename = document.createElement("button");
+    rename.type = "button";
+    rename.className = "drawer-row-rename";
+    rename.title = "Rename";
+    rename.setAttribute("aria-label", "Rename conversation");
+    rename.textContent = "\u270E";
+    rename.addEventListener("click", () => this.#startRename(row, meta));
+    const remove = document.createElement("button");
+    remove.type = "button";
+    remove.className = "drawer-row-delete";
+    remove.title = "Delete";
+    remove.setAttribute("aria-label", "Delete conversation");
+    remove.textContent = "\u{1F5D1}";
+    remove.addEventListener("click", () => this.#confirmDelete(row, meta));
+    const actions = document.createElement("div");
+    actions.className = "drawer-row-actions";
+    actions.append(rename, remove);
+    row.append(select, actions);
+    return row;
+  }
+  /** Swap a row for an inline rename input; Enter commits, Escape cancels. */
+  #startRename(row, meta) {
+    const input = document.createElement("input");
+    input.type = "text";
+    input.className = "drawer-rename-input";
+    input.value = meta.title;
+    input.addEventListener("keydown", (event) => {
+      if (event.key === "Enter") {
+        const value = input.value.trim();
+        if (value === "") {
+          this.#renderList();
+        } else {
+          this.#callbacks.onRename(meta.threadId, value);
+        }
+      } else if (event.key === "Escape") {
+        this.#renderList();
+      }
+    });
+    row.replaceChildren(input);
+    input.focus();
+    input.select();
+  }
+  /** Swap a row for an inline "Delete? [Delete] [Cancel]" confirm. */
+  #confirmDelete(row, meta) {
+    const confirm = document.createElement("div");
+    confirm.className = "drawer-confirm";
+    const label = document.createElement("span");
+    label.className = "drawer-confirm-label";
+    label.textContent = "Delete?";
+    const yes = document.createElement("button");
+    yes.type = "button";
+    yes.className = "drawer-confirm-yes";
+    yes.textContent = "Delete";
+    yes.addEventListener("click", () => this.#callbacks.onDelete(meta.threadId));
+    const no = document.createElement("button");
+    no.type = "button";
+    no.className = "drawer-confirm-no";
+    no.textContent = "Cancel";
+    no.addEventListener("click", () => this.#renderList());
+    confirm.append(label, yes, no);
+    row.replaceChildren(confirm);
+  }
+};
+
 // src/ui/tool_call_card.ts
 var STATUS_LABEL = {
   [TOOL_CALL_STATUS.PENDING]: "running\u2026",
@@ -3669,6 +4054,9 @@ var AgUiClient = class {
   #getContext;
   #executeTool;
   #onPersist;
+  // 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.
+  #cancelled = false;
   constructor(config) {
     this.#agent = config.agent;
     this.#handlers = config.handlers;
@@ -3711,23 +4099,52 @@ var AgUiClient = class {
     this.#agent.addMessage({ id: randomUUID(), role: "tool", content, toolCallId });
     this.#onPersist(this.#agent.messages);
   }
+  /**
+   * Cancel the in-flight run (AG-UI has no server cancel route — aborting the
+   * streaming request is the protocol's cancel; the server observes the
+   * 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.
+   */
+  cancel() {
+    this.#cancelled = true;
+    this.#agent.abortRun();
+  }
   async #run() {
+    this.#cancelled = false;
     try {
       await this.#runLoop();
+      if (this.#cancelled) {
+        this.#onCancelled();
+      }
     } catch (error) {
-      this.#handlers.onError(error instanceof Error ? error.message : String(error));
+      if (this.#cancelled || isAbortError(error)) {
+        this.#onCancelled();
+      } else {
+        this.#handlers.onError(error instanceof Error ? error.message : String(error));
+      }
     } finally {
       this.#handlers.onSettled();
     }
   }
+  #onCancelled() {
+    this.#onPersist(this.#agent.messages);
+    this.#handlers.onCancelled();
+  }
   async #runLoop() {
     for (let round = 0; round < MAX_TOOL_ROUNDS; round += 1) {
+      if (this.#cancelled) {
+        return;
+      }
       const pending = [];
       await this.#agent.runAgent(
         { tools: this.#getTools(), context: this.#getContext() },
         this.#buildSubscriber(pending)
       );
       this.#onPersist(this.#agent.messages);
+      if (this.#cancelled) {
+        return;
+      }
       if (this.#executeTool === null || pending.length === 0) {
         return;
       }
@@ -3787,12 +4204,19 @@ var AgUiClient = class {
     };
   }
 };
+function isAbortError(error) {
+  return error instanceof Error && error.name === "AbortError";
+}
 
 // src/core/conversation_store.ts
 import { randomUUID as randomUUID2 } 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 TITLE_LIMIT = 60;
+var PREVIEW_LIMIT = 100;
+var DEFAULT_TITLE = "New conversation";
 var SessionStorageStore = class {
   threadId() {
     const existing = sessionStorage.getItem(THREAD_KEY);
@@ -3808,6 +4232,7 @@ var SessionStorageStore = class {
   }
   saveMessages(threadId, messages) {
     sessionStorage.setItem(MESSAGES_PREFIX + threadId, JSON.stringify(messages));
+    this.#touchThread(threadId, messages);
   }
   loadCheckpoint(threadId) {
     return this.#readJson(CHECKPOINT_PREFIX + threadId);
@@ -3823,7 +4248,60 @@ var SessionStorageStore = class {
   clear(threadId) {
     sessionStorage.removeItem(MESSAGES_PREFIX + threadId);
     sessionStorage.removeItem(CHECKPOINT_PREFIX + threadId);
-    sessionStorage.removeItem(THREAD_KEY);
+    this.#writeThreads(this.#readThreads().filter((thread) => thread.threadId !== threadId));
+    if (sessionStorage.getItem(THREAD_KEY) === threadId) {
+      sessionStorage.removeItem(THREAD_KEY);
+    }
+  }
+  listThreads() {
+    const metas = this.#readThreads().sort((a, b2) => b2.updatedAt - a.updatedAt).map(({ threadId, title, updatedAt, preview }) => ({ threadId, title, updatedAt, preview }));
+    return Promise.resolve(metas);
+  }
+  setActiveThread(threadId) {
+    sessionStorage.setItem(THREAD_KEY, threadId);
+  }
+  renameThread(threadId, title) {
+    const threads = this.#readThreads();
+    const entry = threads.find((thread) => thread.threadId === threadId);
+    if (entry === void 0) {
+      return;
+    }
+    entry.title = title;
+    entry.titleCustom = true;
+    this.#writeThreads(threads);
+  }
+  /** Add or refresh a thread's drawer metadata from its latest messages. */
+  #touchThread(threadId, messages) {
+    const threads = this.#readThreads();
+    const entry = threads.find((thread) => thread.threadId === threadId);
+    const preview = derivePreview(messages);
+    const updatedAt = Date.now();
+    if (entry === void 0) {
+      threads.push({
+        threadId,
+        title: deriveTitle(messages),
+        titleCustom: false,
+        preview,
+        updatedAt
+      });
+    } else {
+      entry.preview = preview;
+      entry.updatedAt = updatedAt;
+      if (!entry.titleCustom) {
+        entry.title = deriveTitle(messages);
+      }
+    }
+    this.#writeThreads(threads);
+  }
+  #readThreads() {
+    return this.#readJson(THREADS_KEY) ?? [];
+  }
+  #writeThreads(threads) {
+    if (threads.length === 0) {
+      sessionStorage.removeItem(THREADS_KEY);
+      return;
+    }
+    sessionStorage.setItem(THREADS_KEY, JSON.stringify(threads));
   }
   /** Parse a stored JSON value, returning `null` when absent or corrupt. */
   #readJson(key) {
@@ -3838,6 +4316,32 @@ var SessionStorageStore = class {
     }
   }
 };
+function deriveTitle(messages) {
+  for (const message of messages) {
+    if (message.role === "user") {
+      const text2 = cleanText(message.content);
+      if (text2 !== "") {
+        return truncate(text2, TITLE_LIMIT);
+      }
+    }
+  }
+  return DEFAULT_TITLE;
+}
+function derivePreview(messages) {
+  for (const message of [...messages].reverse()) {
+    const text2 = cleanText(message.content);
+    if (text2 !== "") {
+      return truncate(text2, PREVIEW_LIMIT);
+    }
+  }
+  return "";
+}
+function cleanText(content) {
+  return typeof content === "string" ? content.replace(/\s+/g, " ").trim() : "";
+}
+function truncate(text2, limit) {
+  return text2.length <= limit ? text2 : `${text2.slice(0, limit - 1).trimEnd()}\u2026`;
+}
 
 // src/core/create_http_agent.ts
 import { HttpAgent } from "@ag-ui/client";
@@ -3869,6 +4373,96 @@ function createHttpAgent(options) {
   });
 }
 
+// src/core/remote_conversation_store.ts
+var RemoteConversationStore = class {
+  #url;
+  #headers;
+  #local;
+  #dropped = /* @__PURE__ */ new Set();
+  #renamed = /* @__PURE__ */ new Map();
+  constructor(url, headers = () => ({}), local = new SessionStorageStore()) {
+    this.#url = url.endsWith("/") ? url : `${url}/`;
+    this.#headers = headers;
+    this.#local = local;
+  }
+  threadId() {
+    return this.#local.threadId();
+  }
+  setActiveThread(threadId) {
+    this.#local.setActiveThread(threadId);
+  }
+  saveMessages(threadId, messages) {
+    this.#local.saveMessages(threadId, messages);
+  }
+  loadCheckpoint(threadId) {
+    return this.#local.loadCheckpoint(threadId);
+  }
+  saveCheckpoint(threadId, checkpoint) {
+    this.#local.saveCheckpoint(threadId, checkpoint);
+  }
+  renameThread(threadId, title) {
+    this.#local.renameThread(threadId, title);
+    this.#renamed.set(threadId, title);
+    void this.#mutate(threadId, "PATCH", { title });
+  }
+  clear(threadId) {
+    this.#local.clear(threadId);
+    this.#dropped.add(threadId);
+    void this.#mutate(threadId, "DELETE");
+  }
+  async listThreads() {
+    const rows = await this.#fetchThreads();
+    if (rows === null) {
+      return this.#local.listThreads();
+    }
+    return rows.filter((row) => !this.#dropped.has(row.thread_id)).map((row) => this.#toMeta(row));
+  }
+  async loadMessages(threadId) {
+    const response = await this.#get(this.#url + encodeURIComponent(threadId) + "/");
+    if (response === null || !response.ok) {
+      return this.#local.loadMessages(threadId);
+    }
+    const body = await response.json();
+    return body.messages ?? null;
+  }
+  async #fetchThreads() {
+    const response = await this.#get(this.#url);
+    if (response === null || !response.ok) {
+      return null;
+    }
+    const body = await response.json();
+    return body.threads ?? [];
+  }
+  #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),
+      preview: row.preview
+    };
+  }
+  /** GET that resolves to the `Response`, or `null` on a network error. */
+  async #get(url) {
+    try {
+      return await fetch(url, { headers: this.#headers() });
+    } catch {
+      return null;
+    }
+  }
+  /** Fire a best-effort write to the thread endpoint; failures are tolerated. */
+  async #mutate(threadId, method, body) {
+    const headers = this.#headers();
+    try {
+      await fetch(this.#url + encodeURIComponent(threadId) + "/", {
+        method,
+        headers: body === void 0 ? headers : { ...headers, "content-type": "application/json" },
+        body: body === void 0 ? null : JSON.stringify(body)
+      });
+    } catch {
+    }
+  }
+};
+
 // src/core/ag_ui_chat.ts
 var COLLAPSED_KEY = "ag-ui-chat:collapsed";
 var AgUiChat = class extends HTMLElement {
@@ -3979,8 +4573,16 @@ var AgUiChat = class extends HTMLElement {
   #send;
   #title;
   #skillsMenu;
+  #drawer;
   #skillHint;
   #client = null;
+  // Whether an interaction is in flight (first onRunStart → onSettled). Drives
+  // the Send⇄Stop button: `agent.isRunning` is false between frontend-tool
+  // rounds, but the user must still be able to stop there.
+  #running = false;
+  // Aborting this dismisses (declines) an open confirmation card when the run
+  // is cancelled while the card awaits a decision. One controller per card.
+  #confirmAbort = null;
   #streamingBubble = null;
   // Text deltas applied to the current streaming bubble. >1 ⇒ the message
   // revealed progressively as it streamed, so the word reveal must not re-animate
@@ -4003,6 +4605,22 @@ var AgUiChat = class extends HTMLElement {
     this.#title = document.createElement("span");
     this.#skillHint = document.createElement("div");
     this.#skillsMenu = new SkillsMenu((skill) => this.#applySkill(skill));
+    this.#drawer = new ThreadDrawer({
+      onSelect: (threadId) => {
+        void this.#switchThread(threadId);
+      },
+      onNew: () => {
+        this.newChat();
+        void this.#refreshDrawer();
+      },
+      onRename: (threadId, title) => {
+        this.conversationStore.renameThread(threadId, title);
+        void this.#refreshDrawer();
+      },
+      onDelete: (threadId) => {
+        this.#deleteThread(threadId);
+      }
+    });
   }
   /** Attributes whose late changes must reflect in already-rendered chrome. */
   static get observedAttributes() {
@@ -4098,9 +4716,26 @@ var AgUiChat = class extends HTMLElement {
     }
     this.#initSkills();
     void this.#fetchToolCatalog();
+    this.#wireThreadStore();
     this.#threadId = this.conversationStore.threadId();
     void this.#rehydrate();
   }
+  /**
+   * When `data-threads-url` is set, route thread enumeration / load / rename /
+   * delete through that server endpoint (wrapping the current store as the
+   * client-only fallback), so the history drawer shows durable, cross-device
+   * threads. Without it, the client store's per-tab threads are used.
+   */
+  #wireThreadStore() {
+    const url = this.getAttribute("data-threads-url");
+    if (url !== null) {
+      this.conversationStore = new RemoteConversationStore(
+        url,
+        () => this.headers,
+        this.conversationStore
+      );
+    }
+  }
   /** Fetch the server tool-label catalog from `data-tools-url`, if set. */
   async #fetchToolCatalog() {
     const url = this.getAttribute("data-tools-url");
@@ -4216,7 +4851,14 @@ var AgUiChat = class extends HTMLElement {
    * in-memory run state, clear the transcript, and mint a new thread id.
    */
   newChat() {
+    this.#cancelRun();
     this.conversationStore.clear(this.#threadId);
+    this.#resetState();
+    this.#threadId = this.conversationStore.threadId();
+    this.#setRunning(false);
+  }
+  /** Drop the in-memory run + transcript, leaving the thread id untouched. */
+  #resetState() {
     this.#client = null;
     this.#streamingBubble = null;
     this.#hidePending();
@@ -4224,8 +4866,36 @@ var AgUiChat = class extends HTMLElement {
     this.#serverSettled.clear();
     this.#initialMessages = [];
     this.#messages.replaceChildren();
-    this.#threadId = this.conversationStore.threadId();
-    this.#send.disabled = false;
+  }
+  /** Switch the active conversation to an existing thread and replay it. */
+  async #switchThread(threadId) {
+    if (threadId === this.#threadId) {
+      return;
+    }
+    this.#cancelRun();
+    this.#resetState();
+    this.conversationStore.setActiveThread(threadId);
+    this.#threadId = threadId;
+    this.#setRunning(false);
+    await this.#rehydrate();
+  }
+  /** Delete a thread; if it was the active one, fall back to a fresh chat. */
+  #deleteThread(threadId) {
+    const wasActive = threadId === this.#threadId;
+    if (wasActive) {
+      this.#cancelRun();
+    }
+    this.conversationStore.clear(threadId);
+    if (wasActive) {
+      this.#resetState();
+      this.#threadId = this.conversationStore.threadId();
+      this.#setRunning(false);
+    }
+    void this.#refreshDrawer();
+  }
+  /** Reload the drawer's thread list, marking the active thread. */
+  async #refreshDrawer() {
+    this.#drawer.setThreads(await this.conversationStore.listThreads(), this.#threadId);
   }
   /**
    * Restore the conversation from the store on mount, then — if a navigating
@@ -4339,6 +5009,16 @@ var AgUiChat = class extends HTMLElement {
     title.textContent = this.getAttribute("title-text") ?? "Assistant";
     const controls = document.createElement("div");
     controls.className = "header-controls";
+    const history = document.createElement("button");
+    history.type = "button";
+    history.className = "header-btn header-btn--history";
+    history.title = "Chat history";
+    history.setAttribute("aria-label", "Chat history");
+    history.textContent = "\u2630";
+    history.addEventListener("click", () => {
+      void this.#refreshDrawer();
+      this.#drawer.open();
+    });
     const newChat = document.createElement("button");
     newChat.type = "button";
     newChat.className = "header-btn header-btn--new";
@@ -4353,7 +5033,7 @@ var AgUiChat = class extends HTMLElement {
     collapse.setAttribute("aria-label", "Collapse");
     collapse.textContent = "\u2014";
     collapse.addEventListener("click", () => this.toggleCollapsed());
-    controls.append(newChat, collapse);
+    controls.append(history, newChat, collapse);
     header.append(title, controls);
     this.#messages.className = "messages";
     this.#messages.setAttribute("role", "log");
@@ -4370,7 +5050,13 @@ var AgUiChat = class extends HTMLElement {
     this.#send.className = "send";
     this.#send.type = "button";
     this.#send.textContent = "Send";
+    this.#send.setAttribute("aria-label", "Send");
+    this.#send.dataset["state"] = "idle";
     this.#send.addEventListener("click", () => {
+      if (this.#running) {
+        this.#cancelRun();
+        return;
+      }
       void this.#submit();
     });
     this.#skillHint.className = "skill-hint";
@@ -4382,7 +5068,8 @@ var AgUiChat = class extends HTMLElement {
       this.#skillsMenu.palette,
       this.#skillsMenu.chips,
       this.#skillHint,
-      inputRow
+      inputRow,
+      this.#drawer.element
     );
     this.#root.append(style, this.#chat);
   }
@@ -4396,11 +5083,34 @@ var AgUiChat = class extends HTMLElement {
       event.preventDefault();
       return;
     }
+    if (event.key === "Escape" && this.#running) {
+      event.preventDefault();
+      this.#cancelRun();
+      return;
+    }
     if (event.key === "Enter" && !event.shiftKey) {
       event.preventDefault();
       void this.#submit();
     }
   }
+  /**
+   * Stop the in-flight run: decline any confirmation card awaiting a decision
+   * (the loop is suspended on it), then cancel the client run — the abort
+   * closes the streaming request, which is AG-UI's cancel (the server
+   * observes the disconnect).
+   */
+  #cancelRun() {
+    this.#confirmAbort?.abort();
+    this.#client?.cancel();
+  }
+  /** Swap the composer button between Send (idle) and Stop (running). */
+  #setRunning(running) {
+    this.#running = running;
+    const label = running ? "Stop" : "Send";
+    this.#send.textContent = label;
+    this.#send.setAttribute("aria-label", label);
+    this.#send.dataset["state"] = running ? "running" : "idle";
+  }
   async #submit() {
     const content = this.#input.value.trim();
     if (content === "") {
@@ -4472,9 +5182,13 @@ var AgUiChat = class extends HTMLElement {
       if (typeof confirmText === "string") {
         request.message = confirmText;
       }
-      const decision = requestConfirmation(this.#messages, request);
+      this.#confirmAbort = new AbortController();
+      const decision = requestConfirmation(this.#messages, request, {
+        signal: this.#confirmAbort.signal
+      });
       this.#messages.scrollTop = this.#messages.scrollHeight;
       const accepted = await decision;
+      this.#confirmAbort = null;
       if (!accepted) {
         const message = "User declined the action.";
         card.settle(TOOL_CALL_STATUS.DECLINED, message);
@@ -4509,7 +5223,7 @@ var AgUiChat = class extends HTMLElement {
   #handlers() {
     return {
       onRunStart: () => {
-        this.#send.disabled = true;
+        this.#setRunning(true);
         this.#showPending();
       },
       onTextDelta: (buffer) => {
@@ -4538,22 +5252,34 @@ var AgUiChat = class extends HTMLElement {
       },
       onRunEnd: () => {
         this.#hidePending();
-        this.#send.disabled = false;
         this.#streamingBubble = null;
       },
       onError: (message) => {
         this.#hidePending();
         this.#revealWords(this.appendMessage(MESSAGE_ROLE.ASSISTANT, `\u26A0\uFE0F ${message}`));
-        this.#send.disabled = false;
+        this.#streamingBubble = null;
+      },
+      onCancelled: () => {
+        this.#hidePending();
+        this.#appendStoppedNote();
         this.#streamingBubble = null;
       },
       onSettled: () => {
         this.#hidePending();
-        this.#send.disabled = false;
+        this.#setRunning(false);
         this.#streamingBubble = null;
       }
     };
   }
+  /** A muted "⏹ Stopped" line in the transcript (distinct from the ⚠️ error bubble). */
+  #appendStoppedNote() {
+    const note = document.createElement("div");
+    note.className = "stopped-note";
+    note.setAttribute("role", "status");
+    note.textContent = "\u23F9 Stopped";
+    this.#messages.appendChild(note);
+    this.#messages.scrollTop = this.#messages.scrollHeight;
+  }
   /**
    * Show a "thinking" indicator while the agent is being awaited — both the
    * silent stretch before the first token and the gap after a tool result
@@ -4775,7 +5501,7 @@ function setControlValue(el, value) {
 }
 
 // src/version.ts
-var VERSION = "0.3.1";
+var VERSION = "0.5.0";
 export {
   AgUiChat,
   AgUiClient,
@@ -4783,6 +5509,7 @@ export {
   ELEMENT_TAG,
   MAX_TOOL_ROUNDS,
   MESSAGE_ROLE,
+  RemoteConversationStore,
   SUBMIT_EVENT,
   SessionStorageStore,
   TOGGLE_EVENT,