dewee-webchat 0.1.0 → 0.2.0

package/dist/{chunk-RGAYYTL7.js → chunk-YV6PXYJZ.js}

@@ -1,7 +1,279 @@
 import {
+  ACTION_LIMITS,
+  ACTION_NAME_RE,
   HEADER_GATEWAY_TOKEN,
-  HEADER_GATEWAY_URL
-} from "./chunk-MKTHKYLY.js";
+  HEADER_GATEWAY_URL,
+  SENSITIVITIES,
+  stripPageBlock
+} from "./chunk-JX6AH37X.js";
+
+// src/actions/directives.ts
+var DIRECTIVE_LANG = "dewee-action";
+var RESULT_LANG = "dewee-action-result";
+var DIRECTIVE_LIMITS = { maxCalls: 8, maxBlockBytes: 8192 };
+var CALL_ID_RE = /^[A-Za-z0-9_.:-]{1,64}$/;
+var FENCE_CLOSE_RE = /^\s{0,3}```\s*$/;
+var fenceOpen = (lang) => new RegExp("^\\s{0,3}```" + lang.replace(/[.-]/g, "\\$&") + "\\s*$");
+var DIRECTIVE_OPEN_RE = fenceOpen(DIRECTIVE_LANG);
+var RESULT_OPEN_RE = fenceOpen(RESULT_LANG);
+function findBlocks(lines, open) {
+  const blocks = [];
+  for (let i = 0; i < lines.length; i++) {
+    if (!open.test(lines[i])) continue;
+    const start = i;
+    const body = [];
+    let closed = false;
+    for (i++; i < lines.length; i++) {
+      if (FENCE_CLOSE_RE.test(lines[i])) {
+        closed = true;
+        break;
+      }
+      body.push(lines[i]);
+    }
+    blocks.push({ start, end: Math.min(i, lines.length - 1), body, closed });
+  }
+  return blocks;
+}
+var removeBlocks = (lines, blocks) => {
+  const drop = /* @__PURE__ */ new Set();
+  for (const b of blocks) for (let i = b.start; i <= b.end; i++) drop.add(i);
+  return lines.filter((_, i) => !drop.has(i)).join("\n").replace(/\n{3,}/g, "\n\n").trim();
+};
+function parseDirectives(content) {
+  const lines = content.replace(/\r\n?/g, "\n").split("\n");
+  const blocks = findBlocks(lines, DIRECTIVE_OPEN_RE);
+  const calls = [];
+  const ids = /* @__PURE__ */ new Set();
+  blocks.forEach((b, n) => {
+    const fallbackId = `call-${n + 1}`;
+    const raw = b.body.join("\n");
+    const bad = (error, id2 = fallbackId, name2 = "") => calls.push({ ok: false, id: id2, name: name2, error });
+    if (n >= DIRECTIVE_LIMITS.maxCalls) return bad(`Too many action calls in one reply (max ${DIRECTIVE_LIMITS.maxCalls})`);
+    if (!b.closed) return bad("Unclosed dewee-action block");
+    if (new TextEncoder().encode(raw).length > DIRECTIVE_LIMITS.maxBlockBytes) return bad(`Action block exceeds ${DIRECTIVE_LIMITS.maxBlockBytes} bytes`);
+    let data;
+    try {
+      data = JSON.parse(raw);
+    } catch {
+      return bad("Action block is not valid JSON");
+    }
+    if (typeof data !== "object" || data === null || Array.isArray(data)) return bad("Action block must be a JSON object");
+    let id = typeof data.id === "string" && CALL_ID_RE.test(data.id) ? data.id : fallbackId;
+    const name = typeof data.name === "string" ? data.name.slice(0, 64) : "";
+    if (ids.has(id)) return bad(`Duplicate action call id "${id}"`, `${id}-${n + 1}`, name);
+    ids.add(id);
+    if (!name) return bad("Action name is required", id);
+    const args = data.args ?? {};
+    if (typeof args !== "object" || args === null || Array.isArray(args)) return bad("args must be a JSON object", id, name);
+    calls.push({ ok: true, id, name, args });
+  });
+  return { text: blocks.length ? removeBlocks(lines, blocks) : content, calls };
+}
+function stripDirectives(content) {
+  if (!content.includes("```" + DIRECTIVE_LANG)) return content;
+  const lines = content.replace(/\r\n?/g, "\n").split("\n");
+  return removeBlocks(lines, findBlocks(lines, DIRECTIVE_OPEN_RE));
+}
+function isActionResultMessage(content) {
+  return RESULT_OPEN_RE.test(content.trimStart().split("\n", 1)[0] ?? "");
+}
+function parseActionResults(content) {
+  const lines = content.replace(/\r\n?/g, "\n").split("\n");
+  const out = [];
+  for (const b of findBlocks(lines, RESULT_OPEN_RE)) {
+    try {
+      const r = JSON.parse(b.body.join("\n"));
+      if (r && typeof r.id === "string" && ["ok", "denied", "error"].includes(r.status)) out.push(r);
+    } catch {
+    }
+  }
+  return out;
+}
+var block = (r) => "```" + RESULT_LANG + "\n" + JSON.stringify(r) + "\n```";
+function formatActionResults(results, maxLength = 4e3) {
+  const budget = Math.max(64, Math.floor((maxLength - 16) / Math.max(1, results.length)));
+  const fitted = results.map((r) => {
+    const safe = { ...r, result: toJsonValue(r.result) };
+    if (safe.result === void 0) delete safe.result;
+    if (block(safe).length <= budget) return block(safe);
+    const preview = JSON.stringify(safe.result ?? null);
+    const room = budget - block({ ...safe, result: { truncated: true, preview: "" } }).length - 8;
+    const shrunk = block({ ...safe, result: { truncated: true, preview: preview.slice(0, Math.max(0, room)) } });
+    return shrunk.length <= budget ? shrunk : block({ id: r.id, name: r.name.slice(0, 64), status: r.status, result: { truncated: true } });
+  });
+  return fitted.join("\n\n").slice(0, maxLength);
+}
+function toJsonValue(v) {
+  if (v === void 0) return void 0;
+  try {
+    const s = JSON.stringify(v);
+    return s === void 0 ? null : JSON.parse(s);
+  } catch {
+    return "[unserializable result]";
+  }
+}
+
+// src/actions/json-schema-subset.ts
+var typeOf = (v) => v === null ? "null" : Array.isArray(v) ? "array" : typeof v === "number" ? Number.isInteger(v) ? "integer" : "number" : typeof v;
+var matchesType = (v, t) => {
+  const actual = typeOf(v);
+  return actual === t || t === "number" && actual === "integer";
+};
+function validateJsonSchema(value, schema, path = "args", depth = 0) {
+  if (!schema || typeof schema !== "object") return null;
+  if (depth > 32) return `${path}: schema is nested too deeply`;
+  const s = schema;
+  if (s.type !== void 0) {
+    const types = Array.isArray(s.type) ? s.type : [s.type];
+    if (!types.some((t) => matchesType(value, t))) return `${path}: expected ${types.join(" or ")}, got ${typeOf(value)}`;
+  }
+  if (Array.isArray(s.enum) && !s.enum.some((e) => sameJson(e, value))) {
+    return `${path}: must be one of ${s.enum.map((e) => JSON.stringify(e)).join(", ")}`;
+  }
+  if ("const" in s && !sameJson(s.const, value)) return `${path}: must equal ${JSON.stringify(s.const)}`;
+  if (typeof value === "string") {
+    if (typeof s.minLength === "number" && value.length < s.minLength) return `${path}: shorter than ${s.minLength} characters`;
+    if (typeof s.maxLength === "number" && value.length > s.maxLength) return `${path}: longer than ${s.maxLength} characters`;
+    if (typeof s.pattern === "string") {
+      let re = null;
+      try {
+        re = new RegExp(s.pattern, "u");
+      } catch {
+        return `${path}: schema pattern is invalid`;
+      }
+      if (!re.test(value)) return `${path}: does not match ${s.pattern}`;
+    }
+  }
+  if (typeof value === "number") {
+    if (typeof s.minimum === "number" && value < s.minimum) return `${path}: must be >= ${s.minimum}`;
+    if (typeof s.maximum === "number" && value > s.maximum) return `${path}: must be <= ${s.maximum}`;
+  }
+  if (Array.isArray(value)) {
+    if (typeof s.minItems === "number" && value.length < s.minItems) return `${path}: needs at least ${s.minItems} items`;
+    if (typeof s.maxItems === "number" && value.length > s.maxItems) return `${path}: allows at most ${s.maxItems} items`;
+    if (s.items && typeof s.items === "object") {
+      for (let i = 0; i < value.length; i++) {
+        const err = validateJsonSchema(value[i], s.items, `${path}[${i}]`, depth + 1);
+        if (err) return err;
+      }
+    }
+  }
+  if (typeOf(value) === "object") {
+    const obj = value;
+    const props = s.properties && typeof s.properties === "object" ? s.properties : {};
+    for (const key of Array.isArray(s.required) ? s.required : []) {
+      if (!(key in obj)) return `${path}.${key}: is required`;
+    }
+    for (const [key, v] of Object.entries(obj)) {
+      if (Object.prototype.hasOwnProperty.call(props, key)) {
+        const err = validateJsonSchema(v, props[key], `${path}.${key}`, depth + 1);
+        if (err) return err;
+      } else if (s.additionalProperties === false) {
+        return `${path}.${key}: is not allowed`;
+      }
+    }
+  }
+  return null;
+}
+function sameJson(a, b) {
+  return JSON.stringify(a) === JSON.stringify(b);
+}
+
+// src/actions/action-runner.ts
+var needsConfirmation = (s) => s === "mutate" || s === "destructive";
+var ActionRegistry = class {
+  map = /* @__PURE__ */ new Map();
+  get size() {
+    return this.map.size;
+  }
+  get(name) {
+    return this.map.get(name);
+  }
+  names() {
+    return [...this.map.keys()];
+  }
+  /** Adds or replaces actions by name. Throws TypeError on an invalid definition. */
+  register(actions) {
+    const list = Array.isArray(actions) ? actions : [actions];
+    for (const a of list) assertAction(a);
+    if ((/* @__PURE__ */ new Set([...this.map.keys(), ...list.map((a) => a.name)])).size > ACTION_LIMITS.maxActions) {
+      throw new TypeError(`dewee-webchat: at most ${ACTION_LIMITS.maxActions} page actions`);
+    }
+    for (const a of list) this.map.set(a.name, a);
+  }
+  unregister(name) {
+    return this.map.delete(name);
+  }
+  /** What is sent to the backend: everything but the handler. */
+  manifest() {
+    return [...this.map.values()].map((a) => ({
+      name: a.name,
+      description: a.description,
+      sensitivity: a.sensitivity,
+      parameters: a.parameters ?? { type: "object", properties: {} }
+    }));
+  }
+};
+function assertAction(a) {
+  const fail = (why) => {
+    throw new TypeError(`dewee-webchat: invalid page action ${JSON.stringify(a?.name)}: ${why}`);
+  };
+  if (!a || typeof a !== "object") fail("not an object");
+  if (typeof a.name !== "string" || !ACTION_NAME_RE.test(a.name)) fail("name must match ^[a-z][a-z0-9_.-]{0,63}$");
+  if (typeof a.description !== "string" || a.description.length > ACTION_LIMITS.maxDescription) fail(`description must be a string up to ${ACTION_LIMITS.maxDescription} chars`);
+  if (!SENSITIVITIES.includes(a.sensitivity)) fail(`sensitivity must be one of ${SENSITIVITIES.join(", ")}`);
+  if (typeof a.handler !== "function") fail("handler must be a function");
+  if (a.parameters !== void 0 && (typeof a.parameters !== "object" || a.parameters === null || Array.isArray(a.parameters))) fail("parameters must be a JSON Schema object");
+}
+async function runActionCall(call, o) {
+  const fail = (error) => {
+    o.onStatus?.("error");
+    return { id: call.id, name: call.name, status: "error", error };
+  };
+  if (!call.ok) return fail(call.error);
+  if (o.signal.aborted) return fail("Cancelled");
+  const action = o.registry.get(call.name);
+  if (!action) return fail(`Unknown action "${call.name}". Available: ${o.registry.names().join(", ") || "none"}`);
+  const invalid = validateJsonSchema(call.args, action.parameters ?? { type: "object" });
+  if (invalid) return fail(`Invalid arguments: ${invalid}`);
+  if (needsConfirmation(action.sensitivity)) {
+    o.onStatus?.("awaiting-confirmation");
+    const { handler: _omit, ...info } = action;
+    let approved = false;
+    try {
+      approved = await raceAbort(Promise.resolve(o.confirm({ ...info, callId: call.id }, call.args)), o.signal) === true;
+    } catch {
+      approved = false;
+    }
+    if (!approved || o.signal.aborted) {
+      o.onStatus?.("denied");
+      return { id: call.id, name: call.name, status: "denied", error: "The user declined this action." };
+    }
+  }
+  o.onStatus?.("running");
+  const ctrl = new AbortController();
+  const stop = () => ctrl.abort();
+  o.signal.addEventListener("abort", stop, { once: true });
+  const timer = setTimeout(stop, o.timeoutMs ?? 3e4);
+  try {
+    const value = await raceAbort(Promise.resolve().then(() => action.handler(call.args, { callId: call.id, conversationId: o.conversationId, agent: o.agent, signal: ctrl.signal })), ctrl.signal);
+    o.onStatus?.("done");
+    return { id: call.id, name: call.name, status: "ok", result: toJsonValue(value) ?? null };
+  } catch (e) {
+    return fail(ctrl.signal.aborted ? o.signal.aborted ? "Cancelled" : "Timed out" : String(e?.message ?? e).slice(0, 500) || "Action failed");
+  } finally {
+    clearTimeout(timer);
+    o.signal.removeEventListener("abort", stop);
+  }
+}
+function raceAbort(p, signal) {
+  if (signal.aborted) return Promise.reject(new Error("aborted"));
+  return new Promise((resolve, reject) => {
+    const onAbort = () => reject(new Error("aborted"));
+    signal.addEventListener("abort", onAbort, { once: true });
+    p.then(resolve, reject).finally(() => signal.removeEventListener("abort", onAbort));
+  });
+}
 
 // src/widget/api-client.ts
 var ApiError = class extends Error {
@@ -140,6 +412,79 @@ var ApiClient = class {
   }
 };
 
+// src/widget/confirm-dialog.ts
+var seq = 0;
+function showConfirmDialog(container, s, action, args, signal) {
+  const id = `dw-confirm-${++seq}`;
+  const root = container.getRootNode();
+  const previous = root.activeElement;
+  const backdrop = document.createElement("div");
+  backdrop.className = "confirm-backdrop";
+  backdrop.innerHTML = `
+    <div class="confirm" role="alertdialog" aria-modal="true" aria-labelledby="${id}-t" aria-describedby="${id}-d">
+      <h3 id="${id}-t"></h3>
+      <div id="${id}-d" class="confirm-desc">
+        <div class="confirm-action"><code></code><span class="sens"></span></div>
+        <p class="confirm-text"></p>
+        <p class="confirm-warn" hidden></p>
+      </div>
+      <pre class="confirm-args"></pre>
+      <div class="confirm-buttons">
+        <button type="button" class="btn deny"></button>
+        <button type="button" class="btn allow"></button>
+      </div>
+    </div>`;
+  const q = (sel) => backdrop.querySelector(sel);
+  q("h3").textContent = s.confirmTitle;
+  q("code").textContent = action.name;
+  const sens = q(".sens");
+  sens.textContent = action.sensitivity;
+  sens.dataset.level = action.sensitivity;
+  q(".confirm-text").textContent = action.description;
+  if (action.sensitivity === "destructive") {
+    const warn = q(".confirm-warn");
+    warn.hidden = false;
+    warn.textContent = s.confirmDestructive;
+  }
+  const argsText = JSON.stringify(args, null, 2);
+  const pre = q(".confirm-args");
+  if (argsText && argsText !== "{}") pre.textContent = argsText;
+  else pre.remove();
+  const deny = q(".deny");
+  const allow = q(".allow");
+  deny.textContent = s.deny;
+  allow.textContent = s.allow;
+  if (action.sensitivity === "destructive") allow.classList.add("danger");
+  return new Promise((resolve) => {
+    let done = false;
+    const finish = (ok) => {
+      if (done) return;
+      done = true;
+      signal?.removeEventListener("abort", onAbort);
+      backdrop.remove();
+      previous?.focus?.();
+      resolve(ok);
+    };
+    const onAbort = () => finish(false);
+    if (signal?.aborted) return finish(false);
+    signal?.addEventListener("abort", onAbort, { once: true });
+    deny.addEventListener("click", () => finish(false));
+    allow.addEventListener("click", () => finish(true));
+    backdrop.addEventListener("keydown", (ev) => {
+      if (ev.key === "Escape") {
+        ev.preventDefault();
+        ev.stopPropagation();
+        finish(false);
+      } else if (ev.key === "Tab") {
+        ev.preventDefault();
+        (root.activeElement === deny ? allow : deny).focus();
+      }
+    });
+    container.appendChild(backdrop);
+    deny.focus();
+  });
+}
+
 // src/widget/i18n.ts
 var en = {
   title: "Assistant",
@@ -162,7 +507,13 @@ var en = {
   online: "Online",
   poweredBy: "Powered by",
   errorGeneric: "Something went wrong. Please try again.",
-  stopped: "Stopped."
+  stopped: "Stopped.",
+  actionStatus: { pending: "queued", "awaiting-confirmation": "needs approval", running: "running", done: "done", denied: "declined", error: "failed" },
+  confirmTitle: "Allow this action?",
+  confirmDestructive: "This can't be undone.",
+  allow: "Allow",
+  deny: "Deny",
+  actionLimit: (n) => `Stopped after ${n} automatic action rounds. Send a message to continue.`
 };
 var vi = {
   title: "Tr\u1EE3 l\xFD",
@@ -185,13 +536,20 @@ var vi = {
   online: "\u0110ang tr\u1EF1c tuy\u1EBFn",
   poweredBy: "V\u1EADn h\xE0nh b\u1EDFi",
   errorGeneric: "C\xF3 l\u1ED7i x\u1EA3y ra. B\u1EA1n th\u1EED l\u1EA1i gi\xFAp m\xECnh nh\xE9.",
-  stopped: "\u0110\xE3 d\u1EEBng."
+  stopped: "\u0110\xE3 d\u1EEBng.",
+  actionStatus: { pending: "ch\u1EDD", "awaiting-confirmation": "c\u1EA7n x\xE1c nh\u1EADn", running: "\u0111ang ch\u1EA1y", done: "xong", denied: "\u0111\xE3 t\u1EEB ch\u1ED1i", error: "l\u1ED7i" },
+  confirmTitle: "Cho ph\xE9p thao t\xE1c n\xE0y?",
+  confirmDestructive: "Thao t\xE1c n\xE0y kh\xF4ng th\u1EC3 ho\xE0n t\xE1c.",
+  allow: "Cho ph\xE9p",
+  deny: "T\u1EEB ch\u1ED1i",
+  actionLimit: (n) => `\u0110\xE3 d\u1EEBng sau ${n} l\u01B0\u1EE3t thao t\xE1c t\u1EF1 \u0111\u1ED9ng. G\u1EEDi tin nh\u1EAFn \u0111\u1EC3 ti\u1EBFp t\u1EE5c.`
 };
 function pickStrings(locale) {
   const l = (locale || (typeof document !== "undefined" ? document.documentElement.lang : "") || (typeof navigator !== "undefined" ? navigator.language : "") || "en").toLowerCase();
   return l.startsWith("vi") ? vi : en;
 }
 var icons = {
+  action: `<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z"/></svg>`,
   chat: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a8.5 8.5 0 0 1-12.4 7.6L3 21l1.4-5.1A8.5 8.5 0 1 1 21 12Z"/><path d="M8.5 11h.01M12 11h.01M15.5 11h.01"/></svg>`,
   close: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>`,
   down: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>`,
@@ -404,6 +762,7 @@ var styles = (
 }
 * { box-sizing: border-box; }
 button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
+[hidden] { display: none !important; }
 .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
 
 /* ---------- launcher ---------- */
@@ -449,6 +808,8 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
 @media (max-width: 520px) {
   :host(:not([data-mode="inline"])) .panel { inset: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
   :host([data-open]:not([data-mode="inline"])) .launcher { display: none; }
+  :host(:not([data-mode="inline"])) .head { padding-top: max(14px, env(safe-area-inset-top)); }
+  :host(:not([data-mode="inline"])) .composer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
 }
 
 /* ---------- header ---------- */
@@ -466,7 +827,7 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
 .who { flex: 1; min-width: 0; }
 .title { font-weight: 650; font-size: 15px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .subtitle { font-size: 12px; color: var(--dw-muted); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
-.dot { width: 7px; height: 7px; border-radius: 50%; background: #22c58b; box-shadow: 0 0 0 3px color-mix(in srgb, #22c58b 22%, transparent); }
+.dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #22c58b; box-shadow: 0 0 0 3px color-mix(in srgb, #22c58b 22%, transparent); }
 .agent-select {
   font: inherit; font-size: 12px; color: var(--dw-muted); background: transparent; border: 0;
   padding: 0 14px 0 0; margin: 0; max-width: 170px; cursor: pointer; appearance: none; field-sizing: content; text-overflow: ellipsis;
@@ -567,6 +928,46 @@ details > summary svg.ic { width: 14px; height: 14px; flex: none; }
 .typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
 @keyframes bounce { 0%, 60%, 100% { transform: none; opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }
 
+/* page actions */
+.actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+.md[hidden] + .actions { margin-top: 0; }
+.action {
+  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 9px 4px 8px; border-radius: 999px;
+  border: 1px solid var(--dw-border); background: var(--dw-surface); font-size: 12px; color: var(--dw-muted);
+}
+.action svg.ic { width: 13px; height: 13px; flex: none; color: var(--dw-accent); }
+.action-name { font-family: var(--dw-mono); font-size: 11.5px; color: var(--dw-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.action-state { font-size: 11px; flex: none; }
+.action[data-status="done"] .action-state { color: #13a06f; }
+.action[data-status="awaiting-confirmation"] { border-color: color-mix(in srgb, #d98a00 45%, transparent); }
+.action[data-status="awaiting-confirmation"] .action-state { color: #b06f00; }
+.action[data-status="denied"] .action-state, .action[data-status="error"] .action-state { color: #c2334f; }
+.notice { margin: -6px 0 16px; font-size: 12px; color: var(--dw-muted); text-align: center; }
+.confirm-backdrop {
+  position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; padding: 12px;
+  background: color-mix(in srgb, var(--dw-fg) 28%, transparent); animation: rise .18s ease both;
+}
+.confirm {
+  width: 100%; max-height: 100%; overflow: auto; background: var(--dw-bg); color: var(--dw-fg);
+  border: 1px solid var(--dw-border); border-radius: 16px; padding: 16px; box-shadow: var(--dw-shadow);
+}
+.confirm h3 { margin: 0 0 10px; font-size: 15px; font-weight: 650; }
+.confirm-action { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.confirm-action code { font-family: var(--dw-mono); font-size: 12.5px; background: var(--dw-surface); padding: 2px 6px; border-radius: 6px; }
+.sens { font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--dw-border); color: var(--dw-muted); }
+.sens[data-level="destructive"] { color: #c2334f; border-color: color-mix(in srgb, #c2334f 40%, transparent); }
+.confirm-text { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--dw-muted); }
+.confirm-warn { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: #c2334f; }
+.confirm-args {
+  margin: 10px 0 0; font-family: var(--dw-mono); font-size: 11.5px; line-height: 1.5; background: var(--dw-surface);
+  border: 1px solid var(--dw-border); border-radius: 8px; padding: 8px; max-height: 160px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
+}
+.confirm-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
+.btn { font: inherit; font-size: 13.5px; font-weight: 600; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--dw-border); background: var(--dw-bg); color: var(--dw-fg); min-height: 38px; }
+.btn.allow { background: var(--dw-accent); border-color: var(--dw-accent); color: var(--dw-accent-contrast); }
+.btn.allow.danger { background: #c2334f; border-color: #c2334f; color: #fff; }
+.btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--dw-accent) 45%, transparent); outline-offset: 2px; }
+
 /* ---------- composer ---------- */
 .composer { padding: 10px 12px 12px; border-top: 1px solid var(--dw-border); background: var(--dw-bg); }
 .box {
@@ -576,7 +977,7 @@ details > summary svg.ic { width: 14px; height: 14px; flex: none; }
 .box:focus-within { border-color: var(--dw-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dw-accent) 16%, transparent); }
 textarea {
   flex: 1; resize: none; border: 0; outline: 0; background: transparent; color: var(--dw-fg);
-  font: inherit; font-size: 14.5px; line-height: 1.5; max-height: 140px; padding: 6px 0; min-height: 34px;
+  font: inherit; font-size: 16px; line-height: 1.45; max-height: 140px; padding: 5px 0; min-height: 34px;
 }
 textarea::placeholder { color: var(--dw-muted); }
 .send {
@@ -591,6 +992,10 @@ textarea::placeholder { color: var(--dw-muted); }
 .foot a:hover { color: var(--dw-accent); }
 .challenge:empty { display: none; }
 .challenge { display: flex; justify-content: center; padding: 8px 0; }
+/* iOS zooms into any focused field under 16px; keep touch-device fields at 16px. */
+@media (pointer: coarse) {
+  .agent-select { font-size: 16px; max-width: 200px; }
+}
 @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
 `
 );
@@ -671,6 +1076,10 @@ var DeweeChatElement = class extends ElementBase {
   activated = false;
   strings = pickStrings();
   mql = null;
+  registry = new ActionRegistry();
+  propActionNames = /* @__PURE__ */ new Set();
+  hooks = {};
+  acks = /* @__PURE__ */ new Map();
   els;
   constructor() {
     super();
@@ -688,13 +1097,38 @@ var DeweeChatElement = class extends ElementBase {
       else if (a === "z-index") c.zIndex = Number(v);
       else c[camel(a)] = v;
     }
-    return { ...c, ...this.overrides };
+    return { ...c, ...this.overrides, ...this.hooks };
   }
   /** Updates configuration at runtime (wins over attributes). */
   configure(partial) {
-    this.overrides = { ...this.overrides, ...partial };
+    const { actions, confirm, getPageContext, ...rest } = partial;
+    const has = (k) => Object.prototype.hasOwnProperty.call(partial, k);
+    if (has("actions")) this.setPropActions(actions ?? []);
+    if (has("confirm")) this.hooks.confirm = confirm;
+    if (has("getPageContext")) this.hooks.getPageContext = getPageContext;
+    if (!Object.keys(rest).length) return;
+    this.overrides = { ...this.overrides, ...rest };
     if (this.els) this.applyConfig();
   }
+  /** Adds or replaces page actions the agent may invoke. Throws TypeError on an invalid definition. */
+  registerActions(actions) {
+    this.registry.register(actions);
+  }
+  /** Removes a page action. Returns false when it was not registered. */
+  unregisterAction(name) {
+    this.propActionNames.delete(name);
+    return this.registry.unregister(name);
+  }
+  /** Names of the currently registered page actions. */
+  get actionNames() {
+    return this.registry.names();
+  }
+  setPropActions(actions) {
+    const next = new Set(actions.map((a) => a.name));
+    for (const name of this.propActionNames) if (!next.has(name)) this.registry.unregister(name);
+    if (actions.length) this.registry.register(actions);
+    this.propActionNames = next;
+  }
   open() {
     if (this.config.mode === "inline") return;
     this.setAttribute("data-open", "");
@@ -721,21 +1155,40 @@ var DeweeChatElement = class extends ElementBase {
     await this.activate();
     this.els.input.value = "";
     this.autosize();
-    this.pushMessage({ role: "user", content: message });
+    let next = { message, hidden: false };
+    for (let round = 0; next; round++) {
+      const reply = await this.runTurn(next.message, next.hidden);
+      next = null;
+      if (reply.status !== "done" || reply.stopped || !this.registry.size) break;
+      const { calls } = parseDirectives(reply.content);
+      if (!calls.length) break;
+      reply.actions = calls.map((c) => ({ id: c.id, name: c.name, args: c.ok ? c.args : void 0, status: "pending" }));
+      const limit = this.config.maxActionRounds ?? 5;
+      if (round >= limit) {
+        for (const a of reply.actions) Object.assign(a, { status: "error", error: "Automatic action limit reached" });
+        this.updateMessage(reply);
+        this.showNotice(this.strings.actionLimit(limit));
+        break;
+      }
+      this.updateMessage(reply);
+      const results = await this.runActions(reply, calls);
+      if (results) next = { message: formatActionResults(results, this.server?.maxMessageLength ?? 4e3), hidden: true };
+    }
+  }
+  /** One request/response with the agent. */
+  async runTurn(message, hidden) {
+    this.pushMessage({ role: "user", content: message, hidden });
     const reply = { role: "assistant", content: "", status: "streaming", startedAt: Date.now() };
     this.pushMessage(reply);
     this.setRunning(new AbortController());
-    this.emit("dewee:send", { message, agent: this.agentId, conversationId: this.conversationId });
+    this.emit("dewee:send", { message, agent: this.agentId, conversationId: this.conversationId, auto: hidden || void 0 });
     try {
-      await this.client().chat(
-        { message, agent: this.agentId, conversationId: this.conversationId },
-        (e) => this.onStreamEvent(reply, e),
-        this.running.signal
-      );
+      await this.client().chat(this.chatBody(message), (e) => this.onStreamEvent(reply, e), this.running.signal);
       if (reply.status === "streaming") reply.status = "done";
     } catch (e) {
       if (e.name === "AbortError") {
         reply.status = "done";
+        reply.stopped = true;
         if (!reply.content) reply.content = `_${this.strings.stopped}_`;
       } else {
         reply.status = "error";
@@ -746,10 +1199,95 @@ var DeweeChatElement = class extends ElementBase {
       this.updateMessage(reply);
       this.setRunning(null);
       if (reply.status === "done") {
+        if (reply.actionsHash && !reply.stopped) this.setAck(reply.actionsHash);
         this.emit("dewee:reply", { content: reply.content, agent: this.agentId, conversationId: this.conversationId });
         if (this.config.mode !== "inline" && !this.hasAttribute("data-open")) this.setAttribute("data-unread", "");
       }
     }
+    return reply;
+  }
+  chatBody(message) {
+    const body = { message, agent: this.agentId, conversationId: this.conversationId };
+    if (this.registry.size) {
+      body.actions = this.registry.manifest();
+      const ack = this.getAck();
+      if (ack) body.actionsHash = ack;
+    }
+    const ctx = this.pageContext();
+    if (ctx !== void 0) body.pageContext = ctx;
+    return body;
+  }
+  /** Host snapshot, dropped (with a warning) when it fails or exceeds the backend cap. */
+  pageContext() {
+    const get = this.hooks.getPageContext;
+    if (!get) return void 0;
+    try {
+      const v = get();
+      if (v === void 0 || v === null) return void 0;
+      const size = new TextEncoder().encode(JSON.stringify(v)).length;
+      if (size <= ACTION_LIMITS.maxPageContextBytes) return v;
+      console.warn(`[dewee-webchat] getPageContext() returned ${size} bytes; the limit is ${ACTION_LIMITS.maxPageContextBytes}. Context not sent.`);
+      return { truncated: true };
+    } catch (e) {
+      console.warn("[dewee-webchat] getPageContext() failed:", e);
+      return void 0;
+    }
+  }
+  ackKey() {
+    return `dewee-webchat:actions:${this.config.endpoint}:${this.agentId}:${this.conversationId}`;
+  }
+  getAck() {
+    return this.acks.get(this.ackKey()) ?? (this.config.persist !== false ? store2.get(this.ackKey()) ?? void 0 : void 0);
+  }
+  setAck(hash) {
+    this.acks.set(this.ackKey(), hash);
+    if (this.config.persist !== false) store2.set(this.ackKey(), hash);
+  }
+  /** Executes the calls of one answer in order. Resolves null when the visitor stopped the chain. */
+  async runActions(reply, calls) {
+    const ctrl = new AbortController();
+    this.setRunning(ctrl);
+    const results = [];
+    const base = { agent: this.agentId, conversationId: this.conversationId };
+    try {
+      for (const [i, call] of calls.entries()) {
+        const view = reply.actions[i];
+        const sensitivity = call.ok ? this.registry.get(call.name)?.sensitivity : void 0;
+        const args = call.ok ? call.args : void 0;
+        this.emit("dewee:action", { phase: "start", id: call.id, name: call.name, sensitivity, args, ...base });
+        const r = await runActionCall(call, {
+          registry: this.registry,
+          confirm: (action, a) => this.confirmAction(action, a, ctrl.signal),
+          signal: ctrl.signal,
+          timeoutMs: this.config.actionTimeoutMs,
+          ...base,
+          onStatus: (status) => {
+            view.status = status;
+            this.updateMessage(reply);
+          }
+        });
+        if (r.error) view.error = r.error;
+        this.updateMessage(reply);
+        results.push(r);
+        this.emit("dewee:action", { phase: "result", id: r.id, name: r.name, sensitivity, args, status: r.status, result: r.result, error: r.error, ...base });
+      }
+    } finally {
+      this.setRunning(null);
+    }
+    return ctrl.signal.aborted ? null : results;
+  }
+  confirmAction(action, args, signal) {
+    if (this.hooks.confirm) return this.hooks.confirm(action, args);
+    if (this.config.mode !== "inline" && !this.hasAttribute("data-open")) this.open();
+    return showConfirmDialog(this.els.panel, this.strings, action, args, signal);
+  }
+  showNotice(text) {
+    const div = document.createElement("div");
+    div.className = "notice";
+    div.setAttribute("role", "status");
+    div.textContent = text;
+    this.els.log.appendChild(div);
+    this.scrollToBottom(true);
   }
   /** Stops the running reply. */
   stop() {
@@ -993,7 +1531,7 @@ var DeweeChatElement = class extends ElementBase {
     if (!saved) return;
     try {
       const history = await this.client().history(this.agentId, this.conversationId);
-      this.messages = history.map((m) => ({ ...m, status: "done" }));
+      this.messages = decorateHistory(history.map((m) => ({ ...m, status: "done" })));
       this.renderLog();
     } catch {
     }
@@ -1039,6 +1577,7 @@ var DeweeChatElement = class extends ElementBase {
   renderMessage(m) {
     const root = document.createElement("div");
     root.className = `msg ${m.role}${m.status === "error" ? " error" : ""}`;
+    root.hidden = !!m.hidden;
     const bubble = document.createElement("div");
     bubble.className = "bubble";
     root.appendChild(bubble);
@@ -1046,9 +1585,13 @@ var DeweeChatElement = class extends ElementBase {
     trace.className = "trace";
     const md = document.createElement("div");
     md.className = m.role === "assistant" ? "md" : "";
+    const actions = document.createElement("div");
+    actions.className = "actions";
+    actions.hidden = true;
     if (m.role === "assistant") bubble.appendChild(trace);
     bubble.appendChild(md);
-    m.view = { root, trace, md, tools: /* @__PURE__ */ new Map() };
+    if (m.role === "assistant") bubble.appendChild(actions);
+    m.view = { root, trace, md, tools: /* @__PURE__ */ new Map(), actions };
     this.updateMessage(m);
     return root;
   }
@@ -1085,13 +1628,33 @@ var DeweeChatElement = class extends ElementBase {
       v.tools.clear();
     }
     v.trace.hidden = !v.trace.childElementCount;
-    const typing = m.status === "streaming" && !m.content;
+    const shown = this.registry.size || m.actions ? stripDirectives(m.content) : m.content;
+    const typing = m.status === "streaming" && !shown;
+    v.md.hidden = !typing && !shown && !!m.actions?.length;
     if (typing) {
       v.md.innerHTML = `<span class="typing" aria-label="${this.strings.thinking}"><i></i><i></i><i></i></span>`;
     } else {
-      v.md.replaceChildren(renderMarkdown(document, m.content));
+      v.md.replaceChildren(renderMarkdown(document, shown));
       v.md.classList.toggle("cursor", m.status === "streaming");
     }
+    this.renderActions(v, m.actions ?? []);
+  }
+  renderActions(v, list) {
+    v.actions.hidden = !list.length;
+    v.actions.replaceChildren(
+      ...list.map((a) => {
+        const chip = document.createElement("div");
+        chip.className = "action";
+        chip.dataset.status = a.status;
+        const busy = a.status === "running" || a.status === "awaiting-confirmation";
+        chip.innerHTML = `${busy ? '<span class="spin"></span>' : icons.action}<span class="action-name"></span><span class="action-state"></span>`;
+        chip.querySelector(".action-name").textContent = a.name || "?";
+        chip.querySelector(".action-state").textContent = this.strings.actionStatus[a.status];
+        const tip = [a.args && Object.keys(a.args).length ? JSON.stringify(a.args) : "", a.error ?? ""].filter(Boolean).join("\n");
+        if (tip) chip.title = tip;
+        return chip;
+      })
+    );
   }
   renderTool(v, t) {
     let d = v.tools.get(t.id);
@@ -1110,7 +1673,7 @@ var DeweeChatElement = class extends ElementBase {
     d.querySelector(".tool-state").textContent = t.status === "running" ? this.strings.toolRunning : t.status === "error" ? this.strings.toolError : this.strings.toolDone;
     const body = d.querySelector(".tool-body");
     body.replaceChildren();
-    const block = (label, value) => {
+    const block2 = (label, value) => {
       if (value === void 0 || value === null || value === "") return;
       const l = document.createElement("div");
       l.className = "label";
@@ -1119,12 +1682,13 @@ var DeweeChatElement = class extends ElementBase {
       pre.textContent = typeof value === "string" ? tryPretty(value) : JSON.stringify(value, null, 2);
       body.append(l, pre);
     };
-    block(this.strings.args, t.arguments);
-    block(this.strings.result, t.result);
+    block2(this.strings.args, t.arguments);
+    block2(this.strings.result, t.result);
   }
   onStreamEvent(m, e) {
     switch (e.type) {
       case "start":
+        if (e.actionsHash) m.actionsHash = e.actionsHash;
         if (e.conversationId && e.conversationId !== this.conversationId) {
           this.conversationId = e.conversationId;
           if (this.config.persist !== false) store2.set(this.convKey(), e.conversationId);
@@ -1222,6 +1786,27 @@ var DeweeChatElement = class extends ElementBase {
     }
   }
 };
+function decorateHistory(messages) {
+  messages.forEach((m, i) => {
+    if (m.role === "user") {
+      m.content = stripPageBlock(m.content);
+      if (isActionResultMessage(m.content)) m.hidden = true;
+      return;
+    }
+    if (!m.content.includes("```dewee-action")) return;
+    const { calls } = parseDirectives(m.content);
+    if (!calls.length) return;
+    const next = messages[i + 1];
+    const nextContent = next?.role === "user" ? stripPageBlock(next.content) : "";
+    const results = isActionResultMessage(nextContent) ? parseActionResults(nextContent) : [];
+    m.actions = calls.map((c) => {
+      const r = results.find((x) => x.id === c.id);
+      const status = !r ? "error" : r.status === "ok" ? "done" : r.status;
+      return { id: c.id, name: c.name, args: c.ok ? c.args : void 0, status, error: r ? r.error : "Not run" };
+    });
+  });
+  return messages;
+}
 function safeJson(s, fallback) {
   try {
     return JSON.parse(s);