@surf-kit/agent 0.2.1 → 0.3.0

package/dist/chat/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(config) {
   const configRef = useRef(config);
   configRef.current = config;
   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(config) {
   }, []);
   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(config) {
   );
   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(config) {
 
 // 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
       ),
@@ -1139,7 +1562,7 @@ function AgentChat({
 }
 
 // src/chat/ConversationList/ConversationList.tsx
-import { twMerge as twMerge9 } from "tailwind-merge";
+import { twMerge as twMerge10 } from "tailwind-merge";
 import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function ConversationList({
   conversations,
@@ -1153,7 +1576,7 @@ function ConversationList({
     "nav",
     {
       "aria-label": "Conversation list",
-      className: twMerge9("flex flex-col h-full bg-canvas", className),
+      className: twMerge10("flex flex-col h-full bg-canvas", className),
       children: [
         onNew && /* @__PURE__ */ jsx13("div", { className: "p-3 border-b border-border", children: /* @__PURE__ */ jsx13(
           "button",
@@ -1170,7 +1593,7 @@ function ConversationList({
             return /* @__PURE__ */ jsxs11(
               "li",
               {
-                className: twMerge9(
+                className: twMerge10(
                   "flex items-start border-b border-border transition-colors duration-200",
                   "hover:bg-surface",
                   isActive && "bg-surface-raised border-l-2 border-l-accent"