@surf-kit/agent 0.2.1 → 0.3.0

package/dist/index.js

@@ -1,5 +1,7 @@
+'use client';
+
 // src/chat/AgentChat/AgentChat.tsx
-import { twMerge as twMerge8 } from "tailwind-merge";
+import { twMerge as twMerge9 } from "tailwind-merge";
 
 // src/hooks/useAgentChat.ts
 import { useReducer, useCallback, useRef } from "react";
@@ -10,7 +12,8 @@ var initialState = {
   error: null,
   inputValue: "",
   streamPhase: "idle",
-  streamingContent: ""
+  streamingContent: "",
+  streamingAgent: null
 };
 function reducer(state, action) {
   switch (action.type) {
@@ -24,12 +27,15 @@ function reducer(state, action) {
         error: null,
         inputValue: "",
         streamPhase: "thinking",
-        streamingContent: ""
+        streamingContent: "",
+        streamingAgent: null
       };
     case "STREAM_PHASE":
       return { ...state, streamPhase: action.phase };
     case "STREAM_CONTENT":
       return { ...state, streamingContent: state.streamingContent + action.content };
+    case "STREAM_AGENT":
+      return { ...state, streamingAgent: action.agent };
     case "SEND_SUCCESS":
       return {
         ...state,
@@ -45,7 +51,8 @@ function reducer(state, action) {
         isLoading: false,
         error: action.error,
         streamPhase: "idle",
-        streamingContent: ""
+        streamingContent: "",
+        streamingAgent: null
       };
     case "LOAD_CONVERSATION":
       return {
@@ -71,107 +78,142 @@ function useAgentChat(config2) {
   const configRef = useRef(config2);
   configRef.current = config2;
   const lastUserMessageRef = useRef(null);
+  const lastUserAttachmentsRef = useRef(void 0);
   const sendMessage = useCallback(
-    async (content) => {
-      const { apiUrl, streamPath = "/chat/stream", headers = {}, timeout = 3e4 } = configRef.current;
+    async (content, attachments) => {
+      const { apiUrl, streamPath = "/chat/stream", headers: headersOrFn, timeout = 3e4, bodyExtra } = configRef.current;
+      const headers = typeof headersOrFn === "function" ? await headersOrFn() : headersOrFn ?? {};
       lastUserMessageRef.current = content;
+      lastUserAttachmentsRef.current = attachments;
       const userMessage = {
         id: generateMessageId(),
         role: "user",
         content,
+        attachments,
         timestamp: /* @__PURE__ */ new Date()
       };
       dispatch({ type: "SEND_START", message: userMessage });
       const controller = new AbortController();
       const timeoutId = setTimeout(() => controller.abort(), timeout);
       try {
-        const response = await fetch(`${apiUrl}${streamPath}`, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            Accept: "text/event-stream",
-            ...headers
-          },
-          body: JSON.stringify({
-            message: content,
-            conversation_id: state.conversationId
-          }),
-          signal: controller.signal
-        });
-        clearTimeout(timeoutId);
-        if (!response.ok) {
-          dispatch({
-            type: "SEND_ERROR",
-            error: {
-              code: "API_ERROR",
-              message: `HTTP ${response.status}: ${response.statusText}`,
-              retryable: response.status >= 500
-            }
-          });
-          return;
+        const url = `${apiUrl}${streamPath}`;
+        const mergedHeaders = {
+          "Content-Type": "application/json",
+          Accept: "text/event-stream",
+          ...headers
+        };
+        const requestBody = {
+          message: content,
+          conversation_id: state.conversationId,
+          ...bodyExtra
+        };
+        if (attachments && attachments.length > 0) {
+          requestBody.attachments = attachments.map((a) => ({
+            filename: a.filename,
+            content_type: a.content_type,
+            data: a.data
+          }));
         }
-        const reader = response.body?.getReader();
-        if (!reader) {
-          dispatch({
-            type: "SEND_ERROR",
-            error: { code: "STREAM_ERROR", message: "No response body", retryable: true }
+        const body = JSON.stringify(requestBody);
+        const ctx = {
+          accumulatedContent: "",
+          agentResponse: null,
+          capturedAgent: null,
+          capturedConversationId: null,
+          hadStreamError: false
+        };
+        const handleEvent = (event) => {
+          switch (event.type) {
+            case "agent":
+              ctx.capturedAgent = event.agent;
+              dispatch({ type: "STREAM_AGENT", agent: ctx.capturedAgent });
+              break;
+            case "phase":
+              dispatch({ type: "STREAM_PHASE", phase: event.phase });
+              break;
+            case "delta":
+              ctx.accumulatedContent += event.content;
+              dispatch({ type: "STREAM_CONTENT", content: event.content });
+              break;
+            case "done":
+              ctx.agentResponse = event.response;
+              ctx.capturedConversationId = event.conversation_id ?? null;
+              break;
+            case "error":
+              ctx.hadStreamError = true;
+              dispatch({ type: "SEND_ERROR", error: event.error });
+              break;
+          }
+        };
+        const { streamAdapter } = configRef.current;
+        if (streamAdapter) {
+          await streamAdapter(
+            url,
+            { method: "POST", headers: mergedHeaders, body, signal: controller.signal },
+            handleEvent
+          );
+          clearTimeout(timeoutId);
+        } else {
+          const response = await fetch(url, {
+            method: "POST",
+            headers: mergedHeaders,
+            body,
+            signal: controller.signal
           });
-          return;
-        }
-        const decoder = new TextDecoder();
-        let buffer = "";
-        let accumulatedContent = "";
-        let agentResponse = null;
-        let capturedAgent = null;
-        let capturedConversationId = null;
-        while (true) {
-          const { done, value } = await reader.read();
-          if (done) break;
-          buffer += decoder.decode(value, { stream: true });
-          const lines = buffer.split("\n");
-          buffer = lines.pop() ?? "";
-          for (const line of lines) {
-            if (!line.startsWith("data: ")) continue;
-            const data = line.slice(6).trim();
-            if (data === "[DONE]") continue;
-            try {
-              const event = JSON.parse(data);
-              switch (event.type) {
-                case "agent":
-                  capturedAgent = event.agent;
-                  break;
-                case "phase":
-                  dispatch({ type: "STREAM_PHASE", phase: event.phase });
-                  break;
-                case "delta":
-                  accumulatedContent += event.content;
-                  dispatch({ type: "STREAM_CONTENT", content: event.content });
-                  break;
-                case "done":
-                  agentResponse = event.response;
-                  capturedConversationId = event.conversation_id ?? null;
-                  break;
-                case "error":
-                  dispatch({ type: "SEND_ERROR", error: event.error });
-                  return;
+          clearTimeout(timeoutId);
+          if (!response.ok) {
+            dispatch({
+              type: "SEND_ERROR",
+              error: {
+                code: "API_ERROR",
+                message: `HTTP ${response.status}: ${response.statusText}`,
+                retryable: response.status >= 500
+              }
+            });
+            return;
+          }
+          const reader = response.body?.getReader();
+          if (!reader) {
+            dispatch({
+              type: "SEND_ERROR",
+              error: { code: "STREAM_ERROR", message: "No response body", retryable: true }
+            });
+            return;
+          }
+          const decoder = new TextDecoder();
+          let buffer = "";
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            buffer += decoder.decode(value, { stream: true });
+            const lines = buffer.split("\n");
+            buffer = lines.pop() ?? "";
+            for (const line of lines) {
+              if (!line.startsWith("data: ")) continue;
+              const data = line.slice(6).trim();
+              if (data === "[DONE]") continue;
+              try {
+                const event = JSON.parse(data);
+                handleEvent(event);
+              } catch {
               }
-            } catch {
             }
           }
         }
+        if (ctx.hadStreamError) return;
         const assistantMessage = {
           id: generateMessageId(),
           role: "assistant",
-          content: agentResponse?.message ?? accumulatedContent,
-          response: agentResponse ?? void 0,
-          agent: capturedAgent ?? void 0,
+          content: ctx.agentResponse?.message ?? ctx.accumulatedContent,
+          response: ctx.agentResponse ?? void 0,
+          agent: ctx.capturedAgent ?? void 0,
           timestamp: /* @__PURE__ */ new Date()
         };
         dispatch({
           type: "SEND_SUCCESS",
           message: assistantMessage,
-          streamingContent: accumulatedContent,
-          conversationId: capturedConversationId
+          streamingContent: ctx.accumulatedContent,
+          conversationId: ctx.capturedConversationId
         });
       } catch (err) {
         clearTimeout(timeoutId);
@@ -202,7 +244,8 @@ function useAgentChat(config2) {
   }, []);
   const submitFeedback = useCallback(
     async (messageId, rating, comment) => {
-      const { apiUrl, feedbackPath = "/feedback", headers = {} } = configRef.current;
+      const { apiUrl, feedbackPath = "/feedback", headers: headersOrFn } = configRef.current;
+      const headers = typeof headersOrFn === "function" ? await headersOrFn() : headersOrFn ?? {};
       await fetch(`${apiUrl}${feedbackPath}`, {
         method: "POST",
         headers: { "Content-Type": "application/json", ...headers },
@@ -213,12 +256,13 @@ function useAgentChat(config2) {
   );
   const retry = useCallback(async () => {
     if (lastUserMessageRef.current) {
-      await sendMessage(lastUserMessageRef.current);
+      await sendMessage(lastUserMessageRef.current, lastUserAttachmentsRef.current);
     }
   }, [sendMessage]);
   const reset = useCallback(() => {
     dispatch({ type: "RESET" });
     lastUserMessageRef.current = null;
+    lastUserAttachmentsRef.current = void 0;
   }, []);
   const actions = {
     sendMessage,
@@ -233,7 +277,7 @@ function useAgentChat(config2) {
 
 // src/chat/MessageThread/MessageThread.tsx
 import { twMerge as twMerge5 } from "tailwind-merge";
-import { useEffect, useRef as useRef2 } from "react";
+import { useCallback as useCallback2, useEffect, useRef as useRef2 } from "react";
 
 // src/chat/MessageBubble/MessageBubble.tsx
 import { twMerge as twMerge4 } from "tailwind-merge";
@@ -242,6 +286,7 @@ import { twMerge as twMerge4 } from "tailwind-merge";
 import { Badge as Badge2 } from "@surf-kit/core";
 
 // src/response/ResponseMessage/ResponseMessage.tsx
+import React from "react";
 import ReactMarkdown from "react-markdown";
 import rehypeSanitize from "rehype-sanitize";
 import { twMerge } from "tailwind-merge";
@@ -266,6 +311,7 @@ function ResponseMessage({ content, className }) {
         "[&_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
@@ -281,11 +327,24 @@ function ResponseMessage({ content, className }) {
             p: ({ children }) => /* @__PURE__ */ jsx("p", { className: "my-2", children }),
             ul: ({ children }) => /* @__PURE__ */ jsx("ul", { className: "my-2 list-disc pl-6", children }),
             ol: ({ children }) => /* @__PURE__ */ jsx("ol", { className: "my-2 list-decimal pl-6", children }),
-            li: ({ children }) => /* @__PURE__ */ jsx("li", { className: "my-1", children }),
+            li: ({ children, ...props }) => {
+              let content2 = children;
+              if (props.ordered) {
+                content2 = React.Children.map(children, (child, i) => {
+                  if (i === 0 && typeof child === "string") {
+                    return child.replace(/^\d+[.)]\s*/, "");
+                  }
+                  return child;
+                });
+              }
+              return /* @__PURE__ */ jsx("li", { className: "my-1", children: content2 });
+            },
             strong: ({ children }) => /* @__PURE__ */ jsx("strong", { className: "font-semibold", children }),
+            em: ({ children }) => /* @__PURE__ */ jsx("em", { className: "italic text-text-secondary", children }),
             h1: ({ children }) => /* @__PURE__ */ jsx("h1", { className: "text-base font-bold mt-4 mb-2", children }),
             h2: ({ children }) => /* @__PURE__ */ jsx("h2", { className: "text-sm font-bold mt-3 mb-1", children }),
             h3: ({ children }) => /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold mt-2 mb-1", children }),
+            hr: () => /* @__PURE__ */ jsx("hr", { className: "my-3 border-border" }),
             code: ({ children }) => /* @__PURE__ */ jsx("code", { className: "bg-surface-sunken rounded px-1 py-0.5 text-xs font-mono", children })
           },
           children: normalizeMarkdownLists(content)
@@ -421,7 +480,14 @@ function renderWarning(data) {
     }
   );
 }
-function StructuredResponse({ uiHint, data, className }) {
+function StructuredResponse({ uiHint, data: rawData, className }) {
+  const data = typeof rawData === "string" ? (() => {
+    try {
+      return JSON.parse(rawData);
+    } catch {
+      return null;
+    }
+  })() : rawData;
   if (!data) return null;
   let content;
   switch (uiHint) {
@@ -501,7 +567,36 @@ function SourceCard({ source, variant = "compact", onNavigate, className }) {
           children: [
             /* @__PURE__ */ jsxs2("div", { className: "flex items-start justify-between gap-2", children: [
               /* @__PURE__ */ jsxs2("div", { className: "flex-1 min-w-0", children: [
-                /* @__PURE__ */ jsx3("p", { className: "text-sm font-medium text-text-primary truncate", children: source.title }),
+                source.url ? /* @__PURE__ */ jsxs2(
+                  "a",
+                  {
+                    href: source.url,
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    className: "text-sm font-medium text-accent hover:underline truncate block",
+                    onClick: (e) => e.stopPropagation(),
+                    children: [
+                      source.title,
+                      /* @__PURE__ */ jsxs2(
+                        "svg",
+                        {
+                          className: "inline-block ml-1 w-3 h-3 opacity-60",
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          children: [
+                            /* @__PURE__ */ jsx3("path", { d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" }),
+                            /* @__PURE__ */ jsx3("polyline", { points: "15 3 21 3 21 9" }),
+                            /* @__PURE__ */ jsx3("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsx3("p", { className: "text-sm font-medium text-text-primary truncate", children: source.title }),
                 source.section && /* @__PURE__ */ jsx3("p", { className: "text-[11px] font-semibold uppercase tracking-wider text-text-secondary truncate mt-0.5", children: source.section })
               ] }),
               /* @__PURE__ */ jsx3(
@@ -635,13 +730,16 @@ function AgentResponse({
 }) {
   return /* @__PURE__ */ jsxs4("div", { className: `flex flex-col gap-4 ${className ?? ""}`, "data-testid": "agent-response", children: [
     /* @__PURE__ */ jsx6(ResponseMessage, { content: response.message }),
-    response.ui_hint !== "text" && response.structured_data && /* @__PURE__ */ jsx6(
-      StructuredResponse,
-      {
-        uiHint: response.ui_hint,
-        data: response.structured_data
-      }
-    ),
+    response.ui_hint !== "text" && response.structured_data && (() => {
+      const parsed = typeof response.structured_data === "string" ? (() => {
+        try {
+          return JSON.parse(response.structured_data);
+        } catch {
+          return null;
+        }
+      })() : response.structured_data;
+      return parsed ? /* @__PURE__ */ jsx6(StructuredResponse, { uiHint: response.ui_hint, data: parsed }) : null;
+    })(),
     (showConfidence || showVerification) && /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-2 mt-1", "data-testid": "response-meta", children: [
       showConfidence && /* @__PURE__ */ jsxs4(
         Badge2,
@@ -692,6 +790,31 @@ function AgentResponse({
 
 // src/chat/MessageBubble/MessageBubble.tsx
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function DocumentIcon() {
+  return /* @__PURE__ */ jsxs5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx7("path", { d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" }),
+    /* @__PURE__ */ jsx7("polyline", { points: "14 2 14 8 20 8" }),
+    /* @__PURE__ */ jsx7("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+    /* @__PURE__ */ jsx7("line", { x1: "16", y1: "17", x2: "8", y2: "17" })
+  ] });
+}
+function AttachmentThumbnail({ attachment }) {
+  const isImage = attachment.content_type.startsWith("image/");
+  if (isImage) {
+    return /* @__PURE__ */ jsx7("div", { className: "rounded-lg overflow-hidden border border-black/10 max-w-[240px]", children: /* @__PURE__ */ jsx7(
+      "img",
+      {
+        src: attachment.preview_url ?? `data:${attachment.content_type};base64,${attachment.data}`,
+        alt: attachment.filename,
+        className: "max-w-full max-h-[200px] object-contain"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 px-3 py-2 rounded-lg border border-black/10 bg-black/5", children: [
+    /* @__PURE__ */ jsx7(DocumentIcon, {}),
+    /* @__PURE__ */ jsx7("span", { className: "text-xs truncate max-w-[160px]", children: attachment.filename })
+  ] });
+}
 function MessageBubble({
   message,
   showAgent,
@@ -699,23 +822,29 @@ function MessageBubble({
   showConfidence = true,
   showVerification = true,
   animated = true,
+  userBubbleClassName,
   className
 }) {
   const isUser = message.role === "user";
+  const hasAttachments = message.attachments && message.attachments.length > 0;
   if (isUser) {
     return /* @__PURE__ */ jsx7(
       "div",
       {
         "data-message-id": message.id,
         className: twMerge4("flex w-full justify-end", className),
-        children: /* @__PURE__ */ jsx7(
+        children: /* @__PURE__ */ jsxs5(
           "div",
           {
             className: twMerge4(
-              "max-w-[70%] rounded-[18px] rounded-br-[4px] px-4 py-2.5 bg-accent text-brand-cream break-words whitespace-pre-wrap text-sm leading-relaxed",
-              animated && "motion-safe:animate-slideFromRight"
+              "max-w-[70%] rounded-[18px] rounded-br-[4px] px-4 py-2.5 bg-[#e8e8e8] text-[#1a1a1a] break-words whitespace-pre-wrap text-sm leading-relaxed",
+              animated && "motion-safe:animate-slideFromRight",
+              userBubbleClassName
             ),
-            children: message.content
+            children: [
+              hasAttachments && /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap gap-2 mb-2", children: message.attachments.map((att, i) => /* @__PURE__ */ jsx7(AttachmentThumbnail, { attachment: att }, `${att.filename}-${i}`)) }),
+              message.content
+            ]
           }
         )
       }
@@ -727,7 +856,7 @@ function MessageBubble({
       "data-message-id": message.id,
       className: twMerge4("flex w-full flex-col items-start gap-1.5", className),
       children: [
-        showAgent && message.agent && /* @__PURE__ */ jsx7("div", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-text-muted px-1", children: message.agent.replace("_agent", "").replace("_", " ") }),
+        showAgent && message.agent && /* @__PURE__ */ jsx7("div", { className: "text-[11px] font-display font-semibold uppercase tracking-[0.08em] text-text-muted px-1", children: message.agent.replace("_agent", "").replace("_", " ") }),
         /* @__PURE__ */ jsx7(
           "div",
           {
@@ -753,34 +882,70 @@ function MessageBubble({
 
 // src/chat/MessageThread/MessageThread.tsx
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-function MessageThread({ messages, streamingSlot, showSources, showConfidence, showVerification, className }) {
-  const bottomRef = useRef2(null);
+function MessageThread({ messages, streamingSlot, showAgent, showSources, showConfidence, showVerification, hideLastAssistant, userBubbleClassName, className }) {
+  const scrollRef = useRef2(null);
+  const isNearBottom = useRef2(true);
+  const isProgrammaticScroll = useRef2(false);
+  const hasStreaming = !!streamingSlot;
+  const scrollToBottom = useCallback2(() => {
+    const el = scrollRef.current;
+    if (el && isNearBottom.current) {
+      isProgrammaticScroll.current = true;
+      el.scrollTop = el.scrollHeight;
+    }
+  }, []);
+  const handleScroll = useCallback2(() => {
+    if (isProgrammaticScroll.current) {
+      isProgrammaticScroll.current = false;
+      return;
+    }
+    const el = scrollRef.current;
+    if (!el) return;
+    isNearBottom.current = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
+  }, []);
+  useEffect(scrollToBottom, [messages.length, scrollToBottom]);
   useEffect(() => {
-    bottomRef.current?.scrollIntoView?.({ behavior: "smooth" });
-  }, [messages.length, streamingSlot]);
+    if (!hasStreaming) return;
+    let raf;
+    const tick = () => {
+      scrollToBottom();
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [hasStreaming, scrollToBottom]);
   return /* @__PURE__ */ jsxs6(
     "div",
     {
+      ref: scrollRef,
       role: "log",
       "aria-live": "polite",
       "aria-label": "Message thread",
+      onScroll: handleScroll,
       className: twMerge5(
         "flex flex-col gap-4 overflow-y-auto flex-1 px-4 py-6",
         className
       ),
       children: [
-        messages.map((message) => /* @__PURE__ */ jsx8(
-          MessageBubble,
-          {
-            message,
-            showSources,
-            showConfidence,
-            showVerification
-          },
-          message.id
-        )),
-        streamingSlot,
-        /* @__PURE__ */ jsx8("div", { ref: bottomRef })
+        /* @__PURE__ */ jsx8("div", { className: "flex-1 shrink-0" }),
+        messages.map((message, i) => {
+          if (hideLastAssistant && i === messages.length - 1 && message.role === "assistant") {
+            return null;
+          }
+          return /* @__PURE__ */ jsx8(
+            MessageBubble,
+            {
+              message,
+              showAgent,
+              showSources,
+              showConfidence,
+              showVerification,
+              userBubbleClassName
+            },
+            message.id
+          );
+        }),
+        streamingSlot
       ]
     }
   );
@@ -788,8 +953,96 @@ function MessageThread({ messages, streamingSlot, showSources, showConfidence, s
 
 // src/chat/MessageComposer/MessageComposer.tsx
 import { twMerge as twMerge6 } from "tailwind-merge";
-import { useState as useState2, useRef as useRef3, useCallback as useCallback2 } from "react";
+import { useState as useState2, useRef as useRef3, useCallback as useCallback3 } from "react";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var ALLOWED_TYPES = /* @__PURE__ */ new Set([
+  "image/png",
+  "image/jpeg",
+  "image/gif",
+  "image/webp",
+  "application/pdf"
+]);
+var MAX_FILE_SIZE = 10 * 1024 * 1024;
+var MAX_ATTACHMENTS = 5;
+function ArrowUpIcon() {
+  return /* @__PURE__ */ jsxs7("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx9("path", { d: "M10 16V4" }),
+    /* @__PURE__ */ jsx9("path", { d: "M4 10l6-6 6 6" })
+  ] });
+}
+function StopIcon() {
+  return /* @__PURE__ */ jsx9("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx9("rect", { x: "3", y: "3", width: "10", height: "10", rx: "2" }) });
+}
+function PaperclipIcon() {
+  return /* @__PURE__ */ jsx9("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx9("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" }) });
+}
+function XIcon({ size = 14 }) {
+  return /* @__PURE__ */ jsxs7("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx9("path", { d: "M18 6L6 18" }),
+    /* @__PURE__ */ jsx9("path", { d: "M6 6l12 12" })
+  ] });
+}
+function DocumentIcon2() {
+  return /* @__PURE__ */ jsxs7("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx9("path", { d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" }),
+    /* @__PURE__ */ jsx9("polyline", { points: "14 2 14 8 20 8" }),
+    /* @__PURE__ */ jsx9("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+    /* @__PURE__ */ jsx9("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
+    /* @__PURE__ */ jsx9("polyline", { points: "10 9 9 9 8 9" })
+  ] });
+}
+function fileToBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      const base64 = result.split(",")[1];
+      resolve(base64);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+function AttachmentPreview({
+  attachment,
+  onRemove
+}) {
+  const isImage = attachment.content_type.startsWith("image/");
+  return /* @__PURE__ */ jsxs7("div", { className: "relative group flex-shrink-0", children: [
+    isImage ? /* @__PURE__ */ jsx9("div", { className: "w-16 h-16 rounded-lg overflow-hidden border border-border/60 bg-surface-alt", children: /* @__PURE__ */ jsx9(
+      "img",
+      {
+        src: attachment.preview_url ?? `data:${attachment.content_type};base64,${attachment.data}`,
+        alt: attachment.filename,
+        className: "w-full h-full object-cover"
+      }
+    ) }) : /* @__PURE__ */ jsxs7("div", { className: "h-16 px-3 rounded-lg border border-border/60 bg-surface-alt flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx9("div", { className: "text-text-muted", children: /* @__PURE__ */ jsx9(DocumentIcon2, {}) }),
+      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col min-w-0", children: [
+        /* @__PURE__ */ jsx9("span", { className: "text-xs text-text-primary truncate max-w-[120px]", children: attachment.filename }),
+        /* @__PURE__ */ jsx9("span", { className: "text-[10px] text-text-muted", children: "PDF" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx9(
+      "button",
+      {
+        type: "button",
+        onClick: onRemove,
+        className: twMerge6(
+          "absolute -top-1.5 -right-1.5",
+          "w-5 h-5 rounded-full",
+          "bg-text-muted/80 text-white",
+          "flex items-center justify-center",
+          "opacity-0 group-hover:opacity-100",
+          "transition-opacity duration-150",
+          "hover:bg-text-primary"
+        ),
+        "aria-label": `Remove ${attachment.filename}`,
+        children: /* @__PURE__ */ jsx9(XIcon, { size: 10 })
+      }
+    )
+  ] });
+}
 function MessageComposer({
   onSend,
   isLoading = false,
@@ -797,23 +1050,29 @@ function MessageComposer({
   className
 }) {
   const [value, setValue] = useState2("");
+  const [attachments, setAttachments] = useState2([]);
+  const [dragOver, setDragOver] = useState2(false);
   const textareaRef = useRef3(null);
-  const canSend = value.trim().length > 0 && !isLoading;
-  const resetHeight = useCallback2(() => {
+  const fileInputRef = useRef3(null);
+  const canSend = (value.trim().length > 0 || attachments.length > 0) && !isLoading;
+  const resetHeight = useCallback3(() => {
     const el = textareaRef.current;
     if (el) {
       el.style.height = "auto";
       el.style.overflowY = "hidden";
     }
   }, []);
-  const handleSend = useCallback2(() => {
+  const handleSend = useCallback3(() => {
     if (!canSend) return;
-    onSend(value.trim());
+    const message = value.trim() || (attachments.length > 0 ? "Please analyse the attached file(s)." : "");
+    if (!message && attachments.length === 0) return;
+    onSend(message, attachments.length > 0 ? attachments : void 0);
     setValue("");
+    setAttachments([]);
     resetHeight();
     textareaRef.current?.focus();
-  }, [canSend, onSend, value, resetHeight]);
-  const handleKeyDown = useCallback2(
+  }, [canSend, onSend, value, attachments, resetHeight]);
+  const handleKeyDown = useCallback3(
     (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
@@ -822,64 +1081,194 @@ function MessageComposer({
     },
     [handleSend]
   );
-  const handleChange = useCallback2(
+  const handleChange = useCallback3(
     (e) => {
       setValue(e.target.value);
       const el = e.target;
       el.style.height = "auto";
-      const capped = Math.min(el.scrollHeight, 128);
+      const capped = Math.min(el.scrollHeight, 200);
       el.style.height = `${capped}px`;
-      el.style.overflowY = el.scrollHeight > 128 ? "auto" : "hidden";
+      el.style.overflowY = el.scrollHeight > 200 ? "auto" : "hidden";
     },
     []
   );
+  const addFiles = useCallback3(async (files) => {
+    const fileArray = Array.from(files);
+    for (const file of fileArray) {
+      if (attachments.length >= MAX_ATTACHMENTS) break;
+      if (!ALLOWED_TYPES.has(file.type)) continue;
+      if (file.size > MAX_FILE_SIZE) continue;
+      try {
+        const data = await fileToBase64(file);
+        const previewUrl = file.type.startsWith("image/") ? URL.createObjectURL(file) : void 0;
+        const attachment = {
+          filename: file.name,
+          content_type: file.type,
+          data,
+          preview_url: previewUrl
+        };
+        setAttachments((prev) => {
+          if (prev.length >= MAX_ATTACHMENTS) return prev;
+          return [...prev, attachment];
+        });
+      } catch {
+      }
+    }
+  }, [attachments.length]);
+  const handleFileSelect = useCallback3(() => {
+    fileInputRef.current?.click();
+  }, []);
+  const handleFileInputChange = useCallback3(
+    (e) => {
+      if (e.target.files) {
+        void addFiles(e.target.files);
+        e.target.value = "";
+      }
+    },
+    [addFiles]
+  );
+  const removeAttachment = useCallback3((index) => {
+    setAttachments((prev) => {
+      const removed = prev[index];
+      if (removed?.preview_url) URL.revokeObjectURL(removed.preview_url);
+      return prev.filter((_, i) => i !== index);
+    });
+  }, []);
+  const handlePaste = useCallback3(
+    (e) => {
+      const items = e.clipboardData.items;
+      const files = [];
+      for (const item of items) {
+        if (item.kind === "file" && ALLOWED_TYPES.has(item.type)) {
+          const file = item.getAsFile();
+          if (file) files.push(file);
+        }
+      }
+      if (files.length > 0) {
+        void addFiles(files);
+      }
+    },
+    [addFiles]
+  );
+  const handleDragOver = useCallback3((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(true);
+  }, []);
+  const handleDragLeave = useCallback3((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(false);
+  }, []);
+  const handleDrop = useCallback3(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragOver(false);
+      if (e.dataTransfer.files.length > 0) {
+        void addFiles(e.dataTransfer.files);
+      }
+    },
+    [addFiles]
+  );
   return /* @__PURE__ */ jsxs7(
     "div",
     {
       className: twMerge6(
-        "flex items-end gap-3 shrink-0 border-t border-border px-4 py-3",
+        "relative shrink-0 rounded-3xl border bg-surface",
+        "shadow-lg shadow-black/10",
+        "transition-all duration-200",
+        "focus-within:border-accent/40 focus-within:shadow-accent/5",
+        dragOver ? "border-accent/60 bg-accent/5" : "border-border/60",
         className
       ),
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
       children: [
         /* @__PURE__ */ jsx9(
-          "textarea",
+          "input",
           {
-            ref: textareaRef,
-            value,
-            onChange: handleChange,
-            onKeyDown: handleKeyDown,
-            placeholder,
-            rows: 1,
-            disabled: isLoading,
-            className: twMerge6(
-              "flex-1 resize-none rounded-xl border border-border bg-surface/80",
-              "px-4 py-2.5 text-sm text-text-primary placeholder:text-text-muted",
-              "focus:border-transparent focus:ring-2 focus:ring-accent/40 focus:outline-none",
-              "disabled:opacity-50 disabled:cursor-not-allowed",
-              "overflow-hidden",
-              "transition-all duration-200"
-            ),
-            style: { colorScheme: "dark" },
-            "aria-label": "Message input"
+            ref: fileInputRef,
+            type: "file",
+            multiple: true,
+            accept: "image/png,image/jpeg,image/gif,image/webp,application/pdf",
+            onChange: handleFileInputChange,
+            className: "hidden",
+            "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsx9(
-          "button",
+        attachments.length > 0 && /* @__PURE__ */ jsx9("div", { className: "flex gap-2 px-4 pt-3 pb-1 overflow-x-auto", children: attachments.map((att, i) => /* @__PURE__ */ jsx9(
+          AttachmentPreview,
           {
-            type: "button",
-            onClick: handleSend,
-            disabled: !value.trim() || isLoading,
-            "aria-label": "Send message",
-            className: twMerge6(
-              "inline-flex items-center justify-center rounded-xl px-5 py-2.5",
-              "text-sm font-semibold text-white shrink-0",
-              "transition-all duration-200",
-              "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
-              value.trim() && !isLoading ? "bg-accent hover:bg-accent-hover hover:scale-[1.02] hover:shadow-glow-cyan active:scale-[0.98]" : "bg-accent/30 text-text-muted cursor-not-allowed"
-            ),
-            children: "Send"
-          }
-        )
+            attachment: att,
+            onRemove: () => removeAttachment(i)
+          },
+          `${att.filename}-${i}`
+        )) }),
+        dragOver && /* @__PURE__ */ jsx9("div", { className: "absolute inset-0 rounded-3xl flex items-center justify-center bg-accent/10 border-2 border-dashed border-accent/40 z-10 pointer-events-none", children: /* @__PURE__ */ jsx9("span", { className: "text-sm font-display font-semibold text-accent", children: "Drop files here" }) }),
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-end", children: [
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              onClick: handleFileSelect,
+              disabled: isLoading || attachments.length >= MAX_ATTACHMENTS,
+              "aria-label": "Attach file",
+              className: twMerge6(
+                "flex-shrink-0 ml-2 mb-3",
+                "inline-flex items-center justify-center",
+                "w-9 h-9 rounded-full",
+                "transition-all duration-200",
+                "text-text-muted/60 hover:text-text-secondary hover:bg-text-muted/10",
+                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+                "disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent"
+              ),
+              children: /* @__PURE__ */ jsx9(PaperclipIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            "textarea",
+            {
+              ref: textareaRef,
+              value,
+              onChange: handleChange,
+              onKeyDown: handleKeyDown,
+              onPaste: handlePaste,
+              placeholder,
+              rows: 1,
+              disabled: isLoading,
+              className: twMerge6(
+                "flex-1 resize-none bg-transparent",
+                "pl-2 pr-14 pt-4 pb-4 text-[15px] leading-relaxed",
+                "text-text-primary placeholder:text-text-muted/70",
+                "focus:outline-none",
+                "disabled:opacity-50 disabled:cursor-not-allowed",
+                "overflow-hidden"
+              ),
+              style: { colorScheme: "dark" },
+              "aria-label": "Message input"
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              onClick: handleSend,
+              disabled: !canSend,
+              "aria-label": "Send message",
+              className: twMerge6(
+                "absolute bottom-3 right-3",
+                "inline-flex items-center justify-center",
+                "w-9 h-9 rounded-full",
+                "transition-all duration-200",
+                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+                canSend ? "bg-accent text-white hover:bg-accent-hover active:scale-90 shadow-md shadow-accent/25" : isLoading ? "bg-text-muted/20 text-text-secondary hover:bg-text-muted/30" : "bg-transparent text-text-muted/40 cursor-default"
+              ),
+              children: isLoading ? /* @__PURE__ */ jsx9(StopIcon, {}) : /* @__PURE__ */ jsx9(ArrowUpIcon, {})
+            }
+          )
+        ] })
       ]
     }
   );
@@ -892,6 +1281,7 @@ function WelcomeScreen({
   title = "Welcome",
   message = "How can I help you today?",
   icon,
+  iconClassName,
   suggestedQuestions = [],
   onQuestionSelect,
   className
@@ -904,12 +1294,15 @@ function WelcomeScreen({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx10(
+        icon ? iconClassName ? /* @__PURE__ */ jsx10("div", { className: iconClassName, "aria-hidden": "true", children: icon }) : icon : /* @__PURE__ */ jsx10(
           "div",
           {
-            className: "w-14 h-14 rounded-2xl bg-accent/10 border border-border flex items-center justify-center pulse-glow",
+            className: twMerge7(
+              "w-14 h-14 rounded-2xl bg-accent/10 border border-border flex items-center justify-center pulse-glow",
+              iconClassName
+            ),
             "aria-hidden": "true",
-            children: icon ?? /* @__PURE__ */ jsx10("span", { className: "text-2xl", children: "\u2726" })
+            children: /* @__PURE__ */ jsx10("span", { className: "text-2xl", children: "\u2726" })
           }
         ),
         /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-2", children: [
@@ -919,7 +1312,7 @@ function WelcomeScreen({
         suggestedQuestions.length > 0 && /* @__PURE__ */ jsx10(
           "div",
           {
-            className: "flex flex-wrap justify-center gap-2 max-w-md",
+            className: "flex flex-wrap justify-center gap-2 max-w-xl",
             role: "group",
             "aria-label": "Suggested questions",
             children: suggestedQuestions.map((question) => /* @__PURE__ */ jsx10(
@@ -928,7 +1321,7 @@ function WelcomeScreen({
                 type: "button",
                 onClick: () => onQuestionSelect?.(question),
                 className: twMerge7(
-                  "px-4 py-2 rounded-full text-sm",
+                  "px-3.5 py-1.5 rounded-full text-[12px]",
                   "border border-border bg-transparent text-text-secondary",
                   "hover:bg-accent/10 hover:border-interactive hover:text-text-primary",
                   "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
@@ -947,7 +1340,8 @@ function WelcomeScreen({
 
 // src/streaming/StreamingMessage/StreamingMessage.tsx
 import { useEffect as useEffect3, useRef as useRef5 } from "react";
-import { Spinner } from "@surf-kit/core";
+import { twMerge as twMerge8 } from "tailwind-merge";
+import { WaveLoader } from "@surf-kit/core";
 
 // src/hooks/useCharacterDrain.ts
 import { useState as useState3, useRef as useRef4, useEffect as useEffect2 } from "react";
@@ -976,7 +1370,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));
@@ -1021,14 +1418,35 @@ 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 = useRef5(onComplete);
   onCompleteRef.current = onComplete;
+  const onDrainingRef = useRef5(onDraining);
+  onDrainingRef.current = onDraining;
   const wasActiveRef = useRef5(stream.active);
   useEffect3(() => {
     if (wasActiveRef.current && !stream.active) {
@@ -1037,35 +1455,40 @@ function StreamingMessage({
     wasActiveRef.current = stream.active;
   }, [stream.active]);
   const phaseLabel = phaseLabels[stream.phase];
-  const { displayed: displayedContent } = useCharacterDrain(stream.content);
-  return /* @__PURE__ */ jsxs9("div", { className, "data-testid": "streaming-message", children: [
+  const { displayed: rawDisplayed, isDraining } = useCharacterDrain(stream.content);
+  const displayedContent = stream.active || isDraining ? rawDisplayed.trimEnd() : rawDisplayed;
+  useEffect3(() => {
+    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__ */ jsxs9("div", { className: twMerge8("flex w-full flex-col items-start", className), "data-testid": "streaming-message", children: [
     /* @__PURE__ */ jsxs9("div", { "aria-live": "assertive", className: "sr-only", children: [
       stream.active && stream.phase !== "idle" && "Response started",
       !stream.active && stream.content && "Response complete"
     ] }),
+    showCursor && /* @__PURE__ */ jsx11("style", { children: CURSOR_STYLES }),
+    agentLabel && /* @__PURE__ */ jsx11("div", { className: "text-[11px] font-display font-semibold uppercase tracking-[0.08em] text-text-muted px-1 mb-1.5", children: agentLabel }),
     /* @__PURE__ */ jsxs9("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__ */ jsxs9(
+      showPhaseIndicator && /* @__PURE__ */ jsxs9(
         "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__ */ jsx11("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx11(Spinner, { size: "sm" }) }),
+            /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx11(WaveLoader, { size: "sm", color: "#38bdf8" }) }),
             /* @__PURE__ */ jsx11("span", { children: phaseLabel })
           ]
         }
       ),
-      /* @__PURE__ */ jsxs9("div", { className: "text-sm leading-relaxed text-text-primary whitespace-pre-wrap", children: [
-        displayedContent,
-        stream.active && /* @__PURE__ */ jsx11(
-          "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__ */ jsx11(
+        ResponseMessage,
+        {
+          content: displayedContent,
+          className: showCursor ? "sk-streaming-cursor" : void 0
+        }
+      )
     ] })
   ] });
 }
@@ -1096,7 +1519,7 @@ function AgentChat({
   return /* @__PURE__ */ jsxs10(
     "div",
     {
-      className: twMerge8(
+      className: twMerge9(
         "flex flex-col h-full bg-canvas border border-border rounded-xl overflow-hidden",
         className
       ),
@@ -1599,7 +2022,7 @@ function ThinkingIndicator({ label = "Thinking...", className }) {
 }
 
 // src/streaming/ToolExecution/ToolExecution.tsx
-import { Spinner as Spinner2 } from "@surf-kit/core";
+import { WaveLoader as WaveLoader2 } from "@surf-kit/core";
 import { jsx as jsx26, jsxs as jsxs23 } from "react/jsx-runtime";
 var defaultLabels = {
   search: "Searching knowledge base...",
@@ -1615,7 +2038,7 @@ function ToolExecution({ tool, label, className }) {
       role: "status",
       "data-testid": "tool-execution",
       children: [
-        /* @__PURE__ */ jsx26("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx26(Spinner2, { size: "sm" }) }),
+        /* @__PURE__ */ jsx26("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx26(WaveLoader2, { size: "sm", color: "#38bdf8" }) }),
         /* @__PURE__ */ jsx26("span", { children: displayLabel })
       ]
     }
@@ -1623,7 +2046,7 @@ function ToolExecution({ tool, label, className }) {
 }
 
 // src/streaming/RetrievalProgress/RetrievalProgress.tsx
-import { Spinner as Spinner3 } from "@surf-kit/core";
+import { WaveLoader as WaveLoader3 } from "@surf-kit/core";
 import { jsx as jsx27, jsxs as jsxs24 } from "react/jsx-runtime";
 function RetrievalProgress({ sources, isActive, className }) {
   return /* @__PURE__ */ jsxs24(
@@ -1635,7 +2058,7 @@ function RetrievalProgress({ sources, isActive, className }) {
       "data-testid": "retrieval-progress",
       children: [
         isActive && /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-2 text-sm text-text-secondary", children: [
-          /* @__PURE__ */ jsx27("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx27(Spinner3, { size: "sm" }) }),
+          /* @__PURE__ */ jsx27("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx27(WaveLoader3, { size: "sm", color: "#38bdf8" }) }),
           /* @__PURE__ */ jsx27("span", { children: "Retrieving sources..." })
         ] }),
         sources.length > 0 && /* @__PURE__ */ jsx27("ul", { className: "space-y-1", "data-testid": "source-list", children: sources.map((source, index) => /* @__PURE__ */ jsxs24(
@@ -1733,7 +2156,7 @@ function TypewriterText({
 }
 
 // src/streaming/TypingIndicator/TypingIndicator.tsx
-import { twMerge as twMerge9 } from "tailwind-merge";
+import { twMerge as twMerge10 } from "tailwind-merge";
 import { useReducedMotion as useReducedMotion2 } from "@surf-kit/hooks";
 import { jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
 var bounceKeyframes = `
@@ -1753,7 +2176,7 @@ function TypingIndicator({
     {
       role: "status",
       "aria-label": label ?? "typing",
-      className: twMerge9("inline-flex items-center gap-2", className),
+      className: twMerge10("inline-flex items-center gap-2", className),
       "data-testid": "typing-indicator",
       children: [
         !reducedMotion && /* @__PURE__ */ jsx30("style", { children: bounceKeyframes }),
@@ -1775,7 +2198,7 @@ function TypingIndicator({
 }
 
 // src/streaming/TextGlimmer/TextGlimmer.tsx
-import { twMerge as twMerge10 } from "tailwind-merge";
+import { twMerge as twMerge11 } from "tailwind-merge";
 import { useReducedMotion as useReducedMotion3 } from "@surf-kit/hooks";
 import { jsx as jsx31, jsxs as jsxs28 } from "react/jsx-runtime";
 var shimmerKeyframes = `
@@ -1792,7 +2215,7 @@ function TextGlimmer({ lines = 3, className }) {
     {
       role: "status",
       "aria-label": "Loading",
-      className: twMerge10("flex flex-col gap-2", className),
+      className: twMerge11("flex flex-col gap-2", className),
       "data-testid": "text-glimmer",
       children: [
         !reducedMotion && /* @__PURE__ */ jsx31("style", { children: shimmerKeyframes }),
@@ -1818,7 +2241,7 @@ function TextGlimmer({ lines = 3, className }) {
 }
 
 // src/streaming/StreamingList/StreamingList.tsx
-import { twMerge as twMerge11 } from "tailwind-merge";
+import { twMerge as twMerge12 } from "tailwind-merge";
 import { useReducedMotion as useReducedMotion4 } from "@surf-kit/hooks";
 import { jsx as jsx32, jsxs as jsxs29 } from "react/jsx-runtime";
 var fadeSlideInKeyframes = `
@@ -1836,13 +2259,13 @@ function StreamingList({
 }) {
   const reducedMotion = useReducedMotion4();
   if (items.length === 0 && !isStreaming) {
-    return emptyMessage ? /* @__PURE__ */ jsx32("p", { className: twMerge11("text-sm text-text-secondary", className), "data-testid": "streaming-list-empty", children: emptyMessage }) : null;
+    return emptyMessage ? /* @__PURE__ */ jsx32("p", { className: twMerge12("text-sm text-text-secondary", className), "data-testid": "streaming-list-empty", children: emptyMessage }) : null;
   }
   return /* @__PURE__ */ jsxs29(
     "ul",
     {
       "aria-live": "polite",
-      className: twMerge11("list-none p-0 m-0", className),
+      className: twMerge12("list-none p-0 m-0", className),
       "data-testid": "streaming-list",
       children: [
         !reducedMotion && /* @__PURE__ */ jsx32("style", { children: fadeSlideInKeyframes }),
@@ -1862,7 +2285,7 @@ function StreamingList({
 }
 
 // src/streaming/StreamingStructure/StreamingStructure.tsx
-import { twMerge as twMerge12 } from "tailwind-merge";
+import { twMerge as twMerge13 } from "tailwind-merge";
 import { useReducedMotion as useReducedMotion5 } from "@surf-kit/hooks";
 import { jsx as jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
 var fadeSlideInKeyframes2 = `
@@ -1911,7 +2334,7 @@ function StreamingStructure({
     "dl",
     {
       "aria-live": "polite",
-      className: twMerge12("m-0", className),
+      className: twMerge13("m-0", className),
       "data-testid": "streaming-structure",
       children: [
         !reducedMotion && /* @__PURE__ */ jsx33("style", { children: fadeSlideInKeyframes2 }),
@@ -1934,7 +2357,7 @@ function StreamingStructure({
 }
 
 // src/chat/ConversationList/ConversationList.tsx
-import { twMerge as twMerge13 } from "tailwind-merge";
+import { twMerge as twMerge14 } from "tailwind-merge";
 import { jsx as jsx34, jsxs as jsxs31 } from "react/jsx-runtime";
 function ConversationList({
   conversations,
@@ -1948,7 +2371,7 @@ function ConversationList({
     "nav",
     {
       "aria-label": "Conversation list",
-      className: twMerge13("flex flex-col h-full bg-canvas", className),
+      className: twMerge14("flex flex-col h-full bg-canvas", className),
       children: [
         onNew && /* @__PURE__ */ jsx34("div", { className: "p-3 border-b border-border", children: /* @__PURE__ */ jsx34(
           "button",
@@ -1965,7 +2388,7 @@ function ConversationList({
             return /* @__PURE__ */ jsxs31(
               "li",
               {
-                className: twMerge13(
+                className: twMerge14(
                   "flex items-start border-b border-border transition-colors duration-200",
                   "hover:bg-surface",
                   isActive && "bg-surface-raised border-l-2 border-l-accent"
@@ -2025,8 +2448,8 @@ function ConversationList({
 }
 
 // src/layouts/AgentFullPage/AgentFullPage.tsx
-import { twMerge as twMerge14 } from "tailwind-merge";
-import { useState as useState7, useCallback as useCallback3 } from "react";
+import { twMerge as twMerge15 } from "tailwind-merge";
+import { useState as useState7, useCallback as useCallback4 } from "react";
 import { Fragment, jsx as jsx35, jsxs as jsxs32 } from "react/jsx-runtime";
 function AgentFullPage({
   endpoint,
@@ -2040,7 +2463,7 @@ function AgentFullPage({
   className
 }) {
   const [sidebarOpen, setSidebarOpen] = useState7(false);
-  const handleSelect = useCallback3(
+  const handleSelect = useCallback4(
     (id) => {
       onConversationSelect?.(id);
       setSidebarOpen(false);
@@ -2050,7 +2473,7 @@ function AgentFullPage({
   return /* @__PURE__ */ jsxs32(
     "div",
     {
-      className: twMerge14("flex h-screen w-full overflow-hidden bg-brand-dark", className),
+      className: twMerge15("flex h-screen w-full overflow-hidden bg-brand-dark", className),
       "data-testid": "agent-full-page",
       children: [
         showConversationList && /* @__PURE__ */ jsxs32(Fragment, { children: [
@@ -2065,7 +2488,7 @@ function AgentFullPage({
           /* @__PURE__ */ jsx35(
             "aside",
             {
-              className: twMerge14(
+              className: twMerge15(
                 "bg-brand-dark border-r border-brand-gold/15 w-72 shrink-0 flex-col z-40",
                 // Desktop: always visible
                 "hidden md:flex",
@@ -2131,7 +2554,7 @@ function AgentFullPage({
 }
 
 // src/layouts/AgentPanel/AgentPanel.tsx
-import { twMerge as twMerge15 } from "tailwind-merge";
+import { twMerge as twMerge16 } from "tailwind-merge";
 import { useRef as useRef6, useEffect as useEffect5 } from "react";
 import { jsx as jsx36, jsxs as jsxs33 } from "react/jsx-runtime";
 function AgentPanel({
@@ -2156,13 +2579,13 @@ function AgentPanel({
   return /* @__PURE__ */ jsxs33(
     "div",
     {
-      className: twMerge15("fixed inset-0 z-50", !isOpen && "pointer-events-none"),
+      className: twMerge16("fixed inset-0 z-50", !isOpen && "pointer-events-none"),
       "aria-hidden": !isOpen,
       children: [
         /* @__PURE__ */ jsx36(
           "div",
           {
-            className: twMerge15(
+            className: twMerge16(
               "fixed inset-0 transition-opacity duration-300",
               isOpen ? "opacity-100 bg-brand-dark/70 backdrop-blur-sm pointer-events-auto" : "opacity-0 pointer-events-none"
             ),
@@ -2178,7 +2601,7 @@ function AgentPanel({
             "aria-label": title,
             "aria-modal": isOpen ? "true" : void 0,
             style: { width: widthStyle, maxWidth: "100vw" },
-            className: twMerge15(
+            className: twMerge16(
               "fixed top-0 h-full flex flex-col z-50 bg-brand-dark shadow-card",
               "transition-transform duration-300 ease-in-out",
               side === "left" ? `left-0 border-r border-brand-gold/15 ${isOpen ? "translate-x-0" : "-translate-x-full"}` : `right-0 border-l border-brand-gold/15 ${isOpen ? "translate-x-0" : "translate-x-full"}`,
@@ -2220,8 +2643,8 @@ function AgentPanel({
 }
 
 // src/layouts/AgentWidget/AgentWidget.tsx
-import { twMerge as twMerge16 } from "tailwind-merge";
-import { useState as useState8, useCallback as useCallback4 } from "react";
+import { twMerge as twMerge17 } from "tailwind-merge";
+import { useState as useState8, useCallback as useCallback5 } from "react";
 import { jsx as jsx37, jsxs as jsxs34 } from "react/jsx-runtime";
 function AgentWidget({
   endpoint,
@@ -2231,7 +2654,7 @@ function AgentWidget({
   className
 }) {
   const [isOpen, setIsOpen] = useState8(false);
-  const toggle = useCallback4(() => {
+  const toggle = useCallback5(() => {
     setIsOpen((prev) => !prev);
   }, []);
   const positionClasses = position === "bottom-left" ? "left-4 bottom-4" : "right-4 bottom-4";
@@ -2244,7 +2667,7 @@ function AgentWidget({
         role: "dialog",
         "aria-label": title,
         "aria-hidden": !isOpen,
-        className: twMerge16(
+        className: twMerge17(
           "fixed z-50 flex flex-col",
           "w-[min(400px,calc(100vw-2rem))] h-[min(600px,calc(100vh-6rem))]",
           "rounded-2xl overflow-hidden border border-brand-gold/15",
@@ -2291,7 +2714,7 @@ function AgentWidget({
         onClick: toggle,
         "aria-label": isOpen ? "Close chat" : triggerLabel,
         "aria-expanded": isOpen,
-        className: twMerge16(
+        className: twMerge17(
           "fixed z-50 flex items-center justify-center w-14 h-14 rounded-full",
           "bg-brand-blue text-brand-cream shadow-glow-cyan",
           "hover:bg-brand-cyan hover:shadow-glow-cyan hover:scale-105",
@@ -2309,7 +2732,7 @@ function AgentWidget({
 }
 
 // src/layouts/AgentEmbed/AgentEmbed.tsx
-import { twMerge as twMerge17 } from "tailwind-merge";
+import { twMerge as twMerge18 } from "tailwind-merge";
 import { jsx as jsx38 } from "react/jsx-runtime";
 function AgentEmbed({
   endpoint,
@@ -2319,7 +2742,7 @@ function AgentEmbed({
   return /* @__PURE__ */ jsx38(
     "div",
     {
-      className: twMerge17("w-full h-full min-h-0", className),
+      className: twMerge18("w-full h-full min-h-0", className),
       "data-testid": "agent-embed",
       children: /* @__PURE__ */ jsx38(
         AgentChat,
@@ -2335,8 +2758,8 @@ function AgentEmbed({
 
 // src/mcp/MCPToolCall/MCPToolCall.tsx
 import { cva } from "class-variance-authority";
-import { twMerge as twMerge18 } from "tailwind-merge";
-import { Badge as Badge7, Spinner as Spinner4 } from "@surf-kit/core";
+import { twMerge as twMerge19 } from "tailwind-merge";
+import { Badge as Badge7, WaveLoader as WaveLoader4 } from "@surf-kit/core";
 import { jsx as jsx39, jsxs as jsxs35 } from "react/jsx-runtime";
 var statusBadgeIntent = {
   pending: "default",
@@ -2379,7 +2802,7 @@ function MCPToolCall({ call, isExpanded = false, onToggleExpand, className }) {
   return /* @__PURE__ */ jsxs35(
     "div",
     {
-      className: twMerge18(container({ status: call.status }), className),
+      className: twMerge19(container({ status: call.status }), className),
       "data-testid": "mcp-tool-call",
       children: [
         /* @__PURE__ */ jsxs35(
@@ -2396,7 +2819,7 @@ function MCPToolCall({ call, isExpanded = false, onToggleExpand, className }) {
                 call.serverName && /* @__PURE__ */ jsx39("span", { className: "text-xs text-text-secondary truncate", children: call.serverName })
               ] }),
               /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2 shrink-0", children: [
-                call.status === "running" && /* @__PURE__ */ jsx39("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx39(Spinner4, { size: "sm" }) }),
+                call.status === "running" && /* @__PURE__ */ jsx39("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx39(WaveLoader4, { size: "sm", color: "#38bdf8" }) }),
                 /* @__PURE__ */ jsx39(
                   Badge7,
                   {
@@ -2470,7 +2893,7 @@ function MCPToolCall({ call, isExpanded = false, onToggleExpand, className }) {
 }
 
 // src/mcp/MCPResourceView/MCPResourceView.tsx
-import { twMerge as twMerge19 } from "tailwind-merge";
+import { twMerge as twMerge20 } from "tailwind-merge";
 import { jsx as jsx40, jsxs as jsxs36 } from "react/jsx-runtime";
 function isImageMime(mime) {
   return !!mime && mime.startsWith("image/");
@@ -2488,7 +2911,7 @@ function MCPResourceView({ resource, className }) {
   return /* @__PURE__ */ jsxs36(
     "div",
     {
-      className: twMerge19("rounded-lg border border-border bg-surface p-3 text-sm", className),
+      className: twMerge20("rounded-lg border border-border bg-surface p-3 text-sm", className),
       "data-testid": "mcp-resource-view",
       children: [
         /* @__PURE__ */ jsxs36("div", { className: "mb-2", children: [
@@ -2540,7 +2963,7 @@ function MCPResourceView({ resource, className }) {
 // src/mcp/MCPServerStatus/MCPServerStatus.tsx
 import { useState as useState9 } from "react";
 import { cva as cva2 } from "class-variance-authority";
-import { twMerge as twMerge20 } from "tailwind-merge";
+import { twMerge as twMerge21 } from "tailwind-merge";
 import { jsx as jsx41, jsxs as jsxs37 } from "react/jsx-runtime";
 var statusDot = cva2("inline-block h-2 w-2 rounded-full shrink-0", {
   variants: {
@@ -2568,7 +2991,7 @@ function MCPServerStatus({ server, className }) {
   return /* @__PURE__ */ jsxs37(
     "div",
     {
-      className: twMerge20("rounded-lg border border-border bg-surface p-3 text-sm", className),
+      className: twMerge21("rounded-lg border border-border bg-surface p-3 text-sm", className),
       "data-testid": "mcp-server-status",
       children: [
         /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2 mb-1", children: [
@@ -2682,7 +3105,7 @@ function MCPServerStatus({ server, className }) {
 // src/mcp/MCPApprovalDialog/MCPApprovalDialog.tsx
 import { useRef as useRef7, useEffect as useEffect6 } from "react";
 import { cva as cva3 } from "class-variance-authority";
-import { twMerge as twMerge21 } from "tailwind-merge";
+import { twMerge as twMerge22 } from "tailwind-merge";
 import { useDialog, FocusScope } from "react-aria";
 import { Button as Button2, Badge as Badge8 } from "@surf-kit/core";
 import { jsx as jsx42, jsxs as jsxs38 } from "react/jsx-runtime";
@@ -2742,7 +3165,7 @@ function MCPApprovalDialog({
         {
           ...dialogProps,
           ref,
-          className: twMerge21(riskBorder({ risk: riskLevel }), className),
+          className: twMerge22(riskBorder({ risk: riskLevel }), className),
           "data-testid": "mcp-approval-dialog",
           children: [
             /* @__PURE__ */ jsxs38("div", { className: "flex items-center justify-between mb-4", children: [