@webless/agent 0.6.5 → 0.6.7

package/dist/embed.cjs

@@ -64,7 +64,7 @@ function submitAgentPanel(customerId, message, options) {
 }
 
 // src/react/components/AgentWidget/AgentWidget.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // src/react/page-shift.ts
 var import_react = require("react");
@@ -409,6 +409,17 @@ function clearPersistedAgentSession(visitorSessionId, options) {
 
 // src/runtime/tool-ui.ts
 var AGENT_TOOL_UI_SCHEMA_VERSION = "webless.tool-ui.v1";
+var AGENT_STRUCTURED_TOOL_INPUT_SCHEMA_VERSION = "webless.structured-tool-input.v1";
+var AGENT_STRUCTURED_TOOL_INPUT_HEADER = "Webless-Structured-Tool-Input-JSON:";
+function formatAgentStructuredToolInput(surface, values) {
+  const payload = {
+    schemaVersion: AGENT_STRUCTURED_TOOL_INPUT_SCHEMA_VERSION,
+    toolSlug: surface.toolSlug,
+    ...surface.operationId ? { operationId: surface.operationId } : {},
+    values
+  };
+  return `${AGENT_STRUCTURED_TOOL_INPUT_HEADER} ${JSON.stringify(payload)}`;
+}
 function isRecord2(value) {
   return value !== null && typeof value === "object" && !Array.isArray(value);
 }
@@ -1193,11 +1204,11 @@ function createAgentClient(options) {
 
 // src/runtime/errors.ts
 var import_client3 = require("eve/client");
-var TRANSIENT_AGENT_ERROR_MESSAGE = "I couldn\u2019t finish that answer. Please try again.";
+var TRANSIENT_AGENT_ERROR_MESSAGE = "The agent run stopped before the action finished. Please try again.";
 var PREVIEW_AUTHORIZATION_ERROR_MESSAGE = "This preview could not be authorized. Open the latest preview from Webless.";
 function isTransientRuntimeMessage(message) {
   const normalized = message.trim().toLowerCase();
-  return normalized.includes("empty response from runtime") || normalized.includes("failed to fetch") || normalized.includes("networkerror") || normalized.includes("load failed");
+  return normalized.includes("empty response from runtime") || normalized.includes("failed to fetch") || normalized.includes("networkerror") || normalized.includes("network error") || normalized.includes("load failed") || normalized.includes("the stream");
 }
 function isPreviewAuthorizationMessage(message) {
   const normalized = message.trim().toLowerCase();
@@ -1353,21 +1364,46 @@ function looksLikeBookingCopy(text) {
     text
   );
 }
-function inferComposerForm(text) {
-  const cleaned = text.trim();
-  if (!cleaned || looksLikeBookingCopy(cleaned) || !looksLikeFieldCollection(cleaned)) {
-    return null;
-  }
-  const fields = FIELD_LIBRARY.flatMap((field) => {
-    if (field.exclude?.test(cleaned)) {
-      const leftover = cleaned.replace(field.exclude, " ");
+function echoedLabeledFieldIds(text) {
+  const ids = /* @__PURE__ */ new Set();
+  if (/\bname\s*:\s+\S+/i.test(text)) ids.add("name");
+  if (/\be-?mail\s*:\s+\S+/i.test(text)) ids.add("email");
+  if (/\bphone\s*:\s+\S+/i.test(text)) ids.add("phone");
+  if (/\bcompany\s*:\s+\S+/i.test(text)) ids.add("company");
+  return ids;
+}
+function matchLibraryFields(text) {
+  return FIELD_LIBRARY.flatMap((field) => {
+    if (field.exclude?.test(text)) {
+      const leftover = text.replace(field.exclude, " ");
       if (!field.patterns.some((pattern) => pattern.test(leftover))) return [];
-    } else if (!field.patterns.some((pattern) => pattern.test(cleaned))) {
+    } else if (!field.patterns.some((pattern) => pattern.test(text))) {
       return [];
     }
     const { patterns: _patterns, exclude: _exclude, ...next } = field;
     return [next];
   }).slice(0, MAX_FORM_FIELDS);
+}
+function looksLikeCompletedActionRecap(text) {
+  const confirmingCreate = /\bshould i create this\b/i.test(text);
+  const echoingFilledFields = /\b(?:name|email|phone|company)\s*:\s+\S+/i.test(text) && /[^\s@]+@[^\s@]+\.[^\s@]+/i.test(text);
+  if (echoingFilledFields) {
+    if (looksLikeFieldCollection(text)) {
+      const echoed = echoedLabeledFieldIds(text);
+      if (matchLibraryFields(text).some((field) => !echoed.has(field.id))) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return confirmingCreate && !looksLikeFieldCollection(text);
+}
+function inferComposerForm(text) {
+  const cleaned = text.trim();
+  if (!cleaned || looksLikeBookingCopy(cleaned) || looksLikeCompletedActionRecap(cleaned) || !looksLikeFieldCollection(cleaned)) {
+    return null;
+  }
+  const fields = matchLibraryFields(cleaned);
   if (fields.length < MIN_FORM_FIELDS) return null;
   return {
     id: `inferred:${fields.map((field) => field.id).join("+")}`,
@@ -1375,7 +1411,9 @@ function inferComposerForm(text) {
   };
 }
 function resolveComposerForm(input) {
-  if (input.enabled === false || input.hasBookingOffer) return null;
+  if (input.enabled === false || input.hasBookingOffer || input.hasPendingConfirmation) {
+    return null;
+  }
   const text = input.agentText.trim();
   if (!text) return null;
   const card = input.cards?.find((item) => item.type === "visitor_form");
@@ -1400,7 +1438,7 @@ function preferBookingOffer(current, next) {
   return next;
 }
 function looksLikeBookingReady(text) {
-  return /demo option|options are ready|pick a (date|time)|available (times|slots)|book(ing)? (card|the demo)|schedule/i.test(
+  return /demo option|options are ready|pick a (date|time)|available (times|slots)|book(ing)? (card|the demo)|\bschedule\b/i.test(
     text
   );
 }
@@ -1508,7 +1546,7 @@ function formatBookingOfferFence(offer) {
 }
 function bookingCardFromActionOutput(output) {
   const record = asRecord2(output);
-  const data = asRecord2(record?.data) ?? record;
+  const data = asRecord2(record?.output) ?? asRecord2(record?.data) ?? record;
   return parseToolCard(data);
 }
 function ensureBookingOfferText(text, offer) {
@@ -2212,7 +2250,8 @@ function presentVisitorToolResult(result, registry = []) {
       id: result.callId,
       toolName: result.toolName,
       status: result.status,
-      kind: "hidden"
+      kind: "input",
+      surface: envelope.ui
     };
   }
   if (!proposed) {
@@ -2269,6 +2308,7 @@ function legacyBookingEnvelope(output) {
 
 // src/react/lib/visitor-input.ts
 function shouldRenderVisitorInputCard(request) {
+  if (request.ui) return true;
   if (request.kind === "tool-approval" || request.kind === "session-limit") {
     return true;
   }
@@ -2602,7 +2642,6 @@ function useAgentChat({
             }
             if (!isActiveRun()) return;
             if (presentation.kind === "hidden") return;
-            if (presentation.kind === "input") return;
             setState((prev) => ({
               ...prev,
               toolResults: [
@@ -2880,14 +2919,13 @@ ${outgoing}` : outgoing;
   }, [runTurn, state.messages]);
   const respondToToolInput = (0, import_react2.useCallback)(
     async (surface, values) => {
-      const details = JSON.stringify(values);
-      await submit(`${surface.title} details provided`, {
+      await submit(`${surface.title} submitted`, {
         runtimeText: [
-          `Structured input provided for ${surface.toolSlug}.`,
-          surface.operationId ? `Operation: ${surface.operationId}.` : "",
-          `Use these exact values and retry the action: ${details}`,
+          formatAgentStructuredToolInput(surface, values),
+          "Use these exact structured values to retry the requested action.",
+          "Reuse the operationId from the structured payload.",
           "Do not invent or alter any values."
-        ].filter(Boolean).join("\n")
+        ].join("\n")
       });
     },
     [submit]
@@ -3005,7 +3043,7 @@ function normalizeAgentPlacement(placement) {
 }
 
 // src/react/components/AgentRail/AgentRail.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/react/types/conversation.ts
 var defaultAgentRailTheme = {
@@ -3021,6 +3059,7 @@ var defaultAgentRailTheme = {
   border: "rgb(42 51 70 / 0.1)",
   visitorBubble: "#f3edff",
   visitorText: "#171b2a",
+  onBrand: "#ffffff",
   success: "#18794e",
   danger: "#c94b63",
   fontBody: '"Mulish", "Avenir Next", "Segoe UI", sans-serif',
@@ -3039,6 +3078,7 @@ var defaultDarkAgentRailTheme = {
   border: "rgb(226 232 240 / 0.16)",
   visitorBubble: "#2b2140",
   visitorText: "#f5f7fb",
+  onBrand: "#171b2a",
   success: "#55cf91",
   danger: "#ff8da1"
 };
@@ -3480,6 +3520,9 @@ function calendarCells(year, month) {
   while (cells.length < 42) cells.push(null);
   return cells;
 }
+function BookingCardLoader() {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("section", { className: "booking-card", "aria-label": "Book a meeting", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "booking-card__loading", role: "status", children: "Finding available times\u2026" }) });
+}
 function BookingCard({
   offer,
   onBook
@@ -3899,7 +3942,7 @@ function MessageBubble({
 }
 
 // src/react/components/HumanInputCard/HumanInputCard.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/react/components/ConfirmationCard/ConfirmationCard.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -3940,18 +3983,450 @@ function ConfirmationCard({
   );
 }
 
-// src/react/components/HumanInputCard/HumanInputCard.tsx
+// src/react/components/ToolInputCard/ToolInputCard.tsx
+var import_react9 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+function isRecord4(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function pathSegments(path) {
+  return path.replace(/\[(\d+)\]/gu, ".$1").split(".").filter(Boolean);
+}
+function valueAtPath(root, path) {
+  let current = root;
+  for (const segment of pathSegments(path)) {
+    if (Array.isArray(current)) {
+      const index = Number(segment);
+      current = Number.isInteger(index) ? current[index] : void 0;
+      continue;
+    }
+    current = isRecord4(current) ? current[segment] : void 0;
+  }
+  return current;
+}
+function initialFieldValue(field, surface) {
+  const supplied = valueAtPath(surface.values, field.path);
+  if (supplied !== void 0) return supplied;
+  if (field.defaultValue !== void 0) return field.defaultValue;
+  if (field.kind === "checkbox" || field.kind === "confirmation") return false;
+  if (field.kind === "multi-select") return [];
+  if (field.kind === "range") return field.min ?? 0;
+  return "";
+}
+function initialValues(surface) {
+  return Object.fromEntries(
+    surface.fields.map((field) => [
+      field.path,
+      initialFieldValue(field, surface)
+    ])
+  );
+}
+function cloneJsonValue(value) {
+  if (Array.isArray(value)) return value.map(cloneJsonValue);
+  if (isRecord4(value)) {
+    return Object.fromEntries(
+      Object.entries(value).map(([key, item]) => [key, cloneJsonValue(item)])
+    );
+  }
+  return value;
+}
+function assignPath(target, path, value) {
+  const segments = pathSegments(path);
+  let current = target;
+  segments.forEach((segment, index) => {
+    if (index === segments.length - 1) {
+      current[segment] = value;
+      return;
+    }
+    const existing = current[segment];
+    if (!isRecord4(existing)) current[segment] = {};
+    current = current[segment];
+  });
+}
+function isJsonValue3(value, seen = /* @__PURE__ */ new Set()) {
+  if (value === null || typeof value === "string" || typeof value === "boolean") {
+    return true;
+  }
+  if (typeof value === "number") return Number.isFinite(value);
+  if (typeof value !== "object" || seen.has(value)) return false;
+  seen.add(value);
+  const valid = Array.isArray(value) ? value.every((item) => isJsonValue3(item, seen)) : Object.values(value).every((item) => isJsonValue3(item, seen));
+  seen.delete(value);
+  return valid;
+}
+function parsedFieldValue(field, value) {
+  if (field.kind !== "json" || typeof value !== "string") return value;
+  try {
+    const parsed = JSON.parse(value);
+    return isJsonValue3(parsed) ? parsed : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function isEmpty(value) {
+  if (typeof value === "string") return value.trim().length === 0;
+  if (Array.isArray(value)) return value.length === 0;
+  return value === null || value === false;
+}
+function validateField(field, value) {
+  if (field.required && isEmpty(value))
+    return `Enter ${field.label.toLowerCase()}.`;
+  if (typeof value === "string" && value.trim().length === 0) return "";
+  if (field.kind === "email" && (typeof value !== "string" || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/u.test(value))) {
+    return "Enter a valid email address.";
+  }
+  if (typeof value === "string") {
+    if (field.minLength !== void 0 && value.length < field.minLength) {
+      return `Use at least ${field.minLength} characters.`;
+    }
+    if (field.maxLength !== void 0 && value.length > field.maxLength) {
+      return `Use no more than ${field.maxLength} characters.`;
+    }
+  }
+  if (typeof value === "number") {
+    if (field.min !== void 0 && value < field.min) {
+      return `Choose ${field.min} or higher.`;
+    }
+    if (field.max !== void 0 && value > field.max) {
+      return `Choose ${field.max} or lower.`;
+    }
+  }
+  if (field.maxItems !== void 0 && Array.isArray(value) && value.length > field.maxItems) {
+    return `Choose no more than ${field.maxItems}.`;
+  }
+  if (field.kind === "json" && parsedFieldValue(field, value) === void 0) {
+    return "Enter valid JSON.";
+  }
+  return "";
+}
+function optionKey(option) {
+  return JSON.stringify(option.value);
+}
+function valuesMatch(left, right) {
+  return JSON.stringify(left) === JSON.stringify(right);
+}
+function FieldDescription({
+  field,
+  id
+}) {
+  return field.description ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id, className: "tool-input-card__description", children: field.description }) : null;
+}
+function ChoiceField({
+  field,
+  id,
+  value,
+  disabled,
+  describedBy,
+  error,
+  onBlur,
+  onChange
+}) {
+  const options = field.options ?? [];
+  const multiple = field.kind === "multi-select";
+  const selected = Array.isArray(value) ? value : [];
+  if (field.kind === "select") {
+    const selectedIndex = options.findIndex(
+      (option) => valuesMatch(option.value, value)
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "select",
+      {
+        id,
+        value: selectedIndex >= 0 ? String(selectedIndex) : "",
+        disabled,
+        required: field.required,
+        "aria-describedby": describedBy,
+        "aria-invalid": Boolean(error),
+        onBlur,
+        onChange: (event) => {
+          const option = options[Number(event.target.value)];
+          if (option) onChange(option.value);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "", disabled: field.required, children: "Choose an option" }),
+          options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: index, children: option.label }, optionKey(option)))
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "div",
+    {
+      className: "tool-input-card__choices",
+      role: multiple ? "group" : "radiogroup",
+      "aria-labelledby": `${id}-label`,
+      "aria-describedby": describedBy,
+      "aria-invalid": Boolean(error),
+      "aria-required": field.required,
+      children: options.map((option, index) => {
+        const checked = multiple ? selected.some((item) => valuesMatch(item, option.value)) : valuesMatch(value, option.value);
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "tool-input-card__choice", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "input",
+            {
+              type: multiple ? "checkbox" : "radio",
+              name: id,
+              value: String(index),
+              checked,
+              disabled,
+              onBlur,
+              onChange: () => {
+                if (!multiple) {
+                  onChange(option.value);
+                  return;
+                }
+                onChange(
+                  checked ? selected.filter(
+                    (item) => !valuesMatch(item, option.value)
+                  ) : [...selected, option.value]
+                );
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: option.label })
+        ] }, optionKey(option));
+      })
+    }
+  );
+}
+function ToolField({
+  disabled,
+  error,
+  field,
+  id,
+  value,
+  onBlur,
+  onChange
+}) {
+  const describedBy = [
+    field.description ? `${id}-description` : "",
+    error ? `${id}-error` : ""
+  ].filter(Boolean).join(" ");
+  if (field.kind === "checkbox" || field.kind === "confirmation") {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "tool-input-card__field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "tool-input-card__check", htmlFor: id, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "input",
+          {
+            id,
+            type: "checkbox",
+            checked: value === true,
+            disabled,
+            "aria-describedby": describedBy || void 0,
+            "aria-invalid": Boolean(error),
+            onBlur,
+            onChange: (event) => onChange(event.target.checked)
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("strong", { children: field.label }),
+          field.description ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: `${id}-description`, children: field.description }) : null
+        ] })
+      ] }),
+      error ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: `${id}-error`, className: "tool-input-card__error", children: error }) : null
+    ] });
+  }
+  const label = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { id: `${id}-label`, htmlFor: id, children: [
+    field.label,
+    field.required ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", children: " *" }) : null
+  ] });
+  const common = {
+    id,
+    disabled,
+    required: field.required,
+    "aria-describedby": describedBy || void 0,
+    "aria-invalid": Boolean(error),
+    onBlur
+  };
+  let control;
+  if (field.kind === "select" || field.kind === "radio" || field.kind === "multi-select") {
+    control = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      ChoiceField,
+      {
+        field,
+        id,
+        value,
+        disabled,
+        describedBy: describedBy || void 0,
+        error,
+        onBlur,
+        onChange
+      }
+    );
+  } else if (field.kind === "textarea" || field.kind === "json") {
+    control = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "textarea",
+      {
+        ...common,
+        rows: field.kind === "json" ? 4 : 3,
+        maxLength: field.maxLength,
+        minLength: field.minLength,
+        placeholder: field.placeholder,
+        value: typeof value === "string" ? value : JSON.stringify(value),
+        onChange: (event) => onChange(event.target.value)
+      }
+    );
+  } else if (field.kind === "range") {
+    const numericValue = typeof value === "number" ? value : field.min ?? 0;
+    control = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "tool-input-card__range", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "input",
+        {
+          ...common,
+          type: "range",
+          min: field.min,
+          max: field.max,
+          step: field.step,
+          value: numericValue,
+          onChange: (event) => onChange(Number(event.target.value))
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("output", { htmlFor: id, children: numericValue })
+    ] });
+  } else {
+    const type = field.kind === "date-time" ? "datetime-local" : field.kind === "calendar" ? "date" : field.kind;
+    control = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "input",
+      {
+        ...common,
+        type,
+        min: field.min,
+        max: field.max,
+        step: field.step,
+        minLength: field.minLength,
+        maxLength: field.maxLength,
+        placeholder: field.placeholder,
+        value: typeof value === "number" || typeof value === "string" ? value : "",
+        onChange: (event) => onChange(
+          field.kind === "number" && event.target.value !== "" ? Number(event.target.value) : event.target.value
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "tool-input-card__field", children: [
+    label,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FieldDescription, { field, id: `${id}-description` }),
+    control,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { id: `${id}-error`, className: "tool-input-card__error", children: error }) : null
+  ] });
+}
+function ToolInputCard({
+  disabled = false,
+  surface,
+  onSubmit
+}) {
+  const [values, setValues] = (0, import_react9.useState)(
+    () => initialValues(surface)
+  );
+  const [touched, setTouched] = (0, import_react9.useState)(() => /* @__PURE__ */ new Set());
+  const [submitted, setSubmitted] = (0, import_react9.useState)(false);
+  const errors = Object.fromEntries(
+    surface.fields.map((field) => [
+      field.path,
+      touched.has(field.path) ? validateField(field, values[field.path] ?? "") : ""
+    ])
+  );
+  function submit(event) {
+    event.preventDefault();
+    if (disabled || submitted) return;
+    const allTouched = new Set(surface.fields.map((field) => field.path));
+    setTouched(allTouched);
+    const nextErrors = surface.fields.map(
+      (field) => validateField(field, values[field.path] ?? "")
+    );
+    if (nextErrors.some(Boolean)) return;
+    const result = isRecord4(surface.values) ? cloneJsonValue(surface.values) : {};
+    for (const field of surface.fields) {
+      const parsed = parsedFieldValue(field, values[field.path] ?? "");
+      if (parsed !== void 0) assignPath(result, field.path, parsed);
+    }
+    setSubmitted(true);
+    onSubmit?.(surface, result);
+  }
+  if (submitted) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "section",
+      {
+        className: "tool-input-card tool-input-card--submitted",
+        role: "status",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", children: "\u2713" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("strong", { children: [
+            surface.title,
+            " submitted"
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "section",
+    {
+      className: "tool-input-card",
+      "aria-labelledby": `tool-input-${surface.id}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "tool-input-card__heading", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("strong", { id: `tool-input-${surface.id}`, children: surface.title }),
+          surface.description ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: surface.description }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { noValidate: true, onSubmit: submit, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "tool-input-card__fields", children: surface.fields.map((field, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            ToolField,
+            {
+              disabled,
+              error: errors[field.path] ?? "",
+              field,
+              id: `tool-input-${surface.id}-${index}`,
+              value: values[field.path] ?? "",
+              onBlur: () => setTouched((current) => /* @__PURE__ */ new Set([...current, field.path])),
+              onChange: (value) => setValues((current) => ({ ...current, [field.path]: value }))
+            },
+            field.path
+          )) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "tool-input-card__actions", children: [
+            surface.actions?.some((action) => action.id === "reset") ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "tool-input-card__secondary",
+                disabled,
+                onClick: () => {
+                  setValues(initialValues(surface));
+                  setTouched(/* @__PURE__ */ new Set());
+                },
+                children: surface.actions.find((action) => action.id === "reset")?.label ?? "Clear"
+              }
+            ) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "submit", disabled, children: surface.submitLabel ?? surface.actions?.find((action) => action.id === "submit")?.label ?? "Continue" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/react/components/HumanInputCard/HumanInputCard.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function HumanInputCard({
   disabled = false,
   request,
   onRespond
 }) {
-  const [text, setText] = (0, import_react9.useState)("");
+  const [text, setText] = (0, import_react10.useState)("");
   const options = request.options ?? [];
   const showText = request.display === "text" || request.allowFreeform && options.length === 0;
+  if (request.ui) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      ToolInputCard,
+      {
+        disabled,
+        surface: request.ui,
+        onSubmit: (_, value) => onRespond?.({ requestId: request.requestId, value })
+      }
+    );
+  }
   if (options.length > 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       ConfirmationCard,
       {
         disabled,
@@ -3966,17 +4441,17 @@ function HumanInputCard({
     if (!value || disabled) return;
     onRespond?.({ requestId: request.requestId, text: value });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "section",
     {
       className: "human-input-card",
       "aria-labelledby": `human-input-${request.requestId}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "human-input-card__heading", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("strong", { id: `human-input-${request.requestId}`, children: request.prompt }) }),
-        showText ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("form", { onSubmit: submitText, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { htmlFor: `human-input-text-${request.requestId}`, children: "Response" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "human-input-card__heading", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { id: `human-input-${request.requestId}`, children: request.prompt }) }),
+        showText ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("form", { onSubmit: submitText, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { htmlFor: `human-input-text-${request.requestId}`, children: "Response" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "input",
               {
                 id: `human-input-text-${request.requestId}`,
@@ -3985,39 +4460,39 @@ function HumanInputCard({
                 onChange: (event) => setText(event.target.value)
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "submit", disabled: disabled || !text.trim(), children: "Send" })
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { type: "submit", disabled: disabled || !text.trim(), children: "Send" })
           ] })
         ] }) : null,
-        !showText && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "human-input-card__unavailable", role: "status", children: "This request can\u2019t be answered here." }) : null
+        !showText && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "human-input-card__unavailable", role: "status", children: "This request can\u2019t be answered here." }) : null
       ]
     }
   );
 }
 
 // src/react/components/CollectionResultCard/CollectionResultCard.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function CollectionResultCard({
   result
 }) {
   const empty = result.items.length === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "section",
     {
       className: `collection-result-card tool-result-card tool-result-card--${result.status}`,
       "aria-label": result.title,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "tool-result-card__heading", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "tool-result-card__status", "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { children: result.title })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "tool-result-card__heading", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "tool-result-card__status", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: result.title })
         ] }),
-        empty ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "collection-result-card__empty", children: "No matching record for the email you shared." }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("ul", { className: "collection-result-card__list", children: result.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("li", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "collection-result-card__item-title", children: item.title }),
-          item.description ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: item.description }) : null,
-          item.details?.length ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("dl", { children: item.details.map((detail) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("dt", { children: detail.label }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("dd", { children: detail.value })
+        empty ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "collection-result-card__empty", children: "No matching record for the email you shared." }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ul", { className: "collection-result-card__list", children: result.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("li", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "collection-result-card__item-title", children: item.title }),
+          item.description ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: item.description }) : null,
+          item.details?.length ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("dl", { children: item.details.map((detail) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("dt", { children: detail.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("dd", { children: detail.value })
           ] }, `${detail.label}:${detail.value}`)) }) : null,
-          item.href ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("a", { href: item.href, target: "_blank", rel: "noreferrer", children: "Open record" }) : null
+          item.href ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("a", { href: item.href, target: "_blank", rel: "noreferrer", children: "Open record" }) : null
         ] }, item.title)) })
       ]
     }
@@ -4025,26 +4500,26 @@ function CollectionResultCard({
 }
 
 // src/react/components/EntityResultCard/EntityResultCard.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function EntityResultCard({
   result
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "section",
     {
       className: `entity-result-card tool-result-card tool-result-card--${result.status}`,
       "aria-label": result.title,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "tool-result-card__heading", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "tool-result-card__status", "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("strong", { children: result.title })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "tool-result-card__heading", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "tool-result-card__status", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: result.title })
         ] }),
-        result.description ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: result.description }) : null,
-        result.details?.length ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("dl", { children: result.details.map((detail) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("dt", { children: detail.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("dd", { children: detail.value })
+        result.description ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: result.description }) : null,
+        result.details?.length ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("dl", { children: result.details.map((detail) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("dt", { children: detail.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("dd", { children: detail.value })
         ] }, `${detail.label}:${detail.value}`)) }) : null,
-        result.links?.length ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "tool-result-card__links", children: result.links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        result.links?.length ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "tool-result-card__links", children: result.links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "a",
           {
             href: link.href,
@@ -4060,24 +4535,24 @@ function EntityResultCard({
 }
 
 // src/react/components/SignatureResultCard/SignatureResultCard.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function SignatureResultCard({
   result
 }) {
   const primaryLink = result.links?.[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "section",
     {
       className: `signature-result-card tool-result-card tool-result-card--${result.status}`,
       "aria-label": result.title,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "tool-result-card__heading", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "tool-result-card__status", "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: result.title })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "tool-result-card__heading", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "tool-result-card__status", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("strong", { children: result.title })
         ] }),
-        result.statusLabel ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "signature-result-card__badge", children: result.statusLabel }) : null,
-        result.description ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: result.description }) : null,
-        primaryLink ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        result.statusLabel ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "signature-result-card__badge", children: result.statusLabel }) : null,
+        result.description ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { children: result.description }) : null,
+        primaryLink ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "a",
           {
             className: "signature-result-card__cta",
@@ -4093,26 +4568,26 @@ function SignatureResultCard({
 }
 
 // src/react/components/ToolResultCard/ToolResultCard.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function ToolResultCard({
   result
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "section",
     {
       className: `tool-result-card tool-result-card--${result.status}`,
       "aria-label": result.title,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "tool-result-card__heading", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "tool-result-card__status", "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("strong", { children: result.title })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "tool-result-card__heading", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "tool-result-card__status", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("strong", { children: result.title })
         ] }),
-        result.description ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { children: result.description }) : null,
-        result.details?.length ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("dl", { children: result.details.map((detail) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("dt", { children: detail.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("dd", { children: detail.value })
+        result.description ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { children: result.description }) : null,
+        result.details?.length ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("dl", { children: result.details.map((detail) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("dt", { children: detail.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("dd", { children: detail.value })
         ] }, `${detail.label}:${detail.value}`)) }) : null,
-        result.links?.length ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "tool-result-card__links", children: result.links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        result.links?.length ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "tool-result-card__links", children: result.links.map((link) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "a",
           {
             href: link.href,
@@ -4128,32 +4603,44 @@ function ToolResultCard({
 }
 
 // src/react/components/VisitorToolResultView/VisitorToolResultView.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function VisitorToolResultView({
+  disabled = false,
+  onToolInput,
   result
 }) {
+  if (result.kind === "input") {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      ToolInputCard,
+      {
+        disabled,
+        surface: result.surface,
+        onSubmit: onToolInput
+      }
+    );
+  }
   if (result.kind === "entity") {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(EntityResultCard, { result });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(EntityResultCard, { result });
   }
   if (result.kind === "collection") {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CollectionResultCard, { result });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CollectionResultCard, { result });
   }
   if (result.kind === "signature") {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SignatureResultCard, { result });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SignatureResultCard, { result });
   }
   if (result.kind === "summary") {
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ToolResultCard, { result });
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToolResultCard, { result });
   }
   return null;
 }
 function isRenderableVisitorToolResult(result) {
-  return result.kind === "summary" || result.kind === "entity" || result.kind === "collection" || result.kind === "signature";
+  return result.kind === "summary" || result.kind === "input" || result.kind === "entity" || result.kind === "collection" || result.kind === "signature";
 }
 
 // src/react/components/AgentRail/AgentRail.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function MinimizeIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "path",
     {
       d: "M3.5 8h9",
@@ -4164,7 +4651,7 @@ function MinimizeIcon() {
   ) });
 }
 function CloseIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "path",
     {
       d: "M4 4l8 8M12 4l-8 8",
@@ -4175,7 +4662,7 @@ function CloseIcon() {
   ) });
 }
 function NewChatIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "path",
     {
       d: "M9.5 3.5h3v3M12.25 3.75 8 8M7 4H4.5A1.5 1.5 0 0 0 3 5.5v6A1.5 1.5 0 0 0 4.5 13h6a1.5 1.5 0 0 0 1.5-1.5V9",
@@ -4187,7 +4674,7 @@ function NewChatIcon() {
   ) });
 }
 function ExpandIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "path",
     {
       d: "M6 3.5H3.5V6M10 3.5h2.5V6M10 12.5h2.5V10M6 12.5H3.5V10",
@@ -4199,7 +4686,7 @@ function ExpandIcon() {
   ) });
 }
 function RestoreIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "path",
     {
       d: "M5.5 5.5H3.5V7.5M10.5 5.5h2V7.5M10.5 10.5h2V8.5M5.5 10.5H3.5V8.5",
@@ -4228,12 +4715,13 @@ function AgentRail({
   onSubmit,
   onFollowUpSelect,
   onBook,
-  onInputResponse
+  onInputResponse,
+  onToolInput
 }) {
-  const transcriptRef = (0, import_react10.useRef)(null);
+  const transcriptRef = (0, import_react11.useRef)(null);
   const resolvedBrandLabel = brandLabel.trim();
   const resolvedBrandLogoUrl = brandLogoUrl?.trim();
-  const [failedLogoUrl, setFailedLogoUrl] = (0, import_react10.useState)(null);
+  const [failedLogoUrl, setFailedLogoUrl] = (0, import_react11.useState)(null);
   const showBrandLogo = Boolean(resolvedBrandLogoUrl) && failedLogoUrl !== resolvedBrandLogoUrl;
   const resolvedColorScheme = useAgentColorScheme(colorScheme);
   const brandedTheme = { ...defaultAgentRailTheme, ...theme };
@@ -4244,6 +4732,7 @@ function AgentRail({
     brandSoft: theme?.brandSoft ?? `color-mix(in srgb, ${theme?.brand ?? defaultDarkAgentRailTheme.brand} 18%, ${defaultDarkAgentRailTheme.surface})`,
     border: theme?.border ?? defaultDarkAgentRailTheme.border,
     danger: theme?.danger ?? defaultDarkAgentRailTheme.danger,
+    onBrand: theme?.onBrand ?? defaultDarkAgentRailTheme.onBrand,
     success: theme?.success ?? defaultDarkAgentRailTheme.success,
     surface: theme?.surface ?? defaultDarkAgentRailTheme.surface,
     surfaceMuted: theme?.surfaceMuted ?? defaultDarkAgentRailTheme.surfaceMuted,
@@ -4266,6 +4755,7 @@ function AgentRail({
     "--as-border": resolvedTheme.border,
     "--as-visitor-bubble": resolvedTheme.visitorBubble,
     "--as-visitor-text": resolvedTheme.visitorText,
+    "--as-on-brand": resolvedTheme.onBrand,
     "--as-success": resolvedTheme.success,
     "--as-danger": resolvedTheme.danger,
     "--as-font-body": resolvedTheme.fontBody,
@@ -4277,10 +4767,12 @@ function AgentRail({
   );
   const isBusy = state.phase === "thinking" || state.phase === "running-tools" || state.phase === "streaming" || state.phase === "waiting-input" && pendingInputRequests.length > 0;
   const semanticSurfaceDisabled = isBusy && state.phase !== "waiting-input";
-  const showActivity = state.toolSteps.length > 0;
   const visitorToolResults = (state.toolResults ?? []).filter(
     isRenderableVisitorToolResult
   );
+  const activeVisitorToolInput = [...visitorToolResults].reverse().find((result) => result.kind === "input");
+  const visibleVisitorToolResults = activeVisitorToolInput ? [activeVisitorToolInput] : visitorToolResults;
+  const showActivity = state.toolSteps.length > 0 && visibleVisitorToolResults.length === 0 && pendingInputRequests.length === 0 && !state.pendingOffer;
   const hasVisitorMessages2 = state.messages.some(
     (message) => message.role === "visitor"
   );
@@ -4321,13 +4813,17 @@ function AgentRail({
   const bookingReadyText = state.streamingText || (lastIsAgent && lastMessage?.role === "agent" ? lastMessage.text : "");
   const waitingForBooking = !state.pendingOffer && looksLikeBookingReady(bookingReadyText) && (state.phase === "thinking" || state.phase === "running-tools" || state.phase === "streaming");
   const lastAgentText = lastIsAgent && lastMessage?.role === "agent" ? lastMessage.text : "";
+  const hasPendingConfirmation = pendingInputRequests.some(
+    (request) => request.kind === "tool-approval" || request.kind === "question" && (request.options?.length ?? 0) > 0
+  );
   const composerForm = resolveComposerForm({
     agentText: lastAgentText,
     cards: extractToolCards(lastAgentText),
     hasBookingOffer: Boolean(state.pendingOffer) || waitingForBooking,
+    hasPendingConfirmation,
     enabled: lastIsAgent && !isBusy
   });
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const node = transcriptRef.current;
     if (!node) return;
     node.scrollTop = node.scrollHeight;
@@ -4338,7 +4834,7 @@ function AgentRail({
     state.followUps,
     state.journey
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "aside",
     {
       className: `agent-rail not-typeset${mobileFullscreen ? " agent-rail--mobile-fullscreen" : ""}${expanded ? " agent-rail--expanded" : ""}`,
@@ -4352,28 +4848,28 @@ function AgentRail({
       role: mobileFullscreen || expanded ? "dialog" : void 0,
       tabIndex: mobileFullscreen || expanded ? -1 : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("header", { className: "agent-rail__header", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "agent-rail__brand-row", children: [
-          onCollapse ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("header", { className: "agent-rail__header", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "agent-rail__brand-row", children: [
+          onCollapse ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "button",
             {
               type: "button",
               className: "agent-rail__collapse",
               "aria-label": "Collapse assist",
               onClick: onCollapse,
-              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(MinimizeIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MinimizeIcon, {})
             }
-          ) : onClose ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          ) : onClose ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             "button",
             {
               type: "button",
               className: "agent-rail__close",
               "aria-label": "Close agent",
               onClick: onClose,
-              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CloseIcon, {})
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "agent-rail__brand-spacer", "aria-hidden": "true" }),
-          resolvedBrandLabel || showBrandLogo ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "agent-rail__identity", children: [
-            showBrandLogo ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "agent-rail__brand-mark", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "agent-rail__brand-spacer", "aria-hidden": "true" }),
+          resolvedBrandLabel || showBrandLogo ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "agent-rail__identity", children: [
+            showBrandLogo ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "agent-rail__brand-mark", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "img",
               {
                 className: "agent-rail__brand-logo",
@@ -4384,10 +4880,10 @@ function AgentRail({
                 }
               }
             ) }) : null,
-            resolvedBrandLabel ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "agent-rail__brand-label", children: resolvedBrandLabel }) : null
+            resolvedBrandLabel ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "agent-rail__brand-label", children: resolvedBrandLabel }) : null
           ] }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "agent-rail__actions", children: [
-            onReset ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "agent-rail__actions", children: [
+            onReset ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "button",
               {
                 type: "button",
@@ -4395,24 +4891,24 @@ function AgentRail({
                 "aria-label": "Start a new conversation",
                 disabled: !hasVisitorMessages2,
                 onClick: onReset,
-                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(NewChatIcon, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(NewChatIcon, {})
               }
             ) : null,
-            onExpandToggle ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            onExpandToggle ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "button",
               {
                 type: "button",
                 className: "agent-rail__expand",
                 "aria-label": expanded ? "Exit full screen" : "Open full screen",
                 onClick: onExpandToggle,
-                children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RestoreIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ExpandIcon, {})
+                children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RestoreIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ExpandIcon, {})
               }
             ) : null
           ] })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: transcriptRef, className: "agent-rail__transcript", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "agent-rail__thread", children: [
-          !hasVisitorMessages2 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("section", { className: "agent-rail__welcome", "aria-label": "Welcome", children: [
-            greeting?.role === "agent" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref: transcriptRef, className: "agent-rail__transcript", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "agent-rail__thread", children: [
+          !hasVisitorMessages2 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("section", { className: "agent-rail__welcome", "aria-label": "Welcome", children: [
+            greeting?.role === "agent" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               MessageBubble,
               {
                 message: greeting,
@@ -4420,7 +4916,7 @@ function AgentRail({
                 onBook
               }
             ) : null,
-            showIdleFollowUps ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "agent-rail__followups-slot", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            showIdleFollowUps ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "agent-rail__followups-slot", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               FollowUpChips,
               {
                 suggestions: state.followUps,
@@ -4429,7 +4925,7 @@ function AgentRail({
                 onSelect: (suggestion) => onFollowUpSelect?.(suggestion.label)
               }
             ) }) : null,
-            showActivity ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            showActivity ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               AgentActivityBubble,
               {
                 brandLabel: resolvedBrandLabel,
@@ -4438,8 +4934,16 @@ function AgentRail({
                 steps: state.toolSteps
               }
             ) : null,
-            visitorToolResults.map((result) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VisitorToolResultView, { result }, result.id)),
-            pendingInputRequests.map((request) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            visibleVisitorToolResults.map((result) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              VisitorToolResultView,
+              {
+                result,
+                disabled: semanticSurfaceDisabled,
+                onToolInput
+              },
+              result.id
+            )),
+            pendingInputRequests.slice(0, 1).map((request) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               HumanInputCard,
               {
                 request,
@@ -4448,8 +4952,8 @@ function AgentRail({
               request.requestId
             ))
           ] }) : null,
-          visibleMessages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "agent-rail__turn-block", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          visibleMessages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "agent-rail__turn-block", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               MessageBubble,
               {
                 message,
@@ -4458,8 +4962,8 @@ function AgentRail({
                 onBook
               }
             ),
-            index === lastVisitorIndex ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-              showActivity ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            index === lastVisitorIndex ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+              showActivity ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 AgentActivityBubble,
                 {
                   brandLabel: resolvedBrandLabel,
@@ -4468,8 +4972,16 @@ function AgentRail({
                   steps: state.toolSteps
                 }
               ) : null,
-              visitorToolResults.map((result) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(VisitorToolResultView, { result }, result.id)),
-              pendingInputRequests.map((request) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              visibleVisitorToolResults.map((result) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                VisitorToolResultView,
+                {
+                  result,
+                  disabled: semanticSurfaceDisabled,
+                  onToolInput
+                },
+                result.id
+              )),
+              pendingInputRequests.slice(0, 1).map((request) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                 HumanInputCard,
                 {
                   request,
@@ -4479,7 +4991,7 @@ function AgentRail({
               ))
             ] }) : null
           ] }, message.id)),
-          streamingMessage ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          streamingMessage ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             MessageBubble,
             {
               message: streamingMessage,
@@ -4488,22 +5000,17 @@ function AgentRail({
               onBook
             }
           ) : null,
-          waitingForBooking ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            BookingCard,
-            {
-              offer: { type: "booking_offer", eventTypes: [], slots: [] }
-            }
-          ) : null,
-          state.error ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("section", { className: "agent-rail__error", role: "alert", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("strong", { children: "Something went wrong" }),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { children: state.error })
+          waitingForBooking ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(BookingCardLoader, {}) : null,
+          state.error ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("section", { className: "agent-rail__error", role: "alert", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { children: "Something went wrong" }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { children: state.error })
             ] }),
-            onRetry ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: onRetry, children: "Try again" }) : null
+            onRetry ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", onClick: onRetry, children: "Try again" }) : null
           ] }) : null
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "agent-rail__composer-wrap", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "agent-rail__composer-wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
             Composer,
             {
               variant: expanded || mobileFullscreen ? "dock" : "default",
@@ -4513,9 +5020,9 @@ function AgentRail({
               onSubmit
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "agent-rail__footer", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("p", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "AI can make mistakes. Check important info." }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: poweredByLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "agent-rail__footer", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: "AI can make mistakes. Check important info." }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: poweredByLabel })
           ] }) })
         ] })
       ]
@@ -4524,9 +5031,9 @@ function AgentRail({
 }
 
 // src/react/components/AssistEdgeTab/AssistEdgeTab.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function SparklesIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "svg",
     {
       className: "assist-edge-tab__sparkles",
@@ -4534,21 +5041,21 @@ function SparklesIcon() {
       fill: "none",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "path",
           {
             d: "M8 1.2l.95 2.7 2.85.05-2.25 1.75.8 2.75L8 6.7 5.65 8.45l.8-2.75L4.2 3.95l2.85-.05L8 1.2z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "path",
           {
             d: "M14.2 6.4l.55 1.55 1.65.03-1.3 1 .46 1.58-1.36-1-1.36 1 .46-1.58-1.3-1 1.65-.03.55-1.55z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "path",
           {
             d: "M3.1 9.1l.4 1.15 1.22.02-.96.74.34 1.17-1-.74-1 .74.34-1.17-.96-.74 1.22-.02.4-1.15z",
@@ -4562,7 +5069,7 @@ function SparklesIcon() {
 function TabMarkIcon({ customIconUrl }) {
   const url = customIconUrl?.trim();
   if (url) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "img",
       {
         alt: "",
@@ -4572,10 +5079,10 @@ function TabMarkIcon({ customIconUrl }) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SparklesIcon, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SparklesIcon, {});
 }
 function ChevronLeftIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "path",
     {
       d: "M10 4L6 8l4 4",
@@ -4587,7 +5094,7 @@ function ChevronLeftIcon() {
   ) });
 }
 function ChevronDownIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "path",
     {
       d: "M4 6l4 4 4-4",
@@ -4599,7 +5106,7 @@ function ChevronDownIcon() {
   ) });
 }
 function DragDots() {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "assist-edge-tab__dots", "aria-hidden": "true", children: Array.from({ length: 12 }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("i", {}, index)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "assist-edge-tab__dots", "aria-hidden": "true", children: Array.from({ length: 12 }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("i", {}, index)) });
 }
 var VARIANT_COPY = {
   outline: { label: "Ask anything", aria: "Ask anything" },
@@ -4645,7 +5152,7 @@ function AssistEdgeTab({
     ...resolvedTextColor ? { "--as-text": resolvedTextColor } : {},
     colorScheme: resolvedColorScheme
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "button",
     {
       type: "button",
@@ -4657,15 +5164,15 @@ function AssistEdgeTab({
       tabIndex: visible ? 0 : -1,
       onClick: onOpen,
       children: [
-        mobile ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        mobile ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
             "span",
             {
               className: "assist-edge-tab__mark assist-edge-tab__mark--mobile",
               "aria-hidden": "true",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TabMarkIcon, { customIconUrl }),
-                showLogo ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TabMarkIcon, { customIconUrl }),
+                showLogo ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   "img",
                   {
                     className: "assist-edge-tab__logo",
@@ -4679,11 +5186,11 @@ function AssistEdgeTab({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "assist-edge-tab__label", children: visibleLabel })
-        ] }) : variant === "outline" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "assist-edge-tab__mark", "aria-hidden": "true", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TabMarkIcon, { customIconUrl }),
-            showLogo ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "assist-edge-tab__label", children: visibleLabel })
+        ] }) : variant === "outline" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "assist-edge-tab__mark", "aria-hidden": "true", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TabMarkIcon, { customIconUrl }),
+            showLogo ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "img",
               {
                 className: "assist-edge-tab__logo",
@@ -4695,18 +5202,18 @@ function AssistEdgeTab({
               }
             ) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "assist-edge-tab__label", children: visibleLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronDownIcon, {})
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "assist-edge-tab__label", children: visibleLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronDownIcon, {})
         ] }) : null,
-        variant === "ask" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronLeftIcon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "assist-edge-tab__label", children: visibleLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DragDots, {})
+        variant === "ask" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronLeftIcon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "assist-edge-tab__label", children: visibleLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(DragDots, {})
         ] }) : null,
-        variant === "fill" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "assist-edge-tab__mark", "aria-hidden": "true", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TabMarkIcon, { customIconUrl }),
-            showLogo ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        variant === "fill" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "assist-edge-tab__mark", "aria-hidden": "true", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TabMarkIcon, { customIconUrl }),
+            showLogo ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               "img",
               {
                 className: "assist-edge-tab__logo",
@@ -4718,8 +5225,8 @@ function AssistEdgeTab({
               }
             ) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "assist-edge-tab__label", children: visibleLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronLeftIcon, {})
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "assist-edge-tab__label", children: visibleLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronLeftIcon, {})
         ] }) : null
       ]
     }
@@ -4727,7 +5234,7 @@ function AssistEdgeTab({
 }
 
 // src/react/components/AgentWidget/AgentWidget.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function AgentWidget({
   indexId,
   customerId,
@@ -4745,9 +5252,9 @@ function AgentWidget({
 }) {
   const isMobile = useIsMobile();
   const placement = normalizeAgentPlacement(placementInput);
-  const railSlotRef = (0, import_react11.useRef)(null);
-  const [railCollapsed, setRailCollapsed] = (0, import_react11.useState)(defaultCollapsed);
-  const [railExpanded, setRailExpanded] = (0, import_react11.useState)(false);
+  const railSlotRef = (0, import_react12.useRef)(null);
+  const [railCollapsed, setRailCollapsed] = (0, import_react12.useState)(defaultCollapsed);
+  const [railExpanded, setRailExpanded] = (0, import_react12.useState)(false);
   const pageShiftActive = shouldApplyPageShift({
     pageShift,
     isMobile,
@@ -4777,7 +5284,10 @@ function AgentWidget({
       visitorBubble: branding.colors.primary
     } : {},
     ...branding?.colors?.primarySoft ? { brandSoft: branding.colors.primarySoft } : {},
-    ...branding?.colors?.primaryForeground ? { visitorText: branding.colors.primaryForeground } : {},
+    ...branding?.colors?.primaryForeground ? {
+      onBrand: branding.colors.primaryForeground,
+      visitorText: branding.colors.primaryForeground
+    } : {},
     ...branding?.colors?.surface ? { surface: branding.colors.surface } : {},
     ...branding?.colors?.surfaceMuted ? { surfaceMuted: branding.colors.surfaceMuted } : {},
     ...branding?.colors?.text ? { text: branding.colors.text } : {},
@@ -4787,7 +5297,7 @@ function AgentWidget({
     } : {},
     ...branding?.colors?.border ? { border: branding.colors.border } : {}
   };
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!registerPanelController) return;
     registerAgentPanelController(customerId, {
       open: () => setRailCollapsed(false),
@@ -4804,7 +5314,7 @@ function AgentWidget({
     if (isMobile) setRailCollapsed(false);
     await submit(message);
   }
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (railCollapsed) return;
     const handleKeyDown = (event) => {
       if (event.key === "Tab" && (isMobile || railExpanded)) {
@@ -4838,19 +5348,19 @@ function AgentWidget({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isMobile, railCollapsed, railExpanded]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "webless-agent-root", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "webless-agent-root", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "div",
       {
         className: `webless-agent-root__shell${railCollapsed ? " webless-agent-root__shell--collapsed" : ""}${railExpanded ? " webless-agent-root__shell--expanded" : ""}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "div",
           {
             ref: railSlotRef,
             className: "webless-agent-root__rail-slot",
             inert: railCollapsed || void 0,
             "aria-hidden": railCollapsed,
-            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               AgentRail,
               {
                 theme,
@@ -4878,7 +5388,7 @@ function AgentWidget({
         )
       }
     ),
-    railCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    railCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       AssistEdgeTab,
       {
         variant: placement.variant,
@@ -4917,12 +5427,12 @@ function readUnpublishedPreviewBuildId(href) {
 }
 
 // src/embed/AgentWidget.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function AgentWidget2({
   manifest
 }) {
   const defaultCollapsed = manifest.version !== "unpublished";
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     AgentWidget,
     {
       indexId: manifest.indexId,
@@ -5006,7 +5516,7 @@ function normalizeAgentBranding(branding) {
 }
 
 // src/embed/mount.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var mountedHandles = /* @__PURE__ */ new Map();
 var latestCustomerId = null;
 function resolveMountHost(manifest, script) {
@@ -5036,7 +5546,7 @@ function mountAgent(input) {
   const host = createHost(manifest.customerId);
   mountTarget.append(host);
   const root = (0, import_client5.createRoot)(host);
-  root.render(/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AgentWidget2, { manifest }));
+  root.render(/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AgentWidget2, { manifest }));
   const handle = {
     customerId: manifest.customerId,
     manifest,