@surf-kit/agent 0.1.1 → 0.2.0

package/dist/index.js

@@ -583,7 +583,7 @@ function FollowUpChips({ suggestions, onSelect, className }) {
   return /* @__PURE__ */ jsx5(
     "div",
     {
-      className: `flex gap-2 overflow-x-auto py-1 ${className ?? ""}`,
+      className: twMerge3("flex flex-wrap gap-2 py-1", className),
       role: "group",
       "aria-label": "Follow-up suggestions",
       "data-testid": "follow-up-chips",
@@ -593,9 +593,9 @@ function FollowUpChips({ suggestions, onSelect, className }) {
           type: "button",
           onClick: () => onSelect(suggestion),
           className: twMerge3(
-            "px-4 py-1.5 rounded-full text-sm shrink-0 whitespace-nowrap",
-            "border border-border bg-surface text-text-primary",
-            "hover:bg-surface-raised hover:border-interactive hover:text-text-primary",
+            "px-4 py-1.5 rounded-full text-sm whitespace-nowrap",
+            "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",
             "transition-all duration-200"
           ),
@@ -698,6 +698,7 @@ function MessageBubble({
   showSources = true,
   showConfidence = true,
   showVerification = true,
+  animated = true,
   className
 }) {
   const isUser = message.role === "user";
@@ -707,7 +708,16 @@ function MessageBubble({
       {
         "data-message-id": message.id,
         className: twMerge4("flex w-full justify-end", className),
-        children: /* @__PURE__ */ jsx7("div", { className: "max-w-[75%] rounded-[18px] rounded-br-[4px] px-4 py-2.5 bg-accent text-white whitespace-pre-wrap text-sm leading-relaxed", children: message.content })
+        children: /* @__PURE__ */ jsx7(
+          "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"
+            ),
+            children: message.content
+          }
+        )
       }
     );
   }
@@ -717,16 +727,25 @@ 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-medium uppercase tracking-[0.08em] text-text-secondary px-1", children: message.agent.replace("_agent", "").replace("_", " ") }),
-        /* @__PURE__ */ jsx7("div", { className: "max-w-[88%] rounded-[18px] rounded-tl-[4px] px-4 py-3 bg-surface-raised border border-border", children: message.response ? /* @__PURE__ */ jsx7(
-          AgentResponse,
+        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("_", " ") }),
+        /* @__PURE__ */ jsx7(
+          "div",
           {
-            response: message.response,
-            showSources,
-            showConfidence,
-            showVerification
+            className: twMerge4(
+              "max-w-[88%] rounded-[18px] rounded-tl-[4px] px-4 py-3 bg-surface border border-border",
+              animated && "motion-safe:animate-springFromLeft"
+            ),
+            children: message.response ? /* @__PURE__ */ jsx7(
+              AgentResponse,
+              {
+                response: message.response,
+                showSources,
+                showConfidence,
+                showVerification
+              }
+            ) : /* @__PURE__ */ jsx7(ResponseMessage, { content: message.content })
           }
-        ) : /* @__PURE__ */ jsx7(ResponseMessage, { content: message.content }) })
+        )
       ]
     }
   );
@@ -780,12 +799,20 @@ function MessageComposer({
   const [value, setValue] = useState2("");
   const textareaRef = useRef3(null);
   const canSend = value.trim().length > 0 && !isLoading;
+  const resetHeight = useCallback2(() => {
+    const el = textareaRef.current;
+    if (el) {
+      el.style.height = "auto";
+      el.style.overflowY = "hidden";
+    }
+  }, []);
   const handleSend = useCallback2(() => {
     if (!canSend) return;
     onSend(value.trim());
     setValue("");
+    resetHeight();
     textareaRef.current?.focus();
-  }, [canSend, onSend, value]);
+  }, [canSend, onSend, value, resetHeight]);
   const handleKeyDown = useCallback2(
     (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
@@ -795,11 +822,22 @@ function MessageComposer({
     },
     [handleSend]
   );
+  const handleChange = useCallback2(
+    (e) => {
+      setValue(e.target.value);
+      const el = e.target;
+      el.style.height = "auto";
+      const capped = Math.min(el.scrollHeight, 128);
+      el.style.height = `${capped}px`;
+      el.style.overflowY = el.scrollHeight > 128 ? "auto" : "hidden";
+    },
+    []
+  );
   return /* @__PURE__ */ jsxs7(
     "div",
     {
       className: twMerge6(
-        "flex items-end gap-3 border-t border-border px-4 py-3 bg-canvas",
+        "flex items-end gap-3 shrink-0 border-t border-border px-4 py-3",
         className
       ),
       children: [
@@ -808,16 +846,17 @@ function MessageComposer({
           {
             ref: textareaRef,
             value,
-            onChange: (e) => setValue(e.target.value),
+            onChange: handleChange,
             onKeyDown: handleKeyDown,
             placeholder,
             rows: 1,
             disabled: isLoading,
             className: twMerge6(
-              "flex-1 resize-none rounded-xl border border-border bg-surface",
+              "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" },
@@ -836,7 +875,7 @@ function MessageComposer({
               "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] active:scale-[0.98]" : "bg-accent/30 text-text-muted cursor-not-allowed"
+              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"
           }
@@ -852,6 +891,7 @@ import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function WelcomeScreen({
   title = "Welcome",
   message = "How can I help you today?",
+  icon,
   suggestedQuestions = [],
   onQuestionSelect,
   className
@@ -860,7 +900,7 @@ function WelcomeScreen({
     "div",
     {
       className: twMerge7(
-        "flex flex-1 flex-col items-center justify-center gap-8 p-8 text-center",
+        "flex flex-1 flex-col items-center justify-center gap-8 p-8 text-center motion-safe:animate-fadeUp",
         className
       ),
       children: [
@@ -869,12 +909,12 @@ function WelcomeScreen({
           {
             className: "w-14 h-14 rounded-2xl bg-accent/10 border border-border flex items-center justify-center pulse-glow",
             "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx10("span", { className: "text-2xl", children: "\u2726" })
+            children: icon ?? /* @__PURE__ */ jsx10("span", { className: "text-2xl", children: "\u2726" })
           }
         ),
         /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-2", children: [
-          title && /* @__PURE__ */ jsx10("h2", { className: "text-2xl font-semibold text-text-primary", children: title }),
-          /* @__PURE__ */ jsx10("p", { className: "text-text-secondary text-base leading-relaxed max-w-sm", children: message })
+          title && /* @__PURE__ */ jsx10("h2", { className: "text-3xl font-bold text-text-primary", children: title }),
+          /* @__PURE__ */ jsx10("p", { className: "text-text-secondary text-base leading-relaxed max-w-md", children: message })
         ] }),
         suggestedQuestions.length > 0 && /* @__PURE__ */ jsx10(
           "div",
@@ -889,8 +929,8 @@ function WelcomeScreen({
                 onClick: () => onQuestionSelect?.(question),
                 className: twMerge7(
                   "px-4 py-2 rounded-full text-sm",
-                  "border border-border bg-surface text-text-primary",
-                  "hover:bg-surface-raised hover:border-interactive hover:text-text-primary",
+                  "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",
                   "transition-colors duration-200"
                 ),
@@ -975,11 +1015,11 @@ function useCharacterDrain(target, msPerChar = 15) {
 import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var phaseLabels = {
   idle: "",
-  waiting: "Waiting",
-  thinking: "Thinking",
-  retrieving: "Searching",
-  generating: "Writing",
-  verifying: "Verifying"
+  waiting: "Waiting...",
+  thinking: "Thinking...",
+  retrieving: "Searching...",
+  generating: "Writing...",
+  verifying: "Verifying..."
 };
 function StreamingMessage({
   stream,
@@ -1003,27 +1043,29 @@ function StreamingMessage({
       stream.active && stream.phase !== "idle" && "Response started",
       !stream.active && stream.content && "Response complete"
     ] }),
-    showPhases && stream.active && stream.phase !== "idle" && /* @__PURE__ */ jsxs9(
-      "div",
-      {
-        className: "flex items-center gap-2 mb-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", { children: phaseLabel })
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs9("div", { className: "text-text-primary whitespace-pre-wrap", children: [
-      displayedContent,
-      stream.active && /* @__PURE__ */ jsx11(
-        "span",
+    /* @__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(
+        "div",
         {
-          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"
+          className: "flex items-center gap-2 mb-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", { 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"
+          }
+        )
+      ] })
     ] })
   ] });
 }
@@ -1542,7 +1584,7 @@ function ThinkingIndicator({ label = "Thinking...", className }) {
     "span",
     {
       role: "status",
-      className: `inline-flex items-center gap-2 text-sm ${className ?? ""}`,
+      className: `inline-flex items-center gap-2 text-sm motion-safe:animate-fadeSlideUpSm ${className ?? ""}`,
       "data-testid": "thinking-indicator",
       children: [
         /* @__PURE__ */ jsx25("span", { className: "text-text-secondary", children: label }),
@@ -1690,9 +1732,210 @@ function TypewriterText({
   ] });
 }
 
-// src/chat/ConversationList/ConversationList.tsx
+// src/streaming/TypingIndicator/TypingIndicator.tsx
 import { twMerge as twMerge9 } from "tailwind-merge";
+import { useReducedMotion as useReducedMotion2 } from "@surf-kit/hooks";
 import { jsx as jsx30, jsxs as jsxs27 } from "react/jsx-runtime";
+var bounceKeyframes = `
+@keyframes typing-bounce {
+  0%, 80%, 100% { transform: translateY(0); }
+  40% { transform: translateY(-6px); }
+}
+`;
+function TypingIndicator({
+  label,
+  dotCount = 3,
+  className
+}) {
+  const reducedMotion = useReducedMotion2();
+  return /* @__PURE__ */ jsxs27(
+    "span",
+    {
+      role: "status",
+      "aria-label": label ?? "typing",
+      className: twMerge9("inline-flex items-center gap-2", className),
+      "data-testid": "typing-indicator",
+      children: [
+        !reducedMotion && /* @__PURE__ */ jsx30("style", { children: bounceKeyframes }),
+        label && /* @__PURE__ */ jsx30("span", { className: "text-sm text-text-secondary", children: label }),
+        /* @__PURE__ */ jsx30("span", { className: "flex gap-1", "data-testid": "typing-dots", children: Array.from({ length: dotCount }, (_, i) => /* @__PURE__ */ jsx30(
+          "span",
+          {
+            className: "w-2 h-2 rounded-full bg-text-secondary",
+            style: reducedMotion ? void 0 : {
+              animation: "typing-bounce 1.4s infinite ease-in-out",
+              animationDelay: `${i * 160}ms`
+            }
+          },
+          i
+        )) })
+      ]
+    }
+  );
+}
+
+// src/streaming/TextGlimmer/TextGlimmer.tsx
+import { twMerge as twMerge10 } from "tailwind-merge";
+import { useReducedMotion as useReducedMotion3 } from "@surf-kit/hooks";
+import { jsx as jsx31, jsxs as jsxs28 } from "react/jsx-runtime";
+var shimmerKeyframes = `
+@keyframes text-shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+`;
+var widthPattern = ["100%", "90%", "60%"];
+function TextGlimmer({ lines = 3, className }) {
+  const reducedMotion = useReducedMotion3();
+  return /* @__PURE__ */ jsxs28(
+    "div",
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: twMerge10("flex flex-col gap-2", className),
+      "data-testid": "text-glimmer",
+      children: [
+        !reducedMotion && /* @__PURE__ */ jsx31("style", { children: shimmerKeyframes }),
+        Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx31(
+          "div",
+          {
+            className: "h-3 rounded bg-surface-raised",
+            style: {
+              width: widthPattern[i % widthPattern.length],
+              ...reducedMotion ? void 0 : {
+                backgroundImage: "linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent)",
+                backgroundSize: "200% 100%",
+                animation: "text-shimmer 1.5s infinite ease-in-out"
+              }
+            },
+            "data-testid": "glimmer-line"
+          },
+          i
+        ))
+      ]
+    }
+  );
+}
+
+// src/streaming/StreamingList/StreamingList.tsx
+import { twMerge as twMerge11 } from "tailwind-merge";
+import { useReducedMotion as useReducedMotion4 } from "@surf-kit/hooks";
+import { jsx as jsx32, jsxs as jsxs29 } from "react/jsx-runtime";
+var fadeSlideInKeyframes = `
+@keyframes fadeSlideIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+`;
+function StreamingList({
+  items,
+  renderItem,
+  isStreaming = false,
+  className,
+  emptyMessage
+}) {
+  const reducedMotion = useReducedMotion4();
+  if (items.length === 0 && !isStreaming) {
+    return emptyMessage ? /* @__PURE__ */ jsx32("p", { className: twMerge11("text-sm text-text-secondary", className), "data-testid": "streaming-list-empty", children: emptyMessage }) : null;
+  }
+  return /* @__PURE__ */ jsxs29(
+    "ul",
+    {
+      "aria-live": "polite",
+      className: twMerge11("list-none p-0 m-0", className),
+      "data-testid": "streaming-list",
+      children: [
+        !reducedMotion && /* @__PURE__ */ jsx32("style", { children: fadeSlideInKeyframes }),
+        items.map((item, index) => /* @__PURE__ */ jsx32(
+          "li",
+          {
+            style: reducedMotion ? void 0 : { animation: "fadeSlideIn 0.3s ease-out" },
+            "data-testid": "streaming-list-item",
+            children: renderItem(item, index)
+          },
+          index
+        )),
+        isStreaming && /* @__PURE__ */ jsx32("li", { "data-testid": "streaming-list-loading", children: /* @__PURE__ */ jsx32(TypingIndicator, {}) })
+      ]
+    }
+  );
+}
+
+// src/streaming/StreamingStructure/StreamingStructure.tsx
+import { twMerge as twMerge12 } from "tailwind-merge";
+import { useReducedMotion as useReducedMotion5 } from "@surf-kit/hooks";
+import { jsx as jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
+var fadeSlideInKeyframes2 = `
+@keyframes fadeSlideIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+`;
+function renderValue(value, reducedMotion) {
+  if (value === null) {
+    return /* @__PURE__ */ jsx33("span", { className: "italic text-text-secondary", children: "null" });
+  }
+  if (value === void 0) {
+    return /* @__PURE__ */ jsx33("span", { className: "italic text-text-secondary", children: "undefined" });
+  }
+  if (Array.isArray(value)) {
+    return /* @__PURE__ */ jsx33("ol", { className: "list-decimal pl-4 m-0", children: value.map((item, i) => /* @__PURE__ */ jsx33("li", { className: "text-text-secondary text-sm", children: renderValue(item, reducedMotion) }, i)) });
+  }
+  if (typeof value === "object") {
+    return renderNestedDl(value, reducedMotion);
+  }
+  return String(value);
+}
+function renderNestedDl(data, reducedMotion) {
+  const entries = Object.entries(data);
+  return /* @__PURE__ */ jsx33("dl", { className: "pl-4 m-0", "data-testid": "streaming-structure-nested", children: entries.map(([key, value]) => /* @__PURE__ */ jsxs30(
+    "div",
+    {
+      style: reducedMotion ? void 0 : { animation: "fadeSlideIn 0.3s ease-out" },
+      children: [
+        /* @__PURE__ */ jsx33("dt", { className: "font-medium text-text-primary text-sm", children: key }),
+        /* @__PURE__ */ jsx33("dd", { className: "text-text-secondary text-sm ml-0 mb-3", children: renderValue(value, reducedMotion) })
+      ]
+    },
+    key
+  )) });
+}
+function StreamingStructure({
+  data,
+  isStreaming = false,
+  className
+}) {
+  const reducedMotion = useReducedMotion5();
+  const entries = Object.entries(data);
+  return /* @__PURE__ */ jsxs30(
+    "dl",
+    {
+      "aria-live": "polite",
+      className: twMerge12("m-0", className),
+      "data-testid": "streaming-structure",
+      children: [
+        !reducedMotion && /* @__PURE__ */ jsx33("style", { children: fadeSlideInKeyframes2 }),
+        entries.map(([key, value]) => /* @__PURE__ */ jsxs30(
+          "div",
+          {
+            style: reducedMotion ? void 0 : { animation: "fadeSlideIn 0.3s ease-out" },
+            "data-testid": "streaming-structure-entry",
+            children: [
+              /* @__PURE__ */ jsx33("dt", { className: "font-medium text-text-primary text-sm", children: key }),
+              /* @__PURE__ */ jsx33("dd", { className: "text-text-secondary text-sm ml-0 mb-3", children: renderValue(value, reducedMotion) })
+            ]
+          },
+          key
+        )),
+        isStreaming && /* @__PURE__ */ jsx33("div", { "data-testid": "streaming-structure-loading", children: /* @__PURE__ */ jsx33(TextGlimmer, { lines: 1 }) })
+      ]
+    }
+  );
+}
+
+// src/chat/ConversationList/ConversationList.tsx
+import { twMerge as twMerge13 } from "tailwind-merge";
+import { jsx as jsx34, jsxs as jsxs31 } from "react/jsx-runtime";
 function ConversationList({
   conversations,
   activeId,
@@ -1701,13 +1944,13 @@ function ConversationList({
   onNew,
   className
 }) {
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs31(
     "nav",
     {
       "aria-label": "Conversation list",
-      className: twMerge9("flex flex-col h-full bg-canvas", className),
+      className: twMerge13("flex flex-col h-full bg-canvas", className),
       children: [
-        onNew && /* @__PURE__ */ jsx30("div", { className: "p-3 border-b border-border", children: /* @__PURE__ */ jsx30(
+        onNew && /* @__PURE__ */ jsx34("div", { className: "p-3 border-b border-border", children: /* @__PURE__ */ jsx34(
           "button",
           {
             type: "button",
@@ -1716,19 +1959,19 @@ function ConversationList({
             children: "New conversation"
           }
         ) }),
-        /* @__PURE__ */ jsxs27("ul", { role: "list", className: "flex-1 overflow-y-auto", children: [
+        /* @__PURE__ */ jsxs31("ul", { role: "list", className: "flex-1 overflow-y-auto", children: [
           conversations.map((conversation) => {
             const isActive = conversation.id === activeId;
-            return /* @__PURE__ */ jsxs27(
+            return /* @__PURE__ */ jsxs31(
               "li",
               {
-                className: twMerge9(
+                className: twMerge13(
                   "flex items-start border-b border-border transition-colors duration-200",
                   "hover:bg-surface",
                   isActive && "bg-surface-raised border-l-2 border-l-accent"
                 ),
                 children: [
-                  /* @__PURE__ */ jsxs27(
+                  /* @__PURE__ */ jsxs31(
                     "button",
                     {
                       type: "button",
@@ -1736,19 +1979,19 @@ function ConversationList({
                       "aria-current": isActive ? "true" : void 0,
                       className: "flex-1 min-w-0 text-left px-4 py-3",
                       children: [
-                        /* @__PURE__ */ jsx30("div", { className: "text-sm font-medium text-brand-cream truncate", children: conversation.title }),
-                        /* @__PURE__ */ jsx30("div", { className: "text-xs text-brand-cream/40 truncate mt-0.5 leading-relaxed", children: conversation.lastMessage })
+                        /* @__PURE__ */ jsx34("div", { className: "text-sm font-medium text-brand-cream truncate", children: conversation.title }),
+                        /* @__PURE__ */ jsx34("div", { className: "text-xs text-brand-cream/40 truncate mt-0.5 leading-relaxed", children: conversation.lastMessage })
                       ]
                     }
                   ),
-                  onDelete && /* @__PURE__ */ jsx30(
+                  onDelete && /* @__PURE__ */ jsx34(
                     "button",
                     {
                       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",
-                      children: /* @__PURE__ */ jsxs27(
+                      children: /* @__PURE__ */ jsxs31(
                         "svg",
                         {
                           xmlns: "http://www.w3.org/2000/svg",
@@ -1762,8 +2005,8 @@ function ConversationList({
                           strokeLinejoin: "round",
                           "aria-hidden": "true",
                           children: [
-                            /* @__PURE__ */ jsx30("polyline", { points: "3 6 5 6 21 6" }),
-                            /* @__PURE__ */ jsx30("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
+                            /* @__PURE__ */ jsx34("polyline", { points: "3 6 5 6 21 6" }),
+                            /* @__PURE__ */ jsx34("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })
                           ]
                         }
                       )
@@ -1774,7 +2017,7 @@ function ConversationList({
               conversation.id
             );
           }),
-          conversations.length === 0 && /* @__PURE__ */ jsx30("li", { className: "px-4 py-8 text-center", children: /* @__PURE__ */ jsx30("span", { className: "text-sm text-brand-cream/30 font-body", children: "No conversations yet" }) })
+          conversations.length === 0 && /* @__PURE__ */ jsx34("li", { className: "px-4 py-8 text-center", children: /* @__PURE__ */ jsx34("span", { className: "text-sm text-brand-cream/30 font-body", children: "No conversations yet" }) })
         ] })
       ]
     }
@@ -1782,9 +2025,9 @@ function ConversationList({
 }
 
 // src/layouts/AgentFullPage/AgentFullPage.tsx
-import { twMerge as twMerge10 } from "tailwind-merge";
+import { twMerge as twMerge14 } from "tailwind-merge";
 import { useState as useState7, useCallback as useCallback3 } from "react";
-import { Fragment, jsx as jsx31, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx35, jsxs as jsxs32 } from "react/jsx-runtime";
 function AgentFullPage({
   endpoint,
   title = "Chat",
@@ -1804,14 +2047,14 @@ function AgentFullPage({
     },
     [onConversationSelect]
   );
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs32(
     "div",
     {
-      className: twMerge10("flex h-screen w-full overflow-hidden bg-brand-dark", className),
+      className: twMerge14("flex h-screen w-full overflow-hidden bg-brand-dark", className),
       "data-testid": "agent-full-page",
       children: [
-        showConversationList && /* @__PURE__ */ jsxs28(Fragment, { children: [
-          sidebarOpen && /* @__PURE__ */ jsx31(
+        showConversationList && /* @__PURE__ */ jsxs32(Fragment, { children: [
+          sidebarOpen && /* @__PURE__ */ jsx35(
             "div",
             {
               className: "fixed inset-0 bg-brand-dark/80 backdrop-blur-sm z-30 md:hidden",
@@ -1819,10 +2062,10 @@ function AgentFullPage({
               "data-testid": "sidebar-overlay"
             }
           ),
-          /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx35(
             "aside",
             {
-              className: twMerge10(
+              className: twMerge14(
                 "bg-brand-dark border-r border-brand-gold/15 w-72 shrink-0 flex-col z-40",
                 // Desktop: always visible
                 "hidden md:flex",
@@ -1830,7 +2073,7 @@ function AgentFullPage({
                 sidebarOpen && "fixed inset-y-0 left-0 flex md:relative"
               ),
               "aria-label": "Conversations sidebar",
-              children: /* @__PURE__ */ jsx31(
+              children: /* @__PURE__ */ jsx35(
                 ConversationList,
                 {
                   conversations,
@@ -1843,15 +2086,15 @@ function AgentFullPage({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs28("div", { className: "flex-1 flex flex-col min-w-0 bg-brand-dark", children: [
-          showConversationList && /* @__PURE__ */ jsx31("div", { className: "md:hidden flex items-center border-b border-brand-gold/15 px-3 py-2 bg-brand-dark-panel/60 backdrop-blur-sm", children: /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsxs32("div", { className: "flex-1 flex flex-col min-w-0 bg-brand-dark", children: [
+          showConversationList && /* @__PURE__ */ jsx35("div", { className: "md:hidden flex items-center border-b border-brand-gold/15 px-3 py-2 bg-brand-dark-panel/60 backdrop-blur-sm", children: /* @__PURE__ */ jsx35(
             "button",
             {
               type: "button",
               onClick: () => setSidebarOpen(true),
               "aria-label": "Open conversations sidebar",
               className: "p-2 rounded-xl text-brand-cream/60 hover:text-brand-cream hover:bg-brand-dark-panel transition-colors duration-200",
-              children: /* @__PURE__ */ jsxs28(
+              children: /* @__PURE__ */ jsxs32(
                 "svg",
                 {
                   xmlns: "http://www.w3.org/2000/svg",
@@ -1865,15 +2108,15 @@ function AgentFullPage({
                   strokeLinejoin: "round",
                   "aria-hidden": "true",
                   children: [
-                    /* @__PURE__ */ jsx31("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
-                    /* @__PURE__ */ jsx31("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
-                    /* @__PURE__ */ jsx31("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
+                    /* @__PURE__ */ jsx35("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+                    /* @__PURE__ */ jsx35("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+                    /* @__PURE__ */ jsx35("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
                   ]
                 }
               )
             }
           ) }),
-          /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsx35(
             AgentChat,
             {
               endpoint,
@@ -1888,9 +2131,9 @@ function AgentFullPage({
 }
 
 // src/layouts/AgentPanel/AgentPanel.tsx
-import { twMerge as twMerge11 } from "tailwind-merge";
+import { twMerge as twMerge15 } from "tailwind-merge";
 import { useRef as useRef6, useEffect as useEffect5 } from "react";
-import { jsx as jsx32, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs33 } from "react/jsx-runtime";
 function AgentPanel({
   endpoint,
   isOpen,
@@ -1910,16 +2153,16 @@ function AgentPanel({
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, onClose]);
   const widthStyle = typeof width === "number" ? `${width}px` : width;
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
-      className: twMerge11("fixed inset-0 z-50", !isOpen && "pointer-events-none"),
+      className: twMerge15("fixed inset-0 z-50", !isOpen && "pointer-events-none"),
       "aria-hidden": !isOpen,
       children: [
-        /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx36(
           "div",
           {
-            className: twMerge11(
+            className: twMerge15(
               "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"
             ),
@@ -1927,7 +2170,7 @@ function AgentPanel({
             "data-testid": "panel-backdrop"
           }
         ),
-        /* @__PURE__ */ jsxs29(
+        /* @__PURE__ */ jsxs33(
           "div",
           {
             ref: panelRef,
@@ -1935,30 +2178,30 @@ function AgentPanel({
             "aria-label": title,
             "aria-modal": isOpen ? "true" : void 0,
             style: { width: widthStyle, maxWidth: "100vw" },
-            className: twMerge11(
+            className: twMerge15(
               "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"}`,
               className
             ),
             children: [
-              /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between border-b border-brand-gold/15 px-5 py-3.5 bg-brand-dark-panel/60 backdrop-blur-sm shrink-0", children: [
-                /* @__PURE__ */ jsx32("h2", { className: "text-base font-display font-semibold text-brand-cream", children: title }),
-                /* @__PURE__ */ jsx32(
+              /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between border-b border-brand-gold/15 px-5 py-3.5 bg-brand-dark-panel/60 backdrop-blur-sm shrink-0", children: [
+                /* @__PURE__ */ jsx36("h2", { className: "text-base font-display font-semibold text-brand-cream", children: title }),
+                /* @__PURE__ */ jsx36(
                   "button",
                   {
                     type: "button",
                     onClick: onClose,
                     "aria-label": "Close panel",
                     className: "rounded-xl p-2 text-brand-cream/40 hover:text-brand-cream/80 hover:bg-brand-cream/5 transition-colors duration-200",
-                    children: /* @__PURE__ */ jsxs29("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-                      /* @__PURE__ */ jsx32("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                      /* @__PURE__ */ jsx32("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                    children: /* @__PURE__ */ jsxs33("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                      /* @__PURE__ */ jsx36("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                      /* @__PURE__ */ jsx36("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
                     ] })
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx32(
+              /* @__PURE__ */ jsx36(
                 AgentChat,
                 {
                   endpoint,
@@ -1977,9 +2220,9 @@ function AgentPanel({
 }
 
 // src/layouts/AgentWidget/AgentWidget.tsx
-import { twMerge as twMerge12 } from "tailwind-merge";
+import { twMerge as twMerge16 } from "tailwind-merge";
 import { useState as useState8, useCallback as useCallback4 } from "react";
-import { jsx as jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs34 } from "react/jsx-runtime";
 function AgentWidget({
   endpoint,
   position = "bottom-right",
@@ -1994,14 +2237,14 @@ function AgentWidget({
   const positionClasses = position === "bottom-left" ? "left-4 bottom-4" : "right-4 bottom-4";
   const popoverPositionClasses = position === "bottom-left" ? "left-4 bottom-20" : "right-4 bottom-20";
   const popoverOrigin = position === "bottom-left" ? "origin-bottom-left" : "origin-bottom-right";
-  return /* @__PURE__ */ jsxs30("div", { className, children: [
-    /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs34("div", { className, children: [
+    /* @__PURE__ */ jsxs34(
       "div",
       {
         role: "dialog",
         "aria-label": title,
         "aria-hidden": !isOpen,
-        className: twMerge12(
+        className: twMerge16(
           "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",
@@ -2012,23 +2255,23 @@ function AgentWidget({
           isOpen ? "opacity-100 scale-100 pointer-events-auto translate-y-0" : "opacity-0 scale-95 pointer-events-none translate-y-2"
         ),
         children: [
-          /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between px-4 py-2.5 bg-brand-dark-panel/80 border-b border-brand-gold/15 shrink-0", children: [
-            /* @__PURE__ */ jsx33("h2", { className: "text-sm font-display font-semibold text-brand-cream", children: title }),
-            /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-between px-4 py-2.5 bg-brand-dark-panel/80 border-b border-brand-gold/15 shrink-0", children: [
+            /* @__PURE__ */ jsx37("h2", { className: "text-sm font-display font-semibold text-brand-cream", children: title }),
+            /* @__PURE__ */ jsx37(
               "button",
               {
                 type: "button",
                 onClick: () => setIsOpen(false),
                 "aria-label": "Minimize chat",
                 className: "rounded-lg p-1.5 text-brand-cream/40 hover:text-brand-cream/70 transition-colors duration-200",
-                children: /* @__PURE__ */ jsxs30("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-                  /* @__PURE__ */ jsx33("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                  /* @__PURE__ */ jsx33("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                children: /* @__PURE__ */ jsxs34("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                  /* @__PURE__ */ jsx37("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                  /* @__PURE__ */ jsx37("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
                 ] })
               }
             )
           ] }),
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx37(
             AgentChat,
             {
               endpoint,
@@ -2041,14 +2284,14 @@ function AgentWidget({
         ]
       }
     ),
-    /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsx37(
       "button",
       {
         type: "button",
         onClick: toggle,
         "aria-label": isOpen ? "Close chat" : triggerLabel,
         "aria-expanded": isOpen,
-        className: twMerge12(
+        className: twMerge16(
           "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",
@@ -2056,29 +2299,29 @@ function AgentWidget({
           "transition-all duration-200",
           positionClasses
         ),
-        children: isOpen ? /* @__PURE__ */ jsxs30("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx33("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-          /* @__PURE__ */ jsx33("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-        ] }) : /* @__PURE__ */ jsx33("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx33("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) })
+        children: isOpen ? /* @__PURE__ */ jsxs34("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx37("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ jsx37("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        ] }) : /* @__PURE__ */ jsx37("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx37("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) })
       }
     )
   ] });
 }
 
 // src/layouts/AgentEmbed/AgentEmbed.tsx
-import { twMerge as twMerge13 } from "tailwind-merge";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { twMerge as twMerge17 } from "tailwind-merge";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function AgentEmbed({
   endpoint,
   title = "Chat",
   className
 }) {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx38(
     "div",
     {
-      className: twMerge13("w-full h-full min-h-0", className),
+      className: twMerge17("w-full h-full min-h-0", className),
       "data-testid": "agent-embed",
-      children: /* @__PURE__ */ jsx34(
+      children: /* @__PURE__ */ jsx38(
         AgentChat,
         {
           endpoint,
@@ -2090,9 +2333,495 @@ function AgentEmbed({
   );
 }
 
-// src/feedback/ThumbsFeedback/ThumbsFeedback.tsx
+// src/mcp/MCPToolCall/MCPToolCall.tsx
+import { cva } from "class-variance-authority";
+import { twMerge as twMerge18 } from "tailwind-merge";
+import { Badge as Badge7, Spinner as Spinner4 } from "@surf-kit/core";
+import { jsx as jsx39, jsxs as jsxs35 } from "react/jsx-runtime";
+var statusBadgeIntent = {
+  pending: "default",
+  running: "info",
+  success: "success",
+  error: "error"
+};
+var statusLabel = {
+  pending: "Pending",
+  running: "Running",
+  success: "Success",
+  error: "Error"
+};
+var container = cva(
+  "rounded-lg border text-sm",
+  {
+    variants: {
+      status: {
+        pending: "border-neutral-200 bg-neutral-50",
+        running: "border-sky-200 bg-sky-50",
+        success: "border-status-success-subtle bg-status-success-subtle/30",
+        error: "border-status-error-subtle bg-status-error-subtle/30"
+      }
+    },
+    defaultVariants: { status: "pending" }
+  }
+);
+function formatDuration(start, end) {
+  if (!start || !end) return null;
+  const ms = end.getTime() - start.getTime();
+  if (ms < 1e3) return `${ms}ms`;
+  return `${(ms / 1e3).toFixed(1)}s`;
+}
+function formatValue(value) {
+  if (typeof value === "string") return value;
+  return JSON.stringify(value, null, 2);
+}
+function MCPToolCall({ call, isExpanded = false, onToggleExpand, className }) {
+  const duration = formatDuration(call.startedAt, call.completedAt);
+  return /* @__PURE__ */ jsxs35(
+    "div",
+    {
+      className: twMerge18(container({ status: call.status }), className),
+      "data-testid": "mcp-tool-call",
+      children: [
+        /* @__PURE__ */ jsxs35(
+          "button",
+          {
+            type: "button",
+            className: "flex w-full items-center justify-between gap-2 px-3 py-2",
+            onClick: onToggleExpand,
+            "aria-expanded": isExpanded,
+            "data-testid": "mcp-tool-call-header",
+            children: [
+              /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2 min-w-0", children: [
+                /* @__PURE__ */ jsx39("span", { className: "font-medium text-text-primary truncate", "data-testid": "mcp-tool-name", children: call.name }),
+                call.serverName && /* @__PURE__ */ jsx39("span", { className: "text-xs text-text-secondary truncate", children: call.serverName })
+              ] }),
+              /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2 shrink-0", children: [
+                call.status === "running" && /* @__PURE__ */ jsx39("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx39(Spinner4, { size: "sm" }) }),
+                /* @__PURE__ */ jsx39(
+                  Badge7,
+                  {
+                    intent: statusBadgeIntent[call.status],
+                    size: "sm",
+                    role: "status",
+                    "aria-label": `Status: ${statusLabel[call.status]}`,
+                    "data-testid": "mcp-tool-status",
+                    children: statusLabel[call.status]
+                  }
+                ),
+                duration && /* @__PURE__ */ jsx39("span", { className: "text-xs text-text-secondary", "data-testid": "mcp-tool-duration", children: duration }),
+                /* @__PURE__ */ jsx39(
+                  "svg",
+                  {
+                    className: `h-4 w-4 text-text-secondary transition-transform ${isExpanded ? "rotate-180" : ""}`,
+                    viewBox: "0 0 20 20",
+                    fill: "currentColor",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx39(
+                      "path",
+                      {
+                        fillRule: "evenodd",
+                        d: "M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z",
+                        clipRule: "evenodd"
+                      }
+                    )
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsxs35("div", { className: "border-t border-inherit px-3 py-2 space-y-3", "data-testid": "mcp-tool-call-body", children: [
+          Object.keys(call.arguments).length > 0 && /* @__PURE__ */ jsxs35("div", { children: [
+            /* @__PURE__ */ jsx39("h4", { className: "text-xs font-medium text-text-secondary mb-1", children: "Arguments" }),
+            /* @__PURE__ */ jsx39("dl", { className: "space-y-1", "data-testid": "mcp-tool-arguments", children: Object.entries(call.arguments).map(([key, value]) => /* @__PURE__ */ jsxs35("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsxs35("dt", { className: "text-xs font-mono text-text-secondary shrink-0", children: [
+                key,
+                ":"
+              ] }),
+              /* @__PURE__ */ jsx39("dd", { className: "text-xs font-mono text-text-primary break-all", children: formatValue(value) })
+            ] }, key)) })
+          ] }),
+          call.result !== void 0 && /* @__PURE__ */ jsxs35("div", { children: [
+            /* @__PURE__ */ jsx39("h4", { className: "text-xs font-medium text-text-secondary mb-1", children: "Result" }),
+            /* @__PURE__ */ jsx39(
+              "pre",
+              {
+                className: "text-xs font-mono text-text-primary bg-neutral-100 rounded p-2 overflow-x-auto whitespace-pre-wrap",
+                "data-testid": "mcp-tool-result",
+                children: typeof call.result === "string" ? call.result : JSON.stringify(call.result, null, 2)
+              }
+            )
+          ] }),
+          call.error && /* @__PURE__ */ jsxs35("div", { children: [
+            /* @__PURE__ */ jsx39("h4", { className: "text-xs font-medium text-status-error mb-1", children: "Error" }),
+            /* @__PURE__ */ jsx39(
+              "p",
+              {
+                className: "text-xs text-status-error bg-status-error-subtle/30 rounded p-2",
+                "data-testid": "mcp-tool-error",
+                children: call.error
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/mcp/MCPResourceView/MCPResourceView.tsx
+import { twMerge as twMerge19 } from "tailwind-merge";
+import { jsx as jsx40, jsxs as jsxs36 } from "react/jsx-runtime";
+function isImageMime(mime) {
+  return !!mime && mime.startsWith("image/");
+}
+function isTextMime(mime) {
+  if (!mime) return true;
+  return mime.startsWith("text/") || mime === "application/json" || mime === "application/xml" || mime === "application/javascript" || mime === "application/typescript";
+}
+function isUrlContent(content) {
+  if (typeof content !== "string") return false;
+  return /^https?:\/\//.test(content.trim());
+}
+function MCPResourceView({ resource, className }) {
+  const { uri, name, mimeType, description, content } = resource;
+  return /* @__PURE__ */ jsxs36(
+    "div",
+    {
+      className: twMerge19("rounded-lg border border-border bg-surface p-3 text-sm", className),
+      "data-testid": "mcp-resource-view",
+      children: [
+        /* @__PURE__ */ jsxs36("div", { className: "mb-2", children: [
+          /* @__PURE__ */ jsx40("span", { className: "font-medium text-text-primary", "data-testid": "mcp-resource-name", children: name }),
+          /* @__PURE__ */ jsx40(
+            "span",
+            {
+              className: "ml-2 text-xs text-text-secondary font-mono truncate",
+              "data-testid": "mcp-resource-uri",
+              children: uri
+            }
+          )
+        ] }),
+        description && /* @__PURE__ */ jsx40("p", { className: "text-xs text-text-secondary mb-2", "data-testid": "mcp-resource-description", children: description }),
+        content !== void 0 && /* @__PURE__ */ jsx40("div", { "data-testid": "mcp-resource-content", children: isImageMime(mimeType) && typeof content === "string" ? /* @__PURE__ */ jsx40(
+          "img",
+          {
+            src: content,
+            alt: name,
+            className: "max-w-full rounded",
+            "data-testid": "mcp-resource-image"
+          }
+        ) : isUrlContent(content) ? /* @__PURE__ */ jsx40(
+          "a",
+          {
+            href: typeof content === "string" ? content.trim() : void 0,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "text-sm text-interactive-primary hover:underline break-all",
+            "data-testid": "mcp-resource-link",
+            children: typeof content === "string" ? content.trim() : ""
+          }
+        ) : isTextMime(mimeType) ? /* @__PURE__ */ jsx40(
+          "pre",
+          {
+            className: "text-xs font-mono text-text-primary bg-neutral-100 rounded p-2 overflow-x-auto whitespace-pre-wrap",
+            "data-testid": "mcp-resource-code",
+            children: typeof content === "string" ? content : "[Binary data]"
+          }
+        ) : /* @__PURE__ */ jsxs36("p", { className: "text-xs text-text-secondary italic", children: [
+          "Unsupported content type: ",
+          mimeType
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/mcp/MCPServerStatus/MCPServerStatus.tsx
 import { useState as useState9 } from "react";
-import { jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
+import { cva as cva2 } from "class-variance-authority";
+import { twMerge as twMerge20 } from "tailwind-merge";
+import { jsx as jsx41, jsxs as jsxs37 } from "react/jsx-runtime";
+var statusDot = cva2("inline-block h-2 w-2 rounded-full shrink-0", {
+  variants: {
+    status: {
+      connected: "bg-status-success",
+      disconnected: "bg-neutral-400",
+      error: "bg-status-error"
+    }
+  },
+  defaultVariants: { status: "disconnected" }
+});
+var statusLabel2 = {
+  connected: "Connected",
+  disconnected: "Disconnected",
+  error: "Error"
+};
+function formatLastPing(date) {
+  if (!date) return null;
+  return date.toLocaleTimeString();
+}
+function MCPServerStatus({ server, className }) {
+  const [showTools, setShowTools] = useState9(false);
+  const [showResources, setShowResources] = useState9(false);
+  const lastPing = formatLastPing(server.lastPing);
+  return /* @__PURE__ */ jsxs37(
+    "div",
+    {
+      className: twMerge20("rounded-lg border border-border bg-surface p-3 text-sm", className),
+      "data-testid": "mcp-server-status",
+      children: [
+        /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2 mb-1", children: [
+          /* @__PURE__ */ jsx41(
+            "span",
+            {
+              className: statusDot({ status: server.status }),
+              role: "status",
+              "aria-label": statusLabel2[server.status],
+              "data-testid": "mcp-server-status-dot"
+            }
+          ),
+          /* @__PURE__ */ jsx41("span", { className: "font-medium text-text-primary", "data-testid": "mcp-server-name", children: server.name }),
+          server.version && /* @__PURE__ */ jsxs37("span", { className: "text-xs text-text-secondary", "data-testid": "mcp-server-version", children: [
+            "v",
+            server.version
+          ] })
+        ] }),
+        lastPing && /* @__PURE__ */ jsxs37("p", { className: "text-xs text-text-secondary ml-4 mb-2", "data-testid": "mcp-server-last-ping", children: [
+          "Last ping: ",
+          lastPing
+        ] }),
+        server.tools.length > 0 && /* @__PURE__ */ jsxs37("div", { className: "mt-2", children: [
+          /* @__PURE__ */ jsxs37(
+            "button",
+            {
+              type: "button",
+              className: "flex items-center gap-1 text-xs font-medium text-text-secondary hover:text-text-primary w-full",
+              onClick: () => setShowTools((prev) => !prev),
+              "aria-expanded": showTools,
+              "data-testid": "mcp-server-tools-toggle",
+              children: [
+                /* @__PURE__ */ jsx41(
+                  "svg",
+                  {
+                    className: `h-3 w-3 transition-transform ${showTools ? "rotate-90" : ""}`,
+                    viewBox: "0 0 20 20",
+                    fill: "currentColor",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx41(
+                      "path",
+                      {
+                        fillRule: "evenodd",
+                        d: "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z",
+                        clipRule: "evenodd"
+                      }
+                    )
+                  }
+                ),
+                "Tools (",
+                server.tools.length,
+                ")"
+              ]
+            }
+          ),
+          showTools && /* @__PURE__ */ jsx41("ul", { className: "mt-1 ml-4 space-y-1", "data-testid": "mcp-server-tools-list", children: server.tools.map((tool) => /* @__PURE__ */ jsxs37("li", { className: "text-xs text-text-primary", children: [
+            /* @__PURE__ */ jsx41("span", { className: "font-mono", children: tool.name }),
+            tool.description && /* @__PURE__ */ jsxs37("span", { className: "text-text-secondary ml-1", children: [
+              "\u2014 ",
+              tool.description
+            ] })
+          ] }, tool.name)) })
+        ] }),
+        server.resources.length > 0 && /* @__PURE__ */ jsxs37("div", { className: "mt-2", children: [
+          /* @__PURE__ */ jsxs37(
+            "button",
+            {
+              type: "button",
+              className: "flex items-center gap-1 text-xs font-medium text-text-secondary hover:text-text-primary w-full",
+              onClick: () => setShowResources((prev) => !prev),
+              "aria-expanded": showResources,
+              "data-testid": "mcp-server-resources-toggle",
+              children: [
+                /* @__PURE__ */ jsx41(
+                  "svg",
+                  {
+                    className: `h-3 w-3 transition-transform ${showResources ? "rotate-90" : ""}`,
+                    viewBox: "0 0 20 20",
+                    fill: "currentColor",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx41(
+                      "path",
+                      {
+                        fillRule: "evenodd",
+                        d: "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z",
+                        clipRule: "evenodd"
+                      }
+                    )
+                  }
+                ),
+                "Resources (",
+                server.resources.length,
+                ")"
+              ]
+            }
+          ),
+          showResources && /* @__PURE__ */ jsx41("ul", { className: "mt-1 ml-4 space-y-1", "data-testid": "mcp-server-resources-list", children: server.resources.map((res) => /* @__PURE__ */ jsxs37("li", { className: "text-xs text-text-primary", children: [
+            /* @__PURE__ */ jsx41("span", { className: "font-mono", children: res.name }),
+            /* @__PURE__ */ jsxs37("span", { className: "text-text-secondary ml-1", children: [
+              "(",
+              res.uri,
+              ")"
+            ] })
+          ] }, res.uri)) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/mcp/MCPApprovalDialog/MCPApprovalDialog.tsx
+import { useRef as useRef7, useEffect as useEffect6 } from "react";
+import { cva as cva3 } from "class-variance-authority";
+import { twMerge as twMerge21 } from "tailwind-merge";
+import { useDialog, FocusScope } from "react-aria";
+import { Button as Button2, Badge as Badge8 } from "@surf-kit/core";
+import { jsx as jsx42, jsxs as jsxs38 } from "react/jsx-runtime";
+var riskBadgeIntent = {
+  low: "success",
+  medium: "warning",
+  high: "error"
+};
+var riskLabel = {
+  low: "Low Risk",
+  medium: "Medium Risk",
+  high: "High Risk"
+};
+var riskBorder = cva3("relative bg-surface rounded-xl shadow-xl border p-6 outline-none w-full max-w-lg", {
+  variants: {
+    risk: {
+      low: "border-status-success-subtle",
+      medium: "border-status-warning-subtle",
+      high: "border-status-error-subtle"
+    }
+  },
+  defaultVariants: { risk: "low" }
+});
+function formatValue2(value) {
+  if (typeof value === "string") return value;
+  return JSON.stringify(value, null, 2);
+}
+function MCPApprovalDialog({
+  call,
+  riskLevel = "low",
+  onApprove,
+  onDeny,
+  isOpen,
+  className
+}) {
+  const ref = useRef7(null);
+  const { dialogProps, titleProps } = useDialog({ role: "alertdialog" }, ref);
+  useEffect6(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => document.removeEventListener("keydown", handleKeyDown, true);
+  }, [isOpen]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx42(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50",
+      "data-testid": "mcp-approval-overlay",
+      children: /* @__PURE__ */ jsx42(FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsxs38(
+        "div",
+        {
+          ...dialogProps,
+          ref,
+          className: twMerge21(riskBorder({ risk: riskLevel }), className),
+          "data-testid": "mcp-approval-dialog",
+          children: [
+            /* @__PURE__ */ jsxs38("div", { className: "flex items-center justify-between mb-4", children: [
+              /* @__PURE__ */ jsx42(
+                "h2",
+                {
+                  ...titleProps,
+                  className: "text-lg font-semibold text-text-primary",
+                  "data-testid": "mcp-approval-title",
+                  children: "Tool Approval Required"
+                }
+              ),
+              /* @__PURE__ */ jsx42(
+                Badge8,
+                {
+                  intent: riskBadgeIntent[riskLevel],
+                  size: "sm",
+                  "data-testid": "mcp-approval-risk-badge",
+                  children: riskLabel[riskLevel]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs38("div", { className: "space-y-3 text-sm", children: [
+              /* @__PURE__ */ jsxs38("div", { children: [
+                /* @__PURE__ */ jsx42("h3", { className: "text-xs font-medium text-text-secondary mb-1", children: "Tool" }),
+                /* @__PURE__ */ jsx42("p", { className: "font-mono text-text-primary", "data-testid": "mcp-approval-tool-name", children: call.name }),
+                call.serverName && /* @__PURE__ */ jsxs38("p", { className: "text-xs text-text-secondary mt-0.5", "data-testid": "mcp-approval-server", children: [
+                  "Server: ",
+                  call.serverName
+                ] })
+              ] }),
+              Object.keys(call.arguments).length > 0 && /* @__PURE__ */ jsxs38("div", { children: [
+                /* @__PURE__ */ jsx42("h3", { className: "text-xs font-medium text-text-secondary mb-1", children: "Arguments" }),
+                /* @__PURE__ */ jsx42(
+                  "dl",
+                  {
+                    className: "space-y-1 bg-neutral-100 rounded p-2",
+                    "data-testid": "mcp-approval-arguments",
+                    children: Object.entries(call.arguments).map(([key, value]) => /* @__PURE__ */ jsxs38("div", { className: "flex gap-2", children: [
+                      /* @__PURE__ */ jsxs38("dt", { className: "text-xs font-mono text-text-secondary shrink-0", children: [
+                        key,
+                        ":"
+                      ] }),
+                      /* @__PURE__ */ jsx42("dd", { className: "text-xs font-mono text-text-primary break-all", children: formatValue2(value) })
+                    ] }, key))
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs38("div", { className: "mt-6 flex justify-end gap-3", children: [
+              /* @__PURE__ */ jsx42(
+                Button2,
+                {
+                  intent: "secondary",
+                  onPress: onDeny,
+                  "aria-label": "Deny tool execution",
+                  children: "Deny"
+                }
+              ),
+              /* @__PURE__ */ jsx42(
+                Button2,
+                {
+                  intent: "primary",
+                  onPress: onApprove,
+                  "aria-label": "Approve tool execution",
+                  children: "Approve"
+                }
+              )
+            ] })
+          ]
+        }
+      ) })
+    }
+  );
+}
+
+// src/feedback/ThumbsFeedback/ThumbsFeedback.tsx
+import { useState as useState10 } from "react";
+import { jsx as jsx43, jsxs as jsxs39 } from "react/jsx-runtime";
 function ThumbsFeedback({
   messageId,
   onFeedback,
@@ -2100,7 +2829,7 @@ function ThumbsFeedback({
   onNegative,
   className
 }) {
-  const [selected, setSelected] = useState9(state);
+  const [selected, setSelected] = useState10(state);
   const handleClick = (rating) => {
     setSelected(rating);
     onFeedback(messageId, rating);
@@ -2108,7 +2837,7 @@ function ThumbsFeedback({
       onNegative();
     }
   };
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs39(
     "div",
     {
       className: `inline-flex items-center gap-0.5 ${className ?? ""}`,
@@ -2116,7 +2845,7 @@ function ThumbsFeedback({
       "aria-label": "Rate this response",
       "data-testid": "thumbs-feedback",
       children: [
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx43(
           "button",
           {
             type: "button",
@@ -2125,7 +2854,7 @@ function ThumbsFeedback({
             "aria-pressed": selected === "positive",
             className: `p-1.5 rounded-md transition-colors duration-200 ${selected === "positive" ? "text-brand-cyan bg-brand-cyan/15" : "text-brand-cream/30 hover:text-brand-cyan hover:bg-brand-cyan/10"}`,
             "data-testid": "thumbs-up",
-            children: /* @__PURE__ */ jsxs31(
+            children: /* @__PURE__ */ jsxs39(
               "svg",
               {
                 width: "16",
@@ -2138,14 +2867,14 @@ function ThumbsFeedback({
                 strokeLinejoin: "round",
                 "aria-hidden": "true",
                 children: [
-                  /* @__PURE__ */ jsx35("path", { d: "M7 10v12" }),
-                  /* @__PURE__ */ jsx35("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" })
+                  /* @__PURE__ */ jsx43("path", { d: "M7 10v12" }),
+                  /* @__PURE__ */ jsx43("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" })
                 ]
               }
             )
           }
         ),
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx43(
           "button",
           {
             type: "button",
@@ -2154,7 +2883,7 @@ function ThumbsFeedback({
             "aria-pressed": selected === "negative",
             className: `p-1.5 rounded-md transition-colors duration-200 ${selected === "negative" ? "text-brand-watermelon bg-brand-watermelon/15" : "text-brand-cream/30 hover:text-brand-watermelon hover:bg-brand-watermelon/10"}`,
             "data-testid": "thumbs-down",
-            children: /* @__PURE__ */ jsxs31(
+            children: /* @__PURE__ */ jsxs39(
               "svg",
               {
                 width: "16",
@@ -2167,8 +2896,8 @@ function ThumbsFeedback({
                 strokeLinejoin: "round",
                 "aria-hidden": "true",
                 children: [
-                  /* @__PURE__ */ jsx35("path", { d: "M17 14V2" }),
-                  /* @__PURE__ */ jsx35("path", { d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z" })
+                  /* @__PURE__ */ jsx43("path", { d: "M17 14V2" }),
+                  /* @__PURE__ */ jsx43("path", { d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22h0a3.13 3.13 0 0 1-3-3.88Z" })
                 ]
               }
             )
@@ -2180,17 +2909,17 @@ function ThumbsFeedback({
 }
 
 // src/feedback/FeedbackDialog/FeedbackDialog.tsx
-import { useState as useState10 } from "react";
-import { Dialog, Button as Button2, TextArea } from "@surf-kit/core";
-import { Fragment as Fragment2, jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
+import { useState as useState11 } from "react";
+import { Dialog, Button as Button3, TextArea } from "@surf-kit/core";
+import { Fragment as Fragment2, jsx as jsx44, jsxs as jsxs40 } from "react/jsx-runtime";
 function FeedbackDialog({ isOpen, onClose, onSubmit, className }) {
-  const [comment, setComment] = useState10("");
+  const [comment, setComment] = useState11("");
   const handleSubmit = () => {
     onSubmit(comment);
     setComment("");
     onClose();
   };
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx44(
     Dialog,
     {
       isOpen,
@@ -2198,11 +2927,11 @@ function FeedbackDialog({ isOpen, onClose, onSubmit, className }) {
       title: "Share your feedback",
       size: "sm",
       className,
-      footer: /* @__PURE__ */ jsxs32(Fragment2, { children: [
-        /* @__PURE__ */ jsx36(Button2, { intent: "ghost", onPress: onClose, children: "Cancel" }),
-        /* @__PURE__ */ jsx36(Button2, { intent: "primary", onPress: handleSubmit, isDisabled: comment.trim().length === 0, children: "Submit" })
+      footer: /* @__PURE__ */ jsxs40(Fragment2, { children: [
+        /* @__PURE__ */ jsx44(Button3, { intent: "ghost", onPress: onClose, children: "Cancel" }),
+        /* @__PURE__ */ jsx44(Button3, { intent: "primary", onPress: handleSubmit, isDisabled: comment.trim().length === 0, children: "Submit" })
       ] }),
-      children: /* @__PURE__ */ jsx36(
+      children: /* @__PURE__ */ jsx44(
         TextArea,
         {
           label: "What could be improved?",
@@ -2218,10 +2947,10 @@ function FeedbackDialog({ isOpen, onClose, onSubmit, className }) {
 }
 
 // src/feedback/FeedbackConfirmation/FeedbackConfirmation.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 function FeedbackConfirmation({ variant = "inline", className }) {
   if (variant === "toast") {
-    return /* @__PURE__ */ jsx37(
+    return /* @__PURE__ */ jsx45(
       "div",
       {
         role: "status",
@@ -2231,7 +2960,7 @@ function FeedbackConfirmation({ variant = "inline", className }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx45(
     "span",
     {
       role: "status",
@@ -2259,6 +2988,10 @@ export {
   FeedbackConfirmation,
   FeedbackDialog,
   FollowUpChips,
+  MCPApprovalDialog,
+  MCPResourceView,
+  MCPServerStatus,
+  MCPToolCall,
   MessageBubble,
   MessageComposer,
   MessageThread,
@@ -2270,12 +3003,16 @@ export {
   SourceDrawer,
   SourceInline,
   SourceList,
+  StreamingList,
   StreamingMessage,
+  StreamingStructure,
   StructuredResponse,
+  TextGlimmer,
   ThinkingIndicator,
   ThumbsFeedback,
   ToolExecution,
   TypewriterText,
+  TypingIndicator,
   VerificationBadge,
   VerificationDetail,
   VerificationProgress,