@webless/agent 0.3.2 → 0.4.1

package/dist/react.cjs

@@ -386,13 +386,15 @@ function emitWorkItem(item, handlers, workItems) {
   handlers.onWork?.(item);
   handlers.onStep?.(item.label, item.detail);
 }
-function completePlanning(handlers, workItems) {
+function completePlanning(handlers, workItems, nextItems = []) {
   const planning = workItems.get("planning");
   if (!planning || planning.state !== "active") return;
+  const specialists = nextItems.filter((item) => item.kind === "specialist");
+  const detail = specialists.length === 1 ? `Delegating to ${specialists[0]?.label}` : specialists.length > 1 ? `Delegating to ${specialists.length} specialists` : nextItems.some((item) => item.kind === "search") ? "Using built-in Search & Discovery" : "Picked the best way to help";
   emitWorkItem(
     {
       ...planning,
-      detail: "Picked the best way to help",
+      detail,
       state: "completed"
     },
     handlers,
@@ -442,11 +444,12 @@ function applyWorkEvent(event, handlers, workItems) {
     return;
   }
   if (event.type === "actions.requested") {
-    completePlanning(handlers, workItems);
-    for (const action of event.data.actions) {
+    const nextItems = event.data.actions.flatMap((action) => {
       const item = requestedWorkItem(action);
-      if (item) emitWorkItem(item, handlers, workItems);
-    }
+      return item ? [item] : [];
+    });
+    completePlanning(handlers, workItems, nextItems);
+    for (const item of nextItems) emitWorkItem(item, handlers, workItems);
     return;
   }
   if (event.type === "subagent.called") {
@@ -1168,6 +1171,37 @@ function useAgentChat({
     },
     [runTurn]
   );
+  const retry = (0, import_react2.useCallback)(async () => {
+    const visitorMessage = [...state.messages].reverse().find((message) => message.role === "visitor");
+    if (!visitorMessage) return;
+    if (runRef.current) {
+      runRef.current.abort();
+      clientRef.current.cancelActive();
+    }
+    const controller = new AbortController();
+    runRef.current = controller;
+    setState((prev) => ({
+      ...prev,
+      phase: "thinking",
+      toolSteps: [
+        {
+          id: "planning",
+          kind: "planning",
+          label: "Understanding your question",
+          state: "active"
+        }
+      ],
+      journey: null,
+      followUps: [],
+      streamingText: "",
+      error: null
+    }));
+    await runTurn({
+      controller,
+      resume: false,
+      visitorText: visitorMessage.text
+    });
+  }, [runTurn, state.messages]);
   (0, import_react2.useEffect)(() => {
     const conversation = loadPersistedAgentConversation(
       resolvedStorageKeyPrefix,
@@ -1200,6 +1234,7 @@ function useAgentChat({
   return {
     state,
     reset,
+    retry,
     submit,
     visitorSessionId: visitorId,
     sessionId: clientRef.current.getActiveSessionId()
@@ -1286,11 +1321,12 @@ var defaultAgentRailTheme = {
 
 // src/react/components/AgentActivityBubble/AgentActivityBubble.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function workSummary(steps, failed) {
+function workSummary(steps, failed, brandLabel) {
   const active = [...steps].reverse().find((step) => step.state === "active");
-  if (active?.kind === "specialist") return `Working with ${active.label}`;
+  if (active?.kind === "specialist")
+    return `${active.label} is reviewing your question`;
   if (active?.kind === "search") return "Searching this site";
-  if (active) return active.label;
+  if (active) return `${brandLabel} is 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(
@@ -1301,16 +1337,60 @@ function workSummary(steps, failed) {
   );
   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";
+    return `Answer prepared with ${specialists.length} specialists`;
+  if (specialists.length === 1)
+    return `Answer prepared with ${specialists[0]?.label}`;
+  if (searched) return "Answer prepared from this site";
+  return "Answer ready";
+}
+function stepLabel(step, brandLabel) {
+  return step.kind === "planning" ? brandLabel : 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 `Delegated to ${specialists.length} specialists`;
+  if (steps.some((item) => item.kind === "search"))
+    return "Used built-in Search & Discovery";
+  return step.detail;
+}
+function SearchIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "7", cy: "7", r: "3.75", stroke: "currentColor", strokeWidth: "1.4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        d: "m10 10 3 3",
+        stroke: "currentColor",
+        strokeWidth: "1.4",
+        strokeLinecap: "round"
+      }
+    )
+  ] });
+}
+function PlanningIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      d: "M4 4.5h8M4 8h5.5M4 11.5h7",
+      stroke: "currentColor",
+      strokeWidth: "1.4",
+      strokeLinecap: "round"
+    }
+  ) });
 }
 function AgentActivityBubble({
+  brandLabel = "Webless Guide",
+  brandLogoUrl,
   failed = false,
   steps
 }) {
   const active = steps.some((step) => step.state === "active");
+  const delegated = steps.some((step) => step.kind === "specialist");
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("article", { className: "agent-activity-bubble", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "agent-activity-bubble__status", "aria-live": "polite", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1320,33 +1400,59 @@ function AgentActivityBubble({
           "aria-hidden": "true"
         }
       ),
-      workSummary(steps, failed)
+      workSummary(steps, failed, brandLabel)
     ] }),
-    /* @__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",
+    /* @__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-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
-      )) })
-    ] })
+                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
+            );
+          }) })
+        ]
+      }
+    )
   ] });
 }
 
@@ -1485,6 +1591,29 @@ 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)(
+    "path",
+    {
+      d: "M4 4l8 8M12 4l-8 8",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    }
+  ) });
+}
+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)(
+    "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",
+      stroke: "currentColor",
+      strokeWidth: "1.4",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
 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)(
     "path",
@@ -1521,10 +1650,13 @@ function AgentRail({
   onCollapse,
   onClose,
   onExpandToggle,
+  onReset,
+  onRetry,
   onSubmit,
   onFollowUpSelect
 }) {
   const transcriptRef = (0, import_react5.useRef)(null);
+  const welcomeTitleId = (0, import_react5.useId)();
   const resolvedTheme = { ...defaultAgentRailTheme, ...theme };
   const railStyle = {
     "--rail-width": resolvedTheme.railMaxWidth,
@@ -1551,7 +1683,13 @@ function AgentRail({
     (message) => message.role === "visitor"
   );
   const showIdleFollowUps = !hasVisitorMessages2 && state.followUps.length > 0;
-  const showDockFollowUps = expanded && showIdleFollowUps;
+  const greeting = state.messages.find(
+    (message) => message.role === "agent" && message.id === "greeting"
+  );
+  const visibleMessages = hasVisitorMessages2 ? state.messages.filter((message) => message.id !== "greeting") : [];
+  const lastMessage = visibleMessages.at(-1);
+  const completedAnswer = showActivity && state.phase === "complete" && lastMessage?.role === "agent" ? lastMessage : null;
+  const transcriptMessages = completedAnswer ? visibleMessages.slice(0, -1) : visibleMessages;
   const streamingMessage = state.phase === "streaming" && state.streamingText ? {
     createdAt: 0,
     id: "streaming-response",
@@ -1576,6 +1714,10 @@ function AgentRail({
       className: `agent-rail${mobileFullscreen ? " agent-rail--mobile-fullscreen" : ""}${expanded ? " agent-rail--expanded" : ""}`,
       style: railStyle,
       "aria-label": "Agent conversation",
+      "aria-modal": mobileFullscreen || expanded ? true : void 0,
+      autoFocus: mobileFullscreen || expanded,
+      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)(
@@ -1594,7 +1736,7 @@ function AgentRail({
               className: "agent-rail__close",
               "aria-label": "Close agent",
               onClick: onClose,
-              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MinimizeIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.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: [
@@ -1614,81 +1756,102 @@ function AgentRail({
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "agent-rail__brand-label", children: brandLabel })
           ] }),
-          onExpandToggle ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            "button",
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "agent-rail__actions", children: [
+            onReset ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "agent-rail__new-chat",
+                "aria-label": "Start a new conversation",
+                disabled: !hasVisitorMessages2,
+                onClick: onReset,
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(NewChatIcon, {})
+              }
+            ) : null,
+            onExpandToggle ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "agent-rail__expand",
+                "aria-label": expanded ? "Exit focus view" : "Open focus view",
+                onClick: onExpandToggle,
+                children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RestoreIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExpandIcon, {})
+              }
+            ) : 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",
             {
-              type: "button",
-              className: "agent-rail__expand",
-              "aria-label": expanded ? "Restore assist panel" : "Expand assist panel",
-              onClick: onExpandToggle,
-              children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RestoreIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ExpandIcon, {})
+              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
+              ]
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "agent-rail__brand-spacer", "aria-hidden": "true" })
-        ] }) }),
-        /* @__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,
+          ) : null,
+          transcriptMessages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MessageBubble, { message }, message.id)),
           showActivity ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             AgentActivityBubble,
             {
+              brandLabel,
+              brandLogoUrl,
               failed: state.phase === "error",
               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,
-              disabled: isBusy,
-              label: "Try asking",
-              onSelect: (suggestion) => onFollowUpSelect?.(suggestion.label)
-            }
-          ) }) : 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_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",
-              suggestions: state.followUps,
-              disabled: isBusy,
-              onSelect: (suggestion) => onFollowUpSelect?.(suggestion.label)
-            }
-          ) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "agent-rail__dock", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            Composer,
-            {
-              variant: "dock",
-              disabled: isBusy,
-              placeholder: composerPlaceholder,
-              onSubmit
-            }
-          ) }),
-          /* @__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_runtime5.jsxs)("div", { className: "agent-rail__composer-wrap", children: [
+          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 })
+            ] }),
+            onRetry ? /* @__PURE__ */ (0, import_jsx_runtime5.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)(
             Composer,
             {
+              variant: expanded || mobileFullscreen ? "dock" : "default",
               disabled: isBusy,
               placeholder: composerPlaceholder,
               onSubmit
             }
           ),
-          /* @__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_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 })
+          ] }) })
         ] })
       ]
     }
@@ -1772,7 +1935,12 @@ function AssistEdgeTab({
   label,
   logoUrl,
   brandColor,
+  brandForeground,
+  borderColor,
   fontFamily,
+  mobile = false,
+  surfaceColor,
+  textColor,
   onOpen
 }) {
   const copy = VARIANT_COPY[variant];
@@ -1781,20 +1949,50 @@ function AssistEdgeTab({
     "--tab-along": `${along}%`,
     "--tab-inset": `${inset}px`,
     ...brandColor ? { "--as-brand": brandColor } : {},
-    ...fontFamily ? { "--as-font-display": fontFamily } : {}
+    ...brandForeground ? { "--as-visitor-text": brandForeground } : {},
+    ...borderColor ? { "--as-border": borderColor } : {},
+    ...fontFamily ? { "--as-font-display": fontFamily } : {},
+    ...surfaceColor ? { "--as-surface": surfaceColor } : {},
+    ...textColor ? { "--as-text": textColor } : {}
   };
   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" : ""}`,
+      className: `assist-edge-tab assist-edge-tab--${variant} assist-edge-tab--${side}${mobile ? " assist-edge-tab--mobile" : ""}${visible ? " is-visible" : ""}`,
       style,
       "aria-label": `Open ${visibleLabel}`,
       "aria-hidden": !visible,
       tabIndex: visible ? 0 : -1,
       onClick: onOpen,
       children: [
-        variant === "outline" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        mobile ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.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)(
+                  "img",
+                  {
+                    className: "assist-edge-tab__logo",
+                    src: logoUrl,
+                    alt: "",
+                    onError: (event) => {
+                      event.currentTarget.hidden = true;
+                    }
+                  }
+                ) : null
+              ]
+            }
+          ),
+          /* @__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)(
@@ -1870,7 +2068,7 @@ function AgentWidget({
     active: pageShiftActive,
     railSlotRef
   });
-  const { state, submit } = useAgentChat({
+  const { state, reset, retry, submit } = useAgentChat({
     customerId,
     getUnpublishedPreviewGrant,
     indexId,
@@ -1913,6 +2111,40 @@ function AgentWidget({
     if (isMobile) setRailCollapsed(false);
     await submit(message);
   }
+  (0, import_react6.useEffect)(() => {
+    if (railCollapsed) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Tab" && (isMobile || railExpanded)) {
+        const focusable = railSlotRef.current?.querySelectorAll(
+          'button:not(:disabled), a[href], textarea:not(:disabled), input:not(:disabled), [tabindex]:not([tabindex="-1"])'
+        );
+        if (!focusable || focusable.length === 0) return;
+        const first = focusable.item(0);
+        const last = focusable.item(focusable.length - 1);
+        const dialog = railSlotRef.current?.querySelector(".agent-rail");
+        if (document.activeElement === dialog) {
+          event.preventDefault();
+          (event.shiftKey ? last : first).focus();
+        } else if (event.shiftKey && document.activeElement === first) {
+          event.preventDefault();
+          last.focus();
+        } else if (!event.shiftKey && document.activeElement === last) {
+          event.preventDefault();
+          first.focus();
+        }
+        return;
+      }
+      if (event.key === "Escape") {
+        if (railExpanded) {
+          setRailExpanded(false);
+          return;
+        }
+        setRailCollapsed(true);
+      }
+    };
+    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)(
       "div",
@@ -1944,19 +2176,27 @@ function AgentWidget({
                   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)
                 }
               )
             }
           ),
-          !isMobile && railExpanded && !railCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          !railCollapsed && isMobile || !isMobile && railExpanded && !railCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "button",
             {
               type: "button",
-              className: "webless-agent-root__backdrop",
+              className: `webless-agent-root__backdrop${isMobile ? " webless-agent-root__backdrop--mobile" : ""}`,
               tabIndex: -1,
-              "aria-label": "Close expanded assist",
-              onClick: () => setRailExpanded(false)
+              "aria-label": isMobile ? "Close agent" : "Exit focus view",
+              onClick: () => {
+                if (isMobile) {
+                  setRailCollapsed(true);
+                } else {
+                  setRailExpanded(false);
+                }
+              }
             }
           ) : null
         ]
@@ -1973,7 +2213,12 @@ function AgentWidget({
         label: agentName,
         logoUrl: branding?.logoUrl,
         brandColor: branding?.colors?.primary,
+        brandForeground: branding?.colors?.primaryForeground,
+        borderColor: branding?.colors?.border,
         fontFamily: branding?.fontFamily,
+        mobile: isMobile,
+        surfaceColor: branding?.colors?.surface,
+        textColor: branding?.colors?.text,
         onOpen: () => setRailCollapsed(false)
       }
     ) : null