@webless/agent 0.4.1 → 0.6.0

package/dist/react.cjs

@@ -26,6 +26,7 @@ __export(react_exports, {
   DEFAULT_AGENT_PLACEMENT: () => DEFAULT_AGENT_PLACEMENT,
   createIdleSuggestions: () => createIdleSuggestions,
   defaultAgentRailTheme: () => defaultAgentRailTheme,
+  defaultDarkAgentRailTheme: () => defaultDarkAgentRailTheme,
   hasVisitorMessages: () => hasVisitorMessages,
   isAgentBusy: () => isAgentBusy,
   normalizeAgentPlacement: () => normalizeAgentPlacement,
@@ -34,7 +35,7 @@ __export(react_exports, {
 module.exports = __toCommonJS(react_exports);
 
 // src/react/components/AgentWidget/AgentWidget.tsx
-var import_react6 = require("react");
+var import_react10 = require("react");
 
 // src/react/page-shift.ts
 var import_react = require("react");
@@ -303,6 +304,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 +314,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 +332,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 +359,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 +378,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 +615,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 +635,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 +694,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,8 +860,248 @@ 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;
+var CONVERSATION_VERSION = 2;
 function conversationKey(storageKeyPrefix, visitorSessionId) {
   return `${storageKeyPrefix}:conversation:${visitorSessionId}`;
 }
@@ -833,13 +1111,39 @@ 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 parseToolStep(value) {
+  if (typeof value !== "object" || value === null) return null;
+  const record = value;
+  if (typeof record.id !== "string" || record.kind !== "planning" && record.kind !== "search" && record.kind !== "specialist" || typeof record.label !== "string" || record.state !== "completed" && record.state !== "active" && record.state !== "pending" && record.state !== "error") {
+    return null;
+  }
+  return {
+    id: record.id,
+    kind: record.kind,
+    label: record.label,
+    state: record.state,
+    ...typeof record.detail === "string" && record.detail ? { detail: record.detail } : {}
+  };
+}
+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));
@@ -848,15 +1152,19 @@ function loadPersistedAgentConversation(storageKeyPrefix, visitorSessionId) {
     const value = JSON.parse(raw);
     if (typeof value !== "object" || value === null) return null;
     const record = value;
-    if (record.version !== CONVERSATION_VERSION || !Array.isArray(record.messages) || typeof record.pending !== "boolean" || typeof record.streamingText !== "string") {
+    if (record.version !== 1 && record.version !== CONVERSATION_VERSION || !Array.isArray(record.messages) || typeof record.pending !== "boolean" || typeof record.streamingText !== "string" || record.version === CONVERSATION_VERSION && !Array.isArray(record.toolSteps)) {
       return null;
     }
     const messages = record.messages.map(parseMessage);
     if (messages.some((message) => message === null)) return null;
+    const storedToolSteps = record.version === CONVERSATION_VERSION && Array.isArray(record.toolSteps) ? record.toolSteps : [];
+    const toolSteps = storedToolSteps.map(parseToolStep);
+    if (toolSteps.some((step) => step === null)) return null;
     return {
       messages: messages.filter((message) => message !== null),
       pending: record.pending,
-      streamingText: record.streamingText
+      streamingText: record.streamingText,
+      toolSteps: toolSteps.filter((step) => step !== null)
     };
   } catch {
     return null;
@@ -872,6 +1180,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 +1235,7 @@ function createInitialState(greeting = DEFAULT_GREETING) {
     journey: null,
     followUps: [],
     streamingText: "",
+    pendingOffer: null,
     error: null
   };
 }
@@ -900,7 +1245,8 @@ function stateFromConversation(conversation, initialState) {
     ...initialState,
     messages: conversation.messages,
     phase: conversation.pending ? conversation.streamingText ? "streaming" : "thinking" : "complete",
-    streamingText: conversation.streamingText
+    streamingText: conversation.streamingText,
+    toolSteps: conversation.toolSteps
   };
 }
 function upsertToolStep(steps, item) {
@@ -973,6 +1319,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 +1354,10 @@ function useAgentChat({
       visitorSessionId: visitorId,
       storageKeyPrefix: resolvedStorageKeyPrefix
     });
+    pendingBookingRef.current = loadPendingWidgetBooking(
+      resolvedStorageKeyPrefix,
+      visitorId
+    );
     setState(
       stateFromConversation(
         loadPersistedAgentConversation(resolvedStorageKeyPrefix, visitorId),
@@ -1027,19 +1380,22 @@ function useAgentChat({
     savePersistedAgentConversation(resolvedStorageKeyPrefix, visitorId, {
       messages: state.messages,
       pending: isAgentBusy(state.phase),
-      streamingText: state.streamingText
+      streamingText: state.streamingText,
+      toolSteps: state.toolSteps
     });
   }, [
     resolvedStorageKeyPrefix,
     state.messages,
     state.phase,
     state.streamingText,
+    state.toolSteps,
     visitorId
   ]);
   const reset = (0, import_react2.useCallback)(() => {
     runRef.current?.abort();
     runRef.current = null;
     clientRef.current.reset();
+    pendingBookingRef.current = null;
     clearPersistedAgentConversation(resolvedStorageKeyPrefix, visitorId);
     setState(initialState);
   }, [initialState, resolvedStorageKeyPrefix, visitorId]);
@@ -1051,6 +1407,7 @@ function useAgentChat({
       try {
         let streamStarted = Boolean(initialText);
         let streamed = initialText;
+        const capturedOffers = [];
         const handlers = {
           onWork: (item) => {
             if (!isActiveRun()) return;
@@ -1060,6 +1417,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 +1438,8 @@ function useAgentChat({
             setState((prev) => ({
               ...prev,
               phase: "streaming",
-              streamingText: streamed
+              streamingText: hideToolCardFences(streamed),
+              pendingOffer: prev.pendingOffer ?? capturedOffers.at(-1) ?? null
             }));
           },
           onComplete: () => {
@@ -1096,18 +1460,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 +1509,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 +1573,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 +1603,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 +1626,7 @@ function useAgentChat({
       controller,
       initialText: conversation.streamingText,
       resume: true,
-      visitorText: visitorMessage.text
+      visitorText: visitorTurnText(visitorMessage)
     });
     return () => {
       if (runRef.current === controller) {
@@ -1236,6 +1646,8 @@ function useAgentChat({
     reset,
     retry,
     submit,
+    rememberBooking,
+    forgetBooking,
     visitorSessionId: visitorId,
     sessionId: clientRef.current.getActiveSessionId()
   };
@@ -1297,7 +1709,7 @@ function unregisterAgentPanelController(customerId) {
 }
 
 // src/react/components/AgentRail/AgentRail.tsx
-var import_react5 = require("react");
+var import_react9 = require("react");
 
 // src/react/types/conversation.ts
 var defaultAgentRailTheme = {
@@ -1318,15 +1730,62 @@ var defaultAgentRailTheme = {
   fontBody: '"Mulish", "Avenir Next", "Segoe UI", sans-serif',
   fontDisplay: '"Space Grotesk", sans-serif'
 };
+var defaultDarkAgentRailTheme = {
+  ...defaultAgentRailTheme,
+  brand: "#a77bff",
+  brandSoft: "#2b2140",
+  brandDeep: "#f5f0ff",
+  surface: "#101218",
+  surfaceMuted: "#1a1e27",
+  text: "#f5f7fb",
+  textMuted: "#b6bfce",
+  textSubtle: "#919cad",
+  border: "rgb(226 232 240 / 0.16)",
+  visitorBubble: "#7c3aed",
+  success: "#55cf91",
+  danger: "#ff8da1"
+};
+
+// src/react/hooks/useAgentColorScheme.ts
+var import_react4 = require("react");
+var DARK_MODE_QUERY = "(prefers-color-scheme: dark)";
+function subscribeToDarkMode(onChange) {
+  if (typeof window === "undefined" || !window.matchMedia) {
+    return () => void 0;
+  }
+  const mediaQuery = window.matchMedia(DARK_MODE_QUERY);
+  if (typeof mediaQuery.addEventListener === "function") {
+    mediaQuery.addEventListener("change", onChange);
+    return () => mediaQuery.removeEventListener("change", onChange);
+  }
+  mediaQuery.addListener(onChange);
+  return () => mediaQuery.removeListener(onChange);
+}
+function getPrefersDarkMode() {
+  return typeof window !== "undefined" && Boolean(window.matchMedia?.(DARK_MODE_QUERY).matches);
+}
+function useAgentColorScheme(colorScheme = "auto") {
+  const prefersDarkMode = (0, import_react4.useSyncExternalStore)(
+    subscribeToDarkMode,
+    getPrefersDarkMode,
+    () => false
+  );
+  return resolveAgentColorScheme(colorScheme, prefersDarkMode);
+}
+function resolveAgentColorScheme(colorScheme = "auto", prefersDarkMode) {
+  return colorScheme === "auto" ? prefersDarkMode ? "dark" : "light" : colorScheme;
+}
 
 // src/react/components/AgentActivityBubble/AgentActivityBubble.tsx
+var import_react5 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 function workSummary(steps, failed, brandLabel) {
   const active = [...steps].reverse().find((step) => step.state === "active");
   if (active?.kind === "specialist")
     return `${active.label} is reviewing your question`;
   if (active?.kind === "search") return "Searching this site";
-  if (active) return `${brandLabel} is choosing the best way to help`;
+  if (active)
+    return brandLabel ? `${brandLabel} is choosing the best way to help` : "Choosing the best way to help";
   if (failed) return "Couldn\u2019t complete this request";
   const hasError = steps.some((step) => step.state === "error");
   const specialists = steps.filter(
@@ -1337,23 +1796,24 @@ function workSummary(steps, failed, brandLabel) {
   );
   if (hasError) return "Answered with available information";
   if (specialists.length > 1)
-    return `Answer prepared with ${specialists.length} specialists`;
+    return `Brought in ${specialists.length} specialists`;
   if (specialists.length === 1)
-    return `Answer prepared with ${specialists[0]?.label}`;
-  if (searched) return "Answer prepared from this site";
+    return `Brought in ${specialists[0]?.label}`;
+  if (searched) return "Searched this site";
   return "Answer ready";
 }
 function stepLabel(step, brandLabel) {
-  return step.kind === "planning" ? brandLabel : step.label;
+  return step.kind === "planning" ? brandLabel || "Supervisor" : step.label;
 }
 function stepDetail(step, steps) {
   if (step.kind !== "planning" || step.state !== "completed") {
     return step.detail;
   }
   const specialists = steps.filter((item) => item.kind === "specialist");
-  if (specialists.length === 1) return `Delegated to ${specialists[0]?.label}`;
+  if (specialists.length === 1)
+    return `Routed your question to ${specialists[0]?.label}`;
   if (specialists.length > 1)
-    return `Delegated to ${specialists.length} specialists`;
+    return `Routed your question to ${specialists.length} specialists`;
   if (steps.some((item) => item.kind === "search"))
     return "Used built-in Search & Discovery";
   return step.detail;
@@ -1384,13 +1844,17 @@ function PlanningIcon() {
   ) });
 }
 function AgentActivityBubble({
-  brandLabel = "Webless Guide",
+  brandLabel = "",
   brandLogoUrl,
   failed = false,
   steps
 }) {
   const active = steps.some((step) => step.state === "active");
-  const delegated = steps.some((step) => step.kind === "specialist");
+  const receiptId = steps.map((step) => step.id).join(":");
+  const [expandedReceiptId, setExpandedReceiptId] = (0, import_react5.useState)(
+    null
+  );
+  const detailsOpen = active || expandedReceiptId === receiptId;
   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,62 +1866,69 @@ 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)("div", { className: "agent-activity-bubble__details", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "agent-activity-bubble__summary",
+          "aria-expanded": detailsOpen,
+          onClick: () => {
+            if (active) return;
+            setExpandedReceiptId(
+              (current) => current === receiptId ? null : receiptId
             );
-          }) })
-        ]
-      }
-    )
+          },
+          children: "How this answer was made"
+        }
+      ),
+      detailsOpen ? /* @__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) }),
+                  step.kind === "planning" && !brandLabel ? null : /* @__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
+        );
+      }) }) : null
+    ] })
   ] });
 }
 
 // src/react/components/Composer/Composer.tsx
-var import_react4 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function SendIcon() {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M8 12V4M8 4l-3 3M8 4l3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
@@ -1468,8 +1939,8 @@ function Composer({
   variant = "default",
   onSubmit
 }) {
-  const [value, setValue] = (0, import_react4.useState)("");
-  const inputRef = (0, import_react4.useRef)(null);
+  const [value, setValue] = (0, import_react6.useState)("");
+  const inputRef = (0, import_react6.useRef)(null);
   function submitCurrent() {
     const trimmed = value.trim();
     if (!trimmed || disabled) return;
@@ -1554,34 +2025,338 @@ function FollowUpChips({
   ] });
 }
 
+// src/react/components/MessageBubble/MessageBubble.tsx
+var import_react8 = require("react");
+
+// src/react/components/BookingCard/BookingCard.tsx
+var import_react7 = 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_react7.useId)();
+  const defaultType = offer.eventTypes[0]?.uri ?? offer.slots[0]?.eventTypeUri ?? "";
+  const [step, setStep] = (0, import_react7.useState)("date");
+  const [eventTypeUri, setEventTypeUri] = (0, import_react7.useState)(defaultType);
+  const [selectedDate, setSelectedDate] = (0, import_react7.useState)("");
+  const [startTime, setStartTime] = (0, import_react7.useState)("");
+  const [name, setName] = (0, import_react7.useState)("");
+  const [email, setEmail] = (0, import_react7.useState)("");
+  const slots = (0, import_react7.useMemo)(
+    () => bookingSlotsForEventType(offer.slots, eventTypeUri),
+    [eventTypeUri, offer.slots]
+  );
+  const availableByDate = (0, import_react7.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_react7.useState)(
+    () => firstAvailableBookingMonth(slots)
+  );
+  function selectEventType(nextType) {
+    setEventTypeUri(nextType);
+    setSelectedDate("");
+    setStartTime("");
+    setVisibleMonth(
+      firstAvailableBookingMonth(bookingSlotsForEventType(offer.slots, nextType))
+    );
+  }
+  const daySlots = (0, import_react7.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_react7.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,
+  brandLogoUrl,
+  offer,
+  onBook
+}) {
+  const resolvedLogoUrl = brandLogoUrl?.trim();
+  const [failedLogoUrl, setFailedLogoUrl] = (0, import_react8.useState)(null);
+  const showBrandLogo = Boolean(resolvedLogoUrl) && failedLogoUrl !== resolvedLogoUrl;
+  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)(
+  const agentText = /* @__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: message.streaming,
+      isAnimating: isStreaming,
       linkSafety: { enabled: false },
-      mode: message.streaming ? "streaming" : "static",
+      mode: isStreaming ? "streaming" : "static",
       skipHtml: true,
-      children: message.text
+      children: displayText
     }
-  ) }) });
+  ) });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("article", { className: "message-bubble message-bubble--agent", children: [
+    displayText ? showBrandLogo ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "message-bubble__agent-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "message-bubble__agent-avatar", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "img",
+        {
+          src: resolvedLogoUrl,
+          alt: "",
+          onError: () => {
+            setFailedLogoUrl(resolvedLogoUrl ?? null);
+          }
+        }
+      ) }),
+      agentText
+    ] }) : agentText : 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 +2367,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 +2378,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 +2390,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 +2402,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",
@@ -1641,7 +2416,8 @@ function RestoreIcon() {
 function AgentRail({
   state,
   theme,
-  brandLabel = "Webless Assist",
+  colorScheme = "auto",
+  brandLabel = "",
   brandLogoUrl,
   poweredByLabel = "Powered by Webless",
   composerPlaceholder = "Ask anything\u2026",
@@ -1653,11 +2429,31 @@ function AgentRail({
   onReset,
   onRetry,
   onSubmit,
-  onFollowUpSelect
+  onFollowUpSelect,
+  onBook
 }) {
-  const transcriptRef = (0, import_react5.useRef)(null);
-  const welcomeTitleId = (0, import_react5.useId)();
-  const resolvedTheme = { ...defaultAgentRailTheme, ...theme };
+  const transcriptRef = (0, import_react9.useRef)(null);
+  const resolvedBrandLabel = brandLabel.trim();
+  const resolvedBrandLogoUrl = brandLogoUrl?.trim();
+  const [failedLogoUrl, setFailedLogoUrl] = (0, import_react9.useState)(null);
+  const showBrandLogo = Boolean(resolvedBrandLogoUrl) && failedLogoUrl !== resolvedBrandLogoUrl;
+  const resolvedColorScheme = useAgentColorScheme(colorScheme);
+  const brandedTheme = { ...defaultAgentRailTheme, ...theme };
+  const resolvedTheme = resolvedColorScheme === "dark" ? {
+    ...brandedTheme,
+    brand: theme?.brand ?? defaultDarkAgentRailTheme.brand,
+    brandDeep: defaultDarkAgentRailTheme.brandDeep,
+    brandSoft: `color-mix(in srgb, ${theme?.brand ?? defaultDarkAgentRailTheme.brand} 18%, ${defaultDarkAgentRailTheme.surface})`,
+    border: defaultDarkAgentRailTheme.border,
+    danger: defaultDarkAgentRailTheme.danger,
+    success: defaultDarkAgentRailTheme.success,
+    surface: defaultDarkAgentRailTheme.surface,
+    surfaceMuted: defaultDarkAgentRailTheme.surfaceMuted,
+    text: defaultDarkAgentRailTheme.text,
+    textMuted: defaultDarkAgentRailTheme.textMuted,
+    textSubtle: defaultDarkAgentRailTheme.textSubtle,
+    visitorBubble: theme?.visitorBubble ?? theme?.brand ?? defaultDarkAgentRailTheme.visitorBubble
+  } : brandedTheme;
   const railStyle = {
     "--rail-width": resolvedTheme.railMaxWidth,
     "--as-rail-max-width": resolvedTheme.railMaxWidth,
@@ -1675,7 +2471,8 @@ function AgentRail({
     "--as-success": resolvedTheme.success,
     "--as-danger": resolvedTheme.danger,
     "--as-font-body": resolvedTheme.fontBody,
-    "--as-font-display": resolvedTheme.fontDisplay
+    "--as-font-display": resolvedTheme.fontDisplay,
+    colorScheme: resolvedColorScheme
   };
   const isBusy = state.phase === "thinking" || state.phase === "running-tools" || state.phase === "streaming";
   const showActivity = state.toolSteps.length > 0;
@@ -1686,7 +2483,7 @@ function AgentRail({
   const greeting = state.messages.find(
     (message) => message.role === "agent" && message.id === "greeting"
   );
-  const visibleMessages = hasVisitorMessages2 ? state.messages.filter((message) => message.id !== "greeting") : [];
+  const visibleMessages = hasVisitorMessages2 ? state.messages : [];
   const lastMessage = visibleMessages.at(-1);
   const completedAnswer = showActivity && state.phase === "complete" && lastMessage?.role === "agent" ? lastMessage : null;
   const transcriptMessages = completedAnswer ? visibleMessages.slice(0, -1) : visibleMessages;
@@ -1696,8 +2493,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_react9.useEffect)(() => {
     const node = transcriptRef.current;
     if (!node) return;
     node.scrollTop = node.scrollHeight;
@@ -1708,10 +2511,11 @@ 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" : ""}`,
+      "data-color-scheme": resolvedColorScheme,
       style: railStyle,
       "aria-label": "Agent conversation",
       "aria-modal": mobileFullscreen || expanded ? true : void 0,
@@ -1719,45 +2523,42 @@ 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: [
-              brandLabel.slice(0, 1).toUpperCase(),
-              brandLogoUrl ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-                "img",
-                {
-                  className: "agent-rail__brand-logo",
-                  src: brandLogoUrl,
-                  alt: "",
-                  onError: (event) => {
-                    event.currentTarget.hidden = true;
-                  }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "agent-rail__brand-spacer", "aria-hidden": "true" }),
+          resolvedBrandLabel || showBrandLogo ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "agent-rail__identity", children: [
+            showBrandLogo ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "agent-rail__brand-mark", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "img",
+              {
+                className: "agent-rail__brand-logo",
+                src: resolvedBrandLogoUrl,
+                alt: "",
+                onError: () => {
+                  setFailedLogoUrl(resolvedBrandLogoUrl ?? null);
                 }
-              ) : null
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.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)(
+              }
+            ) }) : null,
+            resolvedBrandLabel ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "agent-rail__brand-label", children: resolvedBrandLabel }) : null
+          ] }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "agent-rail__actions", children: [
+            onReset ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               "button",
               {
                 type: "button",
@@ -1765,80 +2566,86 @@ 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",
+                "aria-label": expanded ? "Exit full screen" : "Open full screen",
                 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",
+        /* @__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,
+                brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
+                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,
             {
-              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)(
+              message,
+              brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
+              onBook
+            },
+            message.id
+          )),
+          showActivity ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             AgentActivityBubble,
             {
-              brandLabel,
-              brandLogoUrl,
+              brandLabel: resolvedBrandLabel,
+              brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
               failed: state.phase === "error",
               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 })
+          completedAnswer ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            MessageBubble,
+            {
+              message: completedAnswer,
+              brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
+              onBook
+            }
+          ) : null,
+          streamingMessage ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            MessageBubble,
+            {
+              message: streamingMessage,
+              brandLogoUrl: showBrandLogo ? resolvedBrandLogoUrl : void 0,
+              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 +2654,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 +2665,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 +2675,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 +2700,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 +2728,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,12 +2740,12 @@ 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" },
+  outline: { label: "Ask anything", aria: "Ask anything" },
   ask: { label: "Ask anything", aria: "Ask anything" },
-  fill: { label: "Assist", aria: "Open Assist" }
+  fill: { label: "Ask anything", aria: "Ask anything" }
 };
 function AssistEdgeTab({
   variant,
@@ -1933,6 +2754,7 @@ function AssistEdgeTab({
   inset,
   visible,
   label,
+  customIconUrl,
   logoUrl,
   brandColor,
   brandForeground,
@@ -1941,40 +2763,49 @@ function AssistEdgeTab({
   mobile = false,
   surfaceColor,
   textColor,
+  colorScheme = "auto",
   onOpen
 }) {
+  const resolvedColorScheme = useAgentColorScheme(colorScheme);
   const copy = VARIANT_COPY[variant];
   const visibleLabel = label?.trim() || copy.label;
+  const showLogo = Boolean(logoUrl?.trim()) && !customIconUrl?.trim();
+  const resolvedBrandColor = brandColor ?? (resolvedColorScheme === "dark" ? defaultDarkAgentRailTheme.brand : void 0);
+  const resolvedBorderColor = resolvedColorScheme === "dark" ? defaultDarkAgentRailTheme.border : borderColor;
+  const resolvedSurfaceColor = resolvedColorScheme === "dark" ? defaultDarkAgentRailTheme.surface : surfaceColor;
+  const resolvedTextColor = resolvedColorScheme === "dark" ? defaultDarkAgentRailTheme.text : textColor;
   const style = {
     "--tab-along": `${along}%`,
     "--tab-inset": `${inset}px`,
-    ...brandColor ? { "--as-brand": brandColor } : {},
+    ...resolvedBrandColor ? { "--as-brand": resolvedBrandColor } : {},
     ...brandForeground ? { "--as-visitor-text": brandForeground } : {},
-    ...borderColor ? { "--as-border": borderColor } : {},
+    ...resolvedBorderColor ? { "--as-border": resolvedBorderColor } : {},
     ...fontFamily ? { "--as-font-display": fontFamily } : {},
-    ...surfaceColor ? { "--as-surface": surfaceColor } : {},
-    ...textColor ? { "--as-text": textColor } : {}
+    ...resolvedSurfaceColor ? { "--as-surface": resolvedSurfaceColor } : {},
+    ...resolvedTextColor ? { "--as-text": resolvedTextColor } : {},
+    colorScheme: resolvedColorScheme
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "button",
     {
       type: "button",
       className: `assist-edge-tab assist-edge-tab--${variant} assist-edge-tab--${side}${mobile ? " assist-edge-tab--mobile" : ""}${visible ? " is-visible" : ""}`,
+      "data-color-scheme": resolvedColorScheme,
       style,
       "aria-label": `Open ${visibleLabel}`,
       "aria-hidden": !visible,
       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)(
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TabMarkIcon, { customIconUrl }),
+                showLogo ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "img",
                   {
                     className: "assist-edge-tab__logo",
@@ -1988,14 +2819,11 @@ function AssistEdgeTab({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.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)(
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "assist-edge-tab__label", children: visibleLabel })
+        ] }) : 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 +2835,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 +2858,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 +2867,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 +2883,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_react10.useRef)(null);
+  const [railCollapsed, setRailCollapsed] = (0, import_react10.useState)(defaultCollapsed);
+  const [railExpanded, setRailExpanded] = (0, import_react10.useState)(false);
   const pageShiftActive = shouldApplyPageShift({
     pageShift,
     isMobile,
@@ -2077,7 +2905,8 @@ function AgentWidget({
     runtimeOrigin,
     greeting: branding?.greeting
   });
-  const agentName = branding?.agentName ?? "Webless Guide";
+  const agentName = branding?.agentName ?? "";
+  const tabLabel = branding?.tabLabel ?? agentName;
   const theme = {
     ...branding?.fontFamily ? { fontBody: branding.fontFamily, fontDisplay: branding.fontFamily } : {},
     ...branding?.colors?.primary ? {
@@ -2095,8 +2924,7 @@ function AgentWidget({
     } : {},
     ...branding?.colors?.border ? { border: branding.colors.border } : {}
   };
-  const idle = state.phase === "idle" && !hasVisitorMessages(state.messages);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!registerPanelController) return;
     registerAgentPanelController(customerId, {
       open: () => setRailCollapsed(false),
@@ -2111,7 +2939,7 @@ function AgentWidget({
     if (isMobile) setRailCollapsed(false);
     await submit(message);
   }
-  (0, import_react6.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (railCollapsed) return;
     const handleKeyDown = (event) => {
       if (event.key === "Tab" && (isMobile || railExpanded)) {
@@ -2145,64 +2973,44 @@ 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.jsx)(
       "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)(
-            "div",
-            {
-              ref: railSlotRef,
-              className: "webless-agent-root__rail-slot",
-              inert: railCollapsed || void 0,
-              "aria-hidden": railCollapsed,
-              children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                AgentRail,
-                {
-                  theme,
-                  brandLabel: agentName,
-                  brandLogoUrl: branding?.logoUrl,
-                  composerPlaceholder: branding?.composerPlaceholder ?? `Ask ${agentName}\u2026`,
-                  poweredByLabel: branding?.poweredByLabel ?? "Powered by Webless",
-                  state: idle ? {
-                    ...state,
-                    followUps: createIdleSuggestions()
-                  } : state,
-                  mobileFullscreen: isMobile && !railCollapsed,
-                  expanded: railExpanded,
-                  onCollapse: !isMobile ? () => setRailCollapsed(true) : void 0,
-                  onClose: isMobile ? () => setRailCollapsed(true) : void 0,
-                  onExpandToggle: !isMobile ? () => setRailExpanded((current) => !current) : void 0,
-                  onSubmit: handleSubmit,
-                  onReset: reset,
-                  onRetry: () => void retry(),
-                  onFollowUpSelect: (label) => void handleSubmit(label)
-                }
-              )
-            }
-          ),
-          !railCollapsed && isMobile || !isMobile && railExpanded && !railCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "button",
-            {
-              type: "button",
-              className: `webless-agent-root__backdrop${isMobile ? " webless-agent-root__backdrop--mobile" : ""}`,
-              tabIndex: -1,
-              "aria-label": isMobile ? "Close agent" : "Exit focus view",
-              onClick: () => {
-                if (isMobile) {
-                  setRailCollapsed(true);
-                } else {
-                  setRailExpanded(false);
-                }
+        children: /* @__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_runtime8.jsx)(
+              AgentRail,
+              {
+                theme,
+                brandLabel: agentName,
+                brandLogoUrl: branding?.logoUrl,
+                composerPlaceholder: branding?.composerPlaceholder ?? "Ask a question\u2026",
+                poweredByLabel: branding?.poweredByLabel ?? "Powered by Webless",
+                state,
+                mobileFullscreen: isMobile && !railCollapsed,
+                expanded: railExpanded,
+                onCollapse: !isMobile ? () => setRailCollapsed(true) : void 0,
+                onClose: isMobile ? () => setRailCollapsed(true) : void 0,
+                onExpandToggle: !isMobile ? () => setRailExpanded((current) => !current) : void 0,
+                onSubmit: handleSubmit,
+                onReset: reset,
+                onRetry: () => void retry(),
+                onFollowUpSelect: (label) => void handleSubmit(label),
+                onBook: (input) => void submit(input.displayText, { runtimeText: input.runtimeText })
               }
-            }
-          ) : null
-        ]
+            )
+          }
+        )
       }
     ),
-    railCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    railCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       AssistEdgeTab,
       {
         variant: placement.variant,
@@ -2210,7 +3018,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,
@@ -2232,6 +3041,7 @@ function AgentWidget({
   DEFAULT_AGENT_PLACEMENT,
   createIdleSuggestions,
   defaultAgentRailTheme,
+  defaultDarkAgentRailTheme,
   hasVisitorMessages,
   isAgentBusy,
   normalizeAgentPlacement,