@surf-kit/agent 0.1.1 → 0.2.0

package/dist/index.cjs

@@ -47,6 +47,10 @@ __export(index_exports, {
   FeedbackConfirmation: () => FeedbackConfirmation,
   FeedbackDialog: () => FeedbackDialog,
   FollowUpChips: () => FollowUpChips,
+  MCPApprovalDialog: () => MCPApprovalDialog,
+  MCPResourceView: () => MCPResourceView,
+  MCPServerStatus: () => MCPServerStatus,
+  MCPToolCall: () => MCPToolCall,
   MessageBubble: () => MessageBubble,
   MessageComposer: () => MessageComposer,
   MessageThread: () => MessageThread,
@@ -58,12 +62,16 @@ __export(index_exports, {
   SourceDrawer: () => SourceDrawer,
   SourceInline: () => SourceInline,
   SourceList: () => SourceList,
+  StreamingList: () => StreamingList,
   StreamingMessage: () => StreamingMessage,
+  StreamingStructure: () => StreamingStructure,
   StructuredResponse: () => StructuredResponse,
+  TextGlimmer: () => TextGlimmer,
   ThinkingIndicator: () => ThinkingIndicator,
   ThumbsFeedback: () => ThumbsFeedback,
   ToolExecution: () => ToolExecution,
   TypewriterText: () => TypewriterText,
+  TypingIndicator: () => TypingIndicator,
   VerificationBadge: () => VerificationBadge,
   VerificationDetail: () => VerificationDetail,
   VerificationProgress: () => VerificationProgress,
@@ -656,7 +664,7 @@ function FollowUpChips({ suggestions, onSelect, className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
-      className: `flex gap-2 overflow-x-auto py-1 ${className ?? ""}`,
+      className: (0, import_tailwind_merge3.twMerge)("flex flex-wrap gap-2 py-1", className),
       role: "group",
       "aria-label": "Follow-up suggestions",
       "data-testid": "follow-up-chips",
@@ -666,9 +674,9 @@ function FollowUpChips({ suggestions, onSelect, className }) {
           type: "button",
           onClick: () => onSelect(suggestion),
           className: (0, import_tailwind_merge3.twMerge)(
-            "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"
           ),
@@ -771,6 +779,7 @@ function MessageBubble({
   showSources = true,
   showConfidence = true,
   showVerification = true,
+  animated = true,
   className
 }) {
   const isUser = message.role === "user";
@@ -780,7 +789,16 @@ function MessageBubble({
       {
         "data-message-id": message.id,
         className: (0, import_tailwind_merge4.twMerge)("flex w-full justify-end", className),
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)(
+          "div",
+          {
+            className: (0, import_tailwind_merge4.twMerge)(
+              "max-w-[70%] rounded-[18px] rounded-br-[4px] px-4 py-2.5 bg-accent text-brand-cream break-words whitespace-pre-wrap text-sm leading-relaxed",
+              animated && "motion-safe:animate-slideFromRight"
+            ),
+            children: message.content
+          }
+        )
       }
     );
   }
@@ -790,16 +808,25 @@ function MessageBubble({
       "data-message-id": message.id,
       className: (0, import_tailwind_merge4.twMerge)("flex w-full flex-col items-start gap-1.5", className),
       children: [
-        showAgent && message.agent && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-[11px] font-medium uppercase tracking-[0.08em] text-text-secondary px-1", children: message.agent.replace("_agent", "").replace("_", " ") }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "max-w-[88%] rounded-[18px] rounded-tl-[4px] px-4 py-3 bg-surface-raised border border-border", children: message.response ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          AgentResponse,
+        showAgent && message.agent && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-text-muted px-1", children: message.agent.replace("_agent", "").replace("_", " ") }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "div",
           {
-            response: message.response,
-            showSources,
-            showConfidence,
-            showVerification
+            className: (0, import_tailwind_merge4.twMerge)(
+              "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__ */ (0, import_jsx_runtime7.jsx)(
+              AgentResponse,
+              {
+                response: message.response,
+                showSources,
+                showConfidence,
+                showVerification
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ResponseMessage, { content: message.content })
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ResponseMessage, { content: message.content }) })
+        )
       ]
     }
   );
@@ -853,12 +880,20 @@ function MessageComposer({
   const [value, setValue] = (0, import_react4.useState)("");
   const textareaRef = (0, import_react4.useRef)(null);
   const canSend = value.trim().length > 0 && !isLoading;
+  const resetHeight = (0, import_react4.useCallback)(() => {
+    const el = textareaRef.current;
+    if (el) {
+      el.style.height = "auto";
+      el.style.overflowY = "hidden";
+    }
+  }, []);
   const handleSend = (0, import_react4.useCallback)(() => {
     if (!canSend) return;
     onSend(value.trim());
     setValue("");
+    resetHeight();
     textareaRef.current?.focus();
-  }, [canSend, onSend, value]);
+  }, [canSend, onSend, value, resetHeight]);
   const handleKeyDown = (0, import_react4.useCallback)(
     (e) => {
       if (e.key === "Enter" && !e.shiftKey) {
@@ -868,11 +903,22 @@ function MessageComposer({
     },
     [handleSend]
   );
+  const handleChange = (0, import_react4.useCallback)(
+    (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__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       className: (0, import_tailwind_merge6.twMerge)(
-        "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: [
@@ -881,16 +927,17 @@ function MessageComposer({
           {
             ref: textareaRef,
             value,
-            onChange: (e) => setValue(e.target.value),
+            onChange: handleChange,
             onKeyDown: handleKeyDown,
             placeholder,
             rows: 1,
             disabled: isLoading,
             className: (0, import_tailwind_merge6.twMerge)(
-              "flex-1 resize-none rounded-xl border border-border bg-surface",
+              "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" },
@@ -909,7 +956,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"
           }
@@ -925,6 +972,7 @@ var import_jsx_runtime10 = require("react/jsx-runtime");
 function WelcomeScreen({
   title = "Welcome",
   message = "How can I help you today?",
+  icon,
   suggestedQuestions = [],
   onQuestionSelect,
   className
@@ -933,7 +981,7 @@ function WelcomeScreen({
     "div",
     {
       className: (0, import_tailwind_merge7.twMerge)(
-        "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: [
@@ -942,12 +990,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__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-2xl", children: "\u2726" })
+            children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-2xl", children: "\u2726" })
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { className: "text-2xl font-semibold text-text-primary", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-text-secondary text-base leading-relaxed max-w-sm", children: message })
+          title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { className: "text-3xl font-bold text-text-primary", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-text-secondary text-base leading-relaxed max-w-md", children: message })
         ] }),
         suggestedQuestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "div",
@@ -962,8 +1010,8 @@ function WelcomeScreen({
                 onClick: () => onQuestionSelect?.(question),
                 className: (0, import_tailwind_merge7.twMerge)(
                   "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"
                 ),
@@ -1048,11 +1096,11 @@ function useCharacterDrain(target, msPerChar = 15) {
 var import_jsx_runtime11 = require("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,
@@ -1076,27 +1124,29 @@ function StreamingMessage({
       stream.active && stream.phase !== "idle" && "Response started",
       !stream.active && stream.content && "Response complete"
     ] }),
-    showPhases && stream.active && stream.phase !== "idle" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-      "div",
-      {
-        className: "flex items-center gap-2 mb-2 text-sm text-text-secondary",
-        "data-testid": "phase-indicator",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core3.Spinner, { size: "sm" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: phaseLabel })
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "text-text-primary whitespace-pre-wrap", children: [
-      displayedContent,
-      stream.active && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        "span",
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "max-w-[88%] px-4 py-3 rounded-[18px] rounded-tl-[4px] bg-surface border border-border motion-safe:animate-springFromLeft", children: [
+      showPhases && stream.active && stream.phase !== "idle" && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        "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__ */ (0, import_jsx_runtime11.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core3.Spinner, { size: "sm" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: phaseLabel })
+          ]
         }
-      )
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "text-sm leading-relaxed text-text-primary whitespace-pre-wrap", children: [
+        displayedContent,
+        stream.active && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "span",
+          {
+            className: "inline-block w-0.5 h-4 bg-accent align-text-bottom animate-pulse ml-0.5",
+            "aria-hidden": "true",
+            "data-testid": "streaming-cursor"
+          }
+        )
+      ] })
     ] })
   ] });
 }
@@ -1615,7 +1665,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__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-text-secondary", children: label }),
@@ -1763,9 +1813,210 @@ function TypewriterText({
   ] });
 }
 
-// src/chat/ConversationList/ConversationList.tsx
+// src/streaming/TypingIndicator/TypingIndicator.tsx
 var import_tailwind_merge9 = require("tailwind-merge");
+var import_hooks2 = require("@surf-kit/hooks");
 var import_jsx_runtime31 = require("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 = (0, import_hooks2.useReducedMotion)();
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    "span",
+    {
+      role: "status",
+      "aria-label": label ?? "typing",
+      className: (0, import_tailwind_merge9.twMerge)("inline-flex items-center gap-2", className),
+      "data-testid": "typing-indicator",
+      children: [
+        !reducedMotion && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("style", { children: bounceKeyframes }),
+        label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-sm text-text-secondary", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "flex gap-1", "data-testid": "typing-dots", children: Array.from({ length: dotCount }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          "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
+var import_tailwind_merge10 = require("tailwind-merge");
+var import_hooks3 = require("@surf-kit/hooks");
+var import_jsx_runtime32 = require("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 = (0, import_hooks3.useReducedMotion)();
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    "div",
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: (0, import_tailwind_merge10.twMerge)("flex flex-col gap-2", className),
+      "data-testid": "text-glimmer",
+      children: [
+        !reducedMotion && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("style", { children: shimmerKeyframes }),
+        Array.from({ length: lines }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "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
+var import_tailwind_merge11 = require("tailwind-merge");
+var import_hooks4 = require("@surf-kit/hooks");
+var import_jsx_runtime33 = require("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 = (0, import_hooks4.useReducedMotion)();
+  if (items.length === 0 && !isStreaming) {
+    return emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: (0, import_tailwind_merge11.twMerge)("text-sm text-text-secondary", className), "data-testid": "streaming-list-empty", children: emptyMessage }) : null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+    "ul",
+    {
+      "aria-live": "polite",
+      className: (0, import_tailwind_merge11.twMerge)("list-none p-0 m-0", className),
+      "data-testid": "streaming-list",
+      children: [
+        !reducedMotion && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("style", { children: fadeSlideInKeyframes }),
+        items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          "li",
+          {
+            style: reducedMotion ? void 0 : { animation: "fadeSlideIn 0.3s ease-out" },
+            "data-testid": "streaming-list-item",
+            children: renderItem(item, index)
+          },
+          index
+        )),
+        isStreaming && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("li", { "data-testid": "streaming-list-loading", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TypingIndicator, {}) })
+      ]
+    }
+  );
+}
+
+// src/streaming/StreamingStructure/StreamingStructure.tsx
+var import_tailwind_merge12 = require("tailwind-merge");
+var import_hooks5 = require("@surf-kit/hooks");
+var import_jsx_runtime34 = require("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__ */ (0, import_jsx_runtime34.jsx)("span", { className: "italic text-text-secondary", children: "null" });
+  }
+  if (value === void 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "italic text-text-secondary", children: "undefined" });
+  }
+  if (Array.isArray(value)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("ol", { className: "list-decimal pl-4 m-0", children: value.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("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__ */ (0, import_jsx_runtime34.jsx)("dl", { className: "pl-4 m-0", "data-testid": "streaming-structure-nested", children: entries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    "div",
+    {
+      style: reducedMotion ? void 0 : { animation: "fadeSlideIn 0.3s ease-out" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("dt", { className: "font-medium text-text-primary text-sm", children: key }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("dd", { className: "text-text-secondary text-sm ml-0 mb-3", children: renderValue(value, reducedMotion) })
+      ]
+    },
+    key
+  )) });
+}
+function StreamingStructure({
+  data,
+  isStreaming = false,
+  className
+}) {
+  const reducedMotion = (0, import_hooks5.useReducedMotion)();
+  const entries = Object.entries(data);
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    "dl",
+    {
+      "aria-live": "polite",
+      className: (0, import_tailwind_merge12.twMerge)("m-0", className),
+      "data-testid": "streaming-structure",
+      children: [
+        !reducedMotion && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("style", { children: fadeSlideInKeyframes2 }),
+        entries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+          "div",
+          {
+            style: reducedMotion ? void 0 : { animation: "fadeSlideIn 0.3s ease-out" },
+            "data-testid": "streaming-structure-entry",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("dt", { className: "font-medium text-text-primary text-sm", children: key }),
+              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("dd", { className: "text-text-secondary text-sm ml-0 mb-3", children: renderValue(value, reducedMotion) })
+            ]
+          },
+          key
+        )),
+        isStreaming && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { "data-testid": "streaming-structure-loading", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(TextGlimmer, { lines: 1 }) })
+      ]
+    }
+  );
+}
+
+// src/chat/ConversationList/ConversationList.tsx
+var import_tailwind_merge13 = require("tailwind-merge");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function ConversationList({
   conversations,
   activeId,
@@ -1774,13 +2025,13 @@ function ConversationList({
   onNew,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "nav",
     {
       "aria-label": "Conversation list",
-      className: (0, import_tailwind_merge9.twMerge)("flex flex-col h-full bg-canvas", className),
+      className: (0, import_tailwind_merge13.twMerge)("flex flex-col h-full bg-canvas", className),
       children: [
-        onNew && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "p-3 border-b border-border", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        onNew && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "p-3 border-b border-border", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "button",
           {
             type: "button",
@@ -1789,19 +2040,19 @@ function ConversationList({
             children: "New conversation"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("ul", { role: "list", className: "flex-1 overflow-y-auto", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("ul", { role: "list", className: "flex-1 overflow-y-auto", children: [
           conversations.map((conversation) => {
             const isActive = conversation.id === activeId;
-            return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
               "li",
               {
-                className: (0, import_tailwind_merge9.twMerge)(
+                className: (0, import_tailwind_merge13.twMerge)(
                   "flex items-start border-b border-border transition-colors duration-200",
                   "hover:bg-surface",
                   isActive && "bg-surface-raised border-l-2 border-l-accent"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                     "button",
                     {
                       type: "button",
@@ -1809,19 +2060,19 @@ function ConversationList({
                       "aria-current": isActive ? "true" : void 0,
                       className: "flex-1 min-w-0 text-left px-4 py-3",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-sm font-medium text-brand-cream truncate", children: conversation.title }),
-                        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-xs text-brand-cream/40 truncate mt-0.5 leading-relaxed", children: conversation.lastMessage })
+                        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "text-sm font-medium text-brand-cream truncate", children: conversation.title }),
+                        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "text-xs text-brand-cream/40 truncate mt-0.5 leading-relaxed", children: conversation.lastMessage })
                       ]
                     }
                   ),
-                  onDelete && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                  onDelete && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                     "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__ */ (0, import_jsx_runtime31.jsxs)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
                         "svg",
                         {
                           xmlns: "http://www.w3.org/2000/svg",
@@ -1835,8 +2086,8 @@ function ConversationList({
                           strokeLinejoin: "round",
                           "aria-hidden": "true",
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("polyline", { points: "3 6 5 6 21 6" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("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__ */ (0, import_jsx_runtime35.jsx)("polyline", { points: "3 6 5 6 21 6" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("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" })
                           ]
                         }
                       )
@@ -1847,7 +2098,7 @@ function ConversationList({
               conversation.id
             );
           }),
-          conversations.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("li", { className: "px-4 py-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-sm text-brand-cream/30 font-body", children: "No conversations yet" }) })
+          conversations.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { className: "px-4 py-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-sm text-brand-cream/30 font-body", children: "No conversations yet" }) })
         ] })
       ]
     }
@@ -1855,9 +2106,9 @@ function ConversationList({
 }
 
 // src/layouts/AgentFullPage/AgentFullPage.tsx
-var import_tailwind_merge10 = require("tailwind-merge");
+var import_tailwind_merge14 = require("tailwind-merge");
 var import_react11 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function AgentFullPage({
   endpoint,
   title = "Chat",
@@ -1877,14 +2128,14 @@ function AgentFullPage({
     },
     [onConversationSelect]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "div",
     {
-      className: (0, import_tailwind_merge10.twMerge)("flex h-screen w-full overflow-hidden bg-brand-dark", className),
+      className: (0, import_tailwind_merge14.twMerge)("flex h-screen w-full overflow-hidden bg-brand-dark", className),
       "data-testid": "agent-full-page",
       children: [
-        showConversationList && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-          sidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        showConversationList && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+          sidebarOpen && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "div",
             {
               className: "fixed inset-0 bg-brand-dark/80 backdrop-blur-sm z-30 md:hidden",
@@ -1892,10 +2143,10 @@ function AgentFullPage({
               "data-testid": "sidebar-overlay"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "aside",
             {
-              className: (0, import_tailwind_merge10.twMerge)(
+              className: (0, import_tailwind_merge14.twMerge)(
                 "bg-brand-dark border-r border-brand-gold/15 w-72 shrink-0 flex-col z-40",
                 // Desktop: always visible
                 "hidden md:flex",
@@ -1903,7 +2154,7 @@ function AgentFullPage({
                 sidebarOpen && "fixed inset-y-0 left-0 flex md:relative"
               ),
               "aria-label": "Conversations sidebar",
-              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
                 ConversationList,
                 {
                   conversations,
@@ -1916,15 +2167,15 @@ function AgentFullPage({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex-1 flex flex-col min-w-0 bg-brand-dark", children: [
-          showConversationList && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("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__ */ (0, import_jsx_runtime32.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex-1 flex flex-col min-w-0 bg-brand-dark", children: [
+          showConversationList && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("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__ */ (0, import_jsx_runtime36.jsx)(
             "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__ */ (0, import_jsx_runtime32.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
                 "svg",
                 {
                   xmlns: "http://www.w3.org/2000/svg",
@@ -1938,15 +2189,15 @@ function AgentFullPage({
                   strokeLinejoin: "round",
                   "aria-hidden": "true",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
                   ]
                 }
               )
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             AgentChat,
             {
               endpoint,
@@ -1961,9 +2212,9 @@ function AgentFullPage({
 }
 
 // src/layouts/AgentPanel/AgentPanel.tsx
-var import_tailwind_merge11 = require("tailwind-merge");
+var import_tailwind_merge15 = require("tailwind-merge");
 var import_react12 = require("react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function AgentPanel({
   endpoint,
   isOpen,
@@ -1983,16 +2234,16 @@ function AgentPanel({
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, onClose]);
   const widthStyle = typeof width === "number" ? `${width}px` : width;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "div",
     {
-      className: (0, import_tailwind_merge11.twMerge)("fixed inset-0 z-50", !isOpen && "pointer-events-none"),
+      className: (0, import_tailwind_merge15.twMerge)("fixed inset-0 z-50", !isOpen && "pointer-events-none"),
       "aria-hidden": !isOpen,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "div",
           {
-            className: (0, import_tailwind_merge11.twMerge)(
+            className: (0, import_tailwind_merge15.twMerge)(
               "fixed inset-0 transition-opacity duration-300",
               isOpen ? "opacity-100 bg-brand-dark/70 backdrop-blur-sm pointer-events-auto" : "opacity-0 pointer-events-none"
             ),
@@ -2000,7 +2251,7 @@ function AgentPanel({
             "data-testid": "panel-backdrop"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
           "div",
           {
             ref: panelRef,
@@ -2008,30 +2259,30 @@ function AgentPanel({
             "aria-label": title,
             "aria-modal": isOpen ? "true" : void 0,
             style: { width: widthStyle, maxWidth: "100vw" },
-            className: (0, import_tailwind_merge11.twMerge)(
+            className: (0, import_tailwind_merge15.twMerge)(
               "fixed top-0 h-full flex flex-col z-50 bg-brand-dark shadow-card",
               "transition-transform duration-300 ease-in-out",
               side === "left" ? `left-0 border-r border-brand-gold/15 ${isOpen ? "translate-x-0" : "-translate-x-full"}` : `right-0 border-l border-brand-gold/15 ${isOpen ? "translate-x-0" : "translate-x-full"}`,
               className
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("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__ */ (0, import_jsx_runtime33.jsx)("h2", { className: "text-base font-display font-semibold text-brand-cream", children: title }),
-                /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("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__ */ (0, import_jsx_runtime37.jsx)("h2", { className: "text-base font-display font-semibold text-brand-cream", children: title }),
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                   "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__ */ (0, import_jsx_runtime33.jsxs)("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__ */ (0, import_jsx_runtime33.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("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__ */ (0, import_jsx_runtime37.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
                     ] })
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                 AgentChat,
                 {
                   endpoint,
@@ -2050,9 +2301,9 @@ function AgentPanel({
 }
 
 // src/layouts/AgentWidget/AgentWidget.tsx
-var import_tailwind_merge12 = require("tailwind-merge");
+var import_tailwind_merge16 = require("tailwind-merge");
 var import_react13 = require("react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function AgentWidget({
   endpoint,
   position = "bottom-right",
@@ -2067,14 +2318,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__ */ (0, import_jsx_runtime34.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
       "div",
       {
         role: "dialog",
         "aria-label": title,
         "aria-hidden": !isOpen,
-        className: (0, import_tailwind_merge12.twMerge)(
+        className: (0, import_tailwind_merge16.twMerge)(
           "fixed z-50 flex flex-col",
           "w-[min(400px,calc(100vw-2rem))] h-[min(600px,calc(100vh-6rem))]",
           "rounded-2xl overflow-hidden border border-brand-gold/15",
@@ -2085,23 +2336,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__ */ (0, import_jsx_runtime34.jsxs)("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__ */ (0, import_jsx_runtime34.jsx)("h2", { className: "text-sm font-display font-semibold text-brand-cream", children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("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__ */ (0, import_jsx_runtime38.jsx)("h2", { className: "text-sm font-display font-semibold text-brand-cream", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
               "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__ */ (0, import_jsx_runtime34.jsxs)("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__ */ (0, import_jsx_runtime34.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("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__ */ (0, import_jsx_runtime38.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
                 ] })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             AgentChat,
             {
               endpoint,
@@ -2114,14 +2365,14 @@ function AgentWidget({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       "button",
       {
         type: "button",
         onClick: toggle,
         "aria-label": isOpen ? "Close chat" : triggerLabel,
         "aria-expanded": isOpen,
-        className: (0, import_tailwind_merge12.twMerge)(
+        className: (0, import_tailwind_merge16.twMerge)(
           "fixed z-50 flex items-center justify-center w-14 h-14 rounded-full",
           "bg-brand-blue text-brand-cream shadow-glow-cyan",
           "hover:bg-brand-cyan hover:shadow-glow-cyan hover:scale-105",
@@ -2129,29 +2380,29 @@ function AgentWidget({
           "transition-all duration-200",
           positionClasses
         ),
-        children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("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__ */ (0, import_jsx_runtime34.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("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__ */ (0, import_jsx_runtime34.jsx)("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__ */ (0, import_jsx_runtime38.jsxs)("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__ */ (0, import_jsx_runtime38.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("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__ */ (0, import_jsx_runtime38.jsx)("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
-var import_tailwind_merge13 = require("tailwind-merge");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_tailwind_merge17 = require("tailwind-merge");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function AgentEmbed({
   endpoint,
   title = "Chat",
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
-      className: (0, import_tailwind_merge13.twMerge)("w-full h-full min-h-0", className),
+      className: (0, import_tailwind_merge17.twMerge)("w-full h-full min-h-0", className),
       "data-testid": "agent-embed",
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         AgentChat,
         {
           endpoint,
@@ -2163,9 +2414,495 @@ function AgentEmbed({
   );
 }
 
-// src/feedback/ThumbsFeedback/ThumbsFeedback.tsx
+// src/mcp/MCPToolCall/MCPToolCall.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_tailwind_merge18 = require("tailwind-merge");
+var import_core12 = require("@surf-kit/core");
+var import_jsx_runtime40 = require("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 = (0, import_class_variance_authority.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__ */ (0, import_jsx_runtime40.jsxs)(
+    "div",
+    {
+      className: (0, import_tailwind_merge18.twMerge)(container({ status: call.status }), className),
+      "data-testid": "mcp-tool-call",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+          "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__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "font-medium text-text-primary truncate", "data-testid": "mcp-tool-name", children: call.name }),
+                call.serverName && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-xs text-text-secondary truncate", children: call.serverName })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2 shrink-0", children: [
+                call.status === "running" && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_core12.Spinner, { size: "sm" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                  import_core12.Badge,
+                  {
+                    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__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-xs text-text-secondary", "data-testid": "mcp-tool-duration", children: duration }),
+                /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                  "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__ */ (0, import_jsx_runtime40.jsx)(
+                      "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__ */ (0, import_jsx_runtime40.jsxs)("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__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h4", { className: "text-xs font-medium text-text-secondary mb-1", children: "Arguments" }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("dl", { className: "space-y-1", "data-testid": "mcp-tool-arguments", children: Object.entries(call.arguments).map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("dt", { className: "text-xs font-mono text-text-secondary shrink-0", children: [
+                key,
+                ":"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("dd", { className: "text-xs font-mono text-text-primary break-all", children: formatValue(value) })
+            ] }, key)) })
+          ] }),
+          call.result !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h4", { className: "text-xs font-medium text-text-secondary mb-1", children: "Result" }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              "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__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h4", { className: "text-xs font-medium text-status-error mb-1", children: "Error" }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              "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
+var import_tailwind_merge19 = require("tailwind-merge");
+var import_jsx_runtime41 = require("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__ */ (0, import_jsx_runtime41.jsxs)(
+    "div",
+    {
+      className: (0, import_tailwind_merge19.twMerge)("rounded-lg border border-border bg-surface p-3 text-sm", className),
+      "data-testid": "mcp-resource-view",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "mb-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "font-medium text-text-primary", "data-testid": "mcp-resource-name", children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            "span",
+            {
+              className: "ml-2 text-xs text-text-secondary font-mono truncate",
+              "data-testid": "mcp-resource-uri",
+              children: uri
+            }
+          )
+        ] }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { className: "text-xs text-text-secondary mb-2", "data-testid": "mcp-resource-description", children: description }),
+        content !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { "data-testid": "mcp-resource-content", children: isImageMime(mimeType) && typeof content === "string" ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "img",
+          {
+            src: content,
+            alt: name,
+            className: "max-w-full rounded",
+            "data-testid": "mcp-resource-image"
+          }
+        ) : isUrlContent(content) ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          "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__ */ (0, import_jsx_runtime41.jsx)(
+          "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__ */ (0, import_jsx_runtime41.jsxs)("p", { className: "text-xs text-text-secondary italic", children: [
+          "Unsupported content type: ",
+          mimeType
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/mcp/MCPServerStatus/MCPServerStatus.tsx
 var import_react14 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_tailwind_merge20 = require("tailwind-merge");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var statusDot = (0, import_class_variance_authority2.cva)("inline-block h-2 w-2 rounded-full shrink-0", {
+  variants: {
+    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] = (0, import_react14.useState)(false);
+  const [showResources, setShowResources] = (0, import_react14.useState)(false);
+  const lastPing = formatLastPing(server.lastPing);
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+    "div",
+    {
+      className: (0, import_tailwind_merge20.twMerge)("rounded-lg border border-border bg-surface p-3 text-sm", className),
+      "data-testid": "mcp-server-status",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2 mb-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            "span",
+            {
+              className: statusDot({ status: server.status }),
+              role: "status",
+              "aria-label": statusLabel2[server.status],
+              "data-testid": "mcp-server-status-dot"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "font-medium text-text-primary", "data-testid": "mcp-server-name", children: server.name }),
+          server.version && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "text-xs text-text-secondary", "data-testid": "mcp-server-version", children: [
+            "v",
+            server.version
+          ] })
+        ] }),
+        lastPing && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("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__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "mt-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+            "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__ */ (0, import_jsx_runtime42.jsx)(
+                  "svg",
+                  {
+                    className: `h-3 w-3 transition-transform ${showTools ? "rotate-90" : ""}`,
+                    viewBox: "0 0 20 20",
+                    fill: "currentColor",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                      "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__ */ (0, import_jsx_runtime42.jsx)("ul", { className: "mt-1 ml-4 space-y-1", "data-testid": "mcp-server-tools-list", children: server.tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("li", { className: "text-xs text-text-primary", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "font-mono", children: tool.name }),
+            tool.description && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "text-text-secondary ml-1", children: [
+              "\u2014 ",
+              tool.description
+            ] })
+          ] }, tool.name)) })
+        ] }),
+        server.resources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "mt-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+            "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__ */ (0, import_jsx_runtime42.jsx)(
+                  "svg",
+                  {
+                    className: `h-3 w-3 transition-transform ${showResources ? "rotate-90" : ""}`,
+                    viewBox: "0 0 20 20",
+                    fill: "currentColor",
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                      "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__ */ (0, import_jsx_runtime42.jsx)("ul", { className: "mt-1 ml-4 space-y-1", "data-testid": "mcp-server-resources-list", children: server.resources.map((res) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("li", { className: "text-xs text-text-primary", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "font-mono", children: res.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "text-text-secondary ml-1", children: [
+              "(",
+              res.uri,
+              ")"
+            ] })
+          ] }, res.uri)) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/mcp/MCPApprovalDialog/MCPApprovalDialog.tsx
+var import_react15 = require("react");
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_tailwind_merge21 = require("tailwind-merge");
+var import_react_aria = require("react-aria");
+var import_core13 = require("@surf-kit/core");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var riskBadgeIntent = {
+  low: "success",
+  medium: "warning",
+  high: "error"
+};
+var riskLabel = {
+  low: "Low Risk",
+  medium: "Medium Risk",
+  high: "High Risk"
+};
+var riskBorder = (0, import_class_variance_authority3.cva)("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 = (0, import_react15.useRef)(null);
+  const { dialogProps, titleProps } = (0, import_react_aria.useDialog)({ role: "alertdialog" }, ref);
+  (0, import_react15.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime43.jsx)(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50",
+      "data-testid": "mcp-approval-overlay",
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_aria.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+        "div",
+        {
+          ...dialogProps,
+          ref,
+          className: (0, import_tailwind_merge21.twMerge)(riskBorder({ risk: riskLevel }), className),
+          "data-testid": "mcp-approval-dialog",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                "h2",
+                {
+                  ...titleProps,
+                  className: "text-lg font-semibold text-text-primary",
+                  "data-testid": "mcp-approval-title",
+                  children: "Tool Approval Required"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                import_core13.Badge,
+                {
+                  intent: riskBadgeIntent[riskLevel],
+                  size: "sm",
+                  "data-testid": "mcp-approval-risk-badge",
+                  children: riskLabel[riskLevel]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "space-y-3 text-sm", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h3", { className: "text-xs font-medium text-text-secondary mb-1", children: "Tool" }),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "font-mono text-text-primary", "data-testid": "mcp-approval-tool-name", children: call.name }),
+                call.serverName && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("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__ */ (0, import_jsx_runtime43.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h3", { className: "text-xs font-medium text-text-secondary mb-1", children: "Arguments" }),
+                /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                  "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__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex gap-2", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("dt", { className: "text-xs font-mono text-text-secondary shrink-0", children: [
+                        key,
+                        ":"
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("dd", { className: "text-xs font-mono text-text-primary break-all", children: formatValue2(value) })
+                    ] }, key))
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "mt-6 flex justify-end gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                import_core13.Button,
+                {
+                  intent: "secondary",
+                  onPress: onDeny,
+                  "aria-label": "Deny tool execution",
+                  children: "Deny"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                import_core13.Button,
+                {
+                  intent: "primary",
+                  onPress: onApprove,
+                  "aria-label": "Approve tool execution",
+                  children: "Approve"
+                }
+              )
+            ] })
+          ]
+        }
+      ) })
+    }
+  );
+}
+
+// src/feedback/ThumbsFeedback/ThumbsFeedback.tsx
+var import_react16 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function ThumbsFeedback({
   messageId,
   onFeedback,
@@ -2173,7 +2910,7 @@ function ThumbsFeedback({
   onNegative,
   className
 }) {
-  const [selected, setSelected] = (0, import_react14.useState)(state);
+  const [selected, setSelected] = (0, import_react16.useState)(state);
   const handleClick = (rating) => {
     setSelected(rating);
     onFeedback(messageId, rating);
@@ -2181,7 +2918,7 @@ function ThumbsFeedback({
       onNegative();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "div",
     {
       className: `inline-flex items-center gap-0.5 ${className ?? ""}`,
@@ -2189,7 +2926,7 @@ function ThumbsFeedback({
       "aria-label": "Rate this response",
       "data-testid": "thumbs-feedback",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           "button",
           {
             type: "button",
@@ -2198,7 +2935,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__ */ (0, import_jsx_runtime36.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
               "svg",
               {
                 width: "16",
@@ -2211,14 +2948,14 @@ function ThumbsFeedback({
                 strokeLinejoin: "round",
                 "aria-hidden": "true",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M7 10v12" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("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__ */ (0, import_jsx_runtime44.jsx)("path", { d: "M7 10v12" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("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__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           "button",
           {
             type: "button",
@@ -2227,7 +2964,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__ */ (0, import_jsx_runtime36.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
               "svg",
               {
                 width: "16",
@@ -2240,8 +2977,8 @@ function ThumbsFeedback({
                 strokeLinejoin: "round",
                 "aria-hidden": "true",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M17 14V2" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("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__ */ (0, import_jsx_runtime44.jsx)("path", { d: "M17 14V2" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("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" })
                 ]
               }
             )
@@ -2253,30 +2990,30 @@ function ThumbsFeedback({
 }
 
 // src/feedback/FeedbackDialog/FeedbackDialog.tsx
-var import_react15 = require("react");
-var import_core12 = require("@surf-kit/core");
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_react17 = require("react");
+var import_core14 = require("@surf-kit/core");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function FeedbackDialog({ isOpen, onClose, onSubmit, className }) {
-  const [comment, setComment] = (0, import_react15.useState)("");
+  const [comment, setComment] = (0, import_react17.useState)("");
   const handleSubmit = () => {
     onSubmit(comment);
     setComment("");
     onClose();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    import_core12.Dialog,
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    import_core14.Dialog,
     {
       isOpen,
       onClose,
       title: "Share your feedback",
       size: "sm",
       className,
-      footer: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core12.Button, { intent: "ghost", onPress: onClose, children: "Cancel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_core12.Button, { intent: "primary", onPress: handleSubmit, isDisabled: comment.trim().length === 0, children: "Submit" })
+      footer: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core14.Button, { intent: "ghost", onPress: onClose, children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_core14.Button, { intent: "primary", onPress: handleSubmit, isDisabled: comment.trim().length === 0, children: "Submit" })
       ] }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-        import_core12.TextArea,
+      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        import_core14.TextArea,
         {
           label: "What could be improved?",
           value: comment,
@@ -2291,10 +3028,10 @@ function FeedbackDialog({ isOpen, onClose, onSubmit, className }) {
 }
 
 // src/feedback/FeedbackConfirmation/FeedbackConfirmation.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function FeedbackConfirmation({ variant = "inline", className }) {
   if (variant === "toast") {
-    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       "div",
       {
         role: "status",
@@ -2304,7 +3041,7 @@ function FeedbackConfirmation({ variant = "inline", className }) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "span",
     {
       role: "status",
@@ -2333,6 +3070,10 @@ function FeedbackConfirmation({ variant = "inline", className }) {
   FeedbackConfirmation,
   FeedbackDialog,
   FollowUpChips,
+  MCPApprovalDialog,
+  MCPResourceView,
+  MCPServerStatus,
+  MCPToolCall,
   MessageBubble,
   MessageComposer,
   MessageThread,
@@ -2344,12 +3085,16 @@ function FeedbackConfirmation({ variant = "inline", className }) {
   SourceDrawer,
   SourceInline,
   SourceList,
+  StreamingList,
   StreamingMessage,
+  StreamingStructure,
   StructuredResponse,
+  TextGlimmer,
   ThinkingIndicator,
   ThumbsFeedback,
   ToolExecution,
   TypewriterText,
+  TypingIndicator,
   VerificationBadge,
   VerificationDetail,
   VerificationProgress,