@surf-kit/agent 0.2.1 → 0.3.0

package/dist/streaming/index.cjs

@@ -1,7 +1,10 @@
+'use client';
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/streaming/index.ts
@@ -34,7 +45,8 @@ __export(streaming_exports, {
 module.exports = __toCommonJS(streaming_exports);
 
 // src/streaming/StreamingMessage/StreamingMessage.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
+var import_tailwind_merge2 = require("tailwind-merge");
 var import_core = require("@surf-kit/core");
 
 // src/hooks/useCharacterDrain.ts
@@ -64,7 +76,10 @@ function useCharacterDrain(target, msPerChar = 15) {
     const elapsed = now - lastTimeRef.current;
     const charsToAdvance = Math.floor(elapsed / msPerCharRef.current);
     if (charsToAdvance > 0 && indexRef.current < currentTarget.length) {
-      const nextIndex = Math.min(indexRef.current + charsToAdvance, currentTarget.length);
+      let nextIndex = Math.min(indexRef.current + charsToAdvance, currentTarget.length);
+      while (nextIndex < currentTarget.length && currentTarget[nextIndex - 1].trim() === "") {
+        nextIndex++;
+      }
       indexRef.current = nextIndex;
       lastTimeRef.current = now;
       setDisplayed(currentTarget.slice(0, nextIndex));
@@ -99,8 +114,77 @@ function useCharacterDrain(target, msPerChar = 15) {
   return { displayed, isDraining };
 }
 
-// src/streaming/StreamingMessage/StreamingMessage.tsx
+// src/response/ResponseMessage/ResponseMessage.tsx
+var import_react2 = __toESM(require("react"), 1);
+var import_react_markdown = __toESM(require("react-markdown"), 1);
+var import_rehype_sanitize = __toESM(require("rehype-sanitize"), 1);
+var import_tailwind_merge = require("tailwind-merge");
 var import_jsx_runtime = require("react/jsx-runtime");
+function normalizeMarkdownLists(content) {
+  return content.replace(/:\s+-\s+/g, ":\n\n- ");
+}
+function ResponseMessage({ content, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_tailwind_merge.twMerge)(
+        "text-sm leading-relaxed text-text-primary",
+        "[&_p]:my-2",
+        "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-6",
+        "[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-6",
+        "[&_li]:my-1",
+        "[&_strong]:text-text-primary [&_strong]:font-semibold",
+        "[&_em]:text-text-secondary",
+        "[&_h1]:text-lg [&_h1]:font-semibold [&_h1]:text-text-primary [&_h1]:mt-4 [&_h1]:mb-2",
+        "[&_h2]:text-base [&_h2]:font-semibold [&_h2]:text-text-primary [&_h2]:mt-3 [&_h2]:mb-1.5",
+        "[&_h3]:text-sm [&_h3]:font-semibold [&_h3]:text-accent [&_h3]:mt-2 [&_h3]:mb-1",
+        "[&_code]:bg-surface-raised [&_code]:text-accent [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-xs [&_code]:font-mono",
+        "[&_pre]:bg-surface-raised [&_pre]:border [&_pre]:border-border [&_pre]:rounded-xl [&_pre]:p-4 [&_pre]:overflow-x-auto",
+        "[&_hr]:my-3 [&_hr]:border-border",
+        "[&_blockquote]:border-l-2 [&_blockquote]:border-border-strong [&_blockquote]:pl-4 [&_blockquote]:text-text-secondary",
+        "[&_a]:text-accent [&_a]:underline-offset-2 [&_a]:hover:text-accent/80",
+        className
+      ),
+      "data-testid": "response-message",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_react_markdown.default,
+        {
+          rehypePlugins: [import_rehype_sanitize.default],
+          components: {
+            script: () => null,
+            iframe: () => null,
+            p: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "my-2", children }),
+            ul: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "my-2 list-disc pl-6", children }),
+            ol: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "my-2 list-decimal pl-6", children }),
+            li: ({ children, ...props }) => {
+              let content2 = children;
+              if (props.ordered) {
+                content2 = import_react2.default.Children.map(children, (child, i) => {
+                  if (i === 0 && typeof child === "string") {
+                    return child.replace(/^\d+[.)]\s*/, "");
+                  }
+                  return child;
+                });
+              }
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "my-1", children: content2 });
+            },
+            strong: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { className: "font-semibold", children }),
+            em: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("em", { className: "italic text-text-secondary", children }),
+            h1: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: "text-base font-bold mt-4 mb-2", children }),
+            h2: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-sm font-bold mt-3 mb-1", children }),
+            h3: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "text-sm font-semibold mt-2 mb-1", children }),
+            hr: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { className: "my-3 border-border" }),
+            code: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "bg-surface-sunken rounded px-1 py-0.5 text-xs font-mono", children })
+          },
+          children: normalizeMarkdownLists(content)
+        }
+      )
+    }
+  );
+}
+
+// src/streaming/StreamingMessage/StreamingMessage.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var phaseLabels = {
   idle: "",
   waiting: "Waiting...",
@@ -109,72 +193,98 @@ var phaseLabels = {
   generating: "Writing...",
   verifying: "Verifying..."
 };
+var CURSOR_STYLES = `
+.sk-streaming-cursor > :not(ul,ol,blockquote):last-child::after,
+.sk-streaming-cursor > :is(ul,ol):last-child > li:last-child::after,
+.sk-streaming-cursor > blockquote:last-child > p:last-child::after {
+  content: "";
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  background: var(--color-accent, #38bdf8);
+  animation: sk-cursor-blink 0.8s steps(1) infinite;
+  margin-left: 2px;
+  vertical-align: text-bottom;
+}
+@keyframes sk-cursor-blink {
+  0%, 60% { opacity: 1; }
+  61%, 100% { opacity: 0; }
+}
+`;
 function StreamingMessage({
   stream,
   onComplete,
+  onDraining,
   showPhases = true,
   className
 }) {
-  const onCompleteRef = (0, import_react2.useRef)(onComplete);
+  const onCompleteRef = (0, import_react3.useRef)(onComplete);
   onCompleteRef.current = onComplete;
-  const wasActiveRef = (0, import_react2.useRef)(stream.active);
-  (0, import_react2.useEffect)(() => {
+  const onDrainingRef = (0, import_react3.useRef)(onDraining);
+  onDrainingRef.current = onDraining;
+  const wasActiveRef = (0, import_react3.useRef)(stream.active);
+  (0, import_react3.useEffect)(() => {
     if (wasActiveRef.current && !stream.active) {
       onCompleteRef.current?.();
     }
     wasActiveRef.current = stream.active;
   }, [stream.active]);
   const phaseLabel = phaseLabels[stream.phase];
-  const { displayed: displayedContent } = useCharacterDrain(stream.content);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, "data-testid": "streaming-message", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { "aria-live": "assertive", className: "sr-only", children: [
+  const { displayed: rawDisplayed, isDraining } = useCharacterDrain(stream.content);
+  const displayedContent = stream.active || isDraining ? rawDisplayed.trimEnd() : rawDisplayed;
+  (0, import_react3.useEffect)(() => {
+    onDrainingRef.current?.(isDraining);
+  }, [isDraining]);
+  const agentLabel = stream.agent ? stream.agent.replace("_agent", "").replace("_", " ") : null;
+  const showPhaseIndicator = showPhases && stream.active && stream.phase !== "idle" && !displayedContent;
+  const showCursor = (stream.active || isDraining) && !!displayedContent;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: (0, import_tailwind_merge2.twMerge)("flex w-full flex-col items-start", className), "data-testid": "streaming-message", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { "aria-live": "assertive", className: "sr-only", children: [
       stream.active && stream.phase !== "idle" && "Response started",
       !stream.active && stream.content && "Response complete"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "max-w-[88%] px-4 py-3 rounded-[18px] rounded-tl-[4px] bg-surface border border-border motion-safe:animate-springFromLeft", children: [
-      showPhases && stream.active && stream.phase !== "idle" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    showCursor && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { children: CURSOR_STYLES }),
+    agentLabel && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-[11px] font-display font-semibold uppercase tracking-[0.08em] text-text-muted px-1 mb-1.5", children: agentLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "max-w-[88%] px-4 py-3 rounded-[18px] rounded-tl-[4px] bg-surface border border-border motion-safe:animate-springFromLeft", children: [
+      showPhaseIndicator && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "div",
         {
-          className: "flex items-center gap-2 mb-2 text-sm text-text-secondary",
+          className: "flex items-center gap-2 text-sm text-text-secondary",
           "data-testid": "phase-indicator",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Spinner, { size: "sm" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: phaseLabel })
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core.WaveLoader, { size: "sm", color: "#38bdf8" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: phaseLabel })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-sm leading-relaxed text-text-primary whitespace-pre-wrap", children: [
-        displayedContent,
-        stream.active && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "span",
-          {
-            className: "inline-block w-0.5 h-4 bg-accent align-text-bottom animate-pulse ml-0.5",
-            "aria-hidden": "true",
-            "data-testid": "streaming-cursor"
-          }
-        )
-      ] })
+      displayedContent && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        ResponseMessage,
+        {
+          content: displayedContent,
+          className: showCursor ? "sk-streaming-cursor" : void 0
+        }
+      )
     ] })
   ] });
 }
 
 // src/streaming/ThinkingIndicator/ThinkingIndicator.tsx
 var import_hooks = require("@surf-kit/hooks");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function ThinkingIndicator({ label = "Thinking...", className }) {
   const reducedMotion = (0, import_hooks.useReducedMotion)();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "span",
     {
       role: "status",
       className: `inline-flex items-center gap-2 text-sm motion-safe:animate-fadeSlideUpSm ${className ?? ""}`,
       "data-testid": "thinking-indicator",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-text-secondary", children: label }),
-        !reducedMotion && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "flex gap-1", "aria-hidden": "true", "data-testid": "animated-dots", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-current animate-bounce [animation-delay:0ms]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-current animate-bounce [animation-delay:150ms]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-current animate-bounce [animation-delay:300ms]" })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-text-secondary", children: label }),
+        !reducedMotion && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "flex gap-1", "aria-hidden": "true", "data-testid": "animated-dots", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-current animate-bounce [animation-delay:0ms]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-current animate-bounce [animation-delay:150ms]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-current animate-bounce [animation-delay:300ms]" })
         ] })
       ]
     }
@@ -183,7 +293,7 @@ function ThinkingIndicator({ label = "Thinking...", className }) {
 
 // src/streaming/ToolExecution/ToolExecution.tsx
 var import_core2 = require("@surf-kit/core");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var defaultLabels = {
   search: "Searching knowledge base...",
   retrieve: "Retrieving documents...",
@@ -191,15 +301,15 @@ var defaultLabels = {
 };
 function ToolExecution({ tool, label, className }) {
   const displayLabel = label ?? defaultLabels[tool] ?? `Running ${tool}...`;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       className: `flex items-center gap-2 text-sm text-text-secondary ${className ?? ""}`,
       role: "status",
       "data-testid": "tool-execution",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core2.Spinner, { size: "sm" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: displayLabel })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core2.WaveLoader, { size: "sm", color: "#38bdf8" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: displayLabel })
       ]
     }
   );
@@ -207,9 +317,9 @@ function ToolExecution({ tool, label, className }) {
 
 // src/streaming/RetrievalProgress/RetrievalProgress.tsx
 var import_core3 = require("@surf-kit/core");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function RetrievalProgress({ sources, isActive, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
       className: `space-y-2 ${className ?? ""}`,
@@ -217,19 +327,19 @@ function RetrievalProgress({ sources, isActive, className }) {
       "aria-label": isActive ? `Retrieving sources, ${sources.length} found so far` : `${sources.length} sources found`,
       "data-testid": "retrieval-progress",
       children: [
-        isActive && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2 text-sm text-text-secondary", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core3.Spinner, { size: "sm" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: "Retrieving sources..." })
+        isActive && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center gap-2 text-sm text-text-secondary", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core3.WaveLoader, { size: "sm", color: "#38bdf8" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Retrieving sources..." })
         ] }),
-        sources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "space-y-1", "data-testid": "source-list", children: sources.map((source, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        sources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "space-y-1", "data-testid": "source-list", children: sources.map((source, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
           "li",
           {
             className: "text-sm text-text-secondary flex items-center gap-2 animate-in fade-in slide-in-from-left-2",
             style: { animationDelay: `${index * 100}ms`, animationFillMode: "both" },
             "data-testid": "retrieval-source-item",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-accent flex-shrink-0", "aria-hidden": "true" }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate", children: source.title })
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-accent flex-shrink-0", "aria-hidden": "true" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "truncate", children: source.title })
             ]
           },
           source.document_id
@@ -240,21 +350,21 @@ function RetrievalProgress({ sources, isActive, className }) {
 }
 
 // src/streaming/VerificationProgress/VerificationProgress.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function VerificationProgress({
   isActive,
   label = "Checking accuracy...",
   className
 }) {
   if (!isActive) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       className: `flex items-center gap-2 text-sm ${className ?? ""}`,
       role: "status",
       "data-testid": "verification-progress",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "svg",
           {
             className: "w-4 h-4 animate-spin text-accent",
@@ -263,20 +373,20 @@ function VerificationProgress({
             viewBox: "0 0 24 24",
             "aria-hidden": "true",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-accent animate-pulse", children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-accent animate-pulse", children: label })
       ]
     }
   );
 }
 
 // src/streaming/TypewriterText/TypewriterText.tsx
-var import_react3 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react4 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function TypewriterText({
   text,
   speed = 30,
@@ -285,9 +395,9 @@ function TypewriterText({
   className = "",
   showCursor = true
 }) {
-  const [displayedText, setDisplayedText] = (0, import_react3.useState)("");
-  const [isComplete, setIsComplete] = (0, import_react3.useState)(false);
-  (0, import_react3.useEffect)(() => {
+  const [displayedText, setDisplayedText] = (0, import_react4.useState)("");
+  const [isComplete, setIsComplete] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
     setDisplayedText("");
     setIsComplete(false);
     let index = 0;
@@ -309,16 +419,16 @@ function TypewriterText({
       clearInterval(interval);
     };
   }, [text, speed, delay, onComplete]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className, children: [
     displayedText,
-    showCursor && !isComplete && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "typewriter-cursor", "aria-hidden": "true" })
+    showCursor && !isComplete && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "typewriter-cursor", "aria-hidden": "true" })
   ] });
 }
 
 // src/streaming/TypingIndicator/TypingIndicator.tsx
-var import_tailwind_merge = require("tailwind-merge");
+var import_tailwind_merge3 = require("tailwind-merge");
 var import_hooks2 = require("@surf-kit/hooks");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var bounceKeyframes = `
 @keyframes typing-bounce {
   0%, 80%, 100% { transform: translateY(0); }
@@ -331,17 +441,17 @@ function TypingIndicator({
   className
 }) {
   const reducedMotion = (0, import_hooks2.useReducedMotion)();
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "span",
     {
       role: "status",
       "aria-label": label ?? "typing",
-      className: (0, import_tailwind_merge.twMerge)("inline-flex items-center gap-2", className),
+      className: (0, import_tailwind_merge3.twMerge)("inline-flex items-center gap-2", className),
       "data-testid": "typing-indicator",
       children: [
-        !reducedMotion && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: bounceKeyframes }),
-        label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-sm text-text-secondary", children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "flex gap-1", "data-testid": "typing-dots", children: Array.from({ length: dotCount }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        !reducedMotion && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: bounceKeyframes }),
+        label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-sm text-text-secondary", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "flex gap-1", "data-testid": "typing-dots", children: Array.from({ length: dotCount }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "span",
           {
             className: "w-2 h-2 rounded-full bg-text-secondary",
@@ -358,9 +468,9 @@ function TypingIndicator({
 }
 
 // src/streaming/TextGlimmer/TextGlimmer.tsx
-var import_tailwind_merge2 = require("tailwind-merge");
+var import_tailwind_merge4 = require("tailwind-merge");
 var import_hooks3 = require("@surf-kit/hooks");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var shimmerKeyframes = `
 @keyframes text-shimmer {
   0% { background-position: 200% 0; }
@@ -370,16 +480,16 @@ var shimmerKeyframes = `
 var widthPattern = ["100%", "90%", "60%"];
 function TextGlimmer({ lines = 3, className }) {
   const reducedMotion = (0, import_hooks3.useReducedMotion)();
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       role: "status",
       "aria-label": "Loading",
-      className: (0, import_tailwind_merge2.twMerge)("flex flex-col gap-2", className),
+      className: (0, import_tailwind_merge4.twMerge)("flex flex-col gap-2", className),
       "data-testid": "text-glimmer",
       children: [
-        !reducedMotion && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("style", { children: shimmerKeyframes }),
-        Array.from({ length: lines }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        !reducedMotion && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("style", { children: shimmerKeyframes }),
+        Array.from({ length: lines }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "div",
           {
             className: "h-3 rounded bg-surface-raised",
@@ -401,9 +511,9 @@ function TextGlimmer({ lines = 3, className }) {
 }
 
 // src/streaming/StreamingList/StreamingList.tsx
-var import_tailwind_merge3 = require("tailwind-merge");
+var import_tailwind_merge5 = require("tailwind-merge");
 var import_hooks4 = require("@surf-kit/hooks");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var fadeSlideInKeyframes = `
 @keyframes fadeSlideIn {
   from { opacity: 0; transform: translateY(8px); }
@@ -419,17 +529,17 @@ function StreamingList({
 }) {
   const reducedMotion = (0, import_hooks4.useReducedMotion)();
   if (items.length === 0 && !isStreaming) {
-    return emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: (0, import_tailwind_merge3.twMerge)("text-sm text-text-secondary", className), "data-testid": "streaming-list-empty", children: emptyMessage }) : null;
+    return emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: (0, import_tailwind_merge5.twMerge)("text-sm text-text-secondary", className), "data-testid": "streaming-list-empty", children: emptyMessage }) : null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "ul",
     {
       "aria-live": "polite",
-      className: (0, import_tailwind_merge3.twMerge)("list-none p-0 m-0", className),
+      className: (0, import_tailwind_merge5.twMerge)("list-none p-0 m-0", className),
       "data-testid": "streaming-list",
       children: [
-        !reducedMotion && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("style", { children: fadeSlideInKeyframes }),
-        items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        !reducedMotion && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("style", { children: fadeSlideInKeyframes }),
+        items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "li",
           {
             style: reducedMotion ? void 0 : { animation: "fadeSlideIn 0.3s ease-out" },
@@ -438,16 +548,16 @@ function StreamingList({
           },
           index
         )),
-        isStreaming && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", { "data-testid": "streaming-list-loading", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TypingIndicator, {}) })
+        isStreaming && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { "data-testid": "streaming-list-loading", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TypingIndicator, {}) })
       ]
     }
   );
 }
 
 // src/streaming/StreamingStructure/StreamingStructure.tsx
-var import_tailwind_merge4 = require("tailwind-merge");
+var import_tailwind_merge6 = require("tailwind-merge");
 var import_hooks5 = require("@surf-kit/hooks");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var fadeSlideInKeyframes2 = `
 @keyframes fadeSlideIn {
   from { opacity: 0; transform: translateY(8px); }
@@ -456,13 +566,13 @@ var fadeSlideInKeyframes2 = `
 `;
 function renderValue(value, reducedMotion) {
   if (value === null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "italic text-text-secondary", children: "null" });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "italic text-text-secondary", children: "null" });
   }
   if (value === void 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "italic text-text-secondary", children: "undefined" });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "italic text-text-secondary", children: "undefined" });
   }
   if (Array.isArray(value)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ol", { className: "list-decimal pl-4 m-0", children: value.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { className: "text-text-secondary text-sm", children: renderValue(item, reducedMotion) }, i)) });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("ol", { className: "list-decimal pl-4 m-0", children: value.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { className: "text-text-secondary text-sm", children: renderValue(item, reducedMotion) }, i)) });
   }
   if (typeof value === "object") {
     return renderNestedDl(value, reducedMotion);
@@ -471,13 +581,13 @@ function renderValue(value, reducedMotion) {
 }
 function renderNestedDl(data, reducedMotion) {
   const entries = Object.entries(data);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("dl", { className: "pl-4 m-0", "data-testid": "streaming-structure-nested", children: entries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("dl", { className: "pl-4 m-0", "data-testid": "streaming-structure-nested", children: entries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "div",
     {
       style: reducedMotion ? void 0 : { animation: "fadeSlideIn 0.3s ease-out" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("dt", { className: "font-medium text-text-primary text-sm", children: key }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("dd", { className: "text-text-secondary text-sm ml-0 mb-3", children: renderValue(value, reducedMotion) })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("dt", { className: "font-medium text-text-primary text-sm", children: key }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("dd", { className: "text-text-secondary text-sm ml-0 mb-3", children: renderValue(value, reducedMotion) })
       ]
     },
     key
@@ -490,27 +600,27 @@ function StreamingStructure({
 }) {
   const reducedMotion = (0, import_hooks5.useReducedMotion)();
   const entries = Object.entries(data);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "dl",
     {
       "aria-live": "polite",
-      className: (0, import_tailwind_merge4.twMerge)("m-0", className),
+      className: (0, import_tailwind_merge6.twMerge)("m-0", className),
       "data-testid": "streaming-structure",
       children: [
-        !reducedMotion && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("style", { children: fadeSlideInKeyframes2 }),
-        entries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        !reducedMotion && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("style", { children: fadeSlideInKeyframes2 }),
+        entries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
           "div",
           {
             style: reducedMotion ? void 0 : { animation: "fadeSlideIn 0.3s ease-out" },
             "data-testid": "streaming-structure-entry",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("dt", { className: "font-medium text-text-primary text-sm", children: key }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("dd", { className: "text-text-secondary text-sm ml-0 mb-3", children: renderValue(value, reducedMotion) })
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("dt", { className: "font-medium text-text-primary text-sm", children: key }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("dd", { className: "text-text-secondary text-sm ml-0 mb-3", children: renderValue(value, reducedMotion) })
             ]
           },
           key
         )),
-        isStreaming && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { "data-testid": "streaming-structure-loading", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TextGlimmer, { lines: 1 }) })
+        isStreaming && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { "data-testid": "streaming-structure-loading", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TextGlimmer, { lines: 1 }) })
       ]
     }
   );