@webless/agent 0.4.1 → 0.5.0

package/dist/react.cjs

@@ -34,7 +34,7 @@ __export(react_exports, {
 module.exports = __toCommonJS(react_exports);
 
 // src/react/components/AgentWidget/AgentWidget.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/react/page-shift.ts
 var import_react = require("react");
@@ -303,6 +303,9 @@ function runtimeSessionIdKey(visitorSessionId, prefix) {
 function runtimeStreamIndexKey(visitorSessionId, prefix) {
   return `${prefix}:eve:${visitorSessionId}:streamIndex`;
 }
+function runtimeLastMessageKey(visitorSessionId, prefix) {
+  return `${prefix}:eve:${visitorSessionId}:lastMessage`;
+}
 function loadPersistedAgentSession(visitorSessionId, options) {
   if (typeof sessionStorage === "undefined" || !visitorSessionId.trim()) return null;
   const prefix = resolvePrefix(options);
@@ -310,9 +313,11 @@ function loadPersistedAgentSession(visitorSessionId, options) {
   if (!sessionId) return null;
   const rawIndex = sessionStorage.getItem(runtimeStreamIndexKey(visitorSessionId, prefix));
   const streamIndex = rawIndex ? Number.parseInt(rawIndex, 10) : 0;
+  const lastMessage = sessionStorage.getItem(runtimeLastMessageKey(visitorSessionId, prefix))?.trim();
   return {
     sessionId,
-    streamIndex: Number.isFinite(streamIndex) && streamIndex >= 0 ? streamIndex : 0
+    streamIndex: Number.isFinite(streamIndex) && streamIndex >= 0 ? streamIndex : 0,
+    ...lastMessage ? { lastMessage } : {}
   };
 }
 function savePersistedAgentSession(visitorSessionId, sessionId, streamIndex, options) {
@@ -326,11 +331,19 @@ function savePersistedAgentSession(visitorSessionId, sessionId, streamIndex, opt
     String(Math.max(0, streamIndex))
   );
 }
+function savePersistedAgentTurnMessage(visitorSessionId, message, options) {
+  if (typeof sessionStorage === "undefined" || !visitorSessionId.trim() || !message) {
+    return;
+  }
+  const prefix = resolvePrefix(options);
+  sessionStorage.setItem(runtimeLastMessageKey(visitorSessionId, prefix), message);
+}
 function clearPersistedAgentSession(visitorSessionId, options) {
   if (typeof sessionStorage === "undefined" || !visitorSessionId.trim()) return;
   const prefix = resolvePrefix(options);
   sessionStorage.removeItem(runtimeSessionIdKey(visitorSessionId, prefix));
   sessionStorage.removeItem(runtimeStreamIndexKey(visitorSessionId, prefix));
+  sessionStorage.removeItem(runtimeLastMessageKey(visitorSessionId, prefix));
 }
 
 // src/runtime/client.ts
@@ -345,6 +358,12 @@ function applyMessageEvent(event, rendered, handlers, workItems) {
   if (event.type === "message.completed") {
     handlers.onComplete?.();
   }
+  if (event.type === "action.result") {
+    const result = event.data.result;
+    if (result && typeof result === "object" && "output" in result) {
+      handlers.onActionResult?.(result.output);
+    }
+  }
   if (event.type !== "message.appended") return rendered;
   const { messageDelta, messageSoFar } = event.data;
   let delta = messageDelta;
@@ -358,6 +377,12 @@ function applyMessageEvent(event, rendered, handlers, workItems) {
   if (delta) handlers.onDelta(delta);
   return next;
 }
+function isResumeTurnMessage(received, candidate) {
+  if (received === candidate) return true;
+  return Boolean(candidate) && received.endsWith(`
+
+${candidate}`);
+}
 function latestTurnEvents(events) {
   let startIndex = -1;
   for (let index = events.length - 1; index >= 0; index -= 1) {
@@ -589,6 +614,11 @@ var AgentSession = class {
       this.session = session;
       try {
         const activeSession = session;
+        savePersistedAgentTurnMessage(
+          this.visitorSessionId,
+          message,
+          this.storeOptions
+        );
         response = await withCapabilityRefresh(
           this.capability,
           () => activeSession.send(message, { signal })
@@ -604,6 +634,11 @@ var AgentSession = class {
       }
     }
     if (!response) {
+      savePersistedAgentTurnMessage(
+        this.visitorSessionId,
+        message,
+        this.storeOptions
+      );
       const created = await withCapabilityRefresh(
         this.capability,
         () => client.sessions.create({ message, signal })
@@ -658,7 +693,9 @@ var AgentSession = class {
     );
     const turnEvents = latestTurnEvents(snapshot.events);
     const received = turnEvents[0];
-    if (received?.type !== "message.received" || received.data.message !== message) {
+    const lastSent = persisted.lastMessage;
+    const inFlight = !turnEvents.some((event) => isTurnBoundary(event));
+    if (received?.type !== "message.received" || !(isResumeTurnMessage(received.data.message, message) || inFlight && lastSent !== void 0 && received.data.message === lastSent)) {
       return null;
     }
     let rendered = renderTurn(turnEvents);
@@ -822,6 +859,246 @@ function formatAgentError(error) {
   return TRANSIENT_AGENT_ERROR_MESSAGE;
 }
 
+// src/react/lib/tool-card.ts
+function bookingOfferIdentityKey(offer) {
+  const eventTypes = offer.eventTypes.map(
+    (item) => `${item.uri}:${item.duration ?? ""}:${item.locationKind ?? ""}:${item.location ?? ""}`
+  ).join("|");
+  const slots = offer.slots.map((slot) => `${slot.eventTypeUri ?? ""}:${slot.startTime}`).join("|");
+  return `${eventTypes}::${slots}` || "offer";
+}
+var FENCE_PATTERN = /```(?:webless-tool-card|json)\s*([\s\S]*?)```/gi;
+function asRecord(value) {
+  return value !== null && typeof value === "object" && !Array.isArray(value) ? value : null;
+}
+function asString(value) {
+  return typeof value === "string" ? value.trim() : "";
+}
+function isEventUri(value) {
+  return /^https:\/\/api\.calendly\.com\/scheduled_events\/[^/]+$/i.test(value);
+}
+function isEventTypeUri(value) {
+  return /^https:\/\/api\.calendly\.com\/event_types\/[^/]+$/i.test(value);
+}
+function parseToolCard(value) {
+  const record = asRecord(value);
+  if (!record) return null;
+  if (record.booking_offer && asString(record.type) !== "booking_offer") {
+    const nested = parseToolCard(record.booking_offer);
+    if (nested) return nested;
+  }
+  const type = asString(record.type);
+  if (type === "booking_offer") {
+    const eventTypes = Array.isArray(record.eventTypes) ? record.eventTypes.flatMap((item) => {
+      const entry = asRecord(item);
+      const uri = asString(entry?.uri);
+      if (!entry || !isEventTypeUri(uri)) return [];
+      const duration = entry.duration;
+      const locationKind = asString(entry.locationKind);
+      const location = asString(entry.location);
+      return [
+        {
+          name: asString(entry.name) || "Meeting",
+          uri,
+          ...typeof duration === "number" ? { duration } : {},
+          ...locationKind ? { locationKind } : {},
+          ...location ? { location } : {}
+        }
+      ];
+    }) : [];
+    const slots = Array.isArray(record.slots) ? record.slots.flatMap((item) => {
+      const entry = asRecord(item);
+      const startTime = asString(entry?.startTime);
+      if (!entry || !startTime) return [];
+      const eventTypeUri = asString(entry.eventTypeUri);
+      return [
+        {
+          startTime,
+          ...isEventTypeUri(eventTypeUri) ? { eventTypeUri } : {}
+        }
+      ];
+    }) : [];
+    if (slots.length === 0) return null;
+    return { type: "booking_offer", eventTypes, slots };
+  }
+  if (type === "booking_confirmed") {
+    const eventUri = asString(record.eventUri);
+    if (!isEventUri(eventUri)) return null;
+    const inviteeUri = asString(record.inviteeUri);
+    const inviteeEmail = asString(record.inviteeEmail);
+    const startTime = asString(record.startTime);
+    return {
+      type: "booking_confirmed",
+      eventUri,
+      ...inviteeUri ? { inviteeUri } : {},
+      ...inviteeEmail ? { inviteeEmail } : {},
+      ...startTime ? { startTime } : {}
+    };
+  }
+  if (type === "booking_canceled") {
+    const eventUri = asString(record.eventUri);
+    if (!isEventUri(eventUri)) return null;
+    return { type: "booking_canceled", eventUri };
+  }
+  return null;
+}
+function formatBookingOfferFence(offer) {
+  return [
+    "```webless-tool-card",
+    JSON.stringify({
+      type: "booking_offer",
+      eventTypes: offer.eventTypes,
+      slots: offer.slots
+    }),
+    "```"
+  ].join("\n");
+}
+function bookingOfferFromActionOutput(output) {
+  const record = asRecord(output);
+  const data = asRecord(record?.data) ?? record;
+  const card = parseToolCard(data);
+  return card?.type === "booking_offer" ? card : null;
+}
+function ensureBookingOfferText(text, offer) {
+  if (!offer) return text;
+  if (extractToolCards(text).some((card) => card.type === "booking_offer")) {
+    return text;
+  }
+  const visible = stripToolCards(text).trim() || text.trim();
+  return `${visible}
+
+${formatBookingOfferFence(offer)}`;
+}
+function hideToolCardFences(text) {
+  return text.replace(/```(?:webless-tool-card|json)\s*[\s\S]*?```/gi, "").replace(/```(?:webless-tool-card|json)[\s\S]*$/i, "").replace(/\n{3,}/g, "\n\n").trim();
+}
+function visitorTimeZone() {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+  } catch {
+    return "UTC";
+  }
+}
+function extractToolCards(text) {
+  const cards = [];
+  for (const match of text.matchAll(FENCE_PATTERN)) {
+    try {
+      const card = parseToolCard(JSON.parse(match[1] ?? ""));
+      if (card) cards.push(card);
+    } catch {
+    }
+  }
+  return cards;
+}
+function stripToolCards(text) {
+  return text.replace(FENCE_PATTERN, "").replace(/\n{3,}/g, "\n\n").trim();
+}
+function localDateKey(date) {
+  if (Number.isNaN(date.getTime())) return "";
+  return [
+    date.getFullYear(),
+    String(date.getMonth() + 1).padStart(2, "0"),
+    String(date.getDate()).padStart(2, "0")
+  ].join("-");
+}
+function slotDateKey(startTime) {
+  return localDateKey(new Date(startTime)) || startTime;
+}
+function bookingSlotsForEventType(slots, eventTypeUri) {
+  return slots.filter(
+    (slot) => !eventTypeUri || !slot.eventTypeUri || slot.eventTypeUri === eventTypeUri
+  );
+}
+function firstAvailableBookingMonth(slots) {
+  let earliest;
+  for (const slot of slots) {
+    const key = slotDateKey(slot.startTime);
+    if (!earliest || key < earliest) earliest = key;
+  }
+  const [year, month] = (earliest ?? slotDateKey((/* @__PURE__ */ new Date()).toISOString())).split("-").map(Number);
+  if (!year || !month) {
+    const now = /* @__PURE__ */ new Date();
+    return { year: now.getFullYear(), month: now.getMonth() };
+  }
+  return { year, month: month - 1 };
+}
+function formatMonthTitle(year, month) {
+  return new Intl.DateTimeFormat(void 0, {
+    month: "long",
+    year: "numeric"
+  }).format(new Date(year, month, 1));
+}
+function formatLongDate(startTime) {
+  const date = new Date(startTime);
+  if (Number.isNaN(date.getTime())) return startTime;
+  return new Intl.DateTimeFormat(void 0, {
+    weekday: "long",
+    month: "long",
+    day: "numeric"
+  }).format(date);
+}
+function weekdayLabels() {
+  return Array.from(
+    { length: 7 },
+    (_, index) => new Intl.DateTimeFormat(void 0, { weekday: "short" }).format(
+      new Date(2026, 7, 3 + index)
+    )
+  );
+}
+function formatTimeChip(startTime) {
+  const date = new Date(startTime);
+  if (Number.isNaN(date.getTime())) return startTime;
+  return new Intl.DateTimeFormat(void 0, {
+    hour: "numeric",
+    minute: "2-digit"
+  }).format(date);
+}
+function formatSlotTimeZone(startTime) {
+  const date = new Date(startTime);
+  if (Number.isNaN(date.getTime())) return "";
+  return new Intl.DateTimeFormat(void 0, { timeZoneName: "short" }).formatToParts(date).find((part) => part.type === "timeZoneName")?.value ?? "";
+}
+function formatSlotLabel(startTime) {
+  const date = new Date(startTime);
+  if (Number.isNaN(date.getTime())) return startTime;
+  return new Intl.DateTimeFormat(void 0, {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    timeZoneName: "short"
+  }).format(date);
+}
+function formatBookingRequest(input) {
+  return [
+    "Book this meeting now with CALENDLY_POST_INVITEE.",
+    "Do not open a Calendly URL and do not list other scheduled events.",
+    "Do not invent a location kind. Use only the location fields below.",
+    `event_type: ${input.eventTypeUri}`,
+    `start_time: ${input.startTime}`,
+    `invitee.name: ${input.inviteeName}`,
+    `invitee.email: ${input.inviteeEmail}`,
+    `invitee.timezone: ${input.timezone}`,
+    ...input.locationKind ? [
+      `location.kind: ${input.locationKind}`,
+      ...input.location ? [`location.location: ${input.location}`] : []
+    ] : ["Do not send a location field."],
+    "After it succeeds, reply with one short confirmation and a webless-tool-card booking_confirmed block using visitor_booking."
+  ].join("\n");
+}
+function visitorBookingPrefix(booking) {
+  return [
+    "This visitor already booked a meeting. Use only this meeting:",
+    `- scheduled event URI: ${booking.eventUri}`,
+    ...booking.inviteeUri ? [`- invitee URI: ${booking.inviteeUri}`] : [],
+    ...booking.inviteeEmail ? [`- invitee email: ${booking.inviteeEmail}`] : [],
+    "For details call CALENDLY_GET_EVENT or CALENDLY_GET_EVENT_INVITEE with those URIs.",
+    "If you must list events, pass this invitee_email. Never describe any other scheduled event.",
+    "start_time values from Calendly are UTC."
+  ].join("\n");
+}
+
 // src/react/persisted-conversation.ts
 var CONVERSATION_VERSION = 1;
 function conversationKey(storageKeyPrefix, visitorSessionId) {
@@ -833,13 +1110,25 @@ function parseMessage(value) {
   if (typeof record.id !== "string" || record.role !== "agent" && record.role !== "visitor" || typeof record.text !== "string" || typeof record.createdAt !== "number" || !Number.isFinite(record.createdAt)) {
     return null;
   }
+  if (record.role === "visitor") {
+    return {
+      id: record.id,
+      role: "visitor",
+      text: record.text,
+      createdAt: record.createdAt,
+      ...typeof record.runtimeText === "string" && record.runtimeText ? { runtimeText: record.runtimeText } : {}
+    };
+  }
   return {
     id: record.id,
-    role: record.role,
+    role: "agent",
     text: record.text,
     createdAt: record.createdAt
   };
 }
+function visitorTurnText(message) {
+  return message.role === "visitor" && message.runtimeText ? message.runtimeText : message.text;
+}
 function loadPersistedAgentConversation(storageKeyPrefix, visitorSessionId) {
   if (typeof sessionStorage === "undefined") return null;
   const raw = sessionStorage.getItem(conversationKey(storageKeyPrefix, visitorSessionId));
@@ -872,6 +1161,42 @@ function savePersistedAgentConversation(storageKeyPrefix, visitorSessionId, conv
 function clearPersistedAgentConversation(storageKeyPrefix, visitorSessionId) {
   if (typeof sessionStorage === "undefined") return;
   sessionStorage.removeItem(conversationKey(storageKeyPrefix, visitorSessionId));
+  clearPendingWidgetBooking(storageKeyPrefix, visitorSessionId);
+}
+function pendingBookingKey(storageKeyPrefix, visitorSessionId) {
+  return `${storageKeyPrefix}:pending-booking:${visitorSessionId}`;
+}
+function loadPendingWidgetBooking(storageKeyPrefix, visitorSessionId) {
+  if (typeof sessionStorage === "undefined") return null;
+  const raw = sessionStorage.getItem(
+    pendingBookingKey(storageKeyPrefix, visitorSessionId)
+  );
+  if (!raw) return null;
+  try {
+    const value = JSON.parse(raw);
+    if (typeof value !== "object" || value === null) return null;
+    const record = value;
+    if (typeof record.eventUri !== "string" || !record.eventUri) return null;
+    return {
+      eventUri: record.eventUri,
+      ...typeof record.inviteeUri === "string" && record.inviteeUri ? { inviteeUri: record.inviteeUri } : {},
+      ...typeof record.inviteeEmail === "string" && record.inviteeEmail ? { inviteeEmail: record.inviteeEmail } : {},
+      ...typeof record.startTime === "string" && record.startTime ? { startTime: record.startTime } : {}
+    };
+  } catch {
+    return null;
+  }
+}
+function savePendingWidgetBooking(storageKeyPrefix, visitorSessionId, booking) {
+  if (typeof sessionStorage === "undefined") return;
+  sessionStorage.setItem(
+    pendingBookingKey(storageKeyPrefix, visitorSessionId),
+    JSON.stringify(booking)
+  );
+}
+function clearPendingWidgetBooking(storageKeyPrefix, visitorSessionId) {
+  if (typeof sessionStorage === "undefined") return;
+  sessionStorage.removeItem(pendingBookingKey(storageKeyPrefix, visitorSessionId));
 }
 
 // src/react/hooks/useAgentChat.ts
@@ -891,6 +1216,7 @@ function createInitialState(greeting = DEFAULT_GREETING) {
     journey: null,
     followUps: [],
     streamingText: "",
+    pendingOffer: null,
     error: null
   };
 }
@@ -973,6 +1299,9 @@ function useAgentChat({
       initialState
     )
   );
+  const pendingBookingRef = (0, import_react2.useRef)(
+    loadPendingWidgetBooking(resolvedStorageKeyPrefix, visitorId)
+  );
   const runRef = (0, import_react2.useRef)(null);
   const clientRef = (0, import_react2.useRef)(
     createAgentClient({
@@ -1005,6 +1334,10 @@ function useAgentChat({
       visitorSessionId: visitorId,
       storageKeyPrefix: resolvedStorageKeyPrefix
     });
+    pendingBookingRef.current = loadPendingWidgetBooking(
+      resolvedStorageKeyPrefix,
+      visitorId
+    );
     setState(
       stateFromConversation(
         loadPersistedAgentConversation(resolvedStorageKeyPrefix, visitorId),
@@ -1040,6 +1373,7 @@ function useAgentChat({
     runRef.current?.abort();
     runRef.current = null;
     clientRef.current.reset();
+    pendingBookingRef.current = null;
     clearPersistedAgentConversation(resolvedStorageKeyPrefix, visitorId);
     setState(initialState);
   }, [initialState, resolvedStorageKeyPrefix, visitorId]);
@@ -1051,6 +1385,7 @@ function useAgentChat({
       try {
         let streamStarted = Boolean(initialText);
         let streamed = initialText;
+        const capturedOffers = [];
         const handlers = {
           onWork: (item) => {
             if (!isActiveRun()) return;
@@ -1060,6 +1395,12 @@ function useAgentChat({
               toolSteps: upsertToolStep(prev.toolSteps, item)
             }));
           },
+          onActionResult: (output) => {
+            const offer = bookingOfferFromActionOutput(output);
+            if (!offer) return;
+            capturedOffers.push(offer);
+            setState((prev) => ({ ...prev, pendingOffer: offer }));
+          },
           onDelta: (delta) => {
             if (!isActiveRun()) return;
             if (!streamStarted) {
@@ -1075,7 +1416,8 @@ function useAgentChat({
             setState((prev) => ({
               ...prev,
               phase: "streaming",
-              streamingText: streamed
+              streamingText: hideToolCardFences(streamed),
+              pendingOffer: prev.pendingOffer ?? capturedOffers.at(-1) ?? null
             }));
           },
           onComplete: () => {
@@ -1096,18 +1438,34 @@ function useAgentChat({
           });
         }
         if (!isActiveRun() || finalText === null) return;
+        const displayText = ensureBookingOfferText(
+          finalText,
+          capturedOffers.at(-1) ?? null
+        );
         const agentMessage = {
           id: `agent-${Date.now()}`,
           role: "agent",
-          text: finalText,
+          text: displayText,
           createdAt: Date.now()
         };
+        const parsedCards = extractToolCards(displayText);
+        for (const card of parsedCards) {
+          if (card.type === "booking_confirmed") {
+            pendingBookingRef.current = card;
+            savePendingWidgetBooking(resolvedStorageKeyPrefix, visitorId, card);
+          }
+          if (card.type === "booking_canceled" && pendingBookingRef.current?.eventUri === card.eventUri) {
+            pendingBookingRef.current = null;
+            clearPendingWidgetBooking(resolvedStorageKeyPrefix, visitorId);
+          }
+        }
         setState((prev) => ({
           ...prev,
           phase: "complete",
           messages: [...prev.messages, agentMessage],
           toolSteps: completeActivePlanning(prev.toolSteps),
           streamingText: "",
+          pendingOffer: null,
           followUps: [],
           journey: null
         }));
@@ -1129,26 +1487,54 @@ function useAgentChat({
             } : step
           ),
           streamingText: "",
+          pendingOffer: null,
           error: message
         }));
         runRef.current = null;
       }
     },
-    []
+    [resolvedStorageKeyPrefix, visitorId]
+  );
+  const rememberBooking = (0, import_react2.useCallback)(
+    (booking) => {
+      const current = pendingBookingRef.current;
+      if (current?.eventUri === booking.eventUri && current.inviteeEmail === booking.inviteeEmail && current.inviteeUri === booking.inviteeUri) {
+        return;
+      }
+      pendingBookingRef.current = booking;
+      savePendingWidgetBooking(resolvedStorageKeyPrefix, visitorId, booking);
+    },
+    [resolvedStorageKeyPrefix, visitorId]
+  );
+  const forgetBooking = (0, import_react2.useCallback)(
+    (eventUri) => {
+      const current = pendingBookingRef.current;
+      if (!current) return;
+      if (eventUri && current.eventUri !== eventUri) return;
+      pendingBookingRef.current = null;
+      clearPendingWidgetBooking(resolvedStorageKeyPrefix, visitorId);
+    },
+    [resolvedStorageKeyPrefix, visitorId]
   );
   const submit = (0, import_react2.useCallback)(
-    async (visitorText) => {
+    async (visitorText, options) => {
       if (runRef.current) {
         runRef.current.abort();
         clientRef.current.cancelActive();
       }
       const controller = new AbortController();
       runRef.current = controller;
+      const booking = pendingBookingRef.current;
+      const outgoing = options?.runtimeText ?? visitorText;
+      const runtimeText = booking ? `${visitorBookingPrefix(booking)}
+
+${outgoing}` : outgoing;
       const visitorMessage = {
         id: `visitor-${Date.now()}`,
         role: "visitor",
         text: visitorText,
-        createdAt: Date.now()
+        createdAt: Date.now(),
+        ...runtimeText !== visitorText ? { runtimeText } : {}
       };
       setState((prev) => ({
         ...prev,
@@ -1165,9 +1551,10 @@ function useAgentChat({
         journey: null,
         followUps: [],
         streamingText: "",
+        pendingOffer: null,
         error: null
       }));
-      await runTurn({ controller, resume: false, visitorText });
+      await runTurn({ controller, resume: false, visitorText: runtimeText });
     },
     [runTurn]
   );
@@ -1194,12 +1581,13 @@ function useAgentChat({
       journey: null,
       followUps: [],
       streamingText: "",
+      pendingOffer: null,
       error: null
     }));
     await runTurn({
       controller,
       resume: false,
-      visitorText: visitorMessage.text
+      visitorText: visitorTurnText(visitorMessage)
     });
   }, [runTurn, state.messages]);
   (0, import_react2.useEffect)(() => {
@@ -1216,7 +1604,7 @@ function useAgentChat({
       controller,
       initialText: conversation.streamingText,
       resume: true,
-      visitorText: visitorMessage.text
+      visitorText: visitorTurnText(visitorMessage)
     });
     return () => {
       if (runRef.current === controller) {
@@ -1236,6 +1624,8 @@ function useAgentChat({
     reset,
     retry,
     submit,
+    rememberBooking,
+    forgetBooking,
     visitorSessionId: visitorId,
     sessionId: clientRef.current.getActiveSessionId()
   };
@@ -1297,7 +1687,7 @@ function unregisterAgentPanelController(customerId) {
 }
 
 // src/react/components/AgentRail/AgentRail.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/react/types/conversation.ts
 var defaultAgentRailTheme = {
@@ -1337,10 +1727,9 @@ function workSummary(steps, failed, brandLabel) {
   );
   if (hasError) return "Answered with available information";
   if (specialists.length > 1)
-    return `Answer prepared with ${specialists.length} specialists`;
-  if (specialists.length === 1)
-    return `Answer prepared with ${specialists[0]?.label}`;
-  if (searched) return "Answer prepared from this site";
+    return `Consulted ${specialists.length} specialists`;
+  if (specialists.length === 1) return `Consulted ${specialists[0]?.label}`;
+  if (searched) return "Searched this site";
   return "Answer ready";
 }
 function stepLabel(step, brandLabel) {
@@ -1390,7 +1779,6 @@ function AgentActivityBubble({
   steps
 }) {
   const active = steps.some((step) => step.state === "active");
-  const delegated = steps.some((step) => step.kind === "specialist");
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", { className: "agent-activity-bubble", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "agent-activity-bubble__status", "aria-live": "polite", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1402,57 +1790,50 @@ function AgentActivityBubble({
       ),
       workSummary(steps, failed, brandLabel)
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "details",
-      {
-        className: "agent-activity-bubble__details",
-        open: active || delegated,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("summary", { children: failed ? "What happened" : active ? "Working" : "How this answer was prepared" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "agent-activity-bubble__steps", children: steps.map((step) => {
-            const detail = stepDetail(step, steps);
-            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-              "li",
-              {
-                className: "agent-activity-bubble__step",
-                "data-kind": step.kind,
-                "data-state": step.state,
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    "span",
-                    {
-                      className: "agent-activity-bubble__step-icon",
-                      "aria-hidden": "true",
-                      children: step.kind === "planning" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlanningIcon, {}),
-                        brandLogoUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                          "img",
-                          {
-                            src: brandLogoUrl,
-                            alt: "",
-                            onError: (event) => {
-                              event.currentTarget.hidden = true;
-                            }
-                          }
-                        ) : null
-                      ] }) : step.kind === "search" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SearchIcon, {}) : step.label.slice(0, 1).toUpperCase()
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "agent-activity-bubble__step-copy", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "agent-activity-bubble__step-heading", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: stepLabel(step, brandLabel) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { children: step.kind === "specialist" ? "Specialist" : step.kind === "search" ? "Built-in capability" : "Supervisor" })
-                    ] }),
-                    detail ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "agent-activity-bubble__step-detail", children: detail }) : null
-                  ] })
-                ]
-              },
-              step.id
-            );
-          }) })
-        ]
-      }
-    )
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", { className: "agent-activity-bubble__details", open: active, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("summary", { children: "Work details" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "agent-activity-bubble__steps", children: steps.map((step) => {
+        const detail = stepDetail(step, steps);
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "li",
+          {
+            className: "agent-activity-bubble__step",
+            "data-kind": step.kind,
+            "data-state": step.state,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "span",
+                {
+                  className: "agent-activity-bubble__step-icon",
+                  "aria-hidden": "true",
+                  children: step.kind === "planning" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlanningIcon, {}),
+                    brandLogoUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "img",
+                      {
+                        src: brandLogoUrl,
+                        alt: "",
+                        onError: (event) => {
+                          event.currentTarget.hidden = true;
+                        }
+                      }
+                    ) : null
+                  ] }) : step.kind === "search" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SearchIcon, {}) : step.label.slice(0, 1).toUpperCase()
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "agent-activity-bubble__step-copy", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "agent-activity-bubble__step-heading", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: stepLabel(step, brandLabel) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { children: step.kind === "specialist" ? "Specialist" : step.kind === "search" ? "Built-in capability" : "Supervisor" })
+                ] }),
+                detail ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "agent-activity-bubble__step-detail", children: detail }) : null
+              ] })
+            ]
+          },
+          step.id
+        );
+      }) })
+    ] })
   ] });
 }
 
@@ -1554,34 +1935,318 @@ function FollowUpChips({
   ] });
 }
 
+// src/react/components/BookingCard/BookingCard.tsx
+var import_react5 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function monthFromKey(key) {
+  const [year, month] = key.split("-").map(Number);
+  if (!year || !month) return { year: (/* @__PURE__ */ new Date()).getFullYear(), month: (/* @__PURE__ */ new Date()).getMonth() };
+  return { year, month: month - 1 };
+}
+function dateKeyFromParts(year, month, day) {
+  return [
+    year,
+    String(month + 1).padStart(2, "0"),
+    String(day).padStart(2, "0")
+  ].join("-");
+}
+function calendarCells(year, month) {
+  const firstWeekday = (new Date(year, month, 1).getDay() + 6) % 7;
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const cells = [];
+  for (let index = 0; index < firstWeekday; index += 1) cells.push(null);
+  for (let day = 1; day <= daysInMonth; day += 1) {
+    cells.push({ day, key: dateKeyFromParts(year, month, day) });
+  }
+  while (cells.length < 42) cells.push(null);
+  return cells;
+}
+function BookingCard({
+  offer,
+  onBook
+}) {
+  const fieldId = (0, import_react5.useId)();
+  const defaultType = offer.eventTypes[0]?.uri ?? offer.slots[0]?.eventTypeUri ?? "";
+  const [step, setStep] = (0, import_react5.useState)("date");
+  const [eventTypeUri, setEventTypeUri] = (0, import_react5.useState)(defaultType);
+  const [selectedDate, setSelectedDate] = (0, import_react5.useState)("");
+  const [startTime, setStartTime] = (0, import_react5.useState)("");
+  const [name, setName] = (0, import_react5.useState)("");
+  const [email, setEmail] = (0, import_react5.useState)("");
+  const slots = (0, import_react5.useMemo)(
+    () => bookingSlotsForEventType(offer.slots, eventTypeUri),
+    [eventTypeUri, offer.slots]
+  );
+  const availableByDate = (0, import_react5.useMemo)(() => {
+    const next = /* @__PURE__ */ new Map();
+    for (const slot of slots) {
+      const key = slotDateKey(slot.startTime);
+      if (!next.has(key)) next.set(key, slot.startTime);
+    }
+    return next;
+  }, [slots]);
+  const [visibleMonth, setVisibleMonth] = (0, import_react5.useState)(
+    () => firstAvailableBookingMonth(slots)
+  );
+  function selectEventType(nextType) {
+    setEventTypeUri(nextType);
+    setSelectedDate("");
+    setStartTime("");
+    setVisibleMonth(
+      firstAvailableBookingMonth(bookingSlotsForEventType(offer.slots, nextType))
+    );
+  }
+  const daySlots = (0, import_react5.useMemo)(
+    () => slots.filter((slot) => slotDateKey(slot.startTime) === selectedDate),
+    [selectedDate, slots]
+  );
+  const selectedType = offer.eventTypes.find((item) => item.uri === eventTypeUri);
+  const selectedSample = availableByDate.get(selectedDate) ?? startTime;
+  const timeZone = formatSlotTimeZone(slots[0]?.startTime ?? selectedSample);
+  const weekdays = (0, import_react5.useMemo)(() => weekdayLabels(), []);
+  const cells = calendarCells(visibleMonth.year, visibleMonth.month);
+  const canPrevMonth = [...availableByDate.keys()].some((key) => {
+    const month = monthFromKey(key);
+    return month.year < visibleMonth.year || month.year === visibleMonth.year && month.month < visibleMonth.month;
+  });
+  const canNextMonth = [...availableByDate.keys()].some((key) => {
+    const month = monthFromKey(key);
+    return month.year > visibleMonth.year || month.year === visibleMonth.year && month.month > visibleMonth.month;
+  });
+  function goToMonth(offset) {
+    setVisibleMonth((current) => {
+      const next = new Date(current.year, current.month + offset, 1);
+      return { year: next.getFullYear(), month: next.getMonth() };
+    });
+  }
+  function selectDate(key) {
+    if (!availableByDate.has(key)) return;
+    setSelectedDate(key);
+    setStartTime("");
+    setStep("time");
+  }
+  function selectTime(value) {
+    setStartTime(value);
+    setStep("details");
+  }
+  function handleSubmit(event) {
+    event.preventDefault();
+    if (!eventTypeUri || !startTime || !name.trim() || !email.trim()) return;
+    onBook?.({
+      displayText: `Book the ${formatSlotLabel(startTime)} demo`,
+      runtimeText: formatBookingRequest({
+        eventTypeUri,
+        inviteeEmail: email.trim(),
+        inviteeName: name.trim(),
+        startTime,
+        timezone: visitorTimeZone(),
+        locationKind: selectedType?.locationKind,
+        location: selectedType?.location
+      })
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("section", { className: "booking-card", "aria-label": "Book a meeting", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("form", { className: "booking-card__form", onSubmit: handleSubmit, children: [
+    step === "date" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "booking-card__step", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "booking-card__title", children: selectedType?.name || "Pick a date" }),
+      timeZone ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "booking-card__tz", children: [
+        "Times in ",
+        timeZone
+      ] }) : null,
+      offer.eventTypes.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "booking-card__field", htmlFor: `${fieldId}-type`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Meeting" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "select",
+          {
+            id: `${fieldId}-type`,
+            value: eventTypeUri,
+            onChange: (event) => selectEventType(event.target.value),
+            children: offer.eventTypes.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: item.uri, children: item.name }, item.uri))
+          }
+        )
+      ] }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "booking-card__month", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "booking-card__nav",
+            "aria-label": "Previous month",
+            disabled: !canPrevMonth,
+            onClick: () => goToMonth(-1),
+            children: "\u2039"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "booking-card__month-title", children: formatMonthTitle(visibleMonth.year, visibleMonth.month) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "booking-card__nav",
+            "aria-label": "Next month",
+            disabled: !canNextMonth,
+            onClick: () => goToMonth(1),
+            children: "\u203A"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "booking-card__weekdays", children: weekdays.map((label) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: label }, label)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "booking-card__calendar", role: "grid", "aria-label": "Available dates", children: cells.map((cell, index) => {
+        if (!cell) {
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "booking-card__day" }, `empty-${index}`);
+        }
+        const available = availableByDate.has(cell.key);
+        const selected = cell.key === selectedDate;
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "button",
+            className: [
+              "booking-card__day",
+              available ? "booking-card__day--available" : "",
+              selected ? "booking-card__day--selected" : ""
+            ].filter(Boolean).join(" "),
+            disabled: !available,
+            "aria-pressed": selected,
+            onClick: () => selectDate(cell.key),
+            children: cell.day
+          },
+          cell.key
+        );
+      }) })
+    ] }, "date") : null,
+    step === "time" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "booking-card__step", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "booking-card__step-bar", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "booking-card__nav",
+            "aria-label": "Back to dates",
+            onClick: () => setStep("date"),
+            children: "\u2039"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "booking-card__title", children: selectedSample ? formatLongDate(selectedSample) : "Pick a time" }),
+          timeZone ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "booking-card__tz", children: [
+            "Times in ",
+            timeZone
+          ] }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "booking-card__times", children: daySlots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          className: startTime === slot.startTime ? "booking-card__time booking-card__time--selected" : "booking-card__time",
+          onClick: () => selectTime(slot.startTime),
+          children: formatTimeChip(slot.startTime)
+        },
+        slot.startTime
+      )) })
+    ] }, "time") : null,
+    step === "details" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "booking-card__step", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "booking-card__step-bar", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "booking-card__nav",
+            "aria-label": "Back to times",
+            onClick: () => setStep("time"),
+            children: "\u2039"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "booking-card__title", children: "Enter details" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "booking-card__tz", children: formatSlotLabel(startTime) }),
+          selectedType?.location ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "booking-card__tz", children: selectedType.location }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "booking-card__identity", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "booking-card__field", htmlFor: `${fieldId}-name`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Name" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "input",
+            {
+              id: `${fieldId}-name`,
+              autoComplete: "name",
+              value: name,
+              onChange: (event) => setName(event.target.value),
+              required: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "booking-card__field", htmlFor: `${fieldId}-email`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Email" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "input",
+            {
+              id: `${fieldId}-email`,
+              type: "email",
+              autoComplete: "email",
+              value: email,
+              onChange: (event) => setEmail(event.target.value),
+              required: true
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "submit", className: "booking-card__submit", children: "Book this time" })
+    ] }, "details") : null
+  ] }) });
+}
+
 // src/react/components/MessageBubble/MessageBubble.tsx
 var import_streamdown = require("streamdown");
 var import_styles = require("streamdown/styles.css");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function MessageBubble({ message }) {
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function MessageBubble({
+  message,
+  offer,
+  onBook
+}) {
+  const cards = message.role === "agent" ? extractToolCards(message.text) : [];
+  const extractedOffers = cards.filter(
+    (card) => card.type === "booking_offer"
+  );
+  const offers = offer ? [offer] : extractedOffers;
+  const visibleText = hideToolCardFences(message.text);
+  const isStreaming = message.role === "agent" && Boolean(message.streaming);
+  const displayText = offers.length > 0 ? visibleText || "Pick a date and time that works for you." : visibleText || (isStreaming ? "" : message.text);
   if (message.role === "visitor") {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("article", { className: "message-bubble message-bubble--visitor", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "message-bubble__text", children: message.text }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("article", { className: "message-bubble message-bubble--visitor", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "message-bubble__text", children: message.text }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("article", { className: "message-bubble message-bubble--agent", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "message-bubble__text", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    import_streamdown.Streamdown,
-    {
-      animated: true,
-      caret: "circle",
-      className: "message-bubble__markdown",
-      controls: false,
-      isAnimating: message.streaming,
-      linkSafety: { enabled: false },
-      mode: message.streaming ? "streaming" : "static",
-      skipHtml: true,
-      children: message.text
-    }
-  ) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("article", { className: "message-bubble message-bubble--agent", children: [
+    displayText ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "message-bubble__text", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_streamdown.Streamdown,
+      {
+        animated: true,
+        caret: "circle",
+        className: "message-bubble__markdown",
+        controls: false,
+        isAnimating: isStreaming,
+        linkSafety: { enabled: false },
+        mode: isStreaming ? "streaming" : "static",
+        skipHtml: true,
+        children: displayText
+      }
+    ) }) : null,
+    offers.map((nextOffer, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      BookingCard,
+      {
+        offer: nextOffer,
+        onBook
+      },
+      `${bookingOfferIdentityKey(nextOffer)}-${index}`
+    ))
+  ] });
 }
 
 // src/react/components/AgentRail/AgentRail.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function MinimizeIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "path",
     {
       d: "M3.5 8h9",
@@ -1592,7 +2257,7 @@ function MinimizeIcon() {
   ) });
 }
 function CloseIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "path",
     {
       d: "M4 4l8 8M12 4l-8 8",
@@ -1603,7 +2268,7 @@ function CloseIcon() {
   ) });
 }
 function NewChatIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.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",
@@ -1615,7 +2280,7 @@ function NewChatIcon() {
   ) });
 }
 function ExpandIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "path",
     {
       d: "M6 3.5H3.5V6M10 3.5h2.5V6M10 12.5h2.5V10M6 12.5H3.5V10",
@@ -1627,7 +2292,7 @@ function ExpandIcon() {
   ) });
 }
 function RestoreIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "path",
     {
       d: "M5.5 5.5H3.5V7.5M10.5 5.5h2V7.5M10.5 10.5h2V8.5M5.5 10.5H3.5V8.5",
@@ -1653,10 +2318,10 @@ function AgentRail({
   onReset,
   onRetry,
   onSubmit,
-  onFollowUpSelect
+  onFollowUpSelect,
+  onBook
 }) {
-  const transcriptRef = (0, import_react5.useRef)(null);
-  const welcomeTitleId = (0, import_react5.useId)();
+  const transcriptRef = (0, import_react6.useRef)(null);
   const resolvedTheme = { ...defaultAgentRailTheme, ...theme };
   const railStyle = {
     "--rail-width": resolvedTheme.railMaxWidth,
@@ -1696,8 +2361,14 @@ function AgentRail({
     role: "agent",
     streaming: true,
     text: state.streamingText
+  } : state.pendingOffer ? {
+    createdAt: 0,
+    id: "pending-booking",
+    role: "agent",
+    streaming: false,
+    text: "Pick a date and time that works for you."
   } : null;
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const node = transcriptRef.current;
     if (!node) return;
     node.scrollTop = node.scrollHeight;
@@ -1708,7 +2379,7 @@ function AgentRail({
     state.followUps,
     state.journey
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "aside",
     {
       className: `agent-rail${mobileFullscreen ? " agent-rail--mobile-fullscreen" : ""}${expanded ? " agent-rail--expanded" : ""}`,
@@ -1719,30 +2390,30 @@ function AgentRail({
       role: mobileFullscreen || expanded ? "dialog" : void 0,
       tabIndex: mobileFullscreen || expanded ? -1 : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("header", { className: "agent-rail__header", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "agent-rail__brand-row", children: [
-          onCollapse ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("header", { className: "agent-rail__header", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "agent-rail__brand-row", children: [
+          onCollapse ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "button",
             {
               type: "button",
               className: "agent-rail__collapse",
               "aria-label": "Collapse assist",
               onClick: onCollapse,
-              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MinimizeIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MinimizeIcon, {})
             }
-          ) : onClose ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          ) : onClose ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "button",
             {
               type: "button",
               className: "agent-rail__close",
               "aria-label": "Close agent",
               onClick: onClose,
-              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CloseIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CloseIcon, {})
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "agent-rail__brand-spacer", "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "agent-rail__identity", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "agent-rail__brand-mark", "aria-hidden": "true", children: [
+          ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "agent-rail__brand-spacer", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "agent-rail__identity", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "agent-rail__brand-mark", "aria-hidden": "true", children: [
               brandLabel.slice(0, 1).toUpperCase(),
-              brandLogoUrl ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              brandLogoUrl ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "img",
                 {
                   className: "agent-rail__brand-logo",
@@ -1754,10 +2425,10 @@ function AgentRail({
                 }
               ) : null
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "agent-rail__brand-label", children: brandLabel })
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "agent-rail__brand-label", children: brandLabel })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "agent-rail__actions", children: [
-            onReset ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "agent-rail__actions", children: [
+            onReset ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "button",
               {
                 type: "button",
@@ -1765,60 +2436,37 @@ function AgentRail({
                 "aria-label": "Start a new conversation",
                 disabled: !hasVisitorMessages2,
                 onClick: onReset,
-                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NewChatIcon, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(NewChatIcon, {})
               }
             ) : null,
-            onExpandToggle ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            onExpandToggle ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "button",
               {
                 type: "button",
                 className: "agent-rail__expand",
                 "aria-label": expanded ? "Exit focus view" : "Open focus view",
                 onClick: onExpandToggle,
-                children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RestoreIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExpandIcon, {})
+                children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RestoreIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ExpandIcon, {})
               }
             ) : null
           ] })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ref: transcriptRef, className: "agent-rail__transcript", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "agent-rail__thread", children: [
-          !hasVisitorMessages2 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-            "section",
-            {
-              className: "agent-rail__welcome",
-              "aria-labelledby": welcomeTitleId,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "agent-rail__welcome-mark", "aria-hidden": "true", children: [
-                  brandLabel.slice(0, 1).toUpperCase(),
-                  brandLogoUrl ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                    "img",
-                    {
-                      className: "agent-rail__welcome-logo",
-                      src: brandLogoUrl,
-                      alt: "",
-                      onError: (event) => {
-                        event.currentTarget.hidden = true;
-                      }
-                    }
-                  ) : null
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "agent-rail__welcome-copy", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { id: welcomeTitleId, children: "What can I help you find?" }),
-                  greeting?.role === "agent" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: greeting.text }) : null
-                ] }),
-                showIdleFollowUps ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "agent-rail__followups-slot", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                  FollowUpChips,
-                  {
-                    suggestions: state.followUps,
-                    disabled: isBusy,
-                    label: "Start here",
-                    onSelect: (suggestion) => onFollowUpSelect?.(suggestion.label)
-                  }
-                ) }) : null
-              ]
-            }
-          ) : null,
-          transcriptMessages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MessageBubble, { message }, message.id)),
-          showActivity ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: transcriptRef, className: "agent-rail__transcript", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "agent-rail__thread", children: [
+          !hasVisitorMessages2 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: "agent-rail__welcome", "aria-label": "Welcome", children: [
+            greeting?.role === "agent" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageBubble, { message: greeting, onBook }) : null,
+            showIdleFollowUps ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "agent-rail__followups-slot", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              FollowUpChips,
+              {
+                suggestions: state.followUps,
+                disabled: isBusy,
+                label: "Start here",
+                onSelect: (suggestion) => onFollowUpSelect?.(suggestion.label)
+              }
+            ) }) : null
+          ] }) : null,
+          transcriptMessages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageBubble, { message, onBook }, message.id)),
+          completedAnswer ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageBubble, { message: completedAnswer, onBook }) : null,
+          showActivity ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             AgentActivityBubble,
             {
               brandLabel,
@@ -1827,18 +2475,24 @@ function AgentRail({
               steps: state.toolSteps
             }
           ) : null,
-          streamingMessage ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MessageBubble, { message: streamingMessage }) : null,
-          completedAnswer ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MessageBubble, { message: completedAnswer }) : null,
-          state.error ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { className: "agent-rail__error", role: "alert", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: "Something went wrong" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: state.error })
+          streamingMessage ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            MessageBubble,
+            {
+              message: streamingMessage,
+              offer: state.pendingOffer,
+              onBook
+            }
+          ) : null,
+          state.error ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { className: "agent-rail__error", role: "alert", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: "Something went wrong" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: state.error })
             ] }),
-            onRetry ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", onClick: onRetry, children: "Try again" }) : null
+            onRetry ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", onClick: onRetry, children: "Try again" }) : null
           ] }) : null
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "agent-rail__composer-wrap", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "agent-rail__composer-wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             Composer,
             {
               variant: expanded || mobileFullscreen ? "dock" : "default",
@@ -1847,10 +2501,9 @@ function AgentRail({
               onSubmit
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "agent-rail__footer", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "AI can make mistakes." }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "aria-hidden": "true", children: " \xB7 " }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: poweredByLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "agent-rail__footer", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "AI can make mistakes. Check important info." }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: poweredByLabel })
           ] }) })
         ] })
       ]
@@ -1859,9 +2512,9 @@ function AgentRail({
 }
 
 // src/react/components/AssistEdgeTab/AssistEdgeTab.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function SparklesIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "svg",
     {
       className: "assist-edge-tab__sparkles",
@@ -1869,21 +2522,21 @@ function SparklesIcon() {
       fill: "none",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.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",
@@ -1894,8 +2547,23 @@ function SparklesIcon() {
     }
   );
 }
+function TabMarkIcon({ customIconUrl }) {
+  const url = customIconUrl?.trim();
+  if (url) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "img",
+      {
+        alt: "",
+        "aria-hidden": true,
+        className: "assist-edge-tab__custom-icon",
+        src: url
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SparklesIcon, {});
+}
 function ChevronLeftIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "path",
     {
       d: "M10 4L6 8l4 4",
@@ -1907,7 +2575,7 @@ function ChevronLeftIcon() {
   ) });
 }
 function ChevronDownIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "path",
     {
       d: "M4 6l4 4 4-4",
@@ -1919,7 +2587,7 @@ function ChevronDownIcon() {
   ) });
 }
 function DragDots() {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "assist-edge-tab__dots", "aria-hidden": "true", children: Array.from({ length: 12 }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("i", {}, index)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "assist-edge-tab__dots", "aria-hidden": "true", children: Array.from({ length: 12 }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("i", {}, index)) });
 }
 var VARIANT_COPY = {
   outline: { label: "Assist", aria: "Open Assist" },
@@ -1933,6 +2601,7 @@ function AssistEdgeTab({
   inset,
   visible,
   label,
+  customIconUrl,
   logoUrl,
   brandColor,
   brandForeground,
@@ -1945,6 +2614,7 @@ function AssistEdgeTab({
 }) {
   const copy = VARIANT_COPY[variant];
   const visibleLabel = label?.trim() || copy.label;
+  const showLogo = Boolean(logoUrl?.trim()) && !customIconUrl?.trim();
   const style = {
     "--tab-along": `${along}%`,
     "--tab-inset": `${inset}px`,
@@ -1955,7 +2625,7 @@ function AssistEdgeTab({
     ...surfaceColor ? { "--as-surface": surfaceColor } : {},
     ...textColor ? { "--as-text": textColor } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "button",
     {
       type: "button",
@@ -1966,15 +2636,15 @@ function AssistEdgeTab({
       tabIndex: visible ? 0 : -1,
       onClick: onOpen,
       children: [
-        mobile ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        mobile ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
             "span",
             {
               className: "assist-edge-tab__mark assist-edge-tab__mark--mobile",
               "aria-hidden": "true",
               children: [
-                visibleLabel.slice(0, 1).toUpperCase(),
-                logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                customIconUrl?.trim() ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabMarkIcon, { customIconUrl }) : visibleLabel.slice(0, 1).toUpperCase(),
+                showLogo ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "img",
                   {
                     className: "assist-edge-tab__logo",
@@ -1988,14 +2658,14 @@ function AssistEdgeTab({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "assist-edge-tab__label", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "assist-edge-tab__label", children: [
             "Ask ",
             visibleLabel
           ] })
-        ] }) : variant === "outline" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "assist-edge-tab__mark", "aria-hidden": "true", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SparklesIcon, {}),
-            logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        ] }) : variant === "outline" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "assist-edge-tab__mark", "aria-hidden": "true", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabMarkIcon, { customIconUrl }),
+            showLogo ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "img",
               {
                 className: "assist-edge-tab__logo",
@@ -2007,18 +2677,18 @@ function AssistEdgeTab({
               }
             ) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "assist-edge-tab__label", children: visibleLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChevronDownIcon, {})
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "assist-edge-tab__label", children: visibleLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronDownIcon, {})
         ] }) : null,
-        variant === "ask" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChevronLeftIcon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "assist-edge-tab__label", children: visibleLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DragDots, {})
+        variant === "ask" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronLeftIcon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "assist-edge-tab__label", children: visibleLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DragDots, {})
         ] }) : null,
-        variant === "fill" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "assist-edge-tab__mark", "aria-hidden": "true", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SparklesIcon, {}),
-            logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        variant === "fill" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "assist-edge-tab__mark", "aria-hidden": "true", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabMarkIcon, { customIconUrl }),
+            showLogo ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "img",
               {
                 className: "assist-edge-tab__logo",
@@ -2030,8 +2700,8 @@ function AssistEdgeTab({
               }
             ) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "assist-edge-tab__label", children: visibleLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChevronLeftIcon, {})
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "assist-edge-tab__label", children: visibleLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronLeftIcon, {})
         ] }) : null
       ]
     }
@@ -2039,7 +2709,7 @@ function AssistEdgeTab({
 }
 
 // src/react/components/AgentWidget/AgentWidget.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function AgentWidget({
   indexId,
   customerId,
@@ -2055,9 +2725,9 @@ function AgentWidget({
 }) {
   const isMobile = useIsMobile();
   const placement = normalizeAgentPlacement(placementInput);
-  const railSlotRef = (0, import_react6.useRef)(null);
-  const [railCollapsed, setRailCollapsed] = (0, import_react6.useState)(defaultCollapsed);
-  const [railExpanded, setRailExpanded] = (0, import_react6.useState)(false);
+  const railSlotRef = (0, import_react7.useRef)(null);
+  const [railCollapsed, setRailCollapsed] = (0, import_react7.useState)(defaultCollapsed);
+  const [railExpanded, setRailExpanded] = (0, import_react7.useState)(false);
   const pageShiftActive = shouldApplyPageShift({
     pageShift,
     isMobile,
@@ -2078,6 +2748,7 @@ function AgentWidget({
     greeting: branding?.greeting
   });
   const agentName = branding?.agentName ?? "Webless Guide";
+  const tabLabel = branding?.tabLabel ?? agentName;
   const theme = {
     ...branding?.fontFamily ? { fontBody: branding.fontFamily, fontDisplay: branding.fontFamily } : {},
     ...branding?.colors?.primary ? {
@@ -2095,8 +2766,7 @@ function AgentWidget({
     } : {},
     ...branding?.colors?.border ? { border: branding.colors.border } : {}
   };
-  const idle = state.phase === "idle" && !hasVisitorMessages(state.messages);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!registerPanelController) return;
     registerAgentPanelController(customerId, {
       open: () => setRailCollapsed(false),
@@ -2111,7 +2781,7 @@ function AgentWidget({
     if (isMobile) setRailCollapsed(false);
     await submit(message);
   }
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (railCollapsed) return;
     const handleKeyDown = (event) => {
       if (event.key === "Tab" && (isMobile || railExpanded)) {
@@ -2145,31 +2815,28 @@ function AgentWidget({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isMobile, railCollapsed, railExpanded]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "webless-agent-root", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "webless-agent-root", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
         className: `webless-agent-root__shell${railCollapsed ? " webless-agent-root__shell--collapsed" : ""}${railExpanded ? " webless-agent-root__shell--expanded" : ""}`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "div",
             {
               ref: railSlotRef,
               className: "webless-agent-root__rail-slot",
               inert: railCollapsed || void 0,
               "aria-hidden": railCollapsed,
-              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 AgentRail,
                 {
                   theme,
                   brandLabel: agentName,
                   brandLogoUrl: branding?.logoUrl,
-                  composerPlaceholder: branding?.composerPlaceholder ?? `Ask ${agentName}\u2026`,
+                  composerPlaceholder: branding?.composerPlaceholder ?? "Ask as a visitor\u2026",
                   poweredByLabel: branding?.poweredByLabel ?? "Powered by Webless",
-                  state: idle ? {
-                    ...state,
-                    followUps: createIdleSuggestions()
-                  } : state,
+                  state,
                   mobileFullscreen: isMobile && !railCollapsed,
                   expanded: railExpanded,
                   onCollapse: !isMobile ? () => setRailCollapsed(true) : void 0,
@@ -2178,12 +2845,13 @@ function AgentWidget({
                   onSubmit: handleSubmit,
                   onReset: reset,
                   onRetry: () => void retry(),
-                  onFollowUpSelect: (label) => void handleSubmit(label)
+                  onFollowUpSelect: (label) => void handleSubmit(label),
+                  onBook: (input) => void submit(input.displayText, { runtimeText: input.runtimeText })
                 }
               )
             }
           ),
-          !railCollapsed && isMobile || !isMobile && railExpanded && !railCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          !railCollapsed && isMobile || !isMobile && railExpanded && !railCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "button",
             {
               type: "button",
@@ -2202,7 +2870,7 @@ function AgentWidget({
         ]
       }
     ),
-    railCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    railCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       AssistEdgeTab,
       {
         variant: placement.variant,
@@ -2210,7 +2878,8 @@ function AgentWidget({
         along: placement.along,
         inset: placement.inset,
         visible: true,
-        label: agentName,
+        label: tabLabel,
+        customIconUrl: branding?.tabIconUrl,
         logoUrl: branding?.logoUrl,
         brandColor: branding?.colors?.primary,
         brandForeground: branding?.colors?.primaryForeground,