@webless/agent 0.2.14 → 0.3.0

package/dist/react.cjs

@@ -34,10 +34,90 @@ __export(react_exports, {
 module.exports = __toCommonJS(react_exports);
 
 // src/react/components/AgentWidget/AgentWidget.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
-// src/react/hooks/useAgentChat.ts
+// src/react/page-shift.ts
 var import_react = require("react");
+var PAGE_SHIFT_CLASS = "webless-agent-page-shift";
+var DEFAULT_RAIL_WIDTH_PX = 450;
+function shouldApplyPageShift(input) {
+  return input.pageShift && !input.isMobile && !input.railCollapsed && !input.railExpanded;
+}
+function resolvePageShiftWidth(railWidth) {
+  if (typeof railWidth === "number" && railWidth > 0) {
+    return railWidth;
+  }
+  if (typeof document !== "undefined") {
+    const token = getComputedStyle(document.documentElement).getPropertyValue("--as-rail-max-width").trim();
+    const parsed = Number.parseFloat(token);
+    if (Number.isFinite(parsed) && parsed > 0) {
+      return parsed;
+    }
+  }
+  return DEFAULT_RAIL_WIDTH_PX;
+}
+var savedPageMargin = null;
+function readPageMarginSnapshot(style) {
+  return {
+    value: style.getPropertyValue("margin-right"),
+    priority: style.getPropertyPriority("margin-right")
+  };
+}
+function restorePageMargin(style, snapshot) {
+  if (snapshot.value) {
+    style.setProperty("margin-right", snapshot.value, snapshot.priority || void 0);
+    return;
+  }
+  style.removeProperty("margin-right");
+}
+function snapshotPageMarginIfNeeded() {
+  if (savedPageMargin !== null) {
+    return;
+  }
+  savedPageMargin = readPageMarginSnapshot(document.documentElement.style);
+}
+function setPageMargin(margin) {
+  snapshotPageMarginIfNeeded();
+  document.documentElement.style.setProperty("margin-right", margin, "important");
+}
+function clearPageMargin() {
+  if (savedPageMargin === null) {
+    return;
+  }
+  restorePageMargin(document.documentElement.style, savedPageMargin);
+  savedPageMargin = null;
+}
+function usePageShift(input) {
+  const { active, railSlotRef } = input;
+  (0, import_react.useEffect)(() => {
+    if (typeof document === "undefined") {
+      return;
+    }
+    if (!active) {
+      document.documentElement.classList.remove(PAGE_SHIFT_CLASS);
+      clearPageMargin();
+      return;
+    }
+    document.documentElement.classList.add(PAGE_SHIFT_CLASS);
+    function applyMargin() {
+      const rail = railSlotRef.current?.querySelector(".agent-rail");
+      const width = resolvePageShiftWidth(
+        rail instanceof HTMLElement ? rail.offsetWidth : null
+      );
+      setPageMargin(`${width}px`);
+    }
+    applyMargin();
+    const frame = requestAnimationFrame(applyMargin);
+    return () => {
+      cancelAnimationFrame(frame);
+      document.documentElement.classList.remove(PAGE_SHIFT_CLASS);
+      clearPageMargin();
+    };
+  }, [active, railSlotRef]);
+}
+
+// src/react/hooks/useAgentChat.ts
+var import_react2 = require("react");
 
 // src/runtime/client.ts
 var import_client2 = require("eve/client");
@@ -255,9 +335,8 @@ function clearPersistedAgentSession(visitorSessionId, options) {
 function isTurnBoundary(event) {
   return event.type === "session.waiting" || event.type === "session.completed" || event.type === "session.failed";
 }
-function applyMessageEvent(event, rendered, handlers) {
-  const step = mapStepLabel(event);
-  if (step) handlers.onStep?.(step.label, step.detail);
+function applyMessageEvent(event, rendered, handlers, workItems) {
+  applyWorkEvent(event, handlers, workItems);
   if (event.type === "session.failed") {
     throw new Error(event.data.message || event.data.code);
   }
@@ -300,13 +379,120 @@ function renderTurn(events) {
   }
   return rendered;
 }
-function mapStepLabel(event) {
-  if (event.type !== "step.started") return null;
-  const stepIndex = event.data.stepIndex;
-  return {
-    label: "Model step running",
-    detail: typeof stepIndex === "number" ? `Step ${stepIndex + 1}` : void 0
-  };
+function emitWorkItem(item, handlers, workItems) {
+  workItems.set(item.id, item);
+  handlers.onWork?.(item);
+  handlers.onStep?.(item.label, item.detail);
+}
+function completePlanning(handlers, workItems) {
+  const planning = workItems.get("planning");
+  if (!planning || planning.state !== "active") return;
+  emitWorkItem(
+    {
+      ...planning,
+      detail: "Picked the best way to help",
+      state: "completed"
+    },
+    handlers,
+    workItems
+  );
+}
+function specialistNameFromInput(input) {
+  const message = input.message;
+  if (typeof message !== "string") return void 0;
+  const match = /^Webless-Agent-Name:\s*(.+)$/imu.exec(message);
+  return match?.[1]?.trim() || void 0;
+}
+function requestedWorkItem(action) {
+  if (action.kind === "tool-call" && action.toolName === "search_discovery") {
+    return {
+      id: action.callId,
+      kind: "search",
+      label: "Search & Discovery",
+      detail: "Searching this site",
+      state: "active"
+    };
+  }
+  if (action.kind === "subagent-call" || action.kind === "remote-agent-call" || action.kind === "tool-call" && action.toolName === "agent") {
+    const name = specialistNameFromInput(action.input) ?? "Specialist";
+    return {
+      id: action.callId,
+      kind: "specialist",
+      label: name,
+      detail: "Reviewing your question",
+      state: "active"
+    };
+  }
+  return null;
+}
+function applyWorkEvent(event, handlers, workItems) {
+  if (event.type === "step.started" && workItems.size === 0) {
+    emitWorkItem(
+      {
+        id: "planning",
+        kind: "planning",
+        label: "Understanding your question",
+        state: "active"
+      },
+      handlers,
+      workItems
+    );
+    return;
+  }
+  if (event.type === "actions.requested") {
+    completePlanning(handlers, workItems);
+    for (const action of event.data.actions) {
+      const item = requestedWorkItem(action);
+      if (item) emitWorkItem(item, handlers, workItems);
+    }
+    return;
+  }
+  if (event.type === "subagent.called") {
+    completePlanning(handlers, workItems);
+    const current2 = workItems.get(event.data.callId);
+    if (!current2) {
+      emitWorkItem(
+        {
+          id: event.data.callId,
+          kind: "specialist",
+          label: event.data.name || "Specialist",
+          detail: "Reviewing your question",
+          state: "active"
+        },
+        handlers,
+        workItems
+      );
+    }
+    return;
+  }
+  if (event.type === "subagent.completed") {
+    const current2 = workItems.get(event.data.callId);
+    if (!current2) return;
+    emitWorkItem(
+      {
+        ...current2,
+        detail: "Guidance received",
+        state: "completed"
+      },
+      handlers,
+      workItems
+    );
+    return;
+  }
+  if (event.type !== "action.result") return;
+  const { result, status } = event.data;
+  const current = workItems.get(result.callId);
+  if (!current) return;
+  const failed = status !== "completed" || result.isError === true;
+  emitWorkItem(
+    {
+      ...current,
+      detail: failed ? "Couldn\u2019t complete; continuing with available information" : current.kind === "search" ? "Found relevant site content" : "Guidance received",
+      state: failed ? "error" : "completed"
+    },
+    handlers,
+    workItems
+  );
 }
 var AgentSession = class {
   constructor(indexId, version, runtimeOrigin, visitorSessionId, storeOptions, getUnpublishedPreviewGrant) {
@@ -424,10 +610,11 @@ var AgentSession = class {
     this.activeResponse = response;
     let streamIndex = session?.state.streamIndex ?? 0;
     let rendered = "";
+    const workItems = /* @__PURE__ */ new Map();
     try {
       for await (const event of response) {
         if (signal.aborted) break;
-        rendered = applyMessageEvent(event, rendered, handlers);
+        rendered = applyMessageEvent(event, rendered, handlers, workItems);
         streamIndex += 1;
         if (session) {
           savePersistedAgentSession(
@@ -469,6 +656,10 @@ var AgentSession = class {
       return null;
     }
     let rendered = renderTurn(turnEvents);
+    const workItems = /* @__PURE__ */ new Map();
+    for (const event of turnEvents) {
+      applyWorkEvent(event, handlers, workItems);
+    }
     if (rendered.startsWith(initialText)) {
       const missedText = rendered.slice(initialText.length);
       if (missedText) handlers.onDelta(missedText);
@@ -503,7 +694,7 @@ var AgentSession = class {
     let streamIndex = snapshot.session.streamIndex;
     for await (const event of session.stream({ signal })) {
       if (signal.aborted) break;
-      rendered = applyMessageEvent(event, rendered, handlers);
+      rendered = applyMessageEvent(event, rendered, handlers, workItems);
       streamIndex += 1;
       savePersistedAgentSession(
         this.visitorSessionId,
@@ -656,57 +847,54 @@ function clearPersistedAgentConversation(storageKeyPrefix, visitorSessionId) {
 }
 
 // src/react/hooks/useAgentChat.ts
-var GREETING_MESSAGE = {
-  id: "greeting",
-  role: "agent",
-  text: "Hi! I'm connected to the Webless Agent Runtime. Ask anything about your published site index.",
-  createdAt: 0
-};
-var INITIAL_STATE = {
-  phase: "idle",
-  messages: [GREETING_MESSAGE],
-  toolSteps: [],
-  journey: null,
-  followUps: [],
-  streamingText: "",
-  error: null
-};
-function stateFromConversation(conversation) {
-  if (!conversation || conversation.messages.length === 0) return INITIAL_STATE;
+var DEFAULT_GREETING = "Hi! I can search this site or bring in a specialist when it helps. What would you like to know?";
+function createInitialState(greeting = DEFAULT_GREETING) {
+  return {
+    phase: "idle",
+    messages: [
+      {
+        id: "greeting",
+        role: "agent",
+        text: greeting,
+        createdAt: 0
+      }
+    ],
+    toolSteps: [],
+    journey: null,
+    followUps: [],
+    streamingText: "",
+    error: null
+  };
+}
+function stateFromConversation(conversation, initialState) {
+  if (!conversation || conversation.messages.length === 0) return initialState;
   return {
-    ...INITIAL_STATE,
+    ...initialState,
     messages: conversation.messages,
     phase: conversation.pending ? conversation.streamingText ? "streaming" : "thinking" : "complete",
     streamingText: conversation.streamingText
   };
 }
-var STATUS_SEQUENCE = [
-  { id: "s1", label: "Starting Eve session", ms: 400 },
-  { id: "s2", label: "Connecting to runtime", ms: 500 }
-];
-function delay(ms, signal) {
-  return new Promise((resolve, reject) => {
-    const timer = window.setTimeout(resolve, ms);
-    signal.addEventListener(
-      "abort",
-      () => {
-        window.clearTimeout(timer);
-        reject(new DOMException("Aborted", "AbortError"));
-      },
-      { once: true }
-    );
-  });
+function upsertToolStep(steps, item) {
+  const next = {
+    id: item.id,
+    kind: item.kind,
+    label: item.label,
+    state: item.state,
+    ...item.detail ? { detail: item.detail } : {}
+  };
+  const index = steps.findIndex((step) => step.id === item.id);
+  if (index < 0) return [...steps, next];
+  return steps.map((step, stepIndex) => stepIndex === index ? next : step);
 }
-async function runStatusSequence(signal, onStep) {
-  for (const item of STATUS_SEQUENCE) {
-    onStep({
-      id: item.id,
-      label: item.label,
-      detail: item.detail,
-      state: "active"
-    });
-    await delay(item.ms, signal);
-  }
+function completeActivePlanning(steps) {
+  return steps.map(
+    (step) => step.kind === "planning" && step.state === "active" ? {
+      ...step,
+      detail: "Prepared a response",
+      state: "completed"
+    } : step
+  );
 }
 function useAgentChat({
   customerId,
@@ -715,9 +903,14 @@ function useAgentChat({
   version,
   runtimeOrigin,
   visitorSessionId,
-  storageKeyPrefix
+  storageKeyPrefix,
+  greeting
 }) {
-  const previewGrantProviderRef = (0, import_react.useRef)(getUnpublishedPreviewGrant);
+  const initialState = (0, import_react2.useMemo)(
+    () => createInitialState(greeting?.trim() || DEFAULT_GREETING),
+    [greeting]
+  );
+  const previewGrantProviderRef = (0, import_react2.useRef)(getUnpublishedPreviewGrant);
   previewGrantProviderRef.current = getUnpublishedPreviewGrant;
   const resolveUnpublishedPreviewGrant = () => {
     const provider = previewGrantProviderRef.current;
@@ -730,7 +923,7 @@ function useAgentChat({
     }
     return provider();
   };
-  const resolvedStorageKeyPrefix = (0, import_react.useMemo)(
+  const resolvedStorageKeyPrefix = (0, import_react2.useMemo)(
     () => storageKeyPrefix?.trim() || buildAgentStorageKeyPrefix({
       customerId,
       indexId,
@@ -739,19 +932,20 @@ function useAgentChat({
     }),
     [customerId, indexId, runtimeOrigin, storageKeyPrefix, version]
   );
-  const visitorId = (0, import_react.useMemo)(
+  const visitorId = (0, import_react2.useMemo)(
     () => visitorSessionId?.trim() || getOrCreateVisitorSessionId({
       storageKeyPrefix: resolvedStorageKeyPrefix
     }),
     [resolvedStorageKeyPrefix, visitorSessionId]
   );
-  const [state, setState] = (0, import_react.useState)(
+  const [state, setState] = (0, import_react2.useState)(
     () => stateFromConversation(
-      loadPersistedAgentConversation(resolvedStorageKeyPrefix, visitorId)
+      loadPersistedAgentConversation(resolvedStorageKeyPrefix, visitorId),
+      initialState
     )
   );
-  const runRef = (0, import_react.useRef)(null);
-  const clientRef = (0, import_react.useRef)(
+  const runRef = (0, import_react2.useRef)(null);
+  const clientRef = (0, import_react2.useRef)(
     createAgentClient({
       customerId,
       getUnpublishedPreviewGrant: resolveUnpublishedPreviewGrant,
@@ -762,9 +956,9 @@ function useAgentChat({
       storageKeyPrefix: resolvedStorageKeyPrefix
     })
   );
-  const identityKey = `${customerId ?? ""}|${indexId}|${version ?? "published"}|${runtimeOrigin ?? ""}|${resolvedStorageKeyPrefix}|${visitorId}`;
-  const identityRef = (0, import_react.useRef)(identityKey);
-  (0, import_react.useEffect)(() => {
+  const identityKey = `${customerId ?? ""}|${indexId}|${version ?? "published"}|${runtimeOrigin ?? ""}|${resolvedStorageKeyPrefix}|${visitorId}|${greeting ?? ""}`;
+  const identityRef = (0, import_react2.useRef)(identityKey);
+  (0, import_react2.useEffect)(() => {
     if (identityRef.current === identityKey) {
       return;
     }
@@ -782,19 +976,21 @@ function useAgentChat({
     });
     setState(
       stateFromConversation(
-        loadPersistedAgentConversation(resolvedStorageKeyPrefix, visitorId)
+        loadPersistedAgentConversation(resolvedStorageKeyPrefix, visitorId),
+        initialState
       )
     );
   }, [
     customerId,
     identityKey,
     indexId,
+    initialState,
     runtimeOrigin,
     resolvedStorageKeyPrefix,
     version,
     visitorId
   ]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!hasVisitorMessages(state.messages)) return;
     savePersistedAgentConversation(resolvedStorageKeyPrefix, visitorId, {
       messages: state.messages,
@@ -808,14 +1004,14 @@ function useAgentChat({
     state.streamingText,
     visitorId
   ]);
-  const reset = (0, import_react.useCallback)(() => {
+  const reset = (0, import_react2.useCallback)(() => {
     runRef.current?.abort();
     runRef.current = null;
     clientRef.current.reset();
     clearPersistedAgentConversation(resolvedStorageKeyPrefix, visitorId);
-    setState(INITIAL_STATE);
-  }, [resolvedStorageKeyPrefix, visitorId]);
-  const runTurn = (0, import_react.useCallback)(
+    setState(initialState);
+  }, [initialState, resolvedStorageKeyPrefix, visitorId]);
+  const runTurn = (0, import_react2.useCallback)(
     async (input) => {
       const { controller, initialText = "", resume, visitorText } = input;
       const { signal } = controller;
@@ -823,35 +1019,23 @@ function useAgentChat({
       try {
         let streamStarted = Boolean(initialText);
         let streamed = initialText;
-        const planningPromise = resume ? Promise.resolve() : runStatusSequence(signal, (step) => {
-          if (streamStarted || !isActiveRun()) return;
-          setState((prev) => ({
-            ...prev,
-            phase: "running-tools",
-            toolSteps: [step]
-          }));
-        });
         const handlers = {
-          onStep: (label, detail) => {
-            if (streamStarted || !isActiveRun()) return;
+          onWork: (item) => {
+            if (!isActiveRun()) return;
             setState((prev) => ({
               ...prev,
-              phase: "running-tools",
-              toolSteps: [
-                { id: `step-${label}`, label, detail, state: "active" }
-              ]
+              phase: item.state === "active" ? "running-tools" : prev.phase,
+              toolSteps: upsertToolStep(prev.toolSteps, item)
             }));
           },
           onDelta: (delta) => {
             if (!isActiveRun()) return;
-            void planningPromise.catch(() => {
-            });
             if (!streamStarted) {
               streamStarted = true;
               setState((prev) => ({
                 ...prev,
                 phase: "streaming",
-                toolSteps: [],
+                toolSteps: completeActivePlanning(prev.toolSteps),
                 streamingText: ""
               }));
             }
@@ -879,8 +1063,6 @@ function useAgentChat({
             signal
           });
         }
-        await planningPromise.catch(() => {
-        });
         if (!isActiveRun() || finalText === null) return;
         const agentMessage = {
           id: `agent-${Date.now()}`,
@@ -892,7 +1074,7 @@ function useAgentChat({
           ...prev,
           phase: "complete",
           messages: [...prev.messages, agentMessage],
-          toolSteps: [],
+          toolSteps: completeActivePlanning(prev.toolSteps),
           streamingText: "",
           followUps: [],
           journey: null
@@ -907,7 +1089,13 @@ function useAgentChat({
         setState((prev) => ({
           ...prev,
           phase: "complete",
-          toolSteps: [],
+          toolSteps: prev.toolSteps.map(
+            (step) => step.state === "active" ? {
+              ...step,
+              detail: "Couldn\u2019t complete this step",
+              state: "error"
+            } : step
+          ),
           streamingText: "",
           error: message
         }));
@@ -916,7 +1104,7 @@ function useAgentChat({
     },
     []
   );
-  const submit = (0, import_react.useCallback)(
+  const submit = (0, import_react2.useCallback)(
     async (visitorText) => {
       if (runRef.current) {
         runRef.current.abort();
@@ -935,7 +1123,12 @@ function useAgentChat({
         phase: "thinking",
         messages: [...prev.messages, visitorMessage],
         toolSteps: [
-          { id: "s1", label: "Starting Eve session", state: "active" }
+          {
+            id: "planning",
+            kind: "planning",
+            label: "Understanding your question",
+            state: "active"
+          }
         ],
         journey: null,
         followUps: [],
@@ -946,7 +1139,7 @@ function useAgentChat({
     },
     [runTurn]
   );
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const conversation = loadPersistedAgentConversation(
       resolvedStorageKeyPrefix,
       visitorId
@@ -969,7 +1162,7 @@ function useAgentChat({
       controller.abort();
     };
   }, [identityKey, resolvedStorageKeyPrefix, runTurn, visitorId]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     return () => {
       runRef.current?.abort();
       runRef.current = null;
@@ -998,12 +1191,12 @@ function isAgentBusy(phase) {
 }
 
 // src/react/hooks/useIsMobile.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 function useIsMobile(breakpoint = 767) {
-  const [isMobile, setIsMobile] = (0, import_react2.useState)(
+  const [isMobile, setIsMobile] = (0, import_react3.useState)(
     () => typeof window !== "undefined" && window.matchMedia(`(max-width: ${breakpoint}px)`).matches
   );
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const media = window.matchMedia(`(max-width: ${breakpoint}px)`);
     const onChange = () => setIsMobile(media.matches);
     onChange();
@@ -1040,81 +1233,95 @@ function unregisterAgentPanelController(customerId) {
 }
 
 // src/react/components/AgentRail/AgentRail.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
-// src/react/components/ToolTimeline/ToolTimeline.tsx
+// src/react/types/conversation.ts
+var defaultAgentRailTheme = {
+  railMaxWidth: "450px",
+  brand: "#6f16ff",
+  brandSoft: "#f3edff",
+  brandDeep: "#12043e",
+  surface: "#ffffff",
+  surfaceMuted: "#f4f6fb",
+  text: "#171b2a",
+  textMuted: "#5a6378",
+  textSubtle: "#8a94a8",
+  border: "rgb(42 51 70 / 0.1)",
+  visitorBubble: "#6f16ff",
+  visitorText: "#ffffff",
+  success: "#18794e",
+  danger: "#c94b63",
+  fontBody: '"Mulish", "Avenir Next", "Segoe UI", sans-serif',
+  fontDisplay: '"Space Grotesk", sans-serif'
+};
+
+// src/react/components/AgentActivityBubble/AgentActivityBubble.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function SpinnerIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "agent-status__spinner", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8", cy: "8", r: "6", stroke: "currentColor", strokeWidth: "1.5", strokeOpacity: "0.25" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 8a6 6 0 0 0-6-6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
-  ] });
-}
-function getCurrentStep(steps) {
-  const active = steps.find((step) => step.state === "active");
-  if (active) return active;
-  const error = steps.find((step) => step.state === "error");
-  if (error) return error;
-  const pending = steps.find((step) => step.state === "pending");
-  if (pending) return pending;
-  return steps.at(-1) ?? null;
-}
-function ToolTimeline({
-  steps,
-  streamingText,
-  showStreaming = false,
-  inline = false
-}) {
-  if (steps.length === 0 && !(showStreaming && streamingText)) return null;
-  const currentStep = getCurrentStep(steps);
-  const showStatus = currentStep && currentStep.state !== "completed" && !(showStreaming && streamingText);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
-    {
-      className: `tool-timeline${inline ? " tool-timeline--inline" : ""}`,
-      role: "status",
-      "aria-live": "polite",
-      "aria-label": "Agent progress",
-      children: [
-        showStatus ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "agent-status", children: [
-          currentStep.state === "error" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "agent-status__icon agent-status__icon--error", "aria-hidden": "true", children: "!" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "agent-status__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SpinnerIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "agent-status__copy", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "agent-status__label", children: currentStep.label }),
-            currentStep.detail ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "agent-status__detail", children: currentStep.detail }) : null
-          ] })
-        ] }, currentStep.id) : null,
-        showStreaming && streamingText ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "tool-timeline__streaming-text", children: [
-          streamingText,
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "tool-timeline__cursor", "aria-hidden": "true" })
-        ] }) : null
-      ]
-    }
+function workSummary(steps) {
+  const active = [...steps].reverse().find((step) => step.state === "active");
+  if (active?.kind === "specialist") return `Working with ${active.label}`;
+  if (active?.kind === "search") return "Searching this site";
+  if (active) return active.label;
+  const hasError = steps.some((step) => step.state === "error");
+  const specialists = steps.filter(
+    (step) => step.kind === "specialist" && step.state === "completed"
   );
+  const searched = steps.some(
+    (step) => step.kind === "search" && step.state === "completed"
+  );
+  if (hasError) return "Answered with available information";
+  if (specialists.length > 1)
+    return `Consulted ${specialists.length} specialists`;
+  if (specialists.length === 1) return `Consulted ${specialists[0]?.label}`;
+  if (searched) return "Searched this site";
+  return "Prepared a response";
 }
-
-// src/react/components/AgentActivityBubble/AgentActivityBubble.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function AgentActivityBubble({
-  steps,
-  streamingText,
-  showStreaming = false
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("article", { className: "agent-activity-bubble", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "agent-activity-bubble__shell", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    ToolTimeline,
-    {
-      steps,
-      streamingText,
-      showStreaming,
-      inline: true
-    }
-  ) }) });
+function AgentActivityBubble({ steps }) {
+  const active = steps.some((step) => step.state === "active");
+  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)(
+        "span",
+        {
+          className: `agent-activity-bubble__pulse${active ? " is-active" : ""}`,
+          "aria-hidden": "true"
+        }
+      ),
+      workSummary(steps)
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("details", { className: "agent-activity-bubble__details", open: active, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("summary", { children: "Work details" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "agent-activity-bubble__steps", children: steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "li",
+        {
+          className: "agent-activity-bubble__step",
+          "data-state": step.state,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                className: "agent-activity-bubble__step-icon",
+                "aria-hidden": "true",
+                children: step.state === "completed" ? "\u2713" : step.state === "error" ? "!" : ""
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "agent-activity-bubble__step-copy", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: step.label }),
+              step.detail ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", { children: step.detail }) : null
+            ] })
+          ]
+        },
+        step.id
+      )) })
+    ] })
+  ] });
 }
 
 // src/react/components/Composer/Composer.tsx
-var import_react3 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react4 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function SendIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M8 12V4M8 4l-3 3M8 4l3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  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" }) });
 }
 function Composer({
   disabled = false,
@@ -1122,8 +1329,8 @@ function Composer({
   variant = "default",
   onSubmit
 }) {
-  const [value, setValue] = (0, import_react3.useState)("");
-  const inputRef = (0, import_react3.useRef)(null);
+  const [value, setValue] = (0, import_react4.useState)("");
+  const inputRef = (0, import_react4.useRef)(null);
   function submitCurrent() {
     const trimmed = value.trim();
     if (!trimmed || disabled) return;
@@ -1141,8 +1348,8 @@ function Composer({
       submitCurrent();
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("form", { className: `composer${variant === "dock" ? " composer--dock" : ""}`, onSubmit: handleSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "composer__field", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("form", { className: `composer${variant === "dock" ? " composer--dock" : ""}`, onSubmit: handleSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "composer__field", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "textarea",
       {
         ref: inputRef,
@@ -1156,21 +1363,21 @@ function Composer({
         onKeyDown: handleKeyDown
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "button",
       {
         type: "submit",
         className: "composer__send",
         disabled: disabled || !value.trim(),
         "aria-label": "Send message",
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SendIcon, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SendIcon, {})
       }
     )
   ] }) });
 }
 
 // src/react/components/FollowUpChips/FollowUpChips.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function FollowUpChips({
   suggestions,
   disabled = false,
@@ -1180,7 +1387,7 @@ function FollowUpChips({
 }) {
   if (suggestions.length === 0) return null;
   if (variant === "dock") {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "followups followups--dock", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "followups__scroll", children: suggestions.map((suggestion) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "followups followups--dock", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "followups__scroll", children: suggestions.map((suggestion) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "button",
       {
         type: "button",
@@ -1192,9 +1399,9 @@ function FollowUpChips({
       suggestion.id
     )) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "followups", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "followups__label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "followups__list", children: suggestions.map((suggestion) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "followups", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "followups__label", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "followups__list", children: suggestions.map((suggestion) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "button",
       {
         type: "button",
@@ -1211,12 +1418,12 @@ function FollowUpChips({
 // src/react/components/MessageBubble/MessageBubble.tsx
 var import_streamdown = require("streamdown");
 var import_styles = require("streamdown/styles.css");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function MessageBubble({ message }) {
   if (message.role === "visitor") {
-    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--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--agent", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "message-bubble__text", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("article", { className: "message-bubble message-bubble--agent", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "message-bubble__text", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     import_streamdown.Streamdown,
     {
       animated: true,
@@ -1233,12 +1440,20 @@ function MessageBubble({ message }) {
 }
 
 // src/react/components/AgentRail/AgentRail.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function MinimizeIcon() {
-  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", stroke: "currentColor", strokeWidth: "1.7", strokeLinecap: "round" }) });
+  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)(
+    "path",
+    {
+      d: "M3.5 8h9",
+      stroke: "currentColor",
+      strokeWidth: "1.7",
+      strokeLinecap: "round"
+    }
+  ) });
 }
 function ExpandIcon() {
-  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_runtime5.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "path",
     {
       d: "M6 3.5H3.5V6M10 3.5h2.5V6M10 12.5h2.5V10M6 12.5H3.5V10",
@@ -1250,7 +1465,7 @@ function ExpandIcon() {
   ) });
 }
 function RestoreIcon() {
-  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_runtime5.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "path",
     {
       d: "M5.5 5.5H3.5V7.5M10.5 5.5h2V7.5M10.5 10.5h2V8.5M5.5 10.5H3.5V8.5",
@@ -1265,6 +1480,7 @@ function AgentRail({
   state,
   theme,
   brandLabel = "Webless Assist",
+  brandLogoUrl,
   poweredByLabel = "Powered by Webless",
   composerPlaceholder = "Ask anything\u2026",
   mobileFullscreen = false,
@@ -1275,11 +1491,32 @@ function AgentRail({
   onSubmit,
   onFollowUpSelect
 }) {
-  const transcriptRef = (0, import_react4.useRef)(null);
-  const railStyle = theme?.railMaxWidth ? { ["--rail-width"]: theme.railMaxWidth, ["--as-rail-max-width"]: theme.railMaxWidth } : void 0;
+  const transcriptRef = (0, import_react5.useRef)(null);
+  const resolvedTheme = { ...defaultAgentRailTheme, ...theme };
+  const railStyle = {
+    "--rail-width": resolvedTheme.railMaxWidth,
+    "--as-rail-max-width": resolvedTheme.railMaxWidth,
+    "--as-brand": resolvedTheme.brand,
+    "--as-brand-soft": resolvedTheme.brandSoft,
+    "--as-brand-deep": resolvedTheme.brandDeep,
+    "--as-surface": resolvedTheme.surface,
+    "--as-surface-muted": resolvedTheme.surfaceMuted,
+    "--as-text": resolvedTheme.text,
+    "--as-text-muted": resolvedTheme.textMuted,
+    "--as-text-subtle": resolvedTheme.textSubtle,
+    "--as-border": resolvedTheme.border,
+    "--as-visitor-bubble": resolvedTheme.visitorBubble,
+    "--as-visitor-text": resolvedTheme.visitorText,
+    "--as-success": resolvedTheme.success,
+    "--as-danger": resolvedTheme.danger,
+    "--as-font-body": resolvedTheme.fontBody,
+    "--as-font-display": resolvedTheme.fontDisplay
+  };
   const isBusy = state.phase === "thinking" || state.phase === "running-tools" || state.phase === "streaming";
-  const showActivity = state.toolSteps.length > 0 && (state.phase === "thinking" || state.phase === "running-tools");
-  const hasVisitorMessages2 = state.messages.some((message) => message.role === "visitor");
+  const showActivity = state.toolSteps.length > 0;
+  const hasVisitorMessages2 = state.messages.some(
+    (message) => message.role === "visitor"
+  );
   const showIdleFollowUps = !hasVisitorMessages2 && state.followUps.length > 0;
   const showDockFollowUps = expanded && showIdleFollowUps;
   const streamingMessage = state.phase === "streaming" && state.streamingText ? {
@@ -1289,46 +1526,77 @@ function AgentRail({
     streaming: true,
     text: state.streamingText
   } : null;
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const node = transcriptRef.current;
     if (!node) return;
     node.scrollTop = node.scrollHeight;
-  }, [state.messages, state.toolSteps, state.streamingText, state.followUps, state.journey]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  }, [
+    state.messages,
+    state.toolSteps,
+    state.streamingText,
+    state.followUps,
+    state.journey
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "aside",
     {
       className: `agent-rail${mobileFullscreen ? " agent-rail--mobile-fullscreen" : ""}${expanded ? " agent-rail--expanded" : ""}`,
       style: railStyle,
       "aria-label": "Agent conversation",
       children: [
-        /* @__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)(
+        /* @__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)(
             "button",
             {
               type: "button",
               className: "agent-rail__collapse",
               "aria-label": "Collapse assist",
               onClick: onCollapse,
-              children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MinimizeIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MinimizeIcon, {})
+            }
+          ) : onClose ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "agent-rail__close",
+              "aria-label": "Close agent",
+              onClick: onClose,
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MinimizeIcon, {})
             }
-          ) : 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_runtime6.jsx)(MinimizeIcon, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "agent-rail__brand-spacer", "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "agent-rail__brand-label", children: brandLabel }),
-          onExpandToggle ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          ) : /* @__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;
+                  }
+                }
+              ) : null
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "agent-rail__brand-label", children: brandLabel })
+          ] }),
+          onExpandToggle ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "button",
             {
               type: "button",
               className: "agent-rail__expand",
               "aria-label": expanded ? "Restore assist panel" : "Expand assist panel",
               onClick: onExpandToggle,
-              children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RestoreIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ExpandIcon, {})
+              children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RestoreIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExpandIcon, {})
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "agent-rail__brand-spacer", "aria-hidden": "true" })
+          ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "agent-rail__brand-spacer", "aria-hidden": "true" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref: transcriptRef, className: "agent-rail__transcript", children: [
-          state.messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageBubble, { message }, message.id)),
-          streamingMessage ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageBubble, { message: streamingMessage }) : null,
-          showActivity ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AgentActivityBubble, { steps: state.toolSteps }) : null,
-          !expanded && showIdleFollowUps ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "agent-rail__followups-slot", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { ref: transcriptRef, className: "agent-rail__transcript", children: [
+          state.messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MessageBubble, { message }, message.id)),
+          streamingMessage ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MessageBubble, { message: streamingMessage }) : null,
+          showActivity ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AgentActivityBubble, { steps: state.toolSteps }) : null,
+          !expanded && showIdleFollowUps ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "agent-rail__followups-slot", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             FollowUpChips,
             {
               suggestions: state.followUps,
@@ -1337,10 +1605,17 @@ function AgentRail({
               onSelect: (suggestion) => onFollowUpSelect?.(suggestion.label)
             }
           ) }) : null,
-          state.error ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { role: "alert", style: { fontSize: 13, color: "var(--as-danger)", margin: 0 }, children: state.error }) : null
+          state.error ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "p",
+            {
+              role: "alert",
+              style: { fontSize: 13, color: "var(--as-danger)", margin: 0 },
+              children: state.error
+            }
+          ) : null
         ] }),
-        expanded ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "agent-rail__dock-wrap", children: [
-          showDockFollowUps ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "agent-rail__dock-followups", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        expanded ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "agent-rail__dock-wrap", children: [
+          showDockFollowUps ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "agent-rail__dock-followups", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             FollowUpChips,
             {
               variant: "dock",
@@ -1349,7 +1624,7 @@ function AgentRail({
               onSelect: (suggestion) => onFollowUpSelect?.(suggestion.label)
             }
           ) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "agent-rail__dock", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "agent-rail__dock", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             Composer,
             {
               variant: "dock",
@@ -1358,12 +1633,12 @@ function AgentRail({
               onSubmit
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "agent-rail__footer", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "agent-rail__footer-disclaimer", children: "AI can make mistakes. Check important info." }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "agent-rail__footer-note", children: poweredByLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "agent-rail__footer", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "agent-rail__footer-disclaimer", children: "AI can make mistakes. Check important info." }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "agent-rail__footer-note", children: poweredByLabel })
           ] })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "agent-rail__composer-wrap", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "agent-rail__composer-wrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             Composer,
             {
               disabled: isBusy,
@@ -1371,9 +1646,9 @@ function AgentRail({
               onSubmit
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "agent-rail__footer", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "agent-rail__footer-disclaimer", children: "AI can make mistakes. Check important info." }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "agent-rail__footer-note", children: poweredByLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "agent-rail__footer", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "agent-rail__footer-disclaimer", children: "AI can make mistakes. Check important info." }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "agent-rail__footer-note", children: poweredByLabel })
           ] })
         ] })
       ]
@@ -1382,22 +1657,67 @@ function AgentRail({
 }
 
 // src/react/components/AssistEdgeTab/AssistEdgeTab.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function SparklesIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { className: "assist-edge-tab__sparkles", viewBox: "0 0 18 16", fill: "none", "aria-hidden": "true", children: [
-    /* @__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_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_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", fill: "currentColor" })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "svg",
+    {
+      className: "assist-edge-tab__sparkles",
+      viewBox: "0 0 18 16",
+      fill: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.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)(
+          "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)(
+          "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",
+            fill: "currentColor"
+          }
+        )
+      ]
+    }
+  );
 }
 function ChevronLeftIcon() {
-  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", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  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: "M10 4L6 8l4 4",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
 }
 function ChevronDownIcon() {
-  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", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  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 6l4 4 4-4",
+      stroke: "currentColor",
+      strokeWidth: "1.6",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
 }
 function DragDots() {
-  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)) });
+  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)) });
 }
 var VARIANT_COPY = {
   outline: { label: "Assist", aria: "Open Assist" },
@@ -1410,38 +1730,71 @@ function AssistEdgeTab({
   along,
   inset,
   visible,
+  label,
+  logoUrl,
+  brandColor,
+  fontFamily,
   onOpen
 }) {
   const copy = VARIANT_COPY[variant];
+  const visibleLabel = label?.trim() || copy.label;
   const style = {
     "--tab-along": `${along}%`,
-    "--tab-inset": `${inset}px`
+    "--tab-inset": `${inset}px`,
+    ...brandColor ? { "--as-brand": brandColor } : {},
+    ...fontFamily ? { "--as-font-display": fontFamily } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "button",
     {
       type: "button",
       className: `assist-edge-tab assist-edge-tab--${variant} assist-edge-tab--${side}${visible ? " is-visible" : ""}`,
       style,
-      "aria-label": copy.aria,
+      "aria-label": `Open ${visibleLabel}`,
       "aria-hidden": !visible,
       tabIndex: visible ? 0 : -1,
       onClick: onOpen,
       children: [
-        variant === "outline" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SparklesIcon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "assist-edge-tab__label", children: copy.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronDownIcon, {})
+        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)(
+              "img",
+              {
+                className: "assist-edge-tab__logo",
+                src: logoUrl,
+                alt: "",
+                onError: (event) => {
+                  event.currentTarget.hidden = true;
+                }
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "assist-edge-tab__label", children: visibleLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChevronDownIcon, {})
         ] }) : null,
-        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: copy.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DragDots, {})
+        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, {})
         ] }) : null,
-        variant === "fill" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SparklesIcon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "assist-edge-tab__label", children: copy.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronLeftIcon, {})
+        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)(
+              "img",
+              {
+                className: "assist-edge-tab__logo",
+                src: logoUrl,
+                alt: "",
+                onError: (event) => {
+                  event.currentTarget.hidden = true;
+                }
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "assist-edge-tab__label", children: visibleLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChevronLeftIcon, {})
         ] }) : null
       ]
     }
@@ -1449,7 +1802,7 @@ function AssistEdgeTab({
 }
 
 // src/react/components/AgentWidget/AgentWidget.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function AgentWidget({
   indexId,
   customerId,
@@ -1458,21 +1811,53 @@ function AgentWidget({
   runtimeOrigin,
   placement: placementInput,
   defaultCollapsed = true,
-  registerPanelController = false
+  pageShift = true,
+  registerPanelController = false,
+  branding
 }) {
   const isMobile = useIsMobile();
   const placement = normalizeAgentPlacement(placementInput);
-  const [railCollapsed, setRailCollapsed] = (0, import_react5.useState)(defaultCollapsed);
-  const [railExpanded, setRailExpanded] = (0, import_react5.useState)(false);
+  const railSlotRef = (0, import_react6.useRef)(null);
+  const [railCollapsed, setRailCollapsed] = (0, import_react6.useState)(defaultCollapsed);
+  const [railExpanded, setRailExpanded] = (0, import_react6.useState)(false);
+  const pageShiftActive = shouldApplyPageShift({
+    pageShift,
+    isMobile,
+    railCollapsed,
+    railExpanded
+  });
+  usePageShift({
+    active: pageShiftActive,
+    railSlotRef
+  });
   const { state, submit } = useAgentChat({
     customerId,
     getUnpublishedPreviewGrant,
     indexId,
     version,
-    runtimeOrigin
+    runtimeOrigin,
+    greeting: branding?.greeting
   });
+  const agentName = branding?.agentName ?? "Webless Guide";
+  const theme = {
+    ...branding?.fontFamily ? { fontBody: branding.fontFamily, fontDisplay: branding.fontFamily } : {},
+    ...branding?.colors?.primary ? {
+      brand: branding.colors.primary,
+      visitorBubble: branding.colors.primary
+    } : {},
+    ...branding?.colors?.primarySoft ? { brandSoft: branding.colors.primarySoft } : {},
+    ...branding?.colors?.primaryForeground ? { visitorText: branding.colors.primaryForeground } : {},
+    ...branding?.colors?.surface ? { surface: branding.colors.surface } : {},
+    ...branding?.colors?.surfaceMuted ? { surfaceMuted: branding.colors.surfaceMuted } : {},
+    ...branding?.colors?.text ? { text: branding.colors.text } : {},
+    ...branding?.colors?.textMuted ? {
+      textMuted: branding.colors.textMuted,
+      textSubtle: branding.colors.textMuted
+    } : {},
+    ...branding?.colors?.border ? { border: branding.colors.border } : {}
+  };
   const idle = state.phase === "idle" && !hasVisitorMessages(state.messages);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!registerPanelController) return;
     registerAgentPanelController(customerId, {
       open: () => setRailCollapsed(false),
@@ -1487,47 +1872,56 @@ function AgentWidget({
     if (isMobile) setRailCollapsed(false);
     await submit(message);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "webless-agent-root", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "webless-agent-root", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
         className: `webless-agent-root__shell${railCollapsed ? " webless-agent-root__shell--collapsed" : ""}${railExpanded ? " webless-agent-root__shell--expanded" : ""}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          "div",
-          {
-            className: "webless-agent-root__rail-slot",
-            inert: railCollapsed || void 0,
-            "aria-hidden": railCollapsed,
-            children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-              AgentRail,
-              {
-                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,
-                onFollowUpSelect: (label) => void handleSubmit(label)
-              }
-            )
-          }
-        )
+        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,
+                  onFollowUpSelect: (label) => void handleSubmit(label)
+                }
+              )
+            }
+          ),
+          !isMobile && railExpanded && !railCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "webless-agent-root__backdrop",
+              tabIndex: -1,
+              "aria-label": "Close expanded assist",
+              onClick: () => setRailExpanded(false)
+            }
+          ) : null
+        ]
       }
     ),
-    !isMobile && railExpanded && !railCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      "button",
-      {
-        type: "button",
-        className: "webless-agent-root__backdrop",
-        "aria-label": "Close expanded assist",
-        onClick: () => setRailExpanded(false)
-      }
-    ) : null,
-    railCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    railCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       AssistEdgeTab,
       {
         variant: placement.variant,
@@ -1535,29 +1929,15 @@ function AgentWidget({
         along: placement.along,
         inset: placement.inset,
         visible: true,
+        label: agentName,
+        logoUrl: branding?.logoUrl,
+        brandColor: branding?.colors?.primary,
+        fontFamily: branding?.fontFamily,
         onOpen: () => setRailCollapsed(false)
       }
     ) : null
   ] });
 }
-
-// src/react/types/conversation.ts
-var defaultAgentRailTheme = {
-  railMaxWidth: "450px",
-  brand: "#6f16ff",
-  brandSoft: "#f3edff",
-  brandDeep: "#12043e",
-  surface: "#ffffff",
-  surfaceMuted: "#f4f6fb",
-  text: "#171b2a",
-  textMuted: "#5a6378",
-  textSubtle: "#8a94a8",
-  border: "rgb(42 51 70 / 0.1)",
-  visitorBubble: "#6f16ff",
-  visitorText: "#ffffff",
-  success: "#18794e",
-  danger: "#c94b63"
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AgentRail,