@surf-kit/agent 0.2.2 → 0.4.0

package/dist/index.cjs

@@ -81,7 +81,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/chat/AgentChat/AgentChat.tsx
-var import_tailwind_merge8 = require("tailwind-merge");
+var import_tailwind_merge9 = require("tailwind-merge");
 
 // src/hooks/useAgentChat.ts
 var import_react = require("react");
@@ -92,7 +92,8 @@ var initialState = {
   error: null,
   inputValue: "",
   streamPhase: "idle",
-  streamingContent: ""
+  streamingContent: "",
+  streamingAgent: null
 };
 function reducer(state, action) {
   switch (action.type) {
@@ -106,12 +107,17 @@ 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_CONTENT_RESET":
+      return { ...state, streamingContent: "" };
+    case "STREAM_AGENT":
+      return { ...state, streamingAgent: action.agent };
     case "SEND_SUCCESS":
       return {
         ...state,
@@ -127,7 +133,8 @@ function reducer(state, action) {
         isLoading: false,
         error: action.error,
         streamPhase: "idle",
-        streamingContent: ""
+        streamingContent: "",
+        streamingAgent: null
       };
     case "LOAD_CONVERSATION":
       return {
@@ -153,115 +160,172 @@ function useAgentChat(config2) {
   const configRef = (0, import_react.useRef)(config2);
   configRef.current = config2;
   const lastUserMessageRef = (0, import_react.useRef)(null);
+  const lastUserAttachmentsRef = (0, import_react.useRef)(void 0);
+  const abortControllerRef = (0, import_react.useRef)(null);
   const sendMessage = (0, import_react.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();
+      abortControllerRef.current = controller;
       const timeoutId = setTimeout(() => controller.abort(), timeout);
+      const ctx = {
+        accumulatedContent: "",
+        agentResponse: null,
+        capturedAgent: null,
+        capturedConversationId: null,
+        hadStreamError: false
+      };
       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 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 "delta_reset":
+              ctx.accumulatedContent = "";
+              dispatch({ type: "STREAM_CONTENT_RESET" });
+              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);
         if (err.name === "AbortError") {
-          dispatch({
-            type: "SEND_ERROR",
-            error: { code: "TIMEOUT", message: "Request timed out", retryable: true }
-          });
+          if (ctx.accumulatedContent) {
+            const partialMessage = {
+              id: generateMessageId(),
+              role: "assistant",
+              content: ctx.accumulatedContent,
+              agent: ctx.capturedAgent ?? void 0,
+              timestamp: /* @__PURE__ */ new Date()
+            };
+            dispatch({
+              type: "SEND_SUCCESS",
+              message: partialMessage,
+              streamingContent: ctx.accumulatedContent,
+              conversationId: ctx.capturedConversationId
+            });
+          } else {
+            dispatch({
+              type: "SEND_ERROR",
+              error: { code: "ABORTED", message: "Request stopped", retryable: true }
+            });
+          }
         } else {
           dispatch({
             type: "SEND_ERROR",
@@ -272,6 +336,8 @@ function useAgentChat(config2) {
             }
           });
         }
+      } finally {
+        abortControllerRef.current = null;
       }
     },
     [state.conversationId]
@@ -284,7 +350,8 @@ function useAgentChat(config2) {
   }, []);
   const submitFeedback = (0, import_react.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 },
@@ -295,12 +362,16 @@ function useAgentChat(config2) {
   );
   const retry = (0, import_react.useCallback)(async () => {
     if (lastUserMessageRef.current) {
-      await sendMessage(lastUserMessageRef.current);
+      await sendMessage(lastUserMessageRef.current, lastUserAttachmentsRef.current);
     }
   }, [sendMessage]);
+  const stop = (0, import_react.useCallback)(() => {
+    abortControllerRef.current?.abort();
+  }, []);
   const reset = (0, import_react.useCallback)(() => {
     dispatch({ type: "RESET" });
     lastUserMessageRef.current = null;
+    lastUserAttachmentsRef.current = void 0;
   }, []);
   const actions = {
     sendMessage,
@@ -308,6 +379,7 @@ function useAgentChat(config2) {
     loadConversation,
     submitFeedback,
     retry,
+    stop,
     reset
   };
   return { state, actions };
@@ -315,7 +387,7 @@ function useAgentChat(config2) {
 
 // src/chat/MessageThread/MessageThread.tsx
 var import_tailwind_merge5 = require("tailwind-merge");
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/chat/MessageBubble/MessageBubble.tsx
 var import_tailwind_merge4 = require("tailwind-merge");
@@ -324,8 +396,10 @@ var import_tailwind_merge4 = require("tailwind-merge");
 var import_core2 = require("@surf-kit/core");
 
 // 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_remark_gfm = __toESM(require("remark-gfm"), 1);
 var import_tailwind_merge = require("tailwind-merge");
 var import_jsx_runtime = require("react/jsx-runtime");
 function normalizeMarkdownLists(content) {
@@ -348,7 +422,12 @@ 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",
+        "[&_table]:w-full [&_table]:text-sm [&_table]:border-collapse [&_table]:my-2",
+        "[&_thead]:border-b [&_thead]:border-border",
+        "[&_th]:text-left [&_th]:px-2 [&_th]:py-1.5 [&_th]:font-semibold",
+        "[&_td]:px-2 [&_td]:py-1.5 [&_td]:border-t [&_td]:border-border/50",
         "[&_a]:text-accent [&_a]:underline-offset-2 [&_a]:hover:text-accent/80",
         className
       ),
@@ -356,6 +435,7 @@ function ResponseMessage({ content, className }) {
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_react_markdown.default,
         {
+          remarkPlugins: [import_remark_gfm.default],
           rehypePlugins: [import_rehype_sanitize.default],
           components: {
             script: () => null,
@@ -363,12 +443,29 @@ function ResponseMessage({ content, className }) {
             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 }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "my-1", 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 }),
-            code: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { className: "bg-surface-sunken rounded px-1 py-0.5 text-xs font-mono", 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 }),
+            table: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-x-auto my-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("table", { className: "w-full text-sm border-collapse", children }) }),
+            thead: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { className: "border-b border-border", children }),
+            th: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { className: "text-left px-2 py-1.5 font-semibold", children }),
+            td: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { className: "px-2 py-1.5 border-t border-border/50", children })
           },
           children: normalizeMarkdownLists(content)
         }
@@ -378,6 +475,8 @@ function ResponseMessage({ content, className }) {
 }
 
 // src/response/StructuredResponse/StructuredResponse.tsx
+var import_react_markdown2 = __toESM(require("react-markdown"), 1);
+var import_rehype_sanitize2 = __toESM(require("rehype-sanitize"), 1);
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function tryParse(value) {
   if (value === void 0 || value === null) return null;
@@ -390,6 +489,25 @@ function tryParse(value) {
   }
   return value;
 }
+function InlineMarkdown({ text }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_markdown2.default,
+    {
+      rehypePlugins: [import_rehype_sanitize2.default],
+      components: {
+        // Unwrap block-level <p> so content stays inline within its parent
+        p: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children }),
+        strong: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { className: "font-semibold", children }),
+        em: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("em", { className: "italic", children }),
+        code: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { className: "bg-surface-sunken rounded px-1 py-0.5 text-xs font-mono", children }),
+        // Prevent block elements that would break layout
+        script: () => null,
+        iframe: () => null
+      },
+      children: text
+    }
+  );
+}
 function renderSteps(data) {
   const steps = tryParse(data.steps);
   if (!steps || !Array.isArray(steps)) return null;
@@ -402,7 +520,7 @@ function renderSteps(data) {
         children: i + 1
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-sm text-text-primary leading-relaxed", children: step })
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-sm text-text-primary leading-relaxed", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(InlineMarkdown, { text: step }) })
   ] }, i)) });
 }
 function renderTable(data) {
@@ -468,7 +586,7 @@ function renderList(data) {
     title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs font-semibold uppercase tracking-wider text-text-secondary mb-1", children: title }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: "flex flex-col gap-1.5", children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { className: "flex items-start gap-2.5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-accent", "aria-hidden": "true" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-sm text-text-primary leading-relaxed", children: item })
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-sm text-text-primary leading-relaxed", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(InlineMarkdown, { text: item }) })
     ] }, i)) })
   ] });
 }
@@ -503,7 +621,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) {
@@ -533,7 +658,7 @@ function StructuredResponse({ uiHint, data, className }) {
 }
 
 // src/sources/SourceList/SourceList.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // src/sources/SourceCard/SourceCard.tsx
 var import_core = require("@surf-kit/core");
@@ -583,7 +708,36 @@ function SourceCard({ source, variant = "compact", onNavigate, className }) {
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex-1 min-w-0", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm font-medium text-text-primary truncate", children: source.title }),
+                source.url ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                  "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__ */ (0, import_jsx_runtime3.jsxs)(
+                        "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__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("polyline", { points: "15 3 21 3 21 9" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-sm font-medium text-text-primary truncate", children: source.title }),
                 source.section && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-[11px] font-semibold uppercase tracking-wider text-text-secondary truncate mt-0.5", children: source.section })
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -613,7 +767,7 @@ function SourceList({
   onNavigate,
   className
 }) {
-  const [isExpanded, setIsExpanded] = (0, import_react2.useState)(defaultExpanded);
+  const [isExpanded, setIsExpanded] = (0, import_react3.useState)(defaultExpanded);
   if (sources.length === 0) return null;
   const content = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-col gap-1.5", "data-testid": "source-list-items", children: sources.map((source) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     SourceCard,
@@ -717,13 +871,16 @@ function AgentResponse({
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `flex flex-col gap-4 ${className ?? ""}`, "data-testid": "agent-response", children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ResponseMessage, { content: response.message }),
-    response.ui_hint !== "text" && response.structured_data && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      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__ */ (0, import_jsx_runtime6.jsx)(StructuredResponse, { uiHint: response.ui_hint, data: parsed }) : null;
+    })(),
     (showConfidence || showVerification) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap items-center gap-2 mt-1", "data-testid": "response-meta", children: [
       showConfidence && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         import_core2.Badge,
@@ -774,6 +931,31 @@ function AgentResponse({
 
 // src/chat/MessageBubble/MessageBubble.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
+function DocumentIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "14 2 14 8 20 8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "16", y1: "17", x2: "8", y2: "17" })
+  ] });
+}
+function AttachmentThumbnail({ attachment }) {
+  const isImage = attachment.content_type.startsWith("image/");
+  if (isImage) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "rounded-lg overflow-hidden border border-black/10 max-w-[240px]", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "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__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2 px-3 py-2 rounded-lg border border-black/10 bg-black/5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DocumentIcon, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-xs truncate max-w-[160px]", children: attachment.filename })
+  ] });
+}
 function MessageBubble({
   message,
   showAgent,
@@ -781,23 +963,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__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {
         "data-message-id": message.id,
         className: (0, import_tailwind_merge4.twMerge)("flex w-full justify-end", className),
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "div",
           {
             className: (0, import_tailwind_merge4.twMerge)(
-              "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__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-wrap gap-2 mb-2", children: message.attachments.map((att, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AttachmentThumbnail, { attachment: att }, `${att.filename}-${i}`)) }),
+              message.content
+            ]
           }
         )
       }
@@ -809,7 +997,7 @@ function MessageBubble({
       "data-message-id": message.id,
       className: (0, import_tailwind_merge4.twMerge)("flex w-full flex-col items-start gap-1.5", className),
       children: [
-        showAgent && message.agent && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-[11px] font-display font-semibold uppercase tracking-[0.08em] text-text-muted px-1", children: message.agent.replace("_agent", "").replace("_", " ") }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
@@ -835,34 +1023,97 @@ function MessageBubble({
 
 // src/chat/MessageThread/MessageThread.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-function MessageThread({ messages, streamingSlot, showSources, showConfidence, showVerification, className }) {
-  const bottomRef = (0, import_react3.useRef)(null);
-  (0, import_react3.useEffect)(() => {
-    bottomRef.current?.scrollIntoView?.({ behavior: "smooth" });
-  }, [messages.length, streamingSlot]);
+function MessageThread({ messages, streamingSlot, showAgent, showSources, showConfidence, showVerification, hideLastAssistant, userBubbleClassName, className }) {
+  const scrollRef = (0, import_react4.useRef)(null);
+  const shouldAutoScroll = (0, import_react4.useRef)(true);
+  const hasStreaming = !!streamingSlot;
+  const scrollToBottom = (0, import_react4.useCallback)(() => {
+    const el = scrollRef.current;
+    if (el && shouldAutoScroll.current) {
+      el.scrollTop = el.scrollHeight;
+    }
+  }, []);
+  (0, import_react4.useEffect)(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const onWheel = (e) => {
+      if (e.deltaY < 0) {
+        shouldAutoScroll.current = false;
+      }
+    };
+    const onPointerDown = () => {
+      el.dataset.userPointer = "1";
+    };
+    const onPointerUp = () => {
+      delete el.dataset.userPointer;
+    };
+    el.addEventListener("wheel", onWheel, { passive: true });
+    el.addEventListener("pointerdown", onPointerDown);
+    window.addEventListener("pointerup", onPointerUp);
+    return () => {
+      el.removeEventListener("wheel", onWheel);
+      el.removeEventListener("pointerdown", onPointerDown);
+      window.removeEventListener("pointerup", onPointerUp);
+    };
+  }, []);
+  const handleScroll = (0, import_react4.useCallback)(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 80;
+    if (nearBottom) {
+      shouldAutoScroll.current = true;
+    } else if (el.dataset.userPointer) {
+      shouldAutoScroll.current = false;
+    }
+  }, []);
+  (0, import_react4.useEffect)(scrollToBottom, [messages.length, scrollToBottom]);
+  (0, import_react4.useEffect)(() => {
+    if (!hasStreaming) return;
+    let raf;
+    const tick = () => {
+      scrollToBottom();
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [hasStreaming, scrollToBottom]);
+  (0, import_react4.useEffect)(() => {
+    if (!hasStreaming) {
+      shouldAutoScroll.current = true;
+    }
+  }, [hasStreaming]);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
+      ref: scrollRef,
       role: "log",
       "aria-live": "polite",
       "aria-label": "Message thread",
+      onScroll: handleScroll,
       className: (0, import_tailwind_merge5.twMerge)(
         "flex flex-col gap-4 overflow-y-auto flex-1 px-4 py-6",
         className
       ),
       children: [
-        messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-          MessageBubble,
-          {
-            message,
-            showSources,
-            showConfidence,
-            showVerification
-          },
-          message.id
-        )),
-        streamingSlot,
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: bottomRef })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex-1 shrink-0" }),
+        messages.map((message, i) => {
+          if (hideLastAssistant && i === messages.length - 1 && message.role === "assistant") {
+            return null;
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            MessageBubble,
+            {
+              message,
+              showAgent,
+              showSources,
+              showConfidence,
+              showVerification,
+              userBubbleClassName
+            },
+            message.id
+          );
+        }),
+        streamingSlot
       ]
     }
   );
@@ -870,32 +1121,127 @@ function MessageThread({ messages, streamingSlot, showSources, showConfidence, s
 
 // src/chat/MessageComposer/MessageComposer.tsx
 var import_tailwind_merge6 = require("tailwind-merge");
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_jsx_runtime9 = require("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__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M10 16V4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M4 10l6-6 6 6" })
+  ] });
+}
+function StopIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("rect", { x: "3", y: "3", width: "10", height: "10", rx: "2" }) });
+}
+function PaperclipIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M18 6L6 18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M6 6l12 12" })
+  ] });
+}
+function DocumentIcon2() {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("polyline", { points: "14 2 14 8 20 8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative group flex-shrink-0", children: [
+    isImage ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "w-16 h-16 rounded-lg overflow-hidden border border-border/60 bg-surface-alt", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "img",
+      {
+        src: attachment.preview_url ?? `data:${attachment.content_type};base64,${attachment.data}`,
+        alt: attachment.filename,
+        className: "w-full h-full object-cover"
+      }
+    ) }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "h-16 px-3 rounded-lg border border-border/60 bg-surface-alt flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-text-muted", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DocumentIcon2, {}) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xs text-text-primary truncate max-w-[120px]", children: attachment.filename }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-[10px] text-text-muted", children: "PDF" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onRemove,
+        className: (0, import_tailwind_merge6.twMerge)(
+          "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__ */ (0, import_jsx_runtime9.jsx)(XIcon, { size: 10 })
+      }
+    )
+  ] });
+}
 function MessageComposer({
   onSend,
+  onStop,
   isLoading = false,
   placeholder = "Type a message...",
   className
 }) {
-  const [value, setValue] = (0, import_react4.useState)("");
-  const textareaRef = (0, import_react4.useRef)(null);
-  const canSend = value.trim().length > 0 && !isLoading;
-  const resetHeight = (0, import_react4.useCallback)(() => {
+  const [value, setValue] = (0, import_react5.useState)("");
+  const [attachments, setAttachments] = (0, import_react5.useState)([]);
+  const [dragOver, setDragOver] = (0, import_react5.useState)(false);
+  const textareaRef = (0, import_react5.useRef)(null);
+  const fileInputRef = (0, import_react5.useRef)(null);
+  const canSend = (value.trim().length > 0 || attachments.length > 0) && !isLoading;
+  const resetHeight = (0, import_react5.useCallback)(() => {
     const el = textareaRef.current;
     if (el) {
       el.style.height = "auto";
       el.style.overflowY = "hidden";
     }
   }, []);
-  const handleSend = (0, import_react4.useCallback)(() => {
+  const handleSend = (0, import_react5.useCallback)(() => {
     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 = (0, import_react4.useCallback)(
+  }, [canSend, onSend, value, attachments, resetHeight]);
+  const handleKeyDown = (0, import_react5.useCallback)(
     (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
         e.preventDefault();
@@ -904,64 +1250,194 @@ function MessageComposer({
     },
     [handleSend]
   );
-  const handleChange = (0, import_react4.useCallback)(
+  const handleChange = (0, import_react5.useCallback)(
     (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 = (0, import_react5.useCallback)(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 = (0, import_react5.useCallback)(() => {
+    fileInputRef.current?.click();
+  }, []);
+  const handleFileInputChange = (0, import_react5.useCallback)(
+    (e) => {
+      if (e.target.files) {
+        void addFiles(e.target.files);
+        e.target.value = "";
+      }
+    },
+    [addFiles]
+  );
+  const removeAttachment = (0, import_react5.useCallback)((index) => {
+    setAttachments((prev) => {
+      const removed = prev[index];
+      if (removed?.preview_url) URL.revokeObjectURL(removed.preview_url);
+      return prev.filter((_, i) => i !== index);
+    });
+  }, []);
+  const handlePaste = (0, import_react5.useCallback)(
+    (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 = (0, import_react5.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(true);
+  }, []);
+  const handleDragLeave = (0, import_react5.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOver(false);
+  }, []);
+  const handleDrop = (0, import_react5.useCallback)(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragOver(false);
+      if (e.dataTransfer.files.length > 0) {
+        void addFiles(e.dataTransfer.files);
+      }
+    },
+    [addFiles]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       className: (0, import_tailwind_merge6.twMerge)(
-        "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__ */ (0, import_jsx_runtime9.jsx)(
-          "textarea",
+          "input",
           {
-            ref: textareaRef,
-            value,
-            onChange: handleChange,
-            onKeyDown: handleKeyDown,
-            placeholder,
-            rows: 1,
-            disabled: isLoading,
-            className: (0, import_tailwind_merge6.twMerge)(
-              "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__ */ (0, import_jsx_runtime9.jsx)(
-          "button",
+        attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex gap-2 px-4 pt-3 pb-1 overflow-x-auto", children: attachments.map((att, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          AttachmentPreview,
           {
-            type: "button",
-            onClick: handleSend,
-            disabled: !value.trim() || isLoading,
-            "aria-label": "Send message",
-            className: (0, import_tailwind_merge6.twMerge)(
-              "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__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm font-display font-semibold text-accent", children: "Drop files here" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-end", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: handleFileSelect,
+              disabled: isLoading || attachments.length >= MAX_ATTACHMENTS,
+              "aria-label": "Attach file",
+              className: (0, import_tailwind_merge6.twMerge)(
+                "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__ */ (0, import_jsx_runtime9.jsx)(PaperclipIcon, {})
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "textarea",
+            {
+              ref: textareaRef,
+              value,
+              onChange: handleChange,
+              onKeyDown: handleKeyDown,
+              onPaste: handlePaste,
+              placeholder,
+              rows: 1,
+              disabled: isLoading,
+              className: (0, import_tailwind_merge6.twMerge)(
+                "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__ */ (0, import_jsx_runtime9.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: isLoading && onStop ? onStop : handleSend,
+              disabled: !canSend && !isLoading,
+              "aria-label": isLoading ? "Stop generating" : "Send message",
+              className: (0, import_tailwind_merge6.twMerge)(
+                "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 cursor-pointer" : "bg-transparent text-text-muted/40 cursor-default"
+              ),
+              children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StopIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ArrowUpIcon, {})
+            }
+          )
+        ] })
       ]
     }
   );
@@ -974,6 +1450,7 @@ function WelcomeScreen({
   title = "Welcome",
   message = "How can I help you today?",
   icon,
+  iconClassName,
   suggestedQuestions = [],
   onQuestionSelect,
   className
@@ -986,12 +1463,15 @@ function WelcomeScreen({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        icon ? iconClassName ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: iconClassName, "aria-hidden": "true", children: icon }) : icon : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "div",
           {
-            className: "w-14 h-14 rounded-2xl bg-accent/10 border border-border flex items-center justify-center pulse-glow",
+            className: (0, import_tailwind_merge7.twMerge)(
+              "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__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-2xl", children: "\u2726" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-2xl", children: "\u2726" })
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-2", children: [
@@ -1001,7 +1481,7 @@ function WelcomeScreen({
         suggestedQuestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "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__ */ (0, import_jsx_runtime10.jsx)(
@@ -1010,7 +1490,7 @@ function WelcomeScreen({
                 type: "button",
                 onClick: () => onQuestionSelect?.(question),
                 className: (0, import_tailwind_merge7.twMerge)(
-                  "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",
@@ -1028,25 +1508,26 @@ function WelcomeScreen({
 }
 
 // src/streaming/StreamingMessage/StreamingMessage.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
+var import_tailwind_merge8 = require("tailwind-merge");
 var import_core3 = require("@surf-kit/core");
 
 // src/hooks/useCharacterDrain.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 function useCharacterDrain(target, msPerChar = 15) {
-  const [displayed, setDisplayed] = (0, import_react5.useState)("");
-  const indexRef = (0, import_react5.useRef)(0);
-  const lastTimeRef = (0, import_react5.useRef)(0);
-  const rafRef = (0, import_react5.useRef)(null);
-  const drainTargetRef = (0, import_react5.useRef)("");
-  const msPerCharRef = (0, import_react5.useRef)(msPerChar);
+  const [displayed, setDisplayed] = (0, import_react6.useState)("");
+  const indexRef = (0, import_react6.useRef)(0);
+  const lastTimeRef = (0, import_react6.useRef)(0);
+  const rafRef = (0, import_react6.useRef)(null);
+  const drainTargetRef = (0, import_react6.useRef)("");
+  const msPerCharRef = (0, import_react6.useRef)(msPerChar);
   msPerCharRef.current = msPerChar;
   if (target !== "") {
     drainTargetRef.current = target;
   }
   const drainTarget = drainTargetRef.current;
   const isDraining = displayed.length < drainTarget.length;
-  const tickRef = (0, import_react5.useRef)(() => {
+  const tickRef = (0, import_react6.useRef)(() => {
   });
   tickRef.current = (now) => {
     const currentTarget = drainTargetRef.current;
@@ -1058,7 +1539,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));
@@ -1069,12 +1553,12 @@ function useCharacterDrain(target, msPerChar = 15) {
       rafRef.current = null;
     }
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (drainTargetRef.current !== "" && indexRef.current < drainTargetRef.current.length && rafRef.current === null) {
       rafRef.current = requestAnimationFrame((t) => tickRef.current(t));
     }
   }, [drainTarget]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (target === "" && !isDraining && displayed !== "") {
       indexRef.current = 0;
       lastTimeRef.current = 0;
@@ -1082,7 +1566,7 @@ function useCharacterDrain(target, msPerChar = 15) {
       setDisplayed("");
     }
   }, [target, isDraining, displayed]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     return () => {
       if (rafRef.current !== null) {
         cancelAnimationFrame(rafRef.current);
@@ -1103,51 +1587,78 @@ var phaseLabels = {
   generating: "Writing...",
   verifying: "Verifying..."
 };
+var CURSOR_STYLES = `
+.sk-streaming-cursor > :not(ul,ol,blockquote,div:has(table)):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,
+.sk-streaming-cursor > div:has(table):last-child table tbody tr:last-child td: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_react6.useRef)(onComplete);
+  const onCompleteRef = (0, import_react7.useRef)(onComplete);
   onCompleteRef.current = onComplete;
-  const wasActiveRef = (0, import_react6.useRef)(stream.active);
-  (0, import_react6.useEffect)(() => {
+  const onDrainingRef = (0, import_react7.useRef)(onDraining);
+  onDrainingRef.current = onDraining;
+  const wasActiveRef = (0, import_react7.useRef)(stream.active);
+  (0, import_react7.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_runtime11.jsxs)("div", { className, "data-testid": "streaming-message", children: [
+  const { displayed: rawDisplayed, isDraining } = useCharacterDrain(stream.content);
+  const displayedContent = stream.active || isDraining ? rawDisplayed.trimEnd() : rawDisplayed;
+  (0, import_react7.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_runtime11.jsxs)("div", { className: (0, import_tailwind_merge8.twMerge)("flex w-full flex-col items-start", className), "data-testid": "streaming-message", children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { "aria-live": "assertive", className: "sr-only", children: [
       stream.active && stream.phase !== "idle" && "Response started",
       !stream.active && stream.content && "Response complete"
     ] }),
+    showCursor && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("style", { children: CURSOR_STYLES }),
+    agentLabel && /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.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_runtime11.jsxs)(
+      showPhaseIndicator && /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core3.Spinner, { size: "sm" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core3.WaveLoader, { size: "sm", color: "#38bdf8" }) }),
             /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: phaseLabel })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "text-sm leading-relaxed text-text-primary whitespace-pre-wrap", children: [
-        displayedContent,
-        stream.active && /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)(
+        ResponseMessage,
+        {
+          content: displayedContent,
+          className: showCursor ? "sk-streaming-cursor" : void 0
+        }
+      )
     ] })
   ] });
 }
@@ -1178,7 +1689,7 @@ function AgentChat({
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
-      className: (0, import_tailwind_merge8.twMerge)(
+      className: (0, import_tailwind_merge9.twMerge)(
         "flex flex-col h-full bg-canvas border border-border rounded-xl overflow-hidden",
         className
       ),
@@ -1214,7 +1725,7 @@ function AgentChat({
             onQuestionSelect: handleQuestionSelect
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MessageComposer, { onSend: handleSend, isLoading: state.isLoading })
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(MessageComposer, { onSend: handleSend, onStop: actions.stop, isLoading: state.isLoading })
       ]
     }
   );
@@ -1350,7 +1861,7 @@ function ConfidenceBadge({ confidence, className }) {
 }
 
 // src/confidence/ConfidenceBreakdown/ConfidenceBreakdown.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/confidence/ConfidenceMeter/ConfidenceMeter.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -1405,7 +1916,7 @@ function ConfidenceBreakdown({
   defaultExpanded = false,
   className
 }) {
-  const [expanded, setExpanded] = (0, import_react7.useState)(defaultExpanded);
+  const [expanded, setExpanded] = (0, import_react8.useState)(defaultExpanded);
   const isExpanded = expandable ? expanded : true;
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: `rounded-xl border border-border bg-surface ${className ?? ""}`, "data-testid": "confidence-breakdown", children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
@@ -1485,7 +1996,7 @@ function VerificationBadge({ verification, className }) {
 }
 
 // src/confidence/VerificationDetail/VerificationDetail.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function VerificationDetail({
   verification,
@@ -1493,7 +2004,7 @@ function VerificationDetail({
   defaultExpanded = false,
   className
 }) {
-  const [expanded, setExpanded] = (0, import_react8.useState)(defaultExpanded);
+  const [expanded, setExpanded] = (0, import_react9.useState)(defaultExpanded);
   const isExpanded = expandable ? expanded : true;
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: `rounded-xl border border-border bg-surface ${className ?? ""}`, "data-testid": "verification-detail", children: [
     /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
@@ -1537,11 +2048,11 @@ function VerificationDetail({
 }
 
 // src/hooks/useAgentTheme.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 var DEFAULT_ACCENT = "#6366f1";
 var DEFAULT_LABEL = "Agent";
 function useAgentTheme(agentId, agentThemes) {
-  return (0, import_react9.useMemo)(() => {
+  return (0, import_react10.useMemo)(() => {
     if (!agentId) {
       return { accent: DEFAULT_ACCENT, icon: null, label: DEFAULT_LABEL };
     }
@@ -1697,7 +2208,7 @@ function ToolExecution({ tool, label, className }) {
       role: "status",
       "data-testid": "tool-execution",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core10.Spinner, { size: "sm" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_core10.WaveLoader, { size: "sm", color: "#38bdf8" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: displayLabel })
       ]
     }
@@ -1717,7 +2228,7 @@ function RetrievalProgress({ sources, isActive, className }) {
       "data-testid": "retrieval-progress",
       children: [
         isActive && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-2 text-sm text-text-secondary", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core11.Spinner, { size: "sm" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_core11.WaveLoader, { size: "sm", color: "#38bdf8" }) }),
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: "Retrieving sources..." })
         ] }),
         sources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: "space-y-1", "data-testid": "source-list", children: sources.map((source, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
@@ -1774,7 +2285,7 @@ function VerificationProgress({
 }
 
 // src/streaming/TypewriterText/TypewriterText.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 function TypewriterText({
   text,
@@ -1784,9 +2295,9 @@ function TypewriterText({
   className = "",
   showCursor = true
 }) {
-  const [displayedText, setDisplayedText] = (0, import_react10.useState)("");
-  const [isComplete, setIsComplete] = (0, import_react10.useState)(false);
-  (0, import_react10.useEffect)(() => {
+  const [displayedText, setDisplayedText] = (0, import_react11.useState)("");
+  const [isComplete, setIsComplete] = (0, import_react11.useState)(false);
+  (0, import_react11.useEffect)(() => {
     setDisplayedText("");
     setIsComplete(false);
     let index = 0;
@@ -1815,7 +2326,7 @@ function TypewriterText({
 }
 
 // src/streaming/TypingIndicator/TypingIndicator.tsx
-var import_tailwind_merge9 = require("tailwind-merge");
+var import_tailwind_merge10 = require("tailwind-merge");
 var import_hooks2 = require("@surf-kit/hooks");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var bounceKeyframes = `
@@ -1835,7 +2346,7 @@ function TypingIndicator({
     {
       role: "status",
       "aria-label": label ?? "typing",
-      className: (0, import_tailwind_merge9.twMerge)("inline-flex items-center gap-2", className),
+      className: (0, import_tailwind_merge10.twMerge)("inline-flex items-center gap-2", className),
       "data-testid": "typing-indicator",
       children: [
         !reducedMotion && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("style", { children: bounceKeyframes }),
@@ -1857,7 +2368,7 @@ function TypingIndicator({
 }
 
 // src/streaming/TextGlimmer/TextGlimmer.tsx
-var import_tailwind_merge10 = require("tailwind-merge");
+var import_tailwind_merge11 = require("tailwind-merge");
 var import_hooks3 = require("@surf-kit/hooks");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var shimmerKeyframes = `
@@ -1874,7 +2385,7 @@ function TextGlimmer({ lines = 3, className }) {
     {
       role: "status",
       "aria-label": "Loading",
-      className: (0, import_tailwind_merge10.twMerge)("flex flex-col gap-2", className),
+      className: (0, import_tailwind_merge11.twMerge)("flex flex-col gap-2", className),
       "data-testid": "text-glimmer",
       children: [
         !reducedMotion && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("style", { children: shimmerKeyframes }),
@@ -1900,7 +2411,7 @@ function TextGlimmer({ lines = 3, className }) {
 }
 
 // src/streaming/StreamingList/StreamingList.tsx
-var import_tailwind_merge11 = require("tailwind-merge");
+var import_tailwind_merge12 = require("tailwind-merge");
 var import_hooks4 = require("@surf-kit/hooks");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var fadeSlideInKeyframes = `
@@ -1918,13 +2429,13 @@ function StreamingList({
 }) {
   const reducedMotion = (0, import_hooks4.useReducedMotion)();
   if (items.length === 0 && !isStreaming) {
-    return emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: (0, import_tailwind_merge11.twMerge)("text-sm text-text-secondary", className), "data-testid": "streaming-list-empty", children: emptyMessage }) : null;
+    return emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: (0, import_tailwind_merge12.twMerge)("text-sm text-text-secondary", className), "data-testid": "streaming-list-empty", children: emptyMessage }) : null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "ul",
     {
       "aria-live": "polite",
-      className: (0, import_tailwind_merge11.twMerge)("list-none p-0 m-0", className),
+      className: (0, import_tailwind_merge12.twMerge)("list-none p-0 m-0", className),
       "data-testid": "streaming-list",
       children: [
         !reducedMotion && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("style", { children: fadeSlideInKeyframes }),
@@ -1944,7 +2455,7 @@ function StreamingList({
 }
 
 // src/streaming/StreamingStructure/StreamingStructure.tsx
-var import_tailwind_merge12 = require("tailwind-merge");
+var import_tailwind_merge13 = require("tailwind-merge");
 var import_hooks5 = require("@surf-kit/hooks");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var fadeSlideInKeyframes2 = `
@@ -1993,7 +2504,7 @@ function StreamingStructure({
     "dl",
     {
       "aria-live": "polite",
-      className: (0, import_tailwind_merge12.twMerge)("m-0", className),
+      className: (0, import_tailwind_merge13.twMerge)("m-0", className),
       "data-testid": "streaming-structure",
       children: [
         !reducedMotion && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("style", { children: fadeSlideInKeyframes2 }),
@@ -2016,7 +2527,7 @@ function StreamingStructure({
 }
 
 // src/chat/ConversationList/ConversationList.tsx
-var import_tailwind_merge13 = require("tailwind-merge");
+var import_tailwind_merge14 = require("tailwind-merge");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function ConversationList({
   conversations,
@@ -2030,14 +2541,14 @@ function ConversationList({
     "nav",
     {
       "aria-label": "Conversation list",
-      className: (0, import_tailwind_merge13.twMerge)("flex flex-col h-full bg-canvas", className),
+      className: (0, import_tailwind_merge14.twMerge)("flex flex-col flex-1 min-h-0", className),
       children: [
-        onNew && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "p-3 border-b border-border", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        onNew && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "px-5 pt-1 pb-3 border-b border-border", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "button",
           {
             type: "button",
             onClick: onNew,
-            className: "w-full px-4 py-2.5 rounded-xl text-sm font-semibold bg-accent text-white hover:bg-accent-hover transition-all duration-200",
+            className: "w-full px-4 py-2 rounded-lg text-sm font-medium border border-border text-text-secondary hover:text-text-primary hover:bg-surface hover:border-border-strong transition-colors duration-150",
             children: "New conversation"
           }
         ) }),
@@ -2047,10 +2558,10 @@ function ConversationList({
             return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
               "li",
               {
-                className: (0, import_tailwind_merge13.twMerge)(
-                  "flex items-start border-b border-border transition-colors duration-200",
-                  "hover:bg-surface",
-                  isActive && "bg-surface-raised border-l-2 border-l-accent"
+                className: (0, import_tailwind_merge14.twMerge)(
+                  "flex items-start transition-colors duration-150",
+                  "hover:bg-surface-raised",
+                  isActive ? "bg-accent-subtlest border-l-[3px] border-l-accent" : "border-l-[3px] border-l-transparent"
                 ),
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
@@ -2059,10 +2570,10 @@ function ConversationList({
                       type: "button",
                       onClick: () => onSelect(conversation.id),
                       "aria-current": isActive ? "true" : void 0,
-                      className: "flex-1 min-w-0 text-left px-4 py-3",
+                      className: "flex-1 min-w-0 text-left px-5 py-2.5",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "text-sm font-medium text-brand-cream truncate", children: conversation.title }),
-                        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "text-xs text-brand-cream/40 truncate mt-0.5 leading-relaxed", children: conversation.lastMessage })
+                        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "text-sm font-medium text-text-primary truncate", children: conversation.title }),
+                        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "text-xs text-text-muted truncate mt-0.5 leading-relaxed", children: conversation.lastMessage })
                       ]
                     }
                   ),
@@ -2072,7 +2583,7 @@ function ConversationList({
                       type: "button",
                       onClick: () => onDelete(conversation.id),
                       "aria-label": `Delete ${conversation.title}`,
-                      className: "shrink-0 p-1.5 m-2 rounded-lg text-brand-cream/25 hover:text-brand-watermelon hover:bg-brand-watermelon/10 transition-colors duration-200",
+                      className: "shrink-0 p-1.5 m-2 rounded-lg text-text-muted hover:text-status-error hover:bg-status-error/10 transition-colors duration-150",
                       children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                         "svg",
                         {
@@ -2099,7 +2610,7 @@ function ConversationList({
               conversation.id
             );
           }),
-          conversations.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { className: "px-4 py-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-sm text-brand-cream/30 font-body", children: "No conversations yet" }) })
+          conversations.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { className: "px-5 py-12 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-sm text-text-muted font-body", children: "No conversations yet" }) })
         ] })
       ]
     }
@@ -2107,8 +2618,8 @@ function ConversationList({
 }
 
 // src/layouts/AgentFullPage/AgentFullPage.tsx
-var import_tailwind_merge14 = require("tailwind-merge");
-var import_react11 = require("react");
+var import_tailwind_merge15 = require("tailwind-merge");
+var import_react12 = require("react");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function AgentFullPage({
   endpoint,
@@ -2121,8 +2632,8 @@ function AgentFullPage({
   onNewConversation,
   className
 }) {
-  const [sidebarOpen, setSidebarOpen] = (0, import_react11.useState)(false);
-  const handleSelect = (0, import_react11.useCallback)(
+  const [sidebarOpen, setSidebarOpen] = (0, import_react12.useState)(false);
+  const handleSelect = (0, import_react12.useCallback)(
     (id) => {
       onConversationSelect?.(id);
       setSidebarOpen(false);
@@ -2132,7 +2643,7 @@ function AgentFullPage({
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "div",
     {
-      className: (0, import_tailwind_merge14.twMerge)("flex h-screen w-full overflow-hidden bg-brand-dark", className),
+      className: (0, import_tailwind_merge15.twMerge)("flex h-screen w-full overflow-hidden bg-brand-dark", className),
       "data-testid": "agent-full-page",
       children: [
         showConversationList && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
@@ -2147,7 +2658,7 @@ function AgentFullPage({
           /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "aside",
             {
-              className: (0, import_tailwind_merge14.twMerge)(
+              className: (0, import_tailwind_merge15.twMerge)(
                 "bg-brand-dark border-r border-brand-gold/15 w-72 shrink-0 flex-col z-40",
                 // Desktop: always visible
                 "hidden md:flex",
@@ -2213,8 +2724,8 @@ function AgentFullPage({
 }
 
 // src/layouts/AgentPanel/AgentPanel.tsx
-var import_tailwind_merge15 = require("tailwind-merge");
-var import_react12 = require("react");
+var import_tailwind_merge16 = require("tailwind-merge");
+var import_react13 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 function AgentPanel({
   endpoint,
@@ -2225,8 +2736,8 @@ function AgentPanel({
   title = "Chat",
   className
 }) {
-  const panelRef = (0, import_react12.useRef)(null);
-  (0, import_react12.useEffect)(() => {
+  const panelRef = (0, import_react13.useRef)(null);
+  (0, import_react13.useEffect)(() => {
     if (!isOpen) return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") onClose();
@@ -2238,13 +2749,13 @@ function AgentPanel({
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "div",
     {
-      className: (0, import_tailwind_merge15.twMerge)("fixed inset-0 z-50", !isOpen && "pointer-events-none"),
+      className: (0, import_tailwind_merge16.twMerge)("fixed inset-0 z-50", !isOpen && "pointer-events-none"),
       "aria-hidden": !isOpen,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "div",
           {
-            className: (0, import_tailwind_merge15.twMerge)(
+            className: (0, import_tailwind_merge16.twMerge)(
               "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"
             ),
@@ -2260,7 +2771,7 @@ function AgentPanel({
             "aria-label": title,
             "aria-modal": isOpen ? "true" : void 0,
             style: { width: widthStyle, maxWidth: "100vw" },
-            className: (0, import_tailwind_merge15.twMerge)(
+            className: (0, import_tailwind_merge16.twMerge)(
               "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"}`,
@@ -2302,8 +2813,8 @@ function AgentPanel({
 }
 
 // src/layouts/AgentWidget/AgentWidget.tsx
-var import_tailwind_merge16 = require("tailwind-merge");
-var import_react13 = require("react");
+var import_tailwind_merge17 = require("tailwind-merge");
+var import_react14 = require("react");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 function AgentWidget({
   endpoint,
@@ -2312,8 +2823,8 @@ function AgentWidget({
   title = "Chat",
   className
 }) {
-  const [isOpen, setIsOpen] = (0, import_react13.useState)(false);
-  const toggle = (0, import_react13.useCallback)(() => {
+  const [isOpen, setIsOpen] = (0, import_react14.useState)(false);
+  const toggle = (0, import_react14.useCallback)(() => {
     setIsOpen((prev) => !prev);
   }, []);
   const positionClasses = position === "bottom-left" ? "left-4 bottom-4" : "right-4 bottom-4";
@@ -2326,7 +2837,7 @@ function AgentWidget({
         role: "dialog",
         "aria-label": title,
         "aria-hidden": !isOpen,
-        className: (0, import_tailwind_merge16.twMerge)(
+        className: (0, import_tailwind_merge17.twMerge)(
           "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",
@@ -2373,7 +2884,7 @@ function AgentWidget({
         onClick: toggle,
         "aria-label": isOpen ? "Close chat" : triggerLabel,
         "aria-expanded": isOpen,
-        className: (0, import_tailwind_merge16.twMerge)(
+        className: (0, import_tailwind_merge17.twMerge)(
           "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",
@@ -2391,7 +2902,7 @@ function AgentWidget({
 }
 
 // src/layouts/AgentEmbed/AgentEmbed.tsx
-var import_tailwind_merge17 = require("tailwind-merge");
+var import_tailwind_merge18 = require("tailwind-merge");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 function AgentEmbed({
   endpoint,
@@ -2401,7 +2912,7 @@ function AgentEmbed({
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
-      className: (0, import_tailwind_merge17.twMerge)("w-full h-full min-h-0", className),
+      className: (0, import_tailwind_merge18.twMerge)("w-full h-full min-h-0", className),
       "data-testid": "agent-embed",
       children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         AgentChat,
@@ -2417,7 +2928,7 @@ function AgentEmbed({
 
 // src/mcp/MCPToolCall/MCPToolCall.tsx
 var import_class_variance_authority = require("class-variance-authority");
-var import_tailwind_merge18 = require("tailwind-merge");
+var import_tailwind_merge19 = require("tailwind-merge");
 var import_core12 = require("@surf-kit/core");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var statusBadgeIntent = {
@@ -2461,7 +2972,7 @@ function MCPToolCall({ call, isExpanded = false, onToggleExpand, className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "div",
     {
-      className: (0, import_tailwind_merge18.twMerge)(container({ status: call.status }), className),
+      className: (0, import_tailwind_merge19.twMerge)(container({ status: call.status }), className),
       "data-testid": "mcp-tool-call",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
@@ -2478,7 +2989,7 @@ function MCPToolCall({ call, isExpanded = false, onToggleExpand, className }) {
                 call.serverName && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-xs text-text-secondary truncate", children: call.serverName })
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2 shrink-0", children: [
-                call.status === "running" && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core12.Spinner, { size: "sm" }) }),
+                call.status === "running" && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core12.WaveLoader, { size: "sm", color: "#38bdf8" }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                   import_core12.Badge,
                   {
@@ -2552,7 +3063,7 @@ function MCPToolCall({ call, isExpanded = false, onToggleExpand, className }) {
 }
 
 // src/mcp/MCPResourceView/MCPResourceView.tsx
-var import_tailwind_merge19 = require("tailwind-merge");
+var import_tailwind_merge20 = require("tailwind-merge");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 function isImageMime(mime) {
   return !!mime && mime.startsWith("image/");
@@ -2570,7 +3081,7 @@ function MCPResourceView({ resource, className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     "div",
     {
-      className: (0, import_tailwind_merge19.twMerge)("rounded-lg border border-border bg-surface p-3 text-sm", className),
+      className: (0, import_tailwind_merge20.twMerge)("rounded-lg border border-border bg-surface p-3 text-sm", className),
       "data-testid": "mcp-resource-view",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "mb-2", children: [
@@ -2620,9 +3131,9 @@ function MCPResourceView({ resource, className }) {
 }
 
 // src/mcp/MCPServerStatus/MCPServerStatus.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_class_variance_authority2 = require("class-variance-authority");
-var import_tailwind_merge20 = require("tailwind-merge");
+var import_tailwind_merge21 = require("tailwind-merge");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var statusDot = (0, import_class_variance_authority2.cva)("inline-block h-2 w-2 rounded-full shrink-0", {
   variants: {
@@ -2644,13 +3155,13 @@ function formatLastPing(date) {
   return date.toLocaleTimeString();
 }
 function MCPServerStatus({ server, className }) {
-  const [showTools, setShowTools] = (0, import_react14.useState)(false);
-  const [showResources, setShowResources] = (0, import_react14.useState)(false);
+  const [showTools, setShowTools] = (0, import_react15.useState)(false);
+  const [showResources, setShowResources] = (0, import_react15.useState)(false);
   const lastPing = formatLastPing(server.lastPing);
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "div",
     {
-      className: (0, import_tailwind_merge20.twMerge)("rounded-lg border border-border bg-surface p-3 text-sm", className),
+      className: (0, import_tailwind_merge21.twMerge)("rounded-lg border border-border bg-surface p-3 text-sm", className),
       "data-testid": "mcp-server-status",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2 mb-1", children: [
@@ -2762,9 +3273,9 @@ function MCPServerStatus({ server, className }) {
 }
 
 // src/mcp/MCPApprovalDialog/MCPApprovalDialog.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_class_variance_authority3 = require("class-variance-authority");
-var import_tailwind_merge21 = require("tailwind-merge");
+var import_tailwind_merge22 = require("tailwind-merge");
 var import_react_aria = require("react-aria");
 var import_core13 = require("@surf-kit/core");
 var import_jsx_runtime43 = require("react/jsx-runtime");
@@ -2800,9 +3311,9 @@ function MCPApprovalDialog({
   isOpen,
   className
 }) {
-  const ref = (0, import_react15.useRef)(null);
+  const ref = (0, import_react16.useRef)(null);
   const { dialogProps, titleProps } = (0, import_react_aria.useDialog)({ role: "alertdialog" }, ref);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!isOpen) return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
@@ -2824,7 +3335,7 @@ function MCPApprovalDialog({
         {
           ...dialogProps,
           ref,
-          className: (0, import_tailwind_merge21.twMerge)(riskBorder({ risk: riskLevel }), className),
+          className: (0, import_tailwind_merge22.twMerge)(riskBorder({ risk: riskLevel }), className),
           "data-testid": "mcp-approval-dialog",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
@@ -2902,7 +3413,7 @@ function MCPApprovalDialog({
 }
 
 // src/feedback/ThumbsFeedback/ThumbsFeedback.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 function ThumbsFeedback({
   messageId,
@@ -2911,7 +3422,7 @@ function ThumbsFeedback({
   onNegative,
   className
 }) {
-  const [selected, setSelected] = (0, import_react16.useState)(state);
+  const [selected, setSelected] = (0, import_react17.useState)(state);
   const handleClick = (rating) => {
     setSelected(rating);
     onFeedback(messageId, rating);
@@ -2991,11 +3502,11 @@ function ThumbsFeedback({
 }
 
 // src/feedback/FeedbackDialog/FeedbackDialog.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_core14 = require("@surf-kit/core");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 function FeedbackDialog({ isOpen, onClose, onSubmit, className }) {
-  const [comment, setComment] = (0, import_react17.useState)("");
+  const [comment, setComment] = (0, import_react18.useState)("");
   const handleSubmit = () => {
     onSubmit(comment);
     setComment("");