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

package/dist/index.js

@@ -17,6 +17,12 @@ var TOOL_CALL_STATUS = {
   ERROR: "error",
   DECLINED: "declined"
 };
+var ATTACHMENT_STATUS = {
+  UPLOADING: "uploading",
+  READY: "ready",
+  ERROR: "error"
+};
+var DEFAULT_ATTACHMENT_MAX_BYTES = 10 * 1024 * 1024;
 var TOOL_DISPLAY = {
   MINIMAL: "minimal",
   COMPACT: "compact",
@@ -98,6 +104,211 @@ function isNavigates(parameters) {
   return parameters[X_NAVIGATES_KEY] === true;
 }
 
+// src/dom/native_setter.ts
+function prototypeSetter(proto, prop) {
+  const setter = Object.getOwnPropertyDescriptor(proto, prop).set;
+  return setter;
+}
+var setInputValue = prototypeSetter(HTMLInputElement.prototype, "value");
+var setTextareaValue = prototypeSetter(HTMLTextAreaElement.prototype, "value");
+var setSelectValue = prototypeSetter(HTMLSelectElement.prototype, "value");
+var setInputChecked = prototypeSetter(HTMLInputElement.prototype, "checked");
+function setNativeValue(el, value) {
+  if (el instanceof HTMLTextAreaElement) {
+    setTextareaValue.call(el, value);
+  } else if (el instanceof HTMLSelectElement) {
+    setSelectValue.call(el, value);
+  } else {
+    setInputValue.call(el, value);
+  }
+}
+function setNativeChecked(el, checked) {
+  setInputChecked.call(el, checked);
+}
+
+// src/dom/animations.ts
+var ACCENT = "#4f46e5";
+function delay(ms) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+async function typeInto(el, value, options = {}) {
+  const charDelayMs = options.charDelayMs ?? 35;
+  setNativeValue(el, "");
+  el.dispatchEvent(new Event("input", { bubbles: true }));
+  for (const char of value) {
+    setNativeValue(el, el.value + char);
+    el.dispatchEvent(new Event("input", { bubbles: true }));
+    if (charDelayMs > 0) {
+      await delay(charDelayMs);
+    }
+  }
+  el.dispatchEvent(new Event("change", { bubbles: true }));
+}
+async function highlightThenClick(el, options = {}) {
+  const highlightMs = options.highlightMs ?? 280;
+  const previousOutline = el.style.outline;
+  const previousOffset = el.style.outlineOffset;
+  el.style.outline = `2px solid ${ACCENT}`;
+  el.style.outlineOffset = "2px";
+  await delay(highlightMs);
+  el.style.outline = previousOutline;
+  el.style.outlineOffset = previousOffset;
+  el.click();
+}
+function scrollIntoCenterView(el) {
+  el.scrollIntoView({ block: "center", inline: "nearest", behavior: "smooth" });
+}
+async function focusWithFlash(el, options = {}) {
+  const flashMs = options.flashMs ?? 200;
+  el.focus();
+  const previousShadow = el.style.boxShadow;
+  el.style.boxShadow = `0 0 0 3px rgba(79, 70, 229, 0.4)`;
+  await delay(flashMs);
+  el.style.boxShadow = previousShadow;
+}
+var RING = "0 0 0 3px rgba(79, 70, 229, 0.4)";
+function prefersReducedMotion() {
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function motionDelay(ms) {
+  if (ms <= 0 || prefersReducedMotion()) {
+    return Promise.resolve();
+  }
+  return delay(ms);
+}
+async function pressThenClick(el, options = {}) {
+  const pressMs = options.pressMs ?? 140;
+  const previousTransform = el.style.transform;
+  const previousTransition = el.style.transition;
+  const previousShadow = el.style.boxShadow;
+  el.style.transition = "transform 80ms ease";
+  el.style.transform = "scale(0.96)";
+  el.style.boxShadow = RING;
+  await motionDelay(pressMs);
+  el.style.transform = previousTransform;
+  el.style.transition = previousTransition;
+  el.style.boxShadow = previousShadow;
+  el.click();
+}
+function findOption(el, value) {
+  for (const option of Array.from(el.options)) {
+    if (option.value === value || option.text === value) {
+      return option;
+    }
+  }
+  return null;
+}
+async function selectOption(el, value, options = {}) {
+  const option = findOption(el, value);
+  if (option === null) {
+    throw new Error(`no <option> matching "${value}"`);
+  }
+  const highlightMs = options.highlightMs ?? 220;
+  const previousOutline = el.style.outline;
+  const previousOffset = el.style.outlineOffset;
+  el.style.outline = `2px solid ${ACCENT}`;
+  el.style.outlineOffset = "2px";
+  await motionDelay(highlightMs);
+  setNativeValue(el, option.value);
+  el.dispatchEvent(new Event("input", { bubbles: true }));
+  el.dispatchEvent(new Event("change", { bubbles: true }));
+  el.style.outline = previousOutline;
+  el.style.outlineOffset = previousOffset;
+}
+async function toggleControl(el, checked, options = {}) {
+  const flashMs = options.flashMs ?? 200;
+  const previousShadow = el.style.boxShadow;
+  el.style.boxShadow = RING;
+  await motionDelay(flashMs);
+  setNativeChecked(el, checked);
+  el.dispatchEvent(new Event("input", { bubbles: true }));
+  el.dispatchEvent(new Event("change", { bubbles: true }));
+  el.style.boxShadow = previousShadow;
+}
+
+// src/tools/page_action_tools.ts
+var PAGE_ACTIONS = {
+  SCROLL: "scroll",
+  DRAG: "drag"
+};
+function createPageActionTools(enabled, resolveTarget) {
+  const tools = [];
+  if (enabled.has(PAGE_ACTIONS.SCROLL)) {
+    tools.push(scrollTool(resolveTarget));
+  }
+  if (enabled.has(PAGE_ACTIONS.DRAG)) {
+    tools.push(dragTool(resolveTarget));
+  }
+  return tools;
+}
+function scrollTool(resolveTarget) {
+  return {
+    name: "scroll_to",
+    description: "Scroll a target into view. `target` is `top`, `bottom`, or a CSS selector / page-map element id. Read-only: it changes nothing on the page.",
+    parameters: {
+      type: "object",
+      properties: { target: { type: "string" } },
+      required: ["target"],
+      [X_SUMMARY_KEY]: "Scroll into view"
+    },
+    handler: (args) => {
+      const target = String(args["target"] ?? "");
+      if (target === "top" || target === "bottom") {
+        const top = target === "top" ? 0 : document.body.scrollHeight;
+        window.scrollTo({ top, behavior: "smooth" });
+        return { scrolled: true, target };
+      }
+      const element = resolveTarget(target);
+      if (element === null) {
+        throw new Error(`no element matching "${target}"`);
+      }
+      scrollIntoCenterView(element);
+      return { scrolled: true, target };
+    }
+  };
+}
+function dragTool(resolveTarget) {
+  return {
+    name: "drag_and_drop",
+    description: "Drag the `from` element onto the `to` element (CSS selectors or page-map element ids), firing the page's native drag-and-drop. Use for reordering sortable lists. The page decides what the drop commits.",
+    parameters: {
+      type: "object",
+      properties: { from: { type: "string" }, to: { type: "string" } },
+      required: ["from", "to"],
+      [X_SUMMARY_KEY]: "Drag and drop"
+    },
+    handler: (args) => {
+      const fromTarget = String(args["from"] ?? "");
+      const toTarget = String(args["to"] ?? "");
+      const from = resolveTarget(fromTarget);
+      if (from === null) {
+        throw new Error(`no element matching "${fromTarget}"`);
+      }
+      const to = resolveTarget(toTarget);
+      if (to === null) {
+        throw new Error(`no element matching "${toTarget}"`);
+      }
+      dispatchDragSequence(from, to);
+      return { dragged: true, from: fromTarget, to: toTarget };
+    }
+  };
+}
+function dispatchDragSequence(from, to) {
+  const dataTransfer = new DataTransfer();
+  fire(from, "dragstart", dataTransfer);
+  fire(to, "dragenter", dataTransfer);
+  fire(to, "dragover", dataTransfer);
+  fire(to, "drop", dataTransfer);
+  fire(from, "dragend", dataTransfer);
+}
+function fire(target, type, dataTransfer) {
+  const event = new Event(type, { bubbles: true, cancelable: true });
+  event.dataTransfer = dataTransfer;
+  target.dispatchEvent(event);
+}
+
 // src/tools/page_map.ts
 function createPageMapContext(getPageMap, autoInject) {
   if (!autoInject || getPageMap === null) {
@@ -231,31 +442,326 @@ function createStateHookTools(hook) {
   return tools;
 }
 
+// src/ui/attachment_chips.ts
+function renderAttachmentChips(refs) {
+  const list = document.createElement("div");
+  list.className = "attachment-chips";
+  for (const ref of refs) {
+    list.appendChild(renderChip(ref));
+  }
+  return list;
+}
+function renderChip(ref) {
+  const chip = document.createElement("div");
+  chip.className = "attachment-chip attachment-chip--ready";
+  const icon = document.createElement("span");
+  icon.className = "attachment-chip-icon";
+  icon.textContent = iconFor(ref.mime);
+  icon.setAttribute("aria-hidden", "true");
+  const name = document.createElement("span");
+  name.className = "attachment-chip-name";
+  name.textContent = ref.name;
+  name.title = ref.name;
+  const size = document.createElement("span");
+  size.className = "attachment-chip-size";
+  size.textContent = formatBytes(ref.size);
+  chip.append(icon, name, size);
+  return chip;
+}
+function iconFor(mime) {
+  if (mime.startsWith("image/")) {
+    return "\u{1F5BC}";
+  }
+  if (mime === "application/pdf") {
+    return "\u{1F4D5}";
+  }
+  if (mime.startsWith("text/")) {
+    return "\u{1F4C4}";
+  }
+  return "\u{1F4CE}";
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) {
+    return `${bytes} B`;
+  }
+  const units = ["KB", "MB", "GB"];
+  let value = bytes / 1024;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  const rounded = value < 10 ? Math.round(value * 10) / 10 : Math.round(value);
+  return `${rounded} ${units[unit]}`;
+}
+
+// src/ui/attachment_tray.ts
+import { randomUUID } from "@ag-ui/client";
+
+// src/ui/ui_strings.ts
+var DEFAULT_UI_STRINGS = {
+  title: "Assistant",
+  chatHistory: "Chat history",
+  newChat: "New chat",
+  collapse: "Collapse",
+  expand: "Expand",
+  conversation: "Conversation",
+  thinking: "Assistant is thinking\u2026",
+  stopped: "\u23F9 Stopped",
+  connectionLost: "Connection lost",
+  noResult: "No result returned.",
+  declinedAction: "User declined the action.",
+  navigating: "Navigating\u2026",
+  skillNeeds: "\u201C{title}\u201D needs: {fields}",
+  message: "Message",
+  inputPlaceholder: "Ask anything\u2026",
+  send: "Send",
+  stop: "Stop",
+  attachFiles: "Attach files",
+  toolRunning: "running\u2026",
+  toolDone: "\u2713 done",
+  toolError: "\u26A0 error",
+  toolDeclined: "\u2298 declined",
+  resultLabel: "Result",
+  errorLabel: "Error",
+  declinedLabel: "Declined",
+  details: "Details",
+  confirmAction: "Confirm action",
+  confirmRun: "Run \u201C{tool}\u201D?",
+  confirm: "Confirm",
+  cancel: "Cancel",
+  chats: "Chats",
+  noConversations: "No conversations yet.",
+  rename: "Rename",
+  renameConversation: "Rename conversation",
+  delete: "Delete",
+  deleteConversation: "Delete conversation",
+  deletePrompt: "Delete?",
+  tooLarge: "Too large (max {size})",
+  fileTypeNotAllowed: "File type not allowed",
+  uploadFailed: "upload failed",
+  retry: "Retry",
+  retryUpload: "Retry upload",
+  remove: "Remove",
+  removeAttachment: "Remove attachment",
+  justNow: "just now",
+  minutesAgo: "{n}m ago",
+  hoursAgo: "{n}h ago",
+  daysAgo: "{n}d ago",
+  weeksAgo: "{n}w ago"
+};
+function mergeUiStrings(overrides) {
+  const merged = { ...DEFAULT_UI_STRINGS };
+  for (const key of Object.keys(overrides)) {
+    const value = overrides[key];
+    if (value !== void 0) {
+      merged[key] = value;
+    }
+  }
+  return merged;
+}
+
+// src/ui/attachment_tray.ts
+var AttachmentTray = class {
+  /** The tray root; append above the input row. Hidden while empty. */
+  element;
+  #config;
+  #strings;
+  #items = [];
+  constructor(config) {
+    this.#config = config;
+    this.#strings = config.strings ?? DEFAULT_UI_STRINGS;
+    this.element = document.createElement("div");
+    this.element.className = "attachment-tray";
+    this.element.setAttribute("part", "attachment-tray");
+    this.element.hidden = true;
+  }
+  /** Queue a file: reject oversize/disallowed into an error chip, else upload. */
+  add(file) {
+    const item = {
+      localId: randomUUID(),
+      file,
+      status: ATTACHMENT_STATUS.UPLOADING,
+      progress: 0,
+      ref: null,
+      error: ""
+    };
+    this.#items.push(item);
+    const rejection = this.#reject(file);
+    if (rejection !== null) {
+      item.status = ATTACHMENT_STATUS.ERROR;
+      item.error = rejection;
+      this.#render();
+      this.#config.onChange?.();
+      return;
+    }
+    this.#render();
+    this.#config.onChange?.();
+    this.#upload(item);
+  }
+  /** The durable refs of every chip that finished uploading. */
+  readyRefs() {
+    const refs = [];
+    for (const item of this.#items) {
+      if (item.ref !== null) {
+        refs.push(item.ref);
+      }
+    }
+    return refs;
+  }
+  /** Whether any chip is still uploading (a send would drop nothing if false). */
+  hasPending() {
+    return this.#items.some((item) => item.status === ATTACHMENT_STATUS.UPLOADING);
+  }
+  /** Whether the tray holds no chips. */
+  isEmpty() {
+    return this.#items.length === 0;
+  }
+  /** Drop the settled (ready / error) chips, leaving any still uploading. */
+  clearReady() {
+    this.#items = this.#items.filter((item) => item.status === ATTACHMENT_STATUS.UPLOADING);
+    this.#render();
+  }
+  /** Drop every chip (a reset / new-chat). */
+  clear() {
+    this.#items = [];
+    this.#render();
+  }
+  /** The size/type rejection reason for a file, or `null` when accepted. */
+  #reject(file) {
+    if (this.#config.maxBytes > 0 && file.size > this.#config.maxBytes) {
+      return this.#strings.tooLarge.replace("{size}", formatBytes(this.#config.maxBytes));
+    }
+    if (!accepts(this.#config.accept, file)) {
+      return this.#strings.fileTypeNotAllowed;
+    }
+    return null;
+  }
+  #upload(item) {
+    item.status = ATTACHMENT_STATUS.UPLOADING;
+    item.progress = 0;
+    item.error = "";
+    this.#render();
+    this.#config.upload(item.file, (fraction) => {
+      item.progress = fraction;
+      this.#render();
+    }).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(() => {
+      this.#render();
+      this.#config.onChange?.();
+    });
+  }
+  #remove(item) {
+    this.#items = this.#items.filter((other) => other !== item);
+    this.#render();
+    this.#config.onChange?.();
+  }
+  #render() {
+    this.element.replaceChildren();
+    this.element.hidden = this.#items.length === 0;
+    for (const item of this.#items) {
+      this.element.appendChild(this.#renderChip(item));
+    }
+  }
+  #renderChip(item) {
+    const chip = document.createElement("div");
+    chip.className = `attachment-chip attachment-chip--${item.status}`;
+    const icon = document.createElement("span");
+    icon.className = "attachment-chip-icon";
+    icon.textContent = iconFor(item.file.type);
+    icon.setAttribute("aria-hidden", "true");
+    const name = document.createElement("span");
+    name.className = "attachment-chip-name";
+    name.textContent = item.file.name;
+    name.title = item.file.name;
+    const meta = document.createElement("span");
+    meta.className = "attachment-chip-size";
+    meta.textContent = item.status === ATTACHMENT_STATUS.ERROR ? item.error : formatBytes(item.file.size);
+    chip.append(icon, name, meta);
+    if (item.status === ATTACHMENT_STATUS.UPLOADING) {
+      const bar = document.createElement("div");
+      bar.className = "attachment-chip-bar";
+      const fill = document.createElement("div");
+      fill.className = "attachment-chip-bar-fill";
+      fill.style.width = `${Math.round(item.progress * 100)}%`;
+      bar.appendChild(fill);
+      chip.appendChild(bar);
+    }
+    if (item.status === ATTACHMENT_STATUS.ERROR) {
+      const retry = document.createElement("button");
+      retry.type = "button";
+      retry.className = "attachment-chip-retry";
+      retry.title = this.#strings.retry;
+      retry.setAttribute("aria-label", this.#strings.retryUpload);
+      retry.textContent = "\u21BB";
+      retry.addEventListener("click", () => this.#upload(item));
+      chip.appendChild(retry);
+    }
+    const remove = document.createElement("button");
+    remove.type = "button";
+    remove.className = "attachment-chip-remove";
+    remove.title = this.#strings.remove;
+    remove.setAttribute("aria-label", this.#strings.removeAttachment);
+    remove.textContent = "\u2715";
+    remove.addEventListener("click", () => this.#remove(item));
+    chip.appendChild(remove);
+    return chip;
+  }
+};
+function accepts(accept, file) {
+  const tokens = accept.split(",").map((token) => token.trim().toLowerCase()).filter((token) => token !== "");
+  if (tokens.length === 0) {
+    return true;
+  }
+  const mime = file.type.toLowerCase();
+  const name = file.name.toLowerCase();
+  return tokens.some((token) => {
+    if (token.startsWith(".")) {
+      return name.endsWith(token);
+    }
+    if (token.endsWith("/*")) {
+      return mime.startsWith(token.slice(0, -1));
+    }
+    return mime === token;
+  });
+}
+
 // src/ui/confirmation_card.ts
 function actionButton(modifier, label) {
   const button = document.createElement("button");
   button.type = "button";
   button.className = `confirm-btn confirm-btn--${modifier}`;
+  button.setAttribute("part", `confirm-button confirm-${modifier}`);
   button.textContent = label;
   return button;
 }
 function requestConfirmation(host, request, options = {}) {
+  const strings = options.strings ?? DEFAULT_UI_STRINGS;
   return new Promise((resolve) => {
     const card = document.createElement("div");
     card.className = "confirm";
+    card.setAttribute("part", "confirm");
     card.setAttribute("data-tool-name", request.toolName);
     card.setAttribute("role", "group");
-    card.setAttribute("aria-label", "Confirm action");
+    card.setAttribute("aria-label", strings.confirmAction);
     const body = document.createElement("div");
     body.className = "confirm-body";
-    body.textContent = request.message ?? `Run \u201C${request.toolName}\u201D?`;
+    body.setAttribute("part", "confirm-body");
+    body.textContent = request.message ?? strings.confirmRun.replace("{tool}", request.toolName);
     const args = document.createElement("pre");
     args.className = "confirm-args";
+    args.setAttribute("part", "confirm-args");
     args.textContent = JSON.stringify(request.args, null, 2);
     const actions = document.createElement("div");
     actions.className = "confirm-actions";
-    const cancel = actionButton("cancel", "Cancel");
-    const confirm = actionButton("confirm", "Confirm");
+    actions.setAttribute("part", "confirm-actions");
+    const cancel = actionButton("cancel", strings.cancel);
+    const confirm = actionButton("confirm", strings.confirm);
     let settled = false;
     const close = (accepted) => {
       if (settled) {
@@ -3091,6 +3597,71 @@ var STYLES = `
   --ag-ui-radius: 0;
 }
 
+/* Sidebar (CUST-3): 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
+   host-managed push instead. */
+:host([placement="sidebar"]) {
+  --ag-ui-inset: 0 0 0 auto;
+  --ag-ui-width: 420px;
+  --ag-ui-height: 100vh;
+  --ag-ui-max-height: 100vh;
+  --ag-ui-radius: 0;
+  --ag-ui-rail-width: 52px;
+  transition: width 0.28s ease;
+}
+
+:host([placement="sidebar"][data-side="left"]) {
+  --ag-ui-inset: 0 auto 0 0;
+}
+
+:host([placement="sidebar"]) .chat {
+  transition: transform 0.28s ease;
+}
+
+/* Collapsed sidebar: shrink the host to the rail width, hide the panel, and
+   reveal the rail. Higher specificity than the generic collapse rules, so it
+   wins regardless of source order. */
+:host([placement="sidebar"][collapsed]) {
+  width: var(--ag-ui-rail-width);
+  height: 100vh;
+  max-height: 100vh;
+  bottom: 0;
+}
+
+:host([placement="sidebar"][collapsed]) .chat {
+  display: none;
+}
+
+/* The rail is a sibling of the panel (so it survives the panel being hidden);
+   shown only for a collapsed sidebar. */
+.rail {
+  display: none;
+  border: none;
+  font: inherit;
+}
+
+:host([placement="sidebar"][collapsed]) .rail {
+  display: flex;
+  position: absolute;
+  inset: 0;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 16px;
+  border: 1px solid var(--ag-ui-border);
+  background: var(--ag-ui-header-bg);
+  color: var(--ag-ui-header-fg);
+  cursor: pointer;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host([placement="sidebar"]),
+  :host([placement="sidebar"]) .chat {
+    transition: none;
+  }
+}
+
 /* Embedded: drop the floating chrome and the high z-index stacking context so
    the widget lives in the host's own layout (fixes overlay/z-index clashes). */
 :host([placement="embedded"]) {
@@ -3128,12 +3699,33 @@ var STYLES = `
 }
 
 .header-title {
+  flex: 1;
+  min-width: 0;
   font-weight: 600;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+/* Header / launcher icon holder (CUST-2): a slot, with a data-icon-url <img>
+   fallback, sized via --ag-ui-icon-size. */
+.icon-holder {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--ag-ui-icon-size, 22px);
+  height: var(--ag-ui-icon-size, 22px);
+  line-height: 1;
+}
+
+.icon-img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: var(--ag-ui-icon-radius, 4px);
+}
+
 .header-controls {
   display: flex;
   gap: 2px;
@@ -3189,6 +3781,18 @@ var STYLES = `
   gap: var(--ag-ui-space);
 }
 
+/* Empty-state region (CUST-1 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;
+  text-align: center;
+  color: var(--ag-ui-muted);
+}
+
+.empty[hidden] {
+  display: none;
+}
+
 .message {
   max-width: 80%;
   padding: var(--ag-ui-msg-pad);
@@ -3464,14 +4068,124 @@ var STYLES = `
   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;
-}
-
+/* \u2500\u2500 File attachments \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\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* The \u{1F4CE} picker button sits left of the input; hidden until data-attachments-url. */
+.attach-btn {
+  border: 1px solid var(--ag-ui-border);
+  border-radius: 8px;
+  padding: 0 10px;
+  background: var(--ag-ui-input-bg);
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.attach-btn:hover {
+  border-color: var(--ag-ui-accent);
+}
+
+.attach-input {
+  display: none;
+}
+
+/* Pending-attachments tray, above the input row; collapses (hidden) when empty. */
+.attachment-slot {
+  display: contents;
+}
+
+.attachment-tray {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 8px 12px 0;
+}
+
+.attachment-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.attachment-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  padding: 4px 8px;
+  border: 1px solid var(--ag-ui-border);
+  border-radius: 999px;
+  background: var(--ag-ui-assistant-bg);
+  font-size: 0.85em;
+  position: relative;
+}
+
+.attachment-chip--error {
+  border-color: var(--ag-ui-danger);
+  color: var(--ag-ui-danger);
+}
+
+.attachment-chip-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 14ch;
+}
+
+.attachment-chip-size {
+  color: var(--ag-ui-muted);
+  white-space: nowrap;
+}
+
+.attachment-chip--error .attachment-chip-size {
+  color: var(--ag-ui-danger);
+}
+
+/* The progress bar fills as the file uploads. */
+.attachment-chip-bar {
+  flex-basis: 100%;
+  height: 3px;
+  border-radius: 2px;
+  background: var(--ag-ui-border);
+  overflow: hidden;
+}
+
+.attachment-chip-bar-fill {
+  height: 100%;
+  background: var(--ag-ui-accent);
+  transition: width 0.15s ease;
+}
+
+.attachment-chip-remove,
+.attachment-chip-retry {
+  border: none;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  padding: 0;
+  line-height: 1;
+  opacity: 0.7;
+}
+
+.attachment-chip-remove:hover,
+.attachment-chip-retry:hover {
+  opacity: 1;
+}
+
+/* A subtle outline while a file is dragged over the shell. */
+.chat--dragover {
+  outline: 2px dashed var(--ag-ui-accent);
+  outline-offset: -4px;
+}
+
+/* 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;
@@ -3789,24 +4503,24 @@ var STYLES = `
 `;
 
 // src/ui/relative_time.ts
-function relativeTime(timestamp, now = Date.now()) {
+function relativeTime(timestamp, now = Date.now(), strings = DEFAULT_UI_STRINGS) {
   const seconds = Math.round((now - timestamp) / 1e3);
   if (seconds < 60) {
-    return "just now";
+    return strings.justNow;
   }
   const minutes = Math.round(seconds / 60);
   if (minutes < 60) {
-    return `${minutes}m ago`;
+    return strings.minutesAgo.replace("{n}", String(minutes));
   }
   const hours = Math.round(minutes / 60);
   if (hours < 24) {
-    return `${hours}h ago`;
+    return strings.hoursAgo.replace("{n}", String(hours));
   }
   const days = Math.round(hours / 24);
   if (days < 7) {
-    return `${days}d ago`;
+    return strings.daysAgo.replace("{n}", String(days));
   }
-  return `${Math.round(days / 7)}w ago`;
+  return strings.weeksAgo.replace("{n}", String(Math.round(days / 7)));
 }
 
 // src/ui/thread_drawer.ts
@@ -3814,39 +4528,59 @@ var ThreadDrawer = class {
   /** The drawer root (backdrop + panel). Append to the chat shell; hidden until opened. */
   element;
   #callbacks;
+  #panel;
+  #heading;
+  #newButton;
   #list;
+  #strings;
   #threads = [];
   #activeId = "";
-  constructor(callbacks) {
+  constructor(callbacks, strings = DEFAULT_UI_STRINGS) {
     this.#callbacks = callbacks;
+    this.#strings = strings;
     this.element = document.createElement("div");
     this.element.className = "drawer";
+    this.element.setAttribute("part", "drawer");
     this.element.hidden = true;
     const backdrop = document.createElement("div");
     backdrop.className = "drawer-backdrop";
+    backdrop.setAttribute("part", "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");
+    this.#panel = document.createElement("div");
+    this.#panel.className = "drawer-panel";
+    this.#panel.setAttribute("part", "drawer-panel");
+    this.#panel.setAttribute("role", "dialog");
+    this.#panel.setAttribute("aria-label", strings.chatHistory);
     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", () => {
+    header.setAttribute("part", "drawer-header");
+    this.#heading = document.createElement("span");
+    this.#heading.className = "drawer-title";
+    this.#heading.setAttribute("part", "drawer-title");
+    this.#heading.textContent = strings.chats;
+    this.#newButton = document.createElement("button");
+    this.#newButton.type = "button";
+    this.#newButton.className = "drawer-new";
+    this.#newButton.setAttribute("part", "drawer-new");
+    this.#newButton.textContent = strings.newChat;
+    this.#newButton.addEventListener("click", () => {
       this.close();
       this.#callbacks.onNew();
     });
-    header.append(heading, newButton);
+    header.append(this.#heading, this.#newButton);
     this.#list = document.createElement("div");
     this.#list.className = "drawer-list";
-    panel.append(header, this.#list);
-    this.element.append(backdrop, panel);
+    this.#list.setAttribute("part", "drawer-list");
+    this.#panel.append(header, this.#list);
+    this.element.append(backdrop, this.#panel);
+  }
+  /** Re-localize the drawer's chrome and rows (the host calls this on connect). */
+  setStrings(strings) {
+    this.#strings = strings;
+    this.#panel.setAttribute("aria-label", strings.chatHistory);
+    this.#heading.textContent = strings.chats;
+    this.#newButton.textContent = strings.newChat;
+    this.#renderList();
   }
   isOpen() {
     return !this.element.hidden;
@@ -3871,7 +4605,8 @@ var ThreadDrawer = class {
     if (this.#threads.length === 0) {
       const empty = document.createElement("div");
       empty.className = "drawer-empty";
-      empty.textContent = "No conversations yet.";
+      empty.setAttribute("part", "drawer-empty");
+      empty.textContent = this.#strings.noConversations;
       this.#list.appendChild(empty);
       return;
     }
@@ -3882,18 +4617,20 @@ var ThreadDrawer = class {
   #renderRow(meta) {
     const row = document.createElement("div");
     row.className = "drawer-row";
+    row.setAttribute("part", "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";
+    select.setAttribute("part", "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);
+    time.textContent = relativeTime(meta.updatedAt, void 0, this.#strings);
     const preview = document.createElement("span");
     preview.className = "drawer-row-preview";
     preview.textContent = meta.preview;
@@ -3905,15 +4642,15 @@ var ThreadDrawer = class {
     const rename = document.createElement("button");
     rename.type = "button";
     rename.className = "drawer-row-rename";
-    rename.title = "Rename";
-    rename.setAttribute("aria-label", "Rename conversation");
+    rename.title = this.#strings.rename;
+    rename.setAttribute("aria-label", this.#strings.renameConversation);
     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.title = this.#strings.delete;
+    remove.setAttribute("aria-label", this.#strings.deleteConversation);
     remove.textContent = "\u{1F5D1}";
     remove.addEventListener("click", () => this.#confirmDelete(row, meta));
     const actions = document.createElement("div");
@@ -3950,16 +4687,16 @@ var ThreadDrawer = class {
     confirm.className = "drawer-confirm";
     const label = document.createElement("span");
     label.className = "drawer-confirm-label";
-    label.textContent = "Delete?";
+    label.textContent = this.#strings.deletePrompt;
     const yes = document.createElement("button");
     yes.type = "button";
     yes.className = "drawer-confirm-yes";
-    yes.textContent = "Delete";
+    yes.textContent = this.#strings.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.textContent = this.#strings.cancel;
     no.addEventListener("click", () => this.#renderList());
     confirm.append(label, yes, no);
     row.replaceChildren(confirm);
@@ -3967,73 +4704,92 @@ var ThreadDrawer = class {
 };
 
 // src/ui/tool_call_card.ts
-var STATUS_LABEL = {
-  [TOOL_CALL_STATUS.PENDING]: "running\u2026",
-  [TOOL_CALL_STATUS.DONE]: "\u2713 done",
-  [TOOL_CALL_STATUS.ERROR]: "\u26A0 error",
-  [TOOL_CALL_STATUS.DECLINED]: "\u2298 declined"
-};
-var RESULT_LABEL = {
-  [TOOL_CALL_STATUS.DONE]: "Result",
-  [TOOL_CALL_STATUS.ERROR]: "Error",
-  [TOOL_CALL_STATUS.DECLINED]: "Declined"
-};
+function statusLabels(strings) {
+  return {
+    [TOOL_CALL_STATUS.PENDING]: strings.toolRunning,
+    [TOOL_CALL_STATUS.DONE]: strings.toolDone,
+    [TOOL_CALL_STATUS.ERROR]: strings.toolError,
+    [TOOL_CALL_STATUS.DECLINED]: strings.toolDeclined
+  };
+}
+function resultLabels(strings) {
+  return {
+    [TOOL_CALL_STATUS.DONE]: strings.resultLabel,
+    [TOOL_CALL_STATUS.ERROR]: strings.errorLabel,
+    [TOOL_CALL_STATUS.DECLINED]: strings.declinedLabel
+  };
+}
 var ToolCallCard = class {
   /** The card's root element; append this into the message list. */
   element;
   #status;
   #mode;
   #args;
-  constructor(name, args, mode = TOOL_DISPLAY.FULL, summary) {
+  #strings;
+  #settled = false;
+  constructor(name, args, mode = TOOL_DISPLAY.FULL, summary, strings = DEFAULT_UI_STRINGS) {
     this.#mode = mode;
     this.#args = args;
+    this.#strings = strings;
     this.element = document.createElement("div");
     this.element.className = "tool-call";
+    this.element.setAttribute("part", "tool-card");
     this.element.setAttribute("data-tool-name", name);
     this.element.setAttribute("data-status", TOOL_CALL_STATUS.PENDING);
     this.element.setAttribute("data-display", mode);
     const head = document.createElement("div");
     head.className = "tool-call-head";
+    head.setAttribute("part", "tool-card-head");
     const label = document.createElement("span");
     label.className = "tool-call-name";
+    label.setAttribute("part", "tool-card-name");
     label.textContent = `\u{1F527} ${summary ?? name}`;
     this.#status = document.createElement("span");
     this.#status.className = "tool-call-status";
-    this.#status.textContent = STATUS_LABEL[TOOL_CALL_STATUS.PENDING];
+    this.#status.setAttribute("part", "tool-card-status");
+    this.#status.textContent = statusLabels(strings)[TOOL_CALL_STATUS.PENDING];
     head.append(label, this.#status);
     this.element.append(head);
     if (mode === TOOL_DISPLAY.FULL) {
       const argsEl = document.createElement("pre");
       argsEl.className = "tool-call-args";
+      argsEl.setAttribute("part", "tool-card-args");
       argsEl.textContent = JSON.stringify(args, null, 2);
       this.element.append(argsEl);
     }
   }
+  /** Whether {@link settle} has already run (so a terminal sweep can skip it). */
+  get settled() {
+    return this.#settled;
+  }
   /**
    * Flip the status pill to ``status`` and, unless in `minimal` mode, append a
    * collapsed body behind a click-to-expand toggle: the result alone (`full`),
    * or the args + result together (`compact`).
    */
   settle(status, text2) {
+    this.#settled = true;
     this.element.setAttribute("data-status", status);
-    this.#status.textContent = STATUS_LABEL[status];
+    this.#status.textContent = statusLabels(this.#strings)[status];
     if (this.#mode === TOOL_DISPLAY.MINIMAL) {
       return;
     }
     const toggle = document.createElement("button");
     toggle.type = "button";
     toggle.className = "tool-call-toggle";
+    toggle.setAttribute("part", "tool-card-toggle");
     toggle.setAttribute("aria-expanded", "false");
     const output = document.createElement("pre");
     output.className = "tool-call-result";
+    output.setAttribute("part", "tool-card-result");
     output.hidden = true;
     if (this.#mode === TOOL_DISPLAY.COMPACT) {
-      toggle.textContent = "Details";
+      toggle.textContent = this.#strings.details;
       output.textContent = `args: ${JSON.stringify(this.#args)}
 
 ${text2}`;
     } else {
-      toggle.textContent = RESULT_LABEL[status];
+      toggle.textContent = resultLabels(this.#strings)[status];
       output.textContent = text2;
     }
     toggle.addEventListener("click", () => {
@@ -4046,7 +4802,13 @@ ${text2}`;
 };
 
 // src/core/agui_client.ts
-import { randomUUID } from "@ag-ui/client";
+import { randomUUID as randomUUID2 } from "@ag-ui/client";
+var ConnectionLostError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "ConnectionLostError";
+  }
+};
 var AgUiClient = class {
   #agent;
   #handlers;
@@ -4054,6 +4816,7 @@ var AgUiClient = class {
   #getContext;
   #executeTool;
   #onPersist;
+  #connectionLostMessage;
   // 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;
@@ -4065,6 +4828,7 @@ var AgUiClient = class {
     this.#executeTool = config.executeTool ?? null;
     this.#onPersist = config.onPersist ?? (() => {
     });
+    this.#connectionLostMessage = config.connectionLostMessage ?? "Connection lost";
   }
   /** Whether a run is currently in flight. */
   get running() {
@@ -4080,9 +4844,18 @@ var AgUiClient = class {
    * When the agent calls frontend tools, this executes them and re-runs the
    * agent with the results, looping until the agent stops calling frontend
    * tools (bounded by {@link MAX_TOOL_ROUNDS}).
+   *
+   * `attachments` ride on the user message as a non-standard field so the
+   * default client store round-trips them for history replay; the agent learns
+   * the ids from the run context (the server's strict validation ignores the
+   * unknown message field), then reads bytes via the `read_attachment` tool.
    */
-  async send(content) {
-    this.#agent.addMessage({ id: randomUUID(), role: "user", content });
+  async send(content, attachments = []) {
+    const message = { id: randomUUID2(), role: "user", content };
+    if (attachments.length > 0) {
+      message.attachments = attachments;
+    }
+    this.#agent.addMessage(message);
     this.#onPersist(this.#agent.messages);
     await this.#run();
   }
@@ -4096,7 +4869,7 @@ var AgUiClient = class {
   }
   /** Append a frontend tool result to history (used by the resume path). */
   addToolResult(toolCallId, content) {
-    this.#agent.addMessage({ id: randomUUID(), role: "tool", content, toolCallId });
+    this.#agent.addMessage({ id: randomUUID2(), role: "tool", content, toolCallId });
     this.#onPersist(this.#agent.messages);
   }
   /**
@@ -4137,14 +4910,18 @@ var AgUiClient = class {
         return;
       }
       const pending = [];
+      const runState = { terminal: false };
       await this.#agent.runAgent(
         { tools: this.#getTools(), context: this.#getContext() },
-        this.#buildSubscriber(pending)
+        this.#buildSubscriber(pending, runState)
       );
       this.#onPersist(this.#agent.messages);
       if (this.#cancelled) {
         return;
       }
+      if (!runState.terminal) {
+        throw new ConnectionLostError(this.#connectionLostMessage);
+      }
       if (this.#executeTool === null || pending.length === 0) {
         return;
       }
@@ -4158,7 +4935,7 @@ var AgUiClient = class {
           return;
         }
         this.#agent.addMessage({
-          id: randomUUID(),
+          id: randomUUID2(),
           role: "tool",
           content: result.content,
           toolCallId: call.id
@@ -4171,7 +4948,7 @@ var AgUiClient = class {
       }
     }
   }
-  #buildSubscriber(pending) {
+  #buildSubscriber(pending, runState) {
     const h = this.#handlers;
     return {
       onRunInitialized() {
@@ -4196,9 +4973,11 @@ var AgUiClient = class {
         h.onToolResult(event.toolCallId, event.content);
       },
       onRunErrorEvent({ event }) {
+        runState.terminal = true;
         h.onError(event.message);
       },
       onRunFinalized() {
+        runState.terminal = true;
         h.onRunEnd();
       }
     };
@@ -4208,8 +4987,14 @@ function isAbortError(error) {
   return error instanceof Error && error.name === "AbortError";
 }
 
+// src/core/attachment.ts
+function messageAttachments(message) {
+  const refs = message.attachments;
+  return Array.isArray(refs) ? refs : [];
+}
+
 // src/core/conversation_store.ts
-import { randomUUID as randomUUID2 } from "@ag-ui/client";
+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:";
@@ -4223,7 +5008,7 @@ var SessionStorageStore = class {
     if (existing !== null) {
       return existing;
     }
-    const id = randomUUID2();
+    const id = randomUUID3();
     sessionStorage.setItem(THREAD_KEY, id);
     return id;
   }
@@ -4463,6 +5248,70 @@ var RemoteConversationStore = class {
   }
 };
 
+// src/core/upload_attachment.ts
+function uploadAttachment(file, options) {
+  return new Promise((resolve, reject) => {
+    const form = new FormData();
+    form.append("file", file);
+    const xhr = new XMLHttpRequest();
+    xhr.open("POST", options.url);
+    for (const [key, value] of Object.entries(options.headers ?? {})) {
+      xhr.setRequestHeader(key, value);
+    }
+    const onProgress = options.onProgress;
+    if (onProgress !== void 0) {
+      xhr.upload.addEventListener("progress", (event) => {
+        if (event.lengthComputable) {
+          onProgress(event.total === 0 ? 0 : event.loaded / event.total);
+        }
+      });
+    }
+    xhr.addEventListener("load", () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        try {
+          resolve(parseRef(JSON.parse(xhr.responseText)));
+        } catch {
+          reject(new Error("upload returned an unreadable response"));
+        }
+      } else {
+        reject(new Error(errorMessage(xhr)));
+      }
+    });
+    xhr.addEventListener("error", () => reject(new Error("upload failed")));
+    xhr.addEventListener("abort", () => reject(new Error("upload cancelled")));
+    const signal = options.signal;
+    if (signal !== void 0) {
+      signal.addEventListener("abort", () => xhr.abort());
+    }
+    xhr.send(form);
+  });
+}
+function parseRef(body) {
+  if (typeof body !== "object" || body === null) {
+    throw new Error("not an object");
+  }
+  const o = body;
+  const id = o["id"];
+  const name = o["name"];
+  const mime = o["mime"];
+  const size = o["size"];
+  const url = o["url"];
+  if (typeof id !== "string" || typeof name !== "string" || typeof mime !== "string" || typeof size !== "number") {
+    throw new Error("missing fields");
+  }
+  return typeof url === "string" ? { id, name, mime, size, url } : { id, name, mime, size };
+}
+function errorMessage(xhr) {
+  try {
+    const body = JSON.parse(xhr.responseText);
+    if (typeof body.error === "string") {
+      return body.error;
+    }
+  } catch {
+  }
+  return `upload failed (${xhr.status})`;
+}
+
 // src/core/ag_ui_chat.ts
 var COLLAPSED_KEY = "ag-ui-chat:collapsed";
 var AgUiChat = class extends HTMLElement {
@@ -4503,9 +5352,14 @@ var AgUiChat = class extends HTMLElement {
   ];
   /**
    * Per-run context provider. Defaults to the compact page map (when a
-   * {@link getPageMap} provider is set and {@link autoInjectPageMap} is on).
+   * {@link getPageMap} provider is set and {@link autoInjectPageMap} is on)
+   * plus a one-line manifest of the files attached to the message being sent,
+   * so the agent knows which `read_attachment` ids are available.
    */
-  getContext = () => createPageMapContext(this.getPageMap, this.autoInjectPageMap);
+  getContext = () => [
+    ...createPageMapContext(this.getPageMap, this.autoInjectPageMap),
+    ...this.#attachmentContext()
+  ];
   /**
    * Navigable routes the agent can jump to via the built-in `route.*` tools.
    * A compact summary also rides in each run's context.
@@ -4527,6 +5381,16 @@ var AgUiChat = class extends HTMLElement {
    * server-backed store for cross-tab/device durability.
    */
   conversationStore = new SessionStorageStore();
+  /**
+   * How attached files are uploaded. `null` (default) uses the built-in
+   * multipart `POST` to `data-attachments-url`. Set a custom
+   * {@link UploadHandler} — `(file, onProgress) => Promise<AttachmentRef>` — to
+   * swap the transport (e.g. a `tus-js-client` resumable adapter or
+   * direct-to-S3 multipart) without changing the tray, the chips, or the AG-UI
+   * wire (refs are transport-agnostic). When set, the 📎 affordance appears even
+   * with no `data-attachments-url`; the handler owns its own endpoint + headers.
+   */
+  uploadHandler = null;
   /**
    * Builds the tool result a navigating tool resumes with after the page
    * reloads. Defaults to the landed URL; a host (e.g. the admin package) can
@@ -4551,12 +5415,28 @@ var AgUiChat = class extends HTMLElement {
    * schema; this map is the seam for everything else.
    */
   toolSummaries = {};
+  /**
+   * Localizable UI strings — a partial override merged over the English
+   * {@link DEFAULT_UI_STRINGS}. Resolved once on connect (so set it before the
+   * element is appended); the `data-strings` JSON attribute is the markup
+   * equivalent, and this property wins key-by-key over it.
+   */
+  strings = {};
+  /**
+   * Resolve a `scroll_to` / `drag_and_drop` target string to a host-page
+   * element (or `null`). Defaults to a CSS-selector lookup; override to map
+   * page-map element ids. The page-action tools are opt-in via the
+   * `data-page-actions` attribute (`"scroll"` / `"drag"`).
+   */
+  resolvePageTarget = (target) => document.querySelector(target);
   /**
    * Card labels fetched from a server tool catalog (`data-tools-url`), keyed by
    * tool name. The base layer behind {@link toolSummaries}: an explicit entry in
    * `toolSummaries` wins, this fills the rest. Populated once on connect.
    */
   #toolCatalog = {};
+  /** The resolved string table (defaults ← `data-strings` ← `strings`). */
+  #strings = DEFAULT_UI_STRINGS;
   #toolRegistry = new ClientToolRegistry();
   /** Tool-call cards awaiting execution, keyed by call id. */
   #toolCards = /* @__PURE__ */ new Map();
@@ -4575,6 +5455,18 @@ var AgUiChat = class extends HTMLElement {
   #skillsMenu;
   #drawer;
   #skillHint;
+  /** File-picker button + hidden input + tray slot; the tray mounts on connect. */
+  #attachButton;
+  #fileInput;
+  #attachSlot;
+  /** The collapsed-sidebar rail (an expand affordance; shown only for `placement="sidebar"`). */
+  #rail;
+  /** Empty-state region at the top of the message list; hidden once anything renders. */
+  #emptyWrap;
+  /** Upload tray; created on connect only when `data-attachments-url` is set. */
+  #attachTray = null;
+  /** Refs attached to the message currently being sent (the context manifest). */
+  #runAttachments = [];
   #client = null;
   // Whether an interaction is in flight (first onRunStart → onSettled). Drives
   // the Send⇄Stop button: `agent.isRunning` is false between frontend-tool
@@ -4604,6 +5496,11 @@ var AgUiChat = class extends HTMLElement {
     this.#send = document.createElement("button");
     this.#title = document.createElement("span");
     this.#skillHint = document.createElement("div");
+    this.#attachButton = document.createElement("button");
+    this.#fileInput = document.createElement("input");
+    this.#attachSlot = document.createElement("div");
+    this.#rail = document.createElement("button");
+    this.#emptyWrap = document.createElement("div");
     this.#skillsMenu = new SkillsMenu((skill) => this.#applySkill(skill));
     this.#drawer = new ThreadDrawer({
       onSelect: (threadId) => {
@@ -4627,7 +5524,7 @@ var AgUiChat = class extends HTMLElement {
     return ["title-text"];
   }
   attributeChangedCallback(_name, _previous, value) {
-    this.#title.textContent = value ?? "Assistant";
+    this.#title.textContent = value ?? this.#strings.title;
   }
   /** Declare a frontend tool the agent may call. */
   registerTool(tool) {
@@ -4673,9 +5570,25 @@ var AgUiChat = class extends HTMLElement {
       }
     ];
   }
-  /** All built-in (route + page) frontend tools. */
+  /**
+   * Opt-in page-action tools (`scroll_to` / `drag_and_drop`), enabled per token
+   * via the `data-page-actions` attribute (e.g. `"scroll,drag"`). Targets resolve
+   * through {@link resolvePageTarget} so a host controls the agent's interaction
+   * surface; absent attribute ⇒ no tools registered.
+   */
+  #pageActionTools() {
+    const attr = this.getAttribute("data-page-actions");
+    if (attr === null) {
+      return [];
+    }
+    const enabled = new Set(
+      attr.split(",").map((token) => token.trim()).filter((token) => token !== "")
+    );
+    return createPageActionTools(enabled, (target) => this.resolvePageTarget(target));
+  }
+  /** All built-in (route + page + page-action) frontend tools. */
   #builtinTools() {
-    return [...this.#routeTools(), ...this.#pageTools()];
+    return [...this.#routeTools(), ...this.#pageTools(), ...this.#pageActionTools()];
   }
   /** Resolve a tool by name: built-in tools first, then the registry. */
   #resolveTool(name) {
@@ -4710,16 +5623,122 @@ var AgUiChat = class extends HTMLElement {
     this.setAttribute("data-tool-display", value);
   }
   connectedCallback() {
+    this.#strings = mergeUiStrings({ ...this.#readStringOverrides(), ...this.strings });
     this.#render();
+    this.#drawer.setStrings(this.#strings);
     if (sessionStorage.getItem(COLLAPSED_KEY) === "1") {
       this.setAttribute("collapsed", "");
     }
+    this.#syncRail();
     this.#initSkills();
     void this.#fetchToolCatalog();
     this.#wireThreadStore();
+    this.#wireAttachments();
     this.#threadId = this.conversationStore.threadId();
     void this.#rehydrate();
   }
+  /** Parse the inline `data-strings` JSON overrides (empty when absent/malformed). */
+  #readStringOverrides() {
+    const raw = this.getAttribute("data-strings");
+    if (raw === null) {
+      return {};
+    }
+    try {
+      const parsed = JSON.parse(raw);
+      if (typeof parsed === "object" && parsed !== null) {
+        return parsed;
+      }
+    } catch {
+    }
+    return {};
+  }
+  /**
+   * Enable the composer's file-upload tray when uploads are possible — either a
+   * custom {@link uploadHandler} is set or `data-attachments-url` provides the
+   * built-in multipart endpoint: reveal the 📎 button, wire the hidden file
+   * input + drag-and-drop, and mount the tray. With neither, the affordance
+   * stays hidden and the chat degrades to text-only.
+   */
+  #wireAttachments() {
+    const url = this.getAttribute("data-attachments-url");
+    const upload = this.uploadHandler ?? this.#defaultUploadHandler(url);
+    if (upload === null) {
+      return;
+    }
+    const accept = this.getAttribute("data-attachment-accept") ?? "";
+    this.#attachTray = new AttachmentTray({
+      upload,
+      maxBytes: this.#attachmentMaxBytes(),
+      accept,
+      strings: this.#strings
+    });
+    this.#attachSlot.appendChild(this.#attachTray.element);
+    this.#fileInput.accept = accept;
+    this.#attachButton.hidden = false;
+    this.#enableDragAndDrop();
+  }
+  /** The built-in multipart upload handler for `data-attachments-url`, or `null`. */
+  #defaultUploadHandler(url) {
+    if (url === null) {
+      return null;
+    }
+    return (file, onProgress) => uploadAttachment(file, { url, headers: this.headers, onProgress });
+  }
+  /** The client-side upload size cap from `data-attachment-max-bytes`. */
+  #attachmentMaxBytes() {
+    const attr = this.getAttribute("data-attachment-max-bytes");
+    if (attr === null) {
+      return DEFAULT_ATTACHMENT_MAX_BYTES;
+    }
+    const parsed = Number.parseInt(attr, 10);
+    return Number.isFinite(parsed) && parsed >= 0 ? parsed : DEFAULT_ATTACHMENT_MAX_BYTES;
+  }
+  /** Queue every file from the picker into the tray, then reset the input. */
+  #onFilesPicked() {
+    const files = this.#fileInput.files;
+    if (files !== null) {
+      for (const file of Array.from(files)) {
+        this.#attachTray?.add(file);
+      }
+    }
+    this.#fileInput.value = "";
+  }
+  /** Accept files dropped anywhere on the chat shell into the tray. */
+  #enableDragAndDrop() {
+    this.#chat.addEventListener("dragover", (event) => {
+      event.preventDefault();
+      this.#chat.classList.add("chat--dragover");
+    });
+    this.#chat.addEventListener("dragleave", () => {
+      this.#chat.classList.remove("chat--dragover");
+    });
+    this.#chat.addEventListener("drop", (event) => {
+      event.preventDefault();
+      this.#chat.classList.remove("chat--dragover");
+      const files = event.dataTransfer?.files;
+      if (files !== void 0) {
+        for (const file of Array.from(files)) {
+          this.#attachTray?.add(file);
+        }
+      }
+    });
+  }
+  /** The one-line manifest of the message's attachments, for the run context. */
+  #attachmentContext() {
+    if (this.#runAttachments.length === 0) {
+      return [];
+    }
+    const lines = this.#runAttachments.map(
+      (ref) => `- ${ref.name} (id: ${ref.id}, ${ref.mime || "unknown type"}, ${ref.size} bytes)`
+    );
+    return [
+      {
+        description: "Files the user attached to this message",
+        value: `${lines.join("\n")}
+Use the read_attachment tool with an id to read a file's contents.`
+      }
+    ];
+  }
   /**
    * When `data-threads-url` is set, route thread enumeration / load / rename /
    * delete through that server endpoint (wrapping the current store as the
@@ -4801,7 +5820,7 @@ var AgUiChat = class extends HTMLElement {
   #applySkill(skill) {
     const { text: text2, missing } = fillTemplate(skill.prompt, this.skillContext());
     if (missing.length > 0) {
-      this.#skillHint.textContent = `\u201C${skill.title}\u201D needs: ${missing.join(", ")}`;
+      this.#skillHint.textContent = this.#strings.skillNeeds.replace("{title}", skill.title).replace("{fields}", missing.join(", "));
       this.#skillHint.hidden = false;
       return;
     }
@@ -4834,6 +5853,7 @@ var AgUiChat = class extends HTMLElement {
       this.removeAttribute("collapsed");
     }
     sessionStorage.setItem(COLLAPSED_KEY, collapsed ? "1" : "0");
+    this.#syncRail();
     this.dispatchEvent(
       new CustomEvent(TOGGLE_EVENT, {
         detail: { collapsed },
@@ -4865,7 +5885,10 @@ var AgUiChat = class extends HTMLElement {
     this.#toolCards.clear();
     this.#serverSettled.clear();
     this.#initialMessages = [];
-    this.#messages.replaceChildren();
+    this.#runAttachments = [];
+    this.#attachTray?.clear();
+    this.#messages.replaceChildren(this.#emptyWrap);
+    this.#updateEmptyState();
   }
   /** Switch the active conversation to an existing thread and replay it. */
   async #switchThread(threadId) {
@@ -4924,8 +5947,12 @@ var AgUiChat = class extends HTMLElement {
   #renderHistoricMessage(message) {
     const text2 = typeof message.content === "string" ? message.content : "";
     if (message.role === MESSAGE_ROLE.USER) {
-      if (text2 !== "") {
-        this.appendMessage(MESSAGE_ROLE.USER, text2);
+      const attachments = messageAttachments(message);
+      if (text2 !== "" || attachments.length > 0) {
+        const bubble = this.appendMessage(MESSAGE_ROLE.USER, text2);
+        if (attachments.length > 0) {
+          bubble.appendChild(renderAttachmentChips(attachments));
+        }
       }
       return;
     }
@@ -4989,12 +6016,14 @@ var AgUiChat = class extends HTMLElement {
   appendMessage(role, content) {
     const bubble = document.createElement("div");
     bubble.className = `message message--${role}`;
+    bubble.setAttribute("part", `message message-${role}`);
     if (role === MESSAGE_ROLE.ASSISTANT) {
       bubble.innerHTML = renderMarkdown(content, { allowImages: this.allowImages });
     } else {
       bubble.textContent = content;
     }
     this.#messages.appendChild(bubble);
+    this.#updateEmptyState();
     this.#messages.scrollTop = this.#messages.scrollHeight;
     return bubble;
   }
@@ -5002,55 +6031,59 @@ var AgUiChat = class extends HTMLElement {
     const style = document.createElement("style");
     style.textContent = STYLES;
     this.#chat.className = "chat";
+    this.#chat.setAttribute("part", "panel");
     const header = document.createElement("div");
     header.className = "header";
+    header.setAttribute("part", "header");
     const title = this.#title;
     title.className = "header-title";
-    title.textContent = this.getAttribute("title-text") ?? "Assistant";
+    title.setAttribute("part", "title");
+    title.textContent = this.getAttribute("title-text") ?? this.#strings.title;
+    if (this.querySelector('[slot="icon"]') !== null || this.getAttribute("data-icon-url") !== null) {
+      header.append(this.#iconElement("icon", "icon", null));
+    }
+    const headerActions = document.createElement("slot");
+    headerActions.name = "header-actions";
     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";
+    controls.setAttribute("part", "header-controls");
+    const history = this.#headerButton("history", this.#strings.chatHistory, "\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";
-    newChat.title = "New chat";
-    newChat.setAttribute("aria-label", "New chat");
-    newChat.textContent = "\u271A";
+    const newChat = this.#headerButton("new", this.#strings.newChat, "\u271A");
     newChat.addEventListener("click", () => this.newChat());
-    const collapse = document.createElement("button");
-    collapse.type = "button";
-    collapse.className = "header-btn header-btn--collapse";
-    collapse.title = "Collapse";
-    collapse.setAttribute("aria-label", "Collapse");
-    collapse.textContent = "\u2014";
+    const collapse = this.#headerButton("collapse", this.#strings.collapse, "\u2014");
     collapse.addEventListener("click", () => this.toggleCollapsed());
     controls.append(history, newChat, collapse);
-    header.append(title, controls);
+    header.append(title, headerActions, controls);
     this.#messages.className = "messages";
+    this.#messages.setAttribute("part", "messages");
     this.#messages.setAttribute("role", "log");
     this.#messages.setAttribute("aria-live", "polite");
-    this.#messages.setAttribute("aria-label", "Conversation");
+    this.#messages.setAttribute("aria-label", this.#strings.conversation);
+    this.#emptyWrap.className = "empty";
+    this.#emptyWrap.setAttribute("part", "empty");
+    const emptySlot = document.createElement("slot");
+    emptySlot.name = "empty";
+    this.#emptyWrap.append(emptySlot);
+    this.#messages.append(this.#emptyWrap);
     const inputRow = document.createElement("div");
     inputRow.className = "input-row";
+    inputRow.setAttribute("part", "composer");
     this.#input.className = "input";
-    this.#input.setAttribute("aria-label", "Message");
+    this.#input.setAttribute("part", "input");
+    this.#input.setAttribute("aria-label", this.#strings.message);
     this.#input.rows = 2;
-    this.#input.placeholder = "Ask anything\u2026";
+    this.#input.placeholder = this.#strings.inputPlaceholder;
     this.#input.addEventListener("keydown", (event) => this.#onKeydown(event));
     this.#input.addEventListener("input", () => this.#onInput());
     this.#send.className = "send";
     this.#send.type = "button";
-    this.#send.textContent = "Send";
-    this.#send.setAttribute("aria-label", "Send");
+    this.#send.setAttribute("part", "send");
+    this.#send.textContent = this.#strings.send;
+    this.#send.setAttribute("aria-label", this.#strings.send);
     this.#send.dataset["state"] = "idle";
     this.#send.addEventListener("click", () => {
       if (this.#running) {
@@ -5061,17 +6094,83 @@ var AgUiChat = class extends HTMLElement {
     });
     this.#skillHint.className = "skill-hint";
     this.#skillHint.hidden = true;
-    inputRow.append(this.#input, this.#send);
+    this.#attachButton.className = "attach-btn";
+    this.#attachButton.type = "button";
+    this.#attachButton.setAttribute("part", "attach-button");
+    this.#attachButton.textContent = "\u{1F4CE}";
+    this.#attachButton.title = this.#strings.attachFiles;
+    this.#attachButton.setAttribute("aria-label", this.#strings.attachFiles);
+    this.#attachButton.hidden = true;
+    this.#attachButton.addEventListener("click", () => this.#fileInput.click());
+    this.#fileInput.className = "attach-input";
+    this.#fileInput.type = "file";
+    this.#fileInput.multiple = true;
+    this.#fileInput.hidden = true;
+    this.#fileInput.addEventListener("change", () => this.#onFilesPicked());
+    this.#attachSlot.className = "attachment-slot";
+    const footer = document.createElement("slot");
+    footer.name = "footer";
+    inputRow.append(this.#attachButton, this.#input, this.#send, this.#fileInput);
     this.#chat.append(
       header,
       this.#messages,
       this.#skillsMenu.palette,
       this.#skillsMenu.chips,
       this.#skillHint,
+      this.#attachSlot,
       inputRow,
+      footer,
       this.#drawer.element
     );
-    this.#root.append(style, this.#chat);
+    this.#rail.className = "rail";
+    this.#rail.type = "button";
+    this.#rail.setAttribute("part", "launcher");
+    this.#rail.setAttribute("aria-label", this.#strings.expand);
+    this.#rail.append(this.#iconElement("launcher", "launcher-icon", "\u{1F4AC}"));
+    this.#rail.addEventListener("click", () => this.setCollapsed(false));
+    this.#root.append(style, this.#chat, this.#rail);
+  }
+  /** Build a header control button (icon glyph + localized title/aria). */
+  #headerButton(modifier, label, glyph) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = `header-btn header-btn--${modifier}`;
+    button.setAttribute("part", `header-button ${modifier}-button`);
+    button.title = label;
+    button.setAttribute("aria-label", label);
+    button.textContent = glyph;
+    return button;
+  }
+  /**
+   * An icon holder wrapping a `<slot>` so a host can project custom markup; with
+   * a `data-icon-url` `<img>` as the slot's fallback, or a glyph when given.
+   */
+  #iconElement(slotName, part, fallbackGlyph) {
+    const holder = document.createElement("span");
+    holder.className = "icon-holder";
+    holder.setAttribute("part", part);
+    const slot = document.createElement("slot");
+    slot.name = slotName;
+    const iconUrl = this.getAttribute("data-icon-url");
+    if (iconUrl !== null) {
+      const img = document.createElement("img");
+      img.className = "icon-img";
+      img.src = iconUrl;
+      img.alt = "";
+      slot.append(img);
+    } else if (fallbackGlyph !== null) {
+      slot.append(document.createTextNode(fallbackGlyph));
+    }
+    holder.append(slot);
+    return holder;
+  }
+  /** Reflect the collapsed state on the rail's `aria-expanded`. */
+  #syncRail() {
+    this.#rail.setAttribute("aria-expanded", String(!this.collapsed));
+  }
+  /** Hide the empty-state region once the message list holds anything else. */
+  #updateEmptyState() {
+    this.#emptyWrap.hidden = this.#messages.childElementCount > 1;
   }
   /** Forward input changes to the skills palette and clear any stale hint. */
   #onInput() {
@@ -5106,32 +6205,38 @@ var AgUiChat = class extends HTMLElement {
   /** Swap the composer button between Send (idle) and Stop (running). */
   #setRunning(running) {
     this.#running = running;
-    const label = running ? "Stop" : "Send";
+    const label = running ? this.#strings.stop : this.#strings.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 === "") {
+    const attachments = this.#attachTray?.readyRefs() ?? [];
+    if (content === "" && attachments.length === 0) {
       return;
     }
-    this.appendMessage(MESSAGE_ROLE.USER, content);
+    const bubble = this.appendMessage(MESSAGE_ROLE.USER, content);
+    if (attachments.length > 0) {
+      bubble.appendChild(renderAttachmentChips(attachments));
+    }
     this.#input.value = "";
+    this.#attachTray?.clearReady();
+    this.#runAttachments = attachments;
     this.dispatchEvent(
       new CustomEvent(SUBMIT_EVENT, {
-        detail: { content },
+        detail: { content, attachments },
         bubbles: true,
         composed: true
       })
     );
-    await this.#client_send(content);
+    await this.#client_send(content, attachments);
   }
-  async #client_send(content) {
+  async #client_send(content, attachments) {
     if (this.endpoint === "") {
       return;
     }
-    await this.#ensureClient().send(content);
+    await this.#ensureClient().send(content, attachments);
   }
   #ensureClient() {
     if (this.#client === null) {
@@ -5151,7 +6256,8 @@ var AgUiChat = class extends HTMLElement {
         getTools: () => this.getTools(),
         getContext: () => this.getContext(),
         executeTool: (call) => this.#executeTool(call),
-        onPersist: (messages) => this.conversationStore.saveMessages(this.#threadId, messages)
+        onPersist: (messages) => this.conversationStore.saveMessages(this.#threadId, messages),
+        connectionLostMessage: this.#strings.connectionLost
       });
     }
     return this.#client;
@@ -5172,7 +6278,7 @@ var AgUiChat = class extends HTMLElement {
     const tool = this.#resolveTool(call.name);
     if (tool === null) {
       if (!this.#serverSettled.has(call.id)) {
-        card.settle(TOOL_CALL_STATUS.DONE, "No result returned.");
+        card.settle(TOOL_CALL_STATUS.DONE, this.#strings.noResult);
       }
       return null;
     }
@@ -5184,13 +6290,15 @@ var AgUiChat = class extends HTMLElement {
       }
       this.#confirmAbort = new AbortController();
       const decision = requestConfirmation(this.#messages, request, {
-        signal: this.#confirmAbort.signal
+        signal: this.#confirmAbort.signal,
+        strings: this.#strings
       });
+      this.#updateEmptyState();
       this.#messages.scrollTop = this.#messages.scrollHeight;
       const accepted = await decision;
       this.#confirmAbort = null;
       if (!accepted) {
-        const message = "User declined the action.";
+        const message = this.#strings.declinedAction;
         card.settle(TOOL_CALL_STATUS.DECLINED, message);
         this.#showPending();
         return { content: message };
@@ -5203,7 +6311,7 @@ var AgUiChat = class extends HTMLElement {
     try {
       const result = await tool.handler(call.args);
       if (navigates) {
-        card.settle(TOOL_CALL_STATUS.DONE, "Navigating\u2026");
+        card.settle(TOOL_CALL_STATUS.DONE, this.#strings.navigating);
         return { content: "", halt: true };
       }
       const content = JSON.stringify(result ?? null);
@@ -5268,6 +6376,12 @@ var AgUiChat = class extends HTMLElement {
         this.#hidePending();
         this.#setRunning(false);
         this.#streamingBubble = null;
+        this.#runAttachments = [];
+        for (const card of this.#toolCards.values()) {
+          if (!card.settled) {
+            card.settle(TOOL_CALL_STATUS.DONE, this.#strings.noResult);
+          }
+        }
       }
     };
   }
@@ -5275,9 +6389,11 @@ var AgUiChat = class extends HTMLElement {
   #appendStoppedNote() {
     const note = document.createElement("div");
     note.className = "stopped-note";
+    note.setAttribute("part", "stopped");
     note.setAttribute("role", "status");
-    note.textContent = "\u23F9 Stopped";
+    note.textContent = this.#strings.stopped;
     this.#messages.appendChild(note);
+    this.#updateEmptyState();
     this.#messages.scrollTop = this.#messages.scrollHeight;
   }
   /**
@@ -5291,8 +6407,9 @@ var AgUiChat = class extends HTMLElement {
     }
     const pending = document.createElement("div");
     pending.className = "pending";
+    pending.setAttribute("part", "pending");
     pending.setAttribute("role", "status");
-    pending.setAttribute("aria-label", "Assistant is thinking\u2026");
+    pending.setAttribute("aria-label", this.#strings.thinking);
     for (let i = 0; i < 3; i += 1) {
       const dot = document.createElement("span");
       dot.className = "pending-dot";
@@ -5300,6 +6417,7 @@ var AgUiChat = class extends HTMLElement {
     }
     this.#pending = pending;
     this.#messages.appendChild(pending);
+    this.#updateEmptyState();
     this.#messages.scrollTop = this.#messages.scrollHeight;
   }
   /** Remove the pending indicator if shown. */
@@ -5329,9 +6447,10 @@ var AgUiChat = class extends HTMLElement {
     }
     const labelled = this.#resolveTool(call.name)?.parameters[X_SUMMARY_KEY];
     const summary = typeof labelled === "string" ? labelled : this.toolSummaries[call.name] ?? this.#toolCatalog[call.name] ?? prettifyToolName(call.name);
-    const card = new ToolCallCard(call.name, call.args, this.toolDisplay, summary);
+    const card = new ToolCallCard(call.name, call.args, this.toolDisplay, summary, this.#strings);
     this.#toolCards.set(call.id, card);
     this.#messages.appendChild(card.element);
+    this.#updateEmptyState();
     this.#messages.scrollTop = this.#messages.scrollHeight;
     return card;
   }
@@ -5344,130 +6463,6 @@ function defineAgUiChat() {
   }
 }
 
-// src/dom/native_setter.ts
-function prototypeSetter(proto, prop) {
-  const setter = Object.getOwnPropertyDescriptor(proto, prop).set;
-  return setter;
-}
-var setInputValue = prototypeSetter(HTMLInputElement.prototype, "value");
-var setTextareaValue = prototypeSetter(HTMLTextAreaElement.prototype, "value");
-var setSelectValue = prototypeSetter(HTMLSelectElement.prototype, "value");
-var setInputChecked = prototypeSetter(HTMLInputElement.prototype, "checked");
-function setNativeValue(el, value) {
-  if (el instanceof HTMLTextAreaElement) {
-    setTextareaValue.call(el, value);
-  } else if (el instanceof HTMLSelectElement) {
-    setSelectValue.call(el, value);
-  } else {
-    setInputValue.call(el, value);
-  }
-}
-function setNativeChecked(el, checked) {
-  setInputChecked.call(el, checked);
-}
-
-// src/dom/animations.ts
-var ACCENT = "#4f46e5";
-function delay(ms) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, ms);
-  });
-}
-async function typeInto(el, value, options = {}) {
-  const charDelayMs = options.charDelayMs ?? 35;
-  setNativeValue(el, "");
-  el.dispatchEvent(new Event("input", { bubbles: true }));
-  for (const char of value) {
-    setNativeValue(el, el.value + char);
-    el.dispatchEvent(new Event("input", { bubbles: true }));
-    if (charDelayMs > 0) {
-      await delay(charDelayMs);
-    }
-  }
-  el.dispatchEvent(new Event("change", { bubbles: true }));
-}
-async function highlightThenClick(el, options = {}) {
-  const highlightMs = options.highlightMs ?? 280;
-  const previousOutline = el.style.outline;
-  const previousOffset = el.style.outlineOffset;
-  el.style.outline = `2px solid ${ACCENT}`;
-  el.style.outlineOffset = "2px";
-  await delay(highlightMs);
-  el.style.outline = previousOutline;
-  el.style.outlineOffset = previousOffset;
-  el.click();
-}
-function scrollIntoCenterView(el) {
-  el.scrollIntoView({ block: "center", inline: "nearest", behavior: "smooth" });
-}
-async function focusWithFlash(el, options = {}) {
-  const flashMs = options.flashMs ?? 200;
-  el.focus();
-  const previousShadow = el.style.boxShadow;
-  el.style.boxShadow = `0 0 0 3px rgba(79, 70, 229, 0.4)`;
-  await delay(flashMs);
-  el.style.boxShadow = previousShadow;
-}
-var RING = "0 0 0 3px rgba(79, 70, 229, 0.4)";
-function prefersReducedMotion() {
-  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-function motionDelay(ms) {
-  if (ms <= 0 || prefersReducedMotion()) {
-    return Promise.resolve();
-  }
-  return delay(ms);
-}
-async function pressThenClick(el, options = {}) {
-  const pressMs = options.pressMs ?? 140;
-  const previousTransform = el.style.transform;
-  const previousTransition = el.style.transition;
-  const previousShadow = el.style.boxShadow;
-  el.style.transition = "transform 80ms ease";
-  el.style.transform = "scale(0.96)";
-  el.style.boxShadow = RING;
-  await motionDelay(pressMs);
-  el.style.transform = previousTransform;
-  el.style.transition = previousTransition;
-  el.style.boxShadow = previousShadow;
-  el.click();
-}
-function findOption(el, value) {
-  for (const option of Array.from(el.options)) {
-    if (option.value === value || option.text === value) {
-      return option;
-    }
-  }
-  return null;
-}
-async function selectOption(el, value, options = {}) {
-  const option = findOption(el, value);
-  if (option === null) {
-    throw new Error(`no <option> matching "${value}"`);
-  }
-  const highlightMs = options.highlightMs ?? 220;
-  const previousOutline = el.style.outline;
-  const previousOffset = el.style.outlineOffset;
-  el.style.outline = `2px solid ${ACCENT}`;
-  el.style.outlineOffset = "2px";
-  await motionDelay(highlightMs);
-  setNativeValue(el, option.value);
-  el.dispatchEvent(new Event("input", { bubbles: true }));
-  el.dispatchEvent(new Event("change", { bubbles: true }));
-  el.style.outline = previousOutline;
-  el.style.outlineOffset = previousOffset;
-}
-async function toggleControl(el, checked, options = {}) {
-  const flashMs = options.flashMs ?? 200;
-  const previousShadow = el.style.boxShadow;
-  el.style.boxShadow = RING;
-  await motionDelay(flashMs);
-  setNativeChecked(el, checked);
-  el.dispatchEvent(new Event("input", { bubbles: true }));
-  el.dispatchEvent(new Event("change", { bubbles: true }));
-  el.style.boxShadow = previousShadow;
-}
-
 // src/dom/dom_driver.ts
 async function fillField(el, value, options = {}) {
   scrollIntoCenterView(el);
@@ -5501,14 +6496,17 @@ function setControlValue(el, value) {
 }
 
 // src/version.ts
-var VERSION = "0.5.0";
+var VERSION = "0.7.0";
 export {
   AgUiChat,
   AgUiClient,
   ClientToolRegistry,
+  ConnectionLostError,
+  DEFAULT_UI_STRINGS,
   ELEMENT_TAG,
   MAX_TOOL_ROUNDS,
   MESSAGE_ROLE,
+  PAGE_ACTIONS,
   RemoteConversationStore,
   SUBMIT_EVENT,
   SessionStorageStore,
@@ -5523,6 +6521,7 @@ export {
   X_SUMMARY_KEY,
   clickElement,
   createHttpAgent,
+  createPageActionTools,
   createPageMapContext,
   createRouteTools,
   createStateHookTools,
@@ -5532,6 +6531,8 @@ export {
   highlightThenClick,
   isDestructive,
   isNavigates,
+  mergeUiStrings,
+  messageAttachments,
   parseToolCatalog,
   prefersReducedMotion,
   pressButton,
@@ -5547,7 +6548,8 @@ export {
   setNativeValue,
   toggleCheckbox,
   toggleControl,
-  typeInto
+  typeInto,
+  uploadAttachment
 };
 /*! Bundled license information: