@contractspec/module.ai-chat 4.1.5 → 4.3.0

package/dist/node/presentation/index.js

@@ -80,8 +80,8 @@ function ChatContainer({
   });
 }
 // src/presentation/components/ChatMessage.tsx
-import * as React3 from "react";
-import { cn as cn3 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import * as React4 from "react";
+import { cn as cn5 } from "@contractspec/lib.ui-kit-web/ui/utils";
 import { Avatar, AvatarFallback } from "@contractspec/lib.ui-kit-web/ui/avatar";
 import { Skeleton } from "@contractspec/lib.ui-kit-web/ui/skeleton";
 import {
@@ -90,7 +90,6 @@ import {
   AlertCircle,
   Copy as Copy2,
   Check as Check2,
-  ExternalLink,
   Wrench,
   Pencil,
   X
@@ -244,22 +243,98 @@ function CodePreview({
 // src/presentation/components/ToolResultRenderer.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 "use client";
+function isUIMessageLike(result) {
+  return typeof result === "object" && result !== null && "parts" in result && Array.isArray(result.parts);
+}
 function isPresentationToolResult(result) {
   return typeof result === "object" && result !== null && "presentationKey" in result && typeof result.presentationKey === "string";
 }
 function isFormToolResult(result) {
   return typeof result === "object" && result !== null && "formKey" in result && typeof result.formKey === "string";
 }
+function isDataViewToolResult(result) {
+  return typeof result === "object" && result !== null && "dataViewKey" in result && typeof result.dataViewKey === "string";
+}
+function UIMessagePartRenderer({
+  part,
+  presentationRenderer,
+  formRenderer,
+  dataViewRenderer,
+  depth = 0
+}) {
+  if (part === null || part === undefined)
+    return null;
+  const p = part;
+  if (p.type === "text" && typeof p.text === "string") {
+    return /* @__PURE__ */ jsx3("p", {
+      className: "text-sm whitespace-pre-wrap",
+      children: p.text
+    }, depth);
+  }
+  if (p.type && String(p.type).startsWith("tool-") && p.output) {
+    const output = p.output;
+    if (isUIMessageLike(output)) {
+      return /* @__PURE__ */ jsx3("div", {
+        className: "border-border ml-2 border-l-2 pl-2",
+        children: /* @__PURE__ */ jsx3(UIMessagePartsRenderer, {
+          parts: output.parts ?? [],
+          presentationRenderer,
+          formRenderer,
+          dataViewRenderer,
+          depth: depth + 1
+        })
+      }, depth);
+    }
+    return /* @__PURE__ */ jsx3("pre", {
+      className: "bg-background overflow-x-auto rounded p-2 text-xs",
+      children: typeof output === "object" ? JSON.stringify(output, null, 2) : String(output)
+    }, depth);
+  }
+  return null;
+}
+function UIMessagePartsRenderer({
+  parts,
+  presentationRenderer,
+  formRenderer,
+  dataViewRenderer,
+  depth = 0
+}) {
+  if (parts.length === 0)
+    return null;
+  return /* @__PURE__ */ jsx3("div", {
+    className: "space-y-2",
+    children: parts.map((part, i) => /* @__PURE__ */ jsx3(UIMessagePartRenderer, {
+      part,
+      presentationRenderer,
+      formRenderer,
+      dataViewRenderer,
+      depth
+    }, `${depth}-${i}`))
+  });
+}
 function ToolResultRenderer({
-  toolName,
+  toolName: _toolName,
   result,
   presentationRenderer,
   formRenderer,
-  showRawFallback = true
+  dataViewRenderer,
+  showRawFallback = true,
+  renderNestedUIMessage = true
 }) {
   if (result === undefined || result === null) {
     return null;
   }
+  if (renderNestedUIMessage && isUIMessageLike(result) && (result.parts?.length ?? 0) > 0) {
+    return /* @__PURE__ */ jsx3("div", {
+      className: "border-border bg-background/50 mt-2 rounded-md border p-3",
+      children: /* @__PURE__ */ jsx3(UIMessagePartsRenderer, {
+        parts: result.parts ?? [],
+        presentationRenderer,
+        formRenderer,
+        dataViewRenderer
+      })
+    });
+  }
   if (isPresentationToolResult(result) && presentationRenderer) {
     const rendered = presentationRenderer(result.presentationKey, result.data);
     if (rendered != null) {
@@ -278,6 +353,15 @@ function ToolResultRenderer({
       });
     }
   }
+  if (isDataViewToolResult(result) && dataViewRenderer) {
+    const rendered = dataViewRenderer(result.dataViewKey, result.items);
+    if (rendered != null) {
+      return /* @__PURE__ */ jsx3("div", {
+        className: "border-border bg-background/50 mt-2 rounded-md border p-3",
+        children: rendered
+      });
+    }
+  }
   if (!showRawFallback) {
     return null;
   }
@@ -295,8 +379,158 @@ function ToolResultRenderer({
   });
 }
 
+// src/presentation/components/Reasoning.tsx
+import * as React3 from "react";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "@contractspec/lib.ui-kit-web/ui/collapsible";
+import { cn as cn3 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+"use client";
+function Reasoning({
+  isStreaming = false,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+  className
+}) {
+  const [internalOpen, setInternalOpen] = React3.useState(defaultOpen);
+  const prevStreamingRef = React3.useRef(isStreaming);
+  const isControlled = open !== undefined;
+  React3.useEffect(() => {
+    if (isStreaming) {
+      if (isControlled) {
+        onOpenChange?.(true);
+      } else {
+        setInternalOpen(true);
+      }
+    } else if (prevStreamingRef.current) {
+      if (isControlled) {
+        onOpenChange?.(false);
+      } else {
+        setInternalOpen(false);
+      }
+    }
+    prevStreamingRef.current = isStreaming;
+  }, [isStreaming, isControlled, onOpenChange]);
+  const handleOpenChange = React3.useCallback((next) => {
+    if (isControlled) {
+      onOpenChange?.(next);
+    } else {
+      setInternalOpen(next);
+    }
+  }, [isControlled, onOpenChange]);
+  return /* @__PURE__ */ jsx4(Collapsible, {
+    open: isControlled ? open : internalOpen,
+    onOpenChange: handleOpenChange,
+    className: cn3("w-full", className),
+    children
+  });
+}
+function ReasoningTrigger({
+  children,
+  isStreaming = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs4(CollapsibleTrigger, {
+    className: cn3("text-muted-foreground hover:bg-muted hover:text-foreground flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors", className),
+    children: [
+      isStreaming && /* @__PURE__ */ jsx4("span", {
+        className: "bg-primary h-1.5 w-1.5 animate-pulse rounded-full",
+        "aria-hidden": true
+      }),
+      children ?? (isStreaming ? "Thinking..." : "View reasoning")
+    ]
+  });
+}
+function ReasoningContent({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx4(CollapsibleContent, {
+    children: /* @__PURE__ */ jsx4("div", {
+      className: cn3("text-muted-foreground bg-muted mt-1 rounded-md p-2 text-sm", className),
+      children: /* @__PURE__ */ jsx4("p", {
+        className: "whitespace-pre-wrap",
+        children
+      })
+    })
+  });
+}
+
+// src/presentation/components/Sources.tsx
+import {
+  Collapsible as Collapsible2,
+  CollapsibleContent as CollapsibleContent2,
+  CollapsibleTrigger as CollapsibleTrigger2
+} from "@contractspec/lib.ui-kit-web/ui/collapsible";
+import { cn as cn4 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { ExternalLink } from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs5, Fragment } from "react/jsx-runtime";
+"use client";
+function Sources({ children, className }) {
+  return /* @__PURE__ */ jsx5(Collapsible2, {
+    className: cn4("mt-2", className),
+    defaultOpen: false,
+    children
+  });
+}
+function SourcesTrigger({
+  count,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx5(CollapsibleTrigger2, {
+    className: cn4("text-muted-foreground hover:text-foreground hover:bg-muted inline-flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-xs transition-colors", className),
+    children: children ?? /* @__PURE__ */ jsxs5(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx5(ExternalLink, {
+          className: "h-3 w-3"
+        }),
+        count,
+        " source",
+        count !== 1 ? "s" : ""
+      ]
+    })
+  });
+}
+function SourcesContent({ children, className }) {
+  return /* @__PURE__ */ jsx5(CollapsibleContent2, {
+    children: /* @__PURE__ */ jsx5("div", {
+      className: cn4("mt-2 flex flex-wrap gap-2", className),
+      children
+    })
+  });
+}
+function Source({
+  href,
+  title,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5("a", {
+    href,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    className: cn4("text-muted-foreground hover:text-foreground bg-muted inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs transition-colors", className),
+    ...props,
+    children: children ?? /* @__PURE__ */ jsxs5(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx5(ExternalLink, {
+          className: "h-3 w-3"
+        }),
+        title ?? href
+      ]
+    })
+  });
+}
+
 // src/presentation/components/ChatMessage.tsx
-import { jsx as jsx4, jsxs as jsxs4, Fragment } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6, Fragment as Fragment2 } from "react/jsx-runtime";
 "use client";
 function extractCodeBlocks(content) {
   const codeBlockRegex = /```(\w+)?\n([\s\S]*?)```/g;
@@ -319,11 +553,11 @@ function renderInlineMarkdown(text) {
   let key = 0;
   while ((match = linkRegex.exec(text)) !== null) {
     if (match.index > lastIndex) {
-      parts.push(/* @__PURE__ */ jsx4("span", {
+      parts.push(/* @__PURE__ */ jsx6("span", {
         children: text.slice(lastIndex, match.index)
       }, key++));
     }
-    parts.push(/* @__PURE__ */ jsx4("a", {
+    parts.push(/* @__PURE__ */ jsx6("a", {
       href: match[2],
       target: "_blank",
       rel: "noopener noreferrer",
@@ -333,7 +567,7 @@ function renderInlineMarkdown(text) {
     lastIndex = match.index + match[0].length;
   }
   if (lastIndex < text.length) {
-    parts.push(/* @__PURE__ */ jsx4("span", {
+    parts.push(/* @__PURE__ */ jsx6("span", {
       children: text.slice(lastIndex)
     }, key++));
   }
@@ -342,7 +576,7 @@ function renderInlineMarkdown(text) {
 function MessageContent({ content }) {
   const codeBlocks = extractCodeBlocks(content);
   if (codeBlocks.length === 0) {
-    return /* @__PURE__ */ jsx4("p", {
+    return /* @__PURE__ */ jsx6("p", {
       className: "whitespace-pre-wrap",
       children: renderInlineMarkdown(content)
     });
@@ -353,12 +587,12 @@ function MessageContent({ content }) {
   for (const block of codeBlocks) {
     const [before, after] = remaining.split(block.raw);
     if (before) {
-      parts.push(/* @__PURE__ */ jsx4("p", {
+      parts.push(/* @__PURE__ */ jsx6("p", {
         className: "whitespace-pre-wrap",
         children: renderInlineMarkdown(before.trim())
       }, key++));
     }
-    parts.push(/* @__PURE__ */ jsx4(CodePreview, {
+    parts.push(/* @__PURE__ */ jsx6(CodePreview, {
       code: block.code,
       language: block.language,
       className: "my-2"
@@ -366,15 +600,22 @@ function MessageContent({ content }) {
     remaining = after ?? "";
   }
   if (remaining.trim()) {
-    parts.push(/* @__PURE__ */ jsx4("p", {
+    parts.push(/* @__PURE__ */ jsx6("p", {
       className: "whitespace-pre-wrap",
       children: renderInlineMarkdown(remaining.trim())
     }, key++));
   }
-  return /* @__PURE__ */ jsx4(Fragment, {
+  return /* @__PURE__ */ jsx6(Fragment2, {
     children: parts
   });
 }
+function toolStatusToCotStatus(status) {
+  if (status === "completed")
+    return "complete";
+  if (status === "running")
+    return "active";
+  return "pending";
+}
 function ChatMessage({
   message,
   className,
@@ -386,119 +627,128 @@ function ChatMessage({
   editable = false,
   onEdit,
   presentationRenderer,
-  formRenderer
+  formRenderer,
+  dataViewRenderer,
+  components: comps
 }) {
-  const [copied, setCopied] = React3.useState(false);
+  const [copied, setCopied] = React4.useState(false);
   const isUser = message.role === "user";
   const isError = message.status === "error";
   const isStreaming = message.status === "streaming";
-  const handleCopy = React3.useCallback(async () => {
+  const handleCopy = React4.useCallback(async () => {
     await navigator.clipboard.writeText(message.content);
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
   }, [message.content]);
-  const handleSelectChange = React3.useCallback((checked) => {
+  const handleSelectChange = React4.useCallback((checked) => {
     if (checked !== "indeterminate")
       onSelect?.(message.id);
   }, [message.id, onSelect]);
-  const [isEditing, setIsEditing] = React3.useState(false);
-  const [editContent, setEditContent] = React3.useState(message.content);
-  React3.useEffect(() => {
+  const [isEditing, setIsEditing] = React4.useState(false);
+  const [editContent, setEditContent] = React4.useState(message.content);
+  const editTextareaRef = React4.useRef(null);
+  React4.useEffect(() => {
     setEditContent(message.content);
   }, [message.content]);
-  const handleStartEdit = React3.useCallback(() => {
+  React4.useEffect(() => {
+    if (isEditing) {
+      editTextareaRef.current?.focus();
+    }
+  }, [isEditing]);
+  const handleStartEdit = React4.useCallback(() => {
     setEditContent(message.content);
     setIsEditing(true);
   }, [message.content]);
-  const handleSaveEdit = React3.useCallback(async () => {
+  const handleSaveEdit = React4.useCallback(async () => {
     const trimmed = editContent.trim();
     if (trimmed !== message.content) {
       await onEdit?.(message.id, trimmed);
     }
     setIsEditing(false);
   }, [editContent, message.id, message.content, onEdit]);
-  const handleCancelEdit = React3.useCallback(() => {
+  const handleCancelEdit = React4.useCallback(() => {
     setEditContent(message.content);
     setIsEditing(false);
   }, [message.content]);
-  return /* @__PURE__ */ jsxs4("div", {
-    className: cn3("group flex gap-3", isUser && "flex-row-reverse", className),
+  return /* @__PURE__ */ jsxs6("div", {
+    className: cn5("group flex gap-3", isUser && "flex-row-reverse", className),
     children: [
-      selectable && /* @__PURE__ */ jsx4("div", {
-        className: cn3("flex shrink-0 items-start pt-1", "opacity-0 transition-opacity group-hover:opacity-100"),
-        children: /* @__PURE__ */ jsx4(Checkbox, {
+      selectable && /* @__PURE__ */ jsx6("div", {
+        className: cn5("flex shrink-0 items-start pt-1", "opacity-0 transition-opacity group-hover:opacity-100"),
+        children: /* @__PURE__ */ jsx6(Checkbox, {
           checked: selected,
           onCheckedChange: handleSelectChange,
           "aria-label": selected ? "Deselect message" : "Select message"
         })
       }),
-      showAvatar && /* @__PURE__ */ jsx4(Avatar, {
+      showAvatar && /* @__PURE__ */ jsx6(Avatar, {
         className: "h-8 w-8 shrink-0",
-        children: /* @__PURE__ */ jsx4(AvatarFallback, {
-          className: cn3(isUser ? "bg-primary text-primary-foreground" : "bg-muted"),
-          children: isUser ? /* @__PURE__ */ jsx4(User, {
+        children: /* @__PURE__ */ jsx6(AvatarFallback, {
+          className: cn5(isUser ? "bg-primary text-primary-foreground" : "bg-muted"),
+          children: isUser ? /* @__PURE__ */ jsx6(User, {
             className: "h-4 w-4"
-          }) : /* @__PURE__ */ jsx4(Bot, {
+          }) : /* @__PURE__ */ jsx6(Bot, {
             className: "h-4 w-4"
           })
         })
       }),
-      /* @__PURE__ */ jsxs4("div", {
-        className: cn3("flex max-w-[80%] flex-col gap-1", isUser && "items-end"),
+      /* @__PURE__ */ jsxs6("div", {
+        className: cn5("flex max-w-[80%] flex-col gap-1", isUser && "items-end"),
         children: [
-          /* @__PURE__ */ jsx4("div", {
-            className: cn3("rounded-2xl px-4 py-2", isUser ? "bg-primary text-primary-foreground" : "bg-muted text-foreground", isError && "border-destructive bg-destructive/10 border"),
-            children: isError && message.error ? /* @__PURE__ */ jsxs4("div", {
+          /* @__PURE__ */ jsx6("div", {
+            className: cn5("rounded-2xl px-4 py-2", isUser ? "bg-primary text-primary-foreground" : "bg-muted text-foreground", isError && "border-destructive bg-destructive/10 border"),
+            children: isError && message.error ? /* @__PURE__ */ jsxs6("div", {
               className: "flex items-start gap-2",
               children: [
-                /* @__PURE__ */ jsx4(AlertCircle, {
+                /* @__PURE__ */ jsx6(AlertCircle, {
                   className: "text-destructive mt-0.5 h-4 w-4 shrink-0"
                 }),
-                /* @__PURE__ */ jsxs4("div", {
+                /* @__PURE__ */ jsxs6("div", {
                   children: [
-                    /* @__PURE__ */ jsx4("p", {
+                    /* @__PURE__ */ jsx6("p", {
                       className: "text-destructive font-medium",
                       children: message.error.code
                     }),
-                    /* @__PURE__ */ jsx4("p", {
+                    /* @__PURE__ */ jsx6("p", {
                       className: "text-muted-foreground text-sm",
                       children: message.error.message
                     })
                   ]
                 })
               ]
-            }) : isEditing ? /* @__PURE__ */ jsxs4("div", {
+            }) : isEditing ? /* @__PURE__ */ jsxs6("div", {
               className: "flex flex-col gap-2",
               children: [
-                /* @__PURE__ */ jsx4("textarea", {
+                /* @__PURE__ */ jsx6("textarea", {
+                  ref: editTextareaRef,
                   value: editContent,
                   onChange: (e) => setEditContent(e.target.value),
                   className: "bg-background/50 min-h-[80px] w-full resize-y rounded-md border px-3 py-2 text-sm",
                   rows: 4,
-                  autoFocus: true
+                  "aria-label": "Edit message"
                 }),
-                /* @__PURE__ */ jsxs4("div", {
+                /* @__PURE__ */ jsxs6("div", {
                   className: "flex gap-2",
                   children: [
-                    /* @__PURE__ */ jsxs4(Button2, {
+                    /* @__PURE__ */ jsxs6(Button2, {
                       variant: "default",
                       size: "sm",
                       onPress: handleSaveEdit,
                       "aria-label": "Save edit",
                       children: [
-                        /* @__PURE__ */ jsx4(Check2, {
+                        /* @__PURE__ */ jsx6(Check2, {
                           className: "h-3 w-3"
                         }),
                         "Save"
                       ]
                     }),
-                    /* @__PURE__ */ jsxs4(Button2, {
+                    /* @__PURE__ */ jsxs6(Button2, {
                       variant: "ghost",
                       size: "sm",
                       onPress: handleCancelEdit,
                       "aria-label": "Cancel edit",
                       children: [
-                        /* @__PURE__ */ jsx4(X, {
+                        /* @__PURE__ */ jsx6(X, {
                           className: "h-3 w-3"
                         }),
                         "Cancel"
@@ -507,153 +757,256 @@ function ChatMessage({
                   ]
                 })
               ]
-            }) : isStreaming && !message.content ? /* @__PURE__ */ jsxs4("div", {
+            }) : isStreaming && !message.content ? /* @__PURE__ */ jsxs6("div", {
               className: "flex flex-col gap-2",
               children: [
-                /* @__PURE__ */ jsx4(Skeleton, {
+                /* @__PURE__ */ jsx6(Skeleton, {
                   className: "h-4 w-48"
                 }),
-                /* @__PURE__ */ jsx4(Skeleton, {
+                /* @__PURE__ */ jsx6(Skeleton, {
                   className: "h-4 w-32"
                 })
               ]
-            }) : /* @__PURE__ */ jsx4(MessageContent, {
+            }) : /* @__PURE__ */ jsx6(MessageContent, {
               content: message.content
             })
           }),
-          /* @__PURE__ */ jsxs4("div", {
-            className: cn3("flex items-center gap-2 text-xs", "text-muted-foreground opacity-0 transition-opacity", "group-hover:opacity-100"),
+          /* @__PURE__ */ jsxs6("div", {
+            className: cn5("flex items-center gap-2 text-xs", "text-muted-foreground opacity-0 transition-opacity", "group-hover:opacity-100"),
             children: [
-              /* @__PURE__ */ jsx4("span", {
+              /* @__PURE__ */ jsx6("span", {
                 children: new Date(message.createdAt).toLocaleTimeString([], {
                   hour: "2-digit",
                   minute: "2-digit"
                 })
               }),
-              message.usage && /* @__PURE__ */ jsxs4("span", {
+              message.usage && /* @__PURE__ */ jsxs6("span", {
                 children: [
                   message.usage.inputTokens + message.usage.outputTokens,
                   " tokens"
                 ]
               }),
-              showCopy && !isUser && message.content && /* @__PURE__ */ jsx4(Button2, {
+              showCopy && !isUser && message.content && /* @__PURE__ */ jsx6(Button2, {
                 variant: "ghost",
                 size: "sm",
                 className: "h-6 w-6 p-0",
                 onPress: handleCopy,
                 "aria-label": copied ? "Copied" : "Copy message",
-                children: copied ? /* @__PURE__ */ jsx4(Check2, {
+                children: copied ? /* @__PURE__ */ jsx6(Check2, {
                   className: "h-3 w-3"
-                }) : /* @__PURE__ */ jsx4(Copy2, {
+                }) : /* @__PURE__ */ jsx6(Copy2, {
                   className: "h-3 w-3"
                 })
               }),
-              editable && isUser && !isEditing && /* @__PURE__ */ jsx4(Button2, {
+              editable && isUser && !isEditing && /* @__PURE__ */ jsx6(Button2, {
                 variant: "ghost",
                 size: "sm",
                 className: "h-6 w-6 p-0",
                 onPress: handleStartEdit,
                 "aria-label": "Edit message",
-                children: /* @__PURE__ */ jsx4(Pencil, {
+                children: /* @__PURE__ */ jsx6(Pencil, {
                   className: "h-3 w-3"
                 })
               })
             ]
           }),
-          message.reasoning && /* @__PURE__ */ jsxs4("details", {
-            className: "text-muted-foreground mt-2 text-sm",
+          message.reasoning && (comps?.Reasoning ? /* @__PURE__ */ jsx6(comps.Reasoning, {
+            isStreaming: isStreaming && !!message.reasoning,
+            children: message.reasoning
+          }) : /* @__PURE__ */ jsxs6(Reasoning, {
+            isStreaming: isStreaming && !!message.reasoning,
+            className: "mt-2",
             children: [
-              /* @__PURE__ */ jsx4("summary", {
-                className: "cursor-pointer hover:underline",
-                children: "View reasoning"
+              /* @__PURE__ */ jsx6(ReasoningTrigger, {
+                isStreaming
               }),
-              /* @__PURE__ */ jsx4("div", {
-                className: "bg-muted mt-1 rounded-md p-2",
-                children: /* @__PURE__ */ jsx4("p", {
-                  className: "whitespace-pre-wrap",
-                  children: message.reasoning
-                })
+              /* @__PURE__ */ jsx6(ReasoningContent, {
+                children: message.reasoning
               })
             ]
-          }),
-          message.sources && message.sources.length > 0 && /* @__PURE__ */ jsx4("div", {
-            className: "mt-2 flex flex-wrap gap-2",
-            children: message.sources.map((source) => /* @__PURE__ */ jsxs4("a", {
-              href: source.url ?? "#",
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: "text-muted-foreground hover:text-foreground bg-muted inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs transition-colors",
+          })),
+          message.sources && message.sources.length > 0 && (() => {
+            const SourcesComp = comps?.Sources;
+            const SourcesTriggerComp = comps?.SourcesTrigger;
+            const SourceComp = comps?.Source;
+            if (SourcesComp && SourcesTriggerComp && SourceComp) {
+              return /* @__PURE__ */ jsxs6(SourcesComp, {
+                children: [
+                  /* @__PURE__ */ jsx6(SourcesTriggerComp, {
+                    count: message.sources.length
+                  }),
+                  message.sources.map((source) => /* @__PURE__ */ jsx6(SourceComp, {
+                    href: source.url ?? "#",
+                    title: source.title || source.url || source.id
+                  }, source.id))
+                ]
+              });
+            }
+            return /* @__PURE__ */ jsxs6(Sources, {
+              className: "mt-2",
               children: [
-                /* @__PURE__ */ jsx4(ExternalLink, {
-                  className: "h-3 w-3"
+                /* @__PURE__ */ jsx6(SourcesTrigger, {
+                  count: message.sources.length
                 }),
-                source.title || source.url || source.id
+                /* @__PURE__ */ jsx6(SourcesContent, {
+                  children: message.sources.map((source) => /* @__PURE__ */ jsx6(Source, {
+                    href: source.url ?? "#",
+                    title: source.title || source.url || source.id
+                  }, source.id))
+                })
               ]
-            }, source.id))
-          }),
-          message.toolCalls && message.toolCalls.length > 0 && /* @__PURE__ */ jsx4("div", {
-            className: "mt-2 space-y-2",
-            children: message.toolCalls.map((tc) => /* @__PURE__ */ jsxs4("details", {
-              className: "bg-muted border-border rounded-md border",
-              children: [
-                /* @__PURE__ */ jsxs4("summary", {
-                  className: "flex cursor-pointer items-center gap-2 px-3 py-2 text-sm font-medium",
-                  children: [
-                    /* @__PURE__ */ jsx4(Wrench, {
-                      className: "text-muted-foreground h-4 w-4"
-                    }),
-                    tc.name,
-                    /* @__PURE__ */ jsx4("span", {
-                      className: cn3("ml-auto rounded px-1.5 py-0.5 text-xs", tc.status === "completed" && "bg-green-500/20 text-green-700 dark:text-green-400", tc.status === "error" && "bg-destructive/20 text-destructive", tc.status === "running" && "bg-blue-500/20 text-blue-700 dark:text-blue-400"),
-                      children: tc.status
-                    })
-                  ]
-                }),
-                /* @__PURE__ */ jsxs4("div", {
-                  className: "border-border border-t px-3 py-2 text-xs",
+            });
+          })(),
+          message.toolCalls && message.toolCalls.length > 0 && (() => {
+            const CotComp = comps?.ChainOfThought;
+            const CotStepComp = comps?.ChainOfThoughtStep;
+            if (CotComp && CotStepComp) {
+              return /* @__PURE__ */ jsx6(CotComp, {
+                defaultOpen: false,
+                className: "mt-2",
+                children: message.toolCalls.map((tc) => /* @__PURE__ */ jsxs6(CotStepComp, {
+                  label: tc.name,
+                  description: Object.keys(tc.args).length > 0 ? `Input: ${JSON.stringify(tc.args)}` : undefined,
+                  status: toolStatusToCotStatus(tc.status),
                   children: [
-                    Object.keys(tc.args).length > 0 && /* @__PURE__ */ jsxs4("div", {
-                      className: "mb-2",
-                      children: [
-                        /* @__PURE__ */ jsx4("span", {
-                          className: "text-muted-foreground font-medium",
-                          children: "Input:"
-                        }),
-                        /* @__PURE__ */ jsx4("pre", {
-                          className: "bg-background mt-1 overflow-x-auto rounded p-2",
-                          children: JSON.stringify(tc.args, null, 2)
-                        })
-                      ]
+                    tc.preliminary && tc.status === "running" && /* @__PURE__ */ jsx6("p", {
+                      className: "text-muted-foreground mt-1 text-xs",
+                      children: "Running…"
                     }),
-                    tc.result !== undefined && /* @__PURE__ */ jsx4(ToolResultRenderer, {
+                    (tc.result !== undefined || tc.nestedParts?.length) && /* @__PURE__ */ jsx6(ToolResultRenderer, {
                       toolName: tc.name,
-                      result: tc.result,
+                      result: tc.nestedParts?.length ? { parts: tc.nestedParts } : tc.result,
                       presentationRenderer,
                       formRenderer,
+                      dataViewRenderer,
                       showRawFallback: true
                     }),
-                    tc.error && /* @__PURE__ */ jsx4("p", {
-                      className: "text-destructive mt-1",
+                    tc.error && /* @__PURE__ */ jsx6("p", {
+                      className: "text-destructive mt-1 text-xs",
                       children: tc.error
                     })
                   ]
-                })
-              ]
-            }, tc.id))
-          })
+                }, tc.id))
+              });
+            }
+            return /* @__PURE__ */ jsx6("div", {
+              className: "mt-2 space-y-2",
+              children: message.toolCalls.map((tc) => /* @__PURE__ */ jsxs6("details", {
+                className: "bg-muted border-border rounded-md border",
+                children: [
+                  /* @__PURE__ */ jsxs6("summary", {
+                    className: "flex cursor-pointer items-center gap-2 px-3 py-2 text-sm font-medium",
+                    children: [
+                      /* @__PURE__ */ jsx6(Wrench, {
+                        className: "text-muted-foreground h-4 w-4"
+                      }),
+                      tc.name,
+                      /* @__PURE__ */ jsx6("span", {
+                        className: cn5("ml-auto rounded px-1.5 py-0.5 text-xs", tc.status === "completed" && "bg-green-500/20 text-green-700 dark:text-green-400", tc.status === "error" && "bg-destructive/20 text-destructive", tc.status === "running" && "bg-blue-500/20 text-blue-700 dark:text-blue-400"),
+                        children: tc.status
+                      })
+                    ]
+                  }),
+                  /* @__PURE__ */ jsxs6("div", {
+                    className: "border-border border-t px-3 py-2 text-xs",
+                    children: [
+                      Object.keys(tc.args).length > 0 && /* @__PURE__ */ jsxs6("div", {
+                        className: "mb-2",
+                        children: [
+                          /* @__PURE__ */ jsx6("span", {
+                            className: "text-muted-foreground font-medium",
+                            children: "Input:"
+                          }),
+                          /* @__PURE__ */ jsx6("pre", {
+                            className: "bg-background mt-1 overflow-x-auto rounded p-2",
+                            children: JSON.stringify(tc.args, null, 2)
+                          })
+                        ]
+                      }),
+                      tc.preliminary && tc.status === "running" && /* @__PURE__ */ jsx6("p", {
+                        className: "text-muted-foreground mt-1 text-xs",
+                        children: "Running…"
+                      }),
+                      (tc.result !== undefined || tc.nestedParts?.length) && /* @__PURE__ */ jsx6(ToolResultRenderer, {
+                        toolName: tc.name,
+                        result: tc.nestedParts?.length ? { parts: tc.nestedParts } : tc.result,
+                        presentationRenderer,
+                        formRenderer,
+                        dataViewRenderer,
+                        showRawFallback: true
+                      }),
+                      tc.error && /* @__PURE__ */ jsx6("p", {
+                        className: "text-destructive mt-1",
+                        children: tc.error
+                      })
+                    ]
+                  })
+                ]
+              }, tc.id))
+            });
+          })()
         ]
       })
     ]
   });
 }
 // src/presentation/components/ChatInput.tsx
-import * as React4 from "react";
-import { cn as cn4 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import * as React5 from "react";
+import { cn as cn6 } from "@contractspec/lib.ui-kit-web/ui/utils";
 import { Textarea } from "@contractspec/lib.design-system";
 import { Button as Button3 } from "@contractspec/lib.design-system";
-import { Send, Paperclip, X as X2, Loader2, FileText, Code } from "lucide-react";
-import { jsx as jsx5, jsxs as jsxs5, Fragment as Fragment2 } from "react/jsx-runtime";
+import {
+  Send,
+  Paperclip,
+  X as X2,
+  Loader2,
+  FileText,
+  Code,
+  ImageIcon
+} from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs7, Fragment as Fragment3 } from "react/jsx-runtime";
 "use client";
+var DEFAULT_MAX_FILE_SIZE_BYTES = 5 * 1024 * 1024;
+var CODE_EXTENSIONS = [
+  "ts",
+  "tsx",
+  "js",
+  "jsx",
+  "py",
+  "go",
+  "rs",
+  "java",
+  "json",
+  "md",
+  "txt",
+  "yaml",
+  "yml"
+];
+function readFileAsContent(file) {
+  const extension = file.name.split(".").pop()?.toLowerCase() ?? "";
+  const isCode = CODE_EXTENSIONS.includes(extension);
+  const isImage = file.type.startsWith("image/");
+  if (isImage) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader;
+      reader.onload = () => {
+        const result = reader.result;
+        resolve({
+          content: typeof result === "string" ? result : new TextDecoder().decode(result ?? new ArrayBuffer(0)),
+          type: "image"
+        });
+      };
+      reader.onerror = () => reject(new Error("Could not read file"));
+      reader.readAsDataURL(file);
+    });
+  }
+  return file.text().then((content) => ({
+    content,
+    type: isCode ? "code" : "file"
+  })).catch(() => {
+    throw new Error("Could not read file");
+  });
+}
 function ChatInput({
   onSend,
   disabled = false,
@@ -661,147 +1014,163 @@ function ChatInput({
   placeholder = "Type a message...",
   className,
   showAttachments = true,
-  maxAttachments = 5
+  maxAttachments = 5,
+  maxFileSizeBytes = DEFAULT_MAX_FILE_SIZE_BYTES
 }) {
-  const [content, setContent] = React4.useState("");
-  const [attachments, setAttachments] = React4.useState([]);
-  const textareaRef = React4.useRef(null);
-  const fileInputRef = React4.useRef(null);
+  const [content, setContent] = React5.useState("");
+  const [attachments, setAttachments] = React5.useState([]);
+  const [fileError, setFileError] = React5.useState(null);
+  const textareaRef = React5.useRef(null);
+  const fileInputRef = React5.useRef(null);
   const canSend = content.trim().length > 0 || attachments.length > 0;
-  const handleSubmit = React4.useCallback((e) => {
+  const handleSubmit = React5.useCallback((e) => {
     e?.preventDefault();
     if (!canSend || disabled || isLoading)
       return;
     onSend(content.trim(), attachments.length > 0 ? attachments : undefined);
     setContent("");
     setAttachments([]);
+    setFileError(null);
     textareaRef.current?.focus();
   }, [canSend, content, attachments, disabled, isLoading, onSend]);
-  const handleKeyDown = React4.useCallback((e) => {
+  const handleKeyDown = React5.useCallback((e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
       handleSubmit();
     }
   }, [handleSubmit]);
-  const handleFileSelect = React4.useCallback(async (e) => {
+  const handleFileSelect = React5.useCallback(async (e) => {
     const files = e.target.files;
     if (!files)
       return;
+    setFileError(null);
     const newAttachments = [];
+    const errors = [];
     for (const file of Array.from(files)) {
-      if (attachments.length + newAttachments.length >= maxAttachments)
+      if (attachments.length + newAttachments.length >= maxAttachments) {
+        errors.push(`Maximum ${maxAttachments} attachments allowed`);
         break;
-      const content2 = await file.text();
-      const extension = file.name.split(".").pop()?.toLowerCase() ?? "";
-      const isCode = [
-        "ts",
-        "tsx",
-        "js",
-        "jsx",
-        "py",
-        "go",
-        "rs",
-        "java"
-      ].includes(extension);
-      newAttachments.push({
-        id: `att_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`,
-        type: isCode ? "code" : "file",
-        name: file.name,
-        content: content2,
-        mimeType: file.type,
-        size: file.size
-      });
+      }
+      if (file.size > maxFileSizeBytes) {
+        errors.push(`${file.name} exceeds ${Math.round(maxFileSizeBytes / 1024 / 1024)}MB limit`);
+        continue;
+      }
+      try {
+        const { content: fileContent, type } = await readFileAsContent(file);
+        newAttachments.push({
+          id: `att_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`,
+          type,
+          name: file.name,
+          content: fileContent,
+          mimeType: file.type,
+          size: file.size
+        });
+      } catch {
+        errors.push(`Could not read ${file.name}`);
+      }
+    }
+    if (errors.length > 0) {
+      setFileError(errors[0] ?? "Could not add file");
+    }
+    if (newAttachments.length > 0) {
+      setAttachments((prev) => [...prev, ...newAttachments]);
     }
-    setAttachments((prev) => [...prev, ...newAttachments]);
     e.target.value = "";
-  }, [attachments.length, maxAttachments]);
-  const removeAttachment = React4.useCallback((id) => {
+  }, [attachments.length, maxAttachments, maxFileSizeBytes]);
+  const removeAttachment = React5.useCallback((id) => {
     setAttachments((prev) => prev.filter((a) => a.id !== id));
   }, []);
-  return /* @__PURE__ */ jsxs5("div", {
-    className: cn4("flex flex-col gap-2", className),
+  return /* @__PURE__ */ jsxs7("div", {
+    className: cn6("flex flex-col gap-2", className),
     children: [
-      attachments.length > 0 && /* @__PURE__ */ jsx5("div", {
+      attachments.length > 0 && /* @__PURE__ */ jsx7("div", {
         className: "flex flex-wrap gap-2",
-        children: attachments.map((attachment) => /* @__PURE__ */ jsxs5("div", {
-          className: cn4("flex items-center gap-1.5 rounded-md px-2 py-1", "bg-muted text-muted-foreground text-sm"),
+        children: attachments.map((attachment) => /* @__PURE__ */ jsxs7("div", {
+          className: cn6("flex items-center gap-1.5 rounded-md px-2 py-1", "bg-muted text-muted-foreground text-sm"),
           children: [
-            attachment.type === "code" ? /* @__PURE__ */ jsx5(Code, {
+            attachment.type === "code" ? /* @__PURE__ */ jsx7(Code, {
+              className: "h-3.5 w-3.5"
+            }) : attachment.type === "image" ? /* @__PURE__ */ jsx7(ImageIcon, {
               className: "h-3.5 w-3.5"
-            }) : /* @__PURE__ */ jsx5(FileText, {
+            }) : /* @__PURE__ */ jsx7(FileText, {
               className: "h-3.5 w-3.5"
             }),
-            /* @__PURE__ */ jsx5("span", {
+            /* @__PURE__ */ jsx7("span", {
               className: "max-w-[150px] truncate",
               children: attachment.name
             }),
-            /* @__PURE__ */ jsx5("button", {
+            /* @__PURE__ */ jsx7("button", {
               type: "button",
               onClick: () => removeAttachment(attachment.id),
               className: "hover:text-foreground",
               "aria-label": `Remove ${attachment.name}`,
-              children: /* @__PURE__ */ jsx5(X2, {
+              children: /* @__PURE__ */ jsx7(X2, {
                 className: "h-3.5 w-3.5"
               })
             })
           ]
         }, attachment.id))
       }),
-      /* @__PURE__ */ jsxs5("form", {
+      fileError && /* @__PURE__ */ jsx7("p", {
+        className: "text-destructive text-xs",
+        role: "alert",
+        children: fileError
+      }),
+      /* @__PURE__ */ jsxs7("form", {
         onSubmit: handleSubmit,
         className: "flex items-end gap-2",
         children: [
-          showAttachments && /* @__PURE__ */ jsxs5(Fragment2, {
+          showAttachments && /* @__PURE__ */ jsxs7(Fragment3, {
             children: [
-              /* @__PURE__ */ jsx5("input", {
+              /* @__PURE__ */ jsx7("input", {
                 ref: fileInputRef,
                 type: "file",
                 multiple: true,
-                accept: ".ts,.tsx,.js,.jsx,.json,.md,.txt,.py,.go,.rs,.java,.yaml,.yml",
+                accept: ".ts,.tsx,.js,.jsx,.json,.md,.txt,.py,.go,.rs,.java,.yaml,.yml,image/*",
                 onChange: handleFileSelect,
                 className: "hidden",
                 "aria-label": "Attach files"
               }),
-              /* @__PURE__ */ jsx5(Button3, {
+              /* @__PURE__ */ jsx7(Button3, {
                 type: "button",
                 variant: "ghost",
                 size: "sm",
                 onPress: () => fileInputRef.current?.click(),
                 disabled: disabled || attachments.length >= maxAttachments,
                 "aria-label": "Attach files",
-                children: /* @__PURE__ */ jsx5(Paperclip, {
+                children: /* @__PURE__ */ jsx7(Paperclip, {
                   className: "h-4 w-4"
                 })
               })
             ]
           }),
-          /* @__PURE__ */ jsx5("div", {
+          /* @__PURE__ */ jsx7("div", {
             className: "relative flex-1",
-            children: /* @__PURE__ */ jsx5(Textarea, {
+            children: /* @__PURE__ */ jsx7(Textarea, {
               value: content,
               onChange: (e) => setContent(e.target.value),
               onKeyDown: handleKeyDown,
               placeholder,
               disabled,
-              className: cn4("max-h-[200px] min-h-[44px] resize-none pr-12", "focus-visible:ring-1"),
+              className: cn6("max-h-[200px] min-h-[44px] resize-none pr-12", "focus-visible:ring-1"),
               rows: 1,
               "aria-label": "Chat message"
             })
           }),
-          /* @__PURE__ */ jsx5(Button3, {
+          /* @__PURE__ */ jsx7(Button3, {
             type: "submit",
             disabled: !canSend || disabled || isLoading,
             size: "sm",
             "aria-label": isLoading ? "Sending..." : "Send message",
-            children: isLoading ? /* @__PURE__ */ jsx5(Loader2, {
+            children: isLoading ? /* @__PURE__ */ jsx7(Loader2, {
               className: "h-4 w-4 animate-spin"
-            }) : /* @__PURE__ */ jsx5(Send, {
+            }) : /* @__PURE__ */ jsx7(Send, {
               className: "h-4 w-4"
             })
           })
         ]
       }),
-      /* @__PURE__ */ jsx5("p", {
+      /* @__PURE__ */ jsx7("p", {
         className: "text-muted-foreground text-xs",
         children: "Press Enter to send, Shift+Enter for new line"
       })
@@ -809,7 +1178,7 @@ function ChatInput({
   });
 }
 // src/presentation/components/ChatExportToolbar.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import { Download as Download2, FileText as FileText2, Copy as Copy3, Check as Check3, Plus, GitFork } from "lucide-react";
 import { Button as Button4 } from "@contractspec/lib.design-system";
 import {
@@ -1021,7 +1390,7 @@ function exportToFile(messages, format, conversation) {
 }
 
 // src/presentation/components/ChatExportToolbar.tsx
-import { jsx as jsx6, jsxs as jsxs6, Fragment as Fragment3 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8, Fragment as Fragment4 } from "react/jsx-runtime";
 "use client";
 function ChatExportToolbar({
   messages,
@@ -1036,19 +1405,19 @@ function ChatExportToolbar({
   onCreateNew,
   onFork
 }) {
-  const [copied, setCopied] = React5.useState(false);
-  const toExport = React5.useMemo(() => {
+  const [copied, setCopied] = React6.useState(false);
+  const toExport = React6.useMemo(() => {
     if (selectedIds.size > 0) {
       const idSet = selectedIds;
       return messages.filter((m) => idSet.has(m.id));
     }
     return messages;
   }, [messages, selectedIds]);
-  const handleExport = React5.useCallback((format) => {
+  const handleExport = React6.useCallback((format) => {
     exportToFile(toExport, format, conversation);
     onExported?.(format, toExport.length);
   }, [toExport, conversation, onExported]);
-  const handleCopy = React5.useCallback(async () => {
+  const handleCopy = React6.useCallback(async () => {
     const content = formatMessagesAsMarkdown(toExport);
     await navigator.clipboard.writeText(content);
     setCopied(true);
@@ -1056,8 +1425,8 @@ function ChatExportToolbar({
     onExported?.("markdown", toExport.length);
   }, [toExport, onExported]);
   const disabled = messages.length === 0;
-  const [forking, setForking] = React5.useState(false);
-  const handleFork = React5.useCallback(async (upToMessageId) => {
+  const [forking, setForking] = React6.useState(false);
+  const handleFork = React6.useCallback(async (upToMessageId) => {
     if (!onFork)
       return;
     setForking(true);
@@ -1067,35 +1436,35 @@ function ChatExportToolbar({
       setForking(false);
     }
   }, [onFork]);
-  return /* @__PURE__ */ jsxs6("div", {
+  return /* @__PURE__ */ jsxs8("div", {
     className: "flex items-center gap-2",
     children: [
-      onCreateNew && /* @__PURE__ */ jsxs6(Button4, {
+      onCreateNew && /* @__PURE__ */ jsxs8(Button4, {
         variant: "outline",
         size: "sm",
         onPress: onCreateNew,
         "aria-label": "New conversation",
         children: [
-          /* @__PURE__ */ jsx6(Plus, {
+          /* @__PURE__ */ jsx8(Plus, {
             className: "h-4 w-4"
           }),
           "New"
         ]
       }),
-      onFork && messages.length > 0 && /* @__PURE__ */ jsxs6(Button4, {
+      onFork && messages.length > 0 && /* @__PURE__ */ jsxs8(Button4, {
         variant: "outline",
         size: "sm",
         disabled: forking,
         onPress: () => handleFork(),
         "aria-label": "Fork conversation",
         children: [
-          /* @__PURE__ */ jsx6(GitFork, {
+          /* @__PURE__ */ jsx8(GitFork, {
             className: "h-4 w-4"
           }),
           "Fork"
         ]
       }),
-      showSelectionSummary && selectedCount > 0 && /* @__PURE__ */ jsxs6("span", {
+      showSelectionSummary && selectedCount > 0 && /* @__PURE__ */ jsxs8("span", {
         className: "text-muted-foreground text-sm",
         children: [
           selectedCount,
@@ -1104,16 +1473,16 @@ function ChatExportToolbar({
           " selected"
         ]
       }),
-      onSelectAll && onClearSelection && totalCount > 0 && /* @__PURE__ */ jsxs6(Fragment3, {
+      onSelectAll && onClearSelection && totalCount > 0 && /* @__PURE__ */ jsxs8(Fragment4, {
         children: [
-          /* @__PURE__ */ jsx6(Button4, {
+          /* @__PURE__ */ jsx8(Button4, {
             variant: "ghost",
             size: "sm",
             onPress: onSelectAll,
             className: "text-xs",
             children: "Select all"
           }),
-          selectedCount > 0 && /* @__PURE__ */ jsx6(Button4, {
+          selectedCount > 0 && /* @__PURE__ */ jsx8(Button4, {
             variant: "ghost",
             size: "sm",
             onPress: onClearSelection,
@@ -1122,64 +1491,64 @@ function ChatExportToolbar({
           })
         ]
       }),
-      /* @__PURE__ */ jsxs6(DropdownMenu, {
+      /* @__PURE__ */ jsxs8(DropdownMenu, {
         children: [
-          /* @__PURE__ */ jsx6(DropdownMenuTrigger, {
+          /* @__PURE__ */ jsx8(DropdownMenuTrigger, {
             asChild: true,
-            children: /* @__PURE__ */ jsxs6(Button4, {
+            children: /* @__PURE__ */ jsxs8(Button4, {
               variant: "outline",
               size: "sm",
               disabled,
               "aria-label": selectedCount > 0 ? "Export selected messages" : "Export conversation",
               children: [
-                /* @__PURE__ */ jsx6(Download2, {
+                /* @__PURE__ */ jsx8(Download2, {
                   className: "h-4 w-4"
                 }),
                 "Export"
               ]
             })
           }),
-          /* @__PURE__ */ jsxs6(DropdownMenuContent, {
+          /* @__PURE__ */ jsxs8(DropdownMenuContent, {
             align: "end",
             children: [
-              /* @__PURE__ */ jsxs6(DropdownMenuItem, {
+              /* @__PURE__ */ jsxs8(DropdownMenuItem, {
                 onSelect: () => handleExport("markdown"),
                 disabled,
                 children: [
-                  /* @__PURE__ */ jsx6(FileText2, {
+                  /* @__PURE__ */ jsx8(FileText2, {
                     className: "h-4 w-4"
                   }),
                   "Export as Markdown (.md)"
                 ]
               }),
-              /* @__PURE__ */ jsxs6(DropdownMenuItem, {
+              /* @__PURE__ */ jsxs8(DropdownMenuItem, {
                 onSelect: () => handleExport("txt"),
                 disabled,
                 children: [
-                  /* @__PURE__ */ jsx6(FileText2, {
+                  /* @__PURE__ */ jsx8(FileText2, {
                     className: "h-4 w-4"
                   }),
                   "Export as Plain Text (.txt)"
                 ]
               }),
-              /* @__PURE__ */ jsxs6(DropdownMenuItem, {
+              /* @__PURE__ */ jsxs8(DropdownMenuItem, {
                 onSelect: () => handleExport("json"),
                 disabled,
                 children: [
-                  /* @__PURE__ */ jsx6(FileText2, {
+                  /* @__PURE__ */ jsx8(FileText2, {
                     className: "h-4 w-4"
                   }),
                   "Export as JSON (.json)"
                 ]
               }),
-              /* @__PURE__ */ jsx6(DropdownMenuSeparator, {}),
-              /* @__PURE__ */ jsxs6(DropdownMenuItem, {
+              /* @__PURE__ */ jsx8(DropdownMenuSeparator, {}),
+              /* @__PURE__ */ jsxs8(DropdownMenuItem, {
                 onSelect: () => handleCopy(),
                 disabled,
                 children: [
-                  copied ? /* @__PURE__ */ jsx6(Check3, {
+                  copied ? /* @__PURE__ */ jsx8(Check3, {
                     className: "h-4 w-4 text-green-500"
-                  }) : /* @__PURE__ */ jsx6(Copy3, {
+                  }) : /* @__PURE__ */ jsx8(Copy3, {
                     className: "h-4 w-4"
                   }),
                   copied ? "Copied to clipboard" : "Copy to clipboard"
@@ -1193,11 +1562,11 @@ function ChatExportToolbar({
   });
 }
 // src/presentation/components/ChatWithExport.tsx
-import * as React8 from "react";
+import * as React10 from "react";
 
 // src/presentation/components/ThinkingLevelPicker.tsx
-import * as React6 from "react";
-import { cn as cn5 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import * as React7 from "react";
+import { cn as cn7 } from "@contractspec/lib.ui-kit-web/ui/utils";
 import {
   Select,
   SelectContent,
@@ -1259,7 +1628,7 @@ function getProviderOptions(level, providerName) {
 }
 
 // src/presentation/components/ThinkingLevelPicker.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 "use client";
 var THINKING_LEVELS = [
   "instant",
@@ -1273,20 +1642,20 @@ function ThinkingLevelPicker({
   className,
   compact = false
 }) {
-  const handleChange = React6.useCallback((v) => {
+  const handleChange = React7.useCallback((v) => {
     onChange(v);
   }, [onChange]);
   if (compact) {
-    return /* @__PURE__ */ jsxs7(Select, {
+    return /* @__PURE__ */ jsxs9(Select, {
       value,
       onValueChange: handleChange,
       children: [
-        /* @__PURE__ */ jsx7(SelectTrigger, {
-          className: cn5("w-[140px]", className),
-          children: /* @__PURE__ */ jsx7(SelectValue, {})
+        /* @__PURE__ */ jsx9(SelectTrigger, {
+          className: cn7("w-[140px]", className),
+          children: /* @__PURE__ */ jsx9(SelectValue, {})
         }),
-        /* @__PURE__ */ jsx7(SelectContent, {
-          children: THINKING_LEVELS.map((level) => /* @__PURE__ */ jsx7(SelectItem, {
+        /* @__PURE__ */ jsx9(SelectContent, {
+          children: THINKING_LEVELS.map((level) => /* @__PURE__ */ jsx9(SelectItem, {
             value: level,
             children: THINKING_LEVEL_LABELS[level]
           }, level))
@@ -1294,26 +1663,26 @@ function ThinkingLevelPicker({
       ]
     });
   }
-  return /* @__PURE__ */ jsxs7("div", {
-    className: cn5("flex flex-col gap-1.5", className),
+  return /* @__PURE__ */ jsxs9("div", {
+    className: cn7("flex flex-col gap-1.5", className),
     children: [
-      /* @__PURE__ */ jsx7(Label, {
+      /* @__PURE__ */ jsx9(Label, {
         htmlFor: "thinking-level-picker",
         className: "text-sm font-medium",
         children: "Thinking Level"
       }),
-      /* @__PURE__ */ jsxs7(Select, {
+      /* @__PURE__ */ jsxs9(Select, {
         name: "thinking-level-picker",
         value,
         onValueChange: handleChange,
         children: [
-          /* @__PURE__ */ jsx7(SelectTrigger, {
-            children: /* @__PURE__ */ jsx7(SelectValue, {
+          /* @__PURE__ */ jsx9(SelectTrigger, {
+            children: /* @__PURE__ */ jsx9(SelectValue, {
               placeholder: "Select thinking level"
             })
           }),
-          /* @__PURE__ */ jsx7(SelectContent, {
-            children: THINKING_LEVELS.map((level) => /* @__PURE__ */ jsx7(SelectItem, {
+          /* @__PURE__ */ jsx9(SelectContent, {
+            children: THINKING_LEVELS.map((level) => /* @__PURE__ */ jsx9(SelectItem, {
               value: level,
               title: THINKING_LEVEL_DESCRIPTIONS[level],
               children: THINKING_LEVEL_LABELS[level]
@@ -1326,12 +1695,12 @@ function ThinkingLevelPicker({
 }
 
 // src/presentation/hooks/useMessageSelection.ts
-import * as React7 from "react";
+import * as React8 from "react";
 "use client";
 function useMessageSelection(messageIds) {
-  const [selectedIds, setSelectedIds] = React7.useState(() => new Set);
-  const idSet = React7.useMemo(() => new Set(messageIds), [messageIds.join(",")]);
-  React7.useEffect(() => {
+  const [selectedIds, setSelectedIds] = React8.useState(() => new Set);
+  const idSet = React8.useMemo(() => new Set(messageIds), [messageIds.join(",")]);
+  React8.useEffect(() => {
     setSelectedIds((prev) => {
       const next = new Set;
       for (const id of prev) {
@@ -1341,7 +1710,7 @@ function useMessageSelection(messageIds) {
       return next.size === prev.size ? prev : next;
     });
   }, [idSet]);
-  const toggle = React7.useCallback((id) => {
+  const toggle = React8.useCallback((id) => {
     setSelectedIds((prev) => {
       const next = new Set(prev);
       if (next.has(id))
@@ -1351,13 +1720,13 @@ function useMessageSelection(messageIds) {
       return next;
     });
   }, []);
-  const selectAll = React7.useCallback(() => {
+  const selectAll = React8.useCallback(() => {
     setSelectedIds(new Set(messageIds));
   }, [messageIds.join(",")]);
-  const clearSelection = React7.useCallback(() => {
+  const clearSelection = React8.useCallback(() => {
     setSelectedIds(new Set);
   }, []);
-  const isSelected = React7.useCallback((id) => selectedIds.has(id), [selectedIds]);
+  const isSelected = React8.useCallback((id) => selectedIds.has(id), [selectedIds]);
   const selectedCount = selectedIds.size;
   return {
     selectedIds,
@@ -1369,8 +1738,38 @@ function useMessageSelection(messageIds) {
   };
 }
 
+// src/presentation/components/Suggestion.tsx
+import * as React9 from "react";
+import { Button as Button5 } from "@contractspec/lib.design-system";
+import { cn as cn8 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { jsx as jsx10 } from "react/jsx-runtime";
+"use client";
+function Suggestions({ children, className }) {
+  return /* @__PURE__ */ jsx10("div", {
+    className: cn8("flex flex-wrap gap-2", className),
+    children
+  });
+}
+function Suggestion({
+  suggestion,
+  onClick,
+  className
+}) {
+  const handleClick = React9.useCallback(() => {
+    onClick?.(suggestion);
+  }, [suggestion, onClick]);
+  return /* @__PURE__ */ jsx10(Button5, {
+    type: "button",
+    variant: "outline",
+    size: "sm",
+    onPress: handleClick,
+    className: cn8("text-muted-foreground hover:text-foreground", className),
+    children: suggestion
+  });
+}
+
 // src/presentation/components/ChatWithExport.tsx
-import { jsx as jsx8, jsxs as jsxs8, Fragment as Fragment4 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10, Fragment as Fragment5 } from "react/jsx-runtime";
 "use client";
 function ChatWithExport({
   messages,
@@ -1386,20 +1785,27 @@ function ChatWithExport({
   thinkingLevel = "thinking",
   onThinkingLevelChange,
   presentationRenderer,
-  formRenderer
+  formRenderer,
+  dataViewRenderer,
+  components,
+  suggestions,
+  onSuggestionClick,
+  suggestionComponents: suggestionComps,
+  showSuggestionsWhenEmpty = true
 }) {
-  const messageIds = React8.useMemo(() => messages.map((m) => m.id), [messages]);
+  const messageIds = React10.useMemo(() => messages.map((m) => m.id), [messages]);
   const selection = useMessageSelection(messageIds);
+  const showSuggestions = suggestions && suggestions.length > 0 && (messages.length === 0 || showSuggestionsWhenEmpty);
   const hasToolbar = showExport || showMessageSelection;
   const hasPicker = Boolean(onThinkingLevelChange);
-  const headerContent = hasPicker || hasToolbar ? /* @__PURE__ */ jsxs8(Fragment4, {
+  const headerContent = hasPicker || hasToolbar ? /* @__PURE__ */ jsxs10(Fragment5, {
     children: [
-      hasPicker && /* @__PURE__ */ jsx8(ThinkingLevelPicker, {
+      hasPicker && onThinkingLevelChange && /* @__PURE__ */ jsx11(ThinkingLevelPicker, {
         value: thinkingLevel,
         onChange: onThinkingLevelChange,
         compact: true
       }),
-      hasToolbar && /* @__PURE__ */ jsx8(ChatExportToolbar, {
+      hasToolbar && /* @__PURE__ */ jsx11(ChatExportToolbar, {
         messages,
         conversation,
         selectedIds: selection.selectedIds,
@@ -1413,12 +1819,12 @@ function ChatWithExport({
       })
     ]
   }) : null;
-  return /* @__PURE__ */ jsxs8(ChatContainer, {
+  return /* @__PURE__ */ jsxs10(ChatContainer, {
     className,
     headerContent,
     showScrollButton,
     children: [
-      messages.map((msg) => /* @__PURE__ */ jsx8(ChatMessage, {
+      messages.map((msg) => /* @__PURE__ */ jsx11(ChatMessage, {
         message: msg,
         selectable: showMessageSelection,
         selected: selection.isSelected(msg.id),
@@ -1426,26 +1832,47 @@ function ChatWithExport({
         editable: msg.role === "user" && !!onEditMessage,
         onEdit: onEditMessage,
         presentationRenderer,
-        formRenderer
+        formRenderer,
+        dataViewRenderer,
+        components
       }, msg.id)),
+      showSuggestions && (() => {
+        const SuggestionsComp = suggestionComps?.Suggestions;
+        const SuggestionComp = suggestionComps?.Suggestion;
+        if (SuggestionsComp && SuggestionComp) {
+          return /* @__PURE__ */ jsx11(SuggestionsComp, {
+            children: suggestions.map((s) => /* @__PURE__ */ jsx11(SuggestionComp, {
+              suggestion: s,
+              onClick: onSuggestionClick
+            }, s))
+          });
+        }
+        return /* @__PURE__ */ jsx11(Suggestions, {
+          className: "mb-4",
+          children: suggestions.map((s) => /* @__PURE__ */ jsx11(Suggestion, {
+            suggestion: s,
+            onClick: onSuggestionClick
+          }, s))
+        });
+      })(),
       children
     ]
   });
 }
 // src/presentation/components/ChatSidebar.tsx
-import * as React10 from "react";
+import * as React12 from "react";
 import { Plus as Plus2, Trash2, MessageSquare } from "lucide-react";
-import { Button as Button5 } from "@contractspec/lib.design-system";
-import { cn as cn6 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { Button as Button6 } from "@contractspec/lib.design-system";
+import { cn as cn9 } from "@contractspec/lib.ui-kit-web/ui/utils";
 
 // src/presentation/hooks/useConversations.ts
-import * as React9 from "react";
+import * as React11 from "react";
 "use client";
 function useConversations(options) {
   const { store, projectId, tags, limit = 50 } = options;
-  const [conversations, setConversations] = React9.useState([]);
-  const [isLoading, setIsLoading] = React9.useState(true);
-  const refresh = React9.useCallback(async () => {
+  const [conversations, setConversations] = React11.useState([]);
+  const [isLoading, setIsLoading] = React11.useState(true);
+  const refresh = React11.useCallback(async () => {
     setIsLoading(true);
     try {
       const list = await store.list({
@@ -1459,10 +1886,10 @@ function useConversations(options) {
       setIsLoading(false);
     }
   }, [store, projectId, tags, limit]);
-  React9.useEffect(() => {
+  React11.useEffect(() => {
     refresh();
   }, [refresh]);
-  const deleteConversation = React9.useCallback(async (id) => {
+  const deleteConversation = React11.useCallback(async (id) => {
     const ok = await store.delete(id);
     if (ok) {
       setConversations((prev) => prev.filter((c) => c.id !== id));
@@ -1478,7 +1905,7 @@ function useConversations(options) {
 }
 
 // src/presentation/components/ChatSidebar.tsx
-import { jsx as jsx9, jsxs as jsxs9, Fragment as Fragment5 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11, Fragment as Fragment6 } from "react/jsx-runtime";
 "use client";
 function formatDate(date) {
   const d = new Date(date);
@@ -1500,7 +1927,7 @@ function ConversationItem({
 }) {
   const title = conversation.title ?? conversation.messages[0]?.content?.slice(0, 50) ?? "New chat";
   const displayTitle = title.length > 40 ? `${title.slice(0, 40)}…` : title;
-  return /* @__PURE__ */ jsxs9("div", {
+  return /* @__PURE__ */ jsxs11("div", {
     role: "button",
     tabIndex: 0,
     onClick: onSelect,
@@ -1510,24 +1937,24 @@ function ConversationItem({
         onSelect();
       }
     },
-    className: cn6("group flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors", selected ? "bg-accent text-accent-foreground" : "hover:bg-accent/50"),
+    className: cn9("group flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm transition-colors", selected ? "bg-accent text-accent-foreground" : "hover:bg-accent/50"),
     children: [
-      /* @__PURE__ */ jsx9(MessageSquare, {
+      /* @__PURE__ */ jsx12(MessageSquare, {
         className: "text-muted-foreground h-4 w-4 shrink-0"
       }),
-      /* @__PURE__ */ jsxs9("div", {
+      /* @__PURE__ */ jsxs11("div", {
         className: "min-w-0 flex-1",
         children: [
-          /* @__PURE__ */ jsx9("p", {
+          /* @__PURE__ */ jsx12("p", {
             className: "truncate",
             children: displayTitle
           }),
-          /* @__PURE__ */ jsxs9("p", {
+          /* @__PURE__ */ jsxs11("p", {
             className: "text-muted-foreground text-xs",
             children: [
               formatDate(conversation.updatedAt),
               conversation.projectName && ` · ${conversation.projectName}`,
-              conversation.tags && conversation.tags.length > 0 && /* @__PURE__ */ jsxs9(Fragment5, {
+              conversation.tags && conversation.tags.length > 0 && /* @__PURE__ */ jsxs11(Fragment6, {
                 children: [
                   " · ",
                   conversation.tags.slice(0, 2).join(", ")
@@ -1537,15 +1964,17 @@ function ConversationItem({
           })
         ]
       }),
-      /* @__PURE__ */ jsx9("span", {
+      /* @__PURE__ */ jsx12("span", {
+        role: "group",
         onClick: (e) => e.stopPropagation(),
-        children: /* @__PURE__ */ jsx9(Button5, {
+        onKeyDown: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ jsx12(Button6, {
           variant: "ghost",
           size: "sm",
           className: "h-6 w-6 shrink-0 p-0 opacity-0 group-hover:opacity-100",
           onPress: onDelete,
           "aria-label": "Delete conversation",
-          children: /* @__PURE__ */ jsx9(Trash2, {
+          children: /* @__PURE__ */ jsx12(Trash2, {
             className: "h-3 w-3"
           })
         })
@@ -1566,8 +1995,13 @@ function ChatSidebar({
   onUpdateConversation,
   selectedConversation
 }) {
-  const { conversations, isLoading, refresh, deleteConversation } = useConversations({ store, projectId, tags, limit });
-  const handleDelete = React10.useCallback(async (id) => {
+  const { conversations, isLoading, deleteConversation } = useConversations({
+    store,
+    projectId,
+    tags,
+    limit
+  });
+  const handleDelete = React12.useCallback(async (id) => {
     const ok = await deleteConversation(id);
     if (ok && selectedConversationId === id) {
       onSelectConversation(null);
@@ -1575,39 +2009,39 @@ function ChatSidebar({
   }, [deleteConversation, selectedConversationId, onSelectConversation]);
   if (collapsed)
     return null;
-  return /* @__PURE__ */ jsxs9("div", {
-    className: cn6("border-border flex w-64 shrink-0 flex-col border-r", className),
+  return /* @__PURE__ */ jsxs11("div", {
+    className: cn9("border-border flex w-64 shrink-0 flex-col border-r", className),
     children: [
-      /* @__PURE__ */ jsxs9("div", {
+      /* @__PURE__ */ jsxs11("div", {
         className: "border-border flex shrink-0 items-center justify-between border-b p-2",
         children: [
-          /* @__PURE__ */ jsx9("span", {
+          /* @__PURE__ */ jsx12("span", {
             className: "text-muted-foreground text-sm font-medium",
             children: "Conversations"
           }),
-          /* @__PURE__ */ jsx9(Button5, {
+          /* @__PURE__ */ jsx12(Button6, {
             variant: "ghost",
             size: "sm",
             className: "h-8 w-8 p-0",
             onPress: onCreateNew,
             "aria-label": "New conversation",
-            children: /* @__PURE__ */ jsx9(Plus2, {
+            children: /* @__PURE__ */ jsx12(Plus2, {
               className: "h-4 w-4"
             })
           })
         ]
       }),
-      /* @__PURE__ */ jsx9("div", {
+      /* @__PURE__ */ jsx12("div", {
         className: "flex-1 overflow-y-auto p-2",
-        children: isLoading ? /* @__PURE__ */ jsx9("div", {
+        children: isLoading ? /* @__PURE__ */ jsx12("div", {
           className: "text-muted-foreground py-4 text-center text-sm",
           children: "Loading…"
-        }) : conversations.length === 0 ? /* @__PURE__ */ jsx9("div", {
+        }) : conversations.length === 0 ? /* @__PURE__ */ jsx12("div", {
           className: "text-muted-foreground py-4 text-center text-sm",
           children: "No conversations yet"
-        }) : /* @__PURE__ */ jsx9("div", {
+        }) : /* @__PURE__ */ jsx12("div", {
           className: "flex flex-col gap-1",
-          children: conversations.map((conv) => /* @__PURE__ */ jsx9(ConversationItem, {
+          children: conversations.map((conv) => /* @__PURE__ */ jsx12(ConversationItem, {
             conversation: conv,
             selected: conv.id === selectedConversationId,
             onSelect: () => onSelectConversation(conv.id),
@@ -1615,7 +2049,7 @@ function ChatSidebar({
           }, conv.id))
         })
       }),
-      selectedConversation && onUpdateConversation && /* @__PURE__ */ jsx9(ConversationMeta, {
+      selectedConversation && onUpdateConversation && /* @__PURE__ */ jsx12(ConversationMeta, {
         conversation: selectedConversation,
         onUpdate: onUpdateConversation
       })
@@ -1626,13 +2060,13 @@ function ConversationMeta({
   conversation,
   onUpdate
 }) {
-  const [projectName, setProjectName] = React10.useState(conversation.projectName ?? "");
-  const [tagsStr, setTagsStr] = React10.useState(conversation.tags?.join(", ") ?? "");
-  React10.useEffect(() => {
+  const [projectName, setProjectName] = React12.useState(conversation.projectName ?? "");
+  const [tagsStr, setTagsStr] = React12.useState(conversation.tags?.join(", ") ?? "");
+  React12.useEffect(() => {
     setProjectName(conversation.projectName ?? "");
     setTagsStr(conversation.tags?.join(", ") ?? "");
   }, [conversation.id, conversation.projectName, conversation.tags]);
-  const handleBlur = React10.useCallback(() => {
+  const handleBlur = React12.useCallback(() => {
     const tags = tagsStr.split(",").map((t) => t.trim()).filter(Boolean);
     if (projectName !== (conversation.projectName ?? "") || JSON.stringify(tags) !== JSON.stringify(conversation.tags ?? [])) {
       onUpdate(conversation.id, {
@@ -1649,14 +2083,14 @@ function ConversationMeta({
     tagsStr,
     onUpdate
   ]);
-  return /* @__PURE__ */ jsxs9("div", {
+  return /* @__PURE__ */ jsxs11("div", {
     className: "border-border shrink-0 border-t p-2",
     children: [
-      /* @__PURE__ */ jsx9("p", {
+      /* @__PURE__ */ jsx12("p", {
         className: "text-muted-foreground mb-1 text-xs font-medium",
         children: "Project"
       }),
-      /* @__PURE__ */ jsx9("input", {
+      /* @__PURE__ */ jsx12("input", {
         type: "text",
         value: projectName,
         onChange: (e) => setProjectName(e.target.value),
@@ -1664,11 +2098,11 @@ function ConversationMeta({
         placeholder: "Project name",
         className: "border-input bg-background mb-2 w-full rounded px-2 py-1 text-xs"
       }),
-      /* @__PURE__ */ jsx9("p", {
+      /* @__PURE__ */ jsx12("p", {
         className: "text-muted-foreground mb-1 text-xs font-medium",
         children: "Tags"
       }),
-      /* @__PURE__ */ jsx9("input", {
+      /* @__PURE__ */ jsx12("input", {
         type: "text",
         value: tagsStr,
         onChange: (e) => setTagsStr(e.target.value),
@@ -1680,10 +2114,10 @@ function ConversationMeta({
   });
 }
 // src/presentation/components/ChatWithSidebar.tsx
-import * as React12 from "react";
+import * as React14 from "react";
 
 // src/presentation/hooks/useChat.tsx
-import * as React11 from "react";
+import * as React13 from "react";
 import { tool as tool4 } from "ai";
 import { z as z4 } from "zod";
 
@@ -2757,16 +3191,16 @@ function useChat(options = {}) {
     mcpServers,
     agentMode
   } = options;
-  const [messages, setMessages] = React11.useState([]);
-  const [mcpTools, setMcpTools] = React11.useState(null);
-  const mcpCleanupRef = React11.useRef(null);
-  const [conversation, setConversation] = React11.useState(null);
-  const [isLoading, setIsLoading] = React11.useState(false);
-  const [error, setError] = React11.useState(null);
-  const [conversationId, setConversationId] = React11.useState(initialConversationId ?? null);
-  const abortControllerRef = React11.useRef(null);
-  const chatServiceRef = React11.useRef(null);
-  React11.useEffect(() => {
+  const [messages, setMessages] = React13.useState([]);
+  const [mcpTools, setMcpTools] = React13.useState(null);
+  const mcpCleanupRef = React13.useRef(null);
+  const [conversation, setConversation] = React13.useState(null);
+  const [isLoading, setIsLoading] = React13.useState(false);
+  const [error, setError] = React13.useState(null);
+  const [conversationId, setConversationId] = React13.useState(initialConversationId ?? null);
+  const abortControllerRef = React13.useRef(null);
+  const chatServiceRef = React13.useRef(null);
+  React13.useEffect(() => {
     if (!mcpServers?.length) {
       setMcpTools(null);
       return;
@@ -2798,7 +3232,7 @@ function useChat(options = {}) {
       setMcpTools(null);
     };
   }, [mcpServers]);
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     const chatProvider = createProvider({
       provider,
       model,
@@ -2835,7 +3269,7 @@ function useChat(options = {}) {
     surfacePlanConfig,
     mcpTools
   ]);
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     if (!conversationId || !chatServiceRef.current)
       return;
     const loadConversation = async () => {
@@ -2849,7 +3283,7 @@ function useChat(options = {}) {
     };
     loadConversation().catch(console.error);
   }, [conversationId]);
-  const sendMessage = React11.useCallback(async (content, attachments, opts) => {
+  const sendMessage = React13.useCallback(async (content, attachments, opts) => {
     if (agentMode?.agent) {
       setIsLoading(true);
       setError(null);
@@ -3071,14 +3505,21 @@ function useChat(options = {}) {
     agentMode,
     store
   ]);
-  const clearConversation = React11.useCallback(() => {
+  const clearConversation = React13.useCallback(() => {
     setMessages([]);
     setConversation(null);
     setConversationId(null);
     setError(null);
   }, []);
-  const regenerate = React11.useCallback(async () => {
-    const lastUserMessageIndex = messages.findLastIndex((m) => m.role === "user");
+  const regenerate = React13.useCallback(async () => {
+    let lastUserMessageIndex = -1;
+    for (let i = messages.length - 1;i >= 0; i--) {
+      const m = messages[i];
+      if (m?.role === "user") {
+        lastUserMessageIndex = i;
+        break;
+      }
+    }
     if (lastUserMessageIndex === -1)
       return;
     const lastUserMessage = messages[lastUserMessageIndex];
@@ -3087,12 +3528,12 @@ function useChat(options = {}) {
     setMessages((prev) => prev.slice(0, lastUserMessageIndex + 1));
     await sendMessage(lastUserMessage.content, lastUserMessage.attachments);
   }, [messages, sendMessage]);
-  const stop = React11.useCallback(() => {
+  const stop = React13.useCallback(() => {
     abortControllerRef.current?.abort();
     setIsLoading(false);
   }, []);
   const createNewConversation = clearConversation;
-  const editMessage = React11.useCallback(async (messageId, newContent) => {
+  const editMessage = React13.useCallback(async (messageId, newContent) => {
     if (!chatServiceRef.current || !conversationId)
       return;
     const msg = messages.find((m) => m.id === messageId);
@@ -3107,7 +3548,7 @@ function useChat(options = {}) {
     }
     await sendMessage(newContent, undefined, { skipUserAppend: true });
   }, [conversationId, messages, sendMessage]);
-  const forkConversation = React11.useCallback(async (upToMessageId) => {
+  const forkConversation = React13.useCallback(async (upToMessageId) => {
     if (!chatServiceRef.current)
       return null;
     const idToFork = conversationId ?? conversation?.id;
@@ -3123,7 +3564,7 @@ function useChat(options = {}) {
       return null;
     }
   }, [conversationId, conversation]);
-  const updateConversationFn = React11.useCallback(async (updates) => {
+  const updateConversationFn = React13.useCallback(async (updates) => {
     if (!chatServiceRef.current || !conversationId)
       return null;
     const updated = await chatServiceRef.current.updateConversation(conversationId, updates);
@@ -3131,7 +3572,7 @@ function useChat(options = {}) {
       setConversation(updated);
     return updated;
   }, [conversationId]);
-  const addToolApprovalResponse = React11.useCallback((_toolCallId, _result) => {
+  const addToolApprovalResponse = React13.useCallback((_toolCallId, _result) => {
     throw new Error(`addToolApprovalResponse: Tool approval requires server route with toUIMessageStreamResponse. ` + `Use createChatRoute and @ai-sdk/react useChat for tools with requireApproval.`);
   }, []);
   const hasApprovalTools = toolsDefs?.some((t) => t.requireApproval) ?? false;
@@ -3382,7 +3823,7 @@ function createLocalStorageConversationStore(storageKey) {
 }
 
 // src/presentation/components/ChatWithSidebar.tsx
-import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 "use client";
 var defaultStore = createLocalStorageConversationStore();
 function ChatWithSidebar({
@@ -3393,10 +3834,15 @@ function ChatWithSidebar({
   thinkingLevel: initialThinkingLevel = "thinking",
   presentationRenderer,
   formRenderer,
+  dataViewRenderer,
+  components,
+  suggestions,
+  suggestionComponents,
+  showSuggestionsWhenEmpty = false,
   ...useChatOptions
 }) {
   const effectiveStore = store;
-  const [thinkingLevel, setThinkingLevel] = React12.useState(initialThinkingLevel);
+  const [thinkingLevel, setThinkingLevel] = React14.useState(initialThinkingLevel);
   const chat = useChat({
     ...useChatOptions,
     store: effectiveStore,
@@ -3414,13 +3860,16 @@ function ChatWithSidebar({
     updateConversation
   } = chat;
   const selectedConversationId = conversation?.id ?? null;
-  const handleSelectConversation = React12.useCallback((id) => {
+  const handleSelectConversation = React14.useCallback((id) => {
     setConversationId(id);
   }, [setConversationId]);
-  return /* @__PURE__ */ jsxs10("div", {
+  const handleSuggestionClick = React14.useCallback((suggestion) => {
+    sendMessage(suggestion);
+  }, [sendMessage]);
+  return /* @__PURE__ */ jsxs12("div", {
     className: className ?? "flex h-full w-full",
     children: [
-      /* @__PURE__ */ jsx10(ChatSidebar, {
+      /* @__PURE__ */ jsx13(ChatSidebar, {
         store: effectiveStore,
         selectedConversationId,
         onSelectConversation: handleSelectConversation,
@@ -3434,9 +3883,9 @@ function ChatWithSidebar({
           }
         } : undefined
       }),
-      /* @__PURE__ */ jsx10("div", {
+      /* @__PURE__ */ jsx13("div", {
         className: "flex min-w-0 flex-1 flex-col",
-        children: /* @__PURE__ */ jsx10(ChatWithExport, {
+        children: /* @__PURE__ */ jsx13(ChatWithExport, {
           messages,
           conversation,
           onCreateNew: createNewConversation,
@@ -3446,7 +3895,13 @@ function ChatWithSidebar({
           onThinkingLevelChange: setThinkingLevel,
           presentationRenderer,
           formRenderer,
-          children: /* @__PURE__ */ jsx10(ChatInput, {
+          dataViewRenderer,
+          components,
+          suggestions,
+          onSuggestionClick: handleSuggestionClick,
+          suggestionComponents,
+          showSuggestionsWhenEmpty,
+          children: /* @__PURE__ */ jsx13(ChatInput, {
             onSend: (content, att) => sendMessage(content, att),
             disabled: isLoading,
             isLoading
@@ -3457,9 +3912,9 @@ function ChatWithSidebar({
   });
 }
 // src/presentation/components/ModelPicker.tsx
-import * as React13 from "react";
-import { cn as cn7 } from "@contractspec/lib.ui-kit-web/ui/utils";
-import { Button as Button6 } from "@contractspec/lib.design-system";
+import * as React15 from "react";
+import { cn as cn10 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { Button as Button7 } from "@contractspec/lib.design-system";
 import {
   Select as Select2,
   SelectContent as SelectContent2,
@@ -3473,22 +3928,22 @@ import { Bot as Bot2, Cloud, Cpu, Sparkles } from "lucide-react";
 import {
   getModelsForProvider
 } from "@contractspec/lib.ai-providers";
-import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 "use client";
 var PROVIDER_ICONS = {
-  ollama: /* @__PURE__ */ jsx11(Cpu, {
+  ollama: /* @__PURE__ */ jsx14(Cpu, {
     className: "h-4 w-4"
   }),
-  openai: /* @__PURE__ */ jsx11(Bot2, {
+  openai: /* @__PURE__ */ jsx14(Bot2, {
     className: "h-4 w-4"
   }),
-  anthropic: /* @__PURE__ */ jsx11(Sparkles, {
+  anthropic: /* @__PURE__ */ jsx14(Sparkles, {
     className: "h-4 w-4"
   }),
-  mistral: /* @__PURE__ */ jsx11(Cloud, {
+  mistral: /* @__PURE__ */ jsx14(Cloud, {
     className: "h-4 w-4"
   }),
-  gemini: /* @__PURE__ */ jsx11(Sparkles, {
+  gemini: /* @__PURE__ */ jsx14(Sparkles, {
     className: "h-4 w-4"
   })
 };
@@ -3520,7 +3975,7 @@ function ModelPicker({
   ];
   const models = getModelsForProvider(value.provider);
   const selectedModel = models.find((m) => m.id === value.model);
-  const handleProviderChange = React13.useCallback((providerName) => {
+  const handleProviderChange = React15.useCallback((providerName) => {
     const provider = providerName;
     const providerInfo = providers.find((p) => p.provider === provider);
     const providerModels = getModelsForProvider(provider);
@@ -3531,33 +3986,33 @@ function ModelPicker({
       mode: providerInfo?.mode ?? "byok"
     });
   }, [onChange, providers]);
-  const handleModelChange = React13.useCallback((modelId) => {
+  const handleModelChange = React15.useCallback((modelId) => {
     onChange({
       ...value,
       model: modelId
     });
   }, [onChange, value]);
   if (compact) {
-    return /* @__PURE__ */ jsxs11("div", {
-      className: cn7("flex items-center gap-2", className),
+    return /* @__PURE__ */ jsxs13("div", {
+      className: cn10("flex items-center gap-2", className),
       children: [
-        /* @__PURE__ */ jsxs11(Select2, {
+        /* @__PURE__ */ jsxs13(Select2, {
           value: value.provider,
           onValueChange: handleProviderChange,
           children: [
-            /* @__PURE__ */ jsx11(SelectTrigger2, {
+            /* @__PURE__ */ jsx14(SelectTrigger2, {
               className: "w-[140px]",
-              children: /* @__PURE__ */ jsx11(SelectValue2, {})
+              children: /* @__PURE__ */ jsx14(SelectValue2, {})
             }),
-            /* @__PURE__ */ jsx11(SelectContent2, {
-              children: providers.map((p) => /* @__PURE__ */ jsx11(SelectItem2, {
+            /* @__PURE__ */ jsx14(SelectContent2, {
+              children: providers.map((p) => /* @__PURE__ */ jsx14(SelectItem2, {
                 value: p.provider,
                 disabled: !p.available,
-                children: /* @__PURE__ */ jsxs11("div", {
+                children: /* @__PURE__ */ jsxs13("div", {
                   className: "flex items-center gap-2",
                   children: [
                     PROVIDER_ICONS[p.provider],
-                    /* @__PURE__ */ jsx11("span", {
+                    /* @__PURE__ */ jsx14("span", {
                       children: PROVIDER_NAMES[p.provider]
                     })
                   ]
@@ -3566,16 +4021,16 @@ function ModelPicker({
             })
           ]
         }),
-        /* @__PURE__ */ jsxs11(Select2, {
+        /* @__PURE__ */ jsxs13(Select2, {
           value: value.model,
           onValueChange: handleModelChange,
           children: [
-            /* @__PURE__ */ jsx11(SelectTrigger2, {
+            /* @__PURE__ */ jsx14(SelectTrigger2, {
               className: "w-[160px]",
-              children: /* @__PURE__ */ jsx11(SelectValue2, {})
+              children: /* @__PURE__ */ jsx14(SelectValue2, {})
             }),
-            /* @__PURE__ */ jsx11(SelectContent2, {
-              children: models.map((m) => /* @__PURE__ */ jsx11(SelectItem2, {
+            /* @__PURE__ */ jsx14(SelectContent2, {
+              children: models.map((m) => /* @__PURE__ */ jsx14(SelectItem2, {
                 value: m.id,
                 children: m.name
               }, m.id))
@@ -3585,32 +4040,32 @@ function ModelPicker({
       ]
     });
   }
-  return /* @__PURE__ */ jsxs11("div", {
-    className: cn7("flex flex-col gap-3", className),
+  return /* @__PURE__ */ jsxs13("div", {
+    className: cn10("flex flex-col gap-3", className),
     children: [
-      /* @__PURE__ */ jsxs11("div", {
+      /* @__PURE__ */ jsxs13("div", {
         className: "flex flex-col gap-1.5",
         children: [
-          /* @__PURE__ */ jsx11(Label2, {
+          /* @__PURE__ */ jsx14(Label2, {
             htmlFor: "provider-selection",
             className: "text-sm font-medium",
             children: "Provider"
           }),
-          /* @__PURE__ */ jsx11("div", {
+          /* @__PURE__ */ jsx14("div", {
             className: "flex flex-wrap gap-2",
             id: "provider-selection",
-            children: providers.map((p) => /* @__PURE__ */ jsxs11(Button6, {
+            children: providers.map((p) => /* @__PURE__ */ jsxs13(Button7, {
               variant: value.provider === p.provider ? "default" : "outline",
               size: "sm",
               onPress: () => p.available && handleProviderChange(p.provider),
               disabled: !p.available,
-              className: cn7(!p.available && "opacity-50"),
+              className: cn10(!p.available && "opacity-50"),
               children: [
                 PROVIDER_ICONS[p.provider],
-                /* @__PURE__ */ jsx11("span", {
+                /* @__PURE__ */ jsx14("span", {
                   children: PROVIDER_NAMES[p.provider]
                 }),
-                /* @__PURE__ */ jsx11(Badge, {
+                /* @__PURE__ */ jsx14(Badge, {
                   variant: MODE_BADGES[p.mode].variant,
                   className: "ml-1",
                   children: MODE_BADGES[p.mode].label
@@ -3620,46 +4075,46 @@ function ModelPicker({
           })
         ]
       }),
-      /* @__PURE__ */ jsxs11("div", {
+      /* @__PURE__ */ jsxs13("div", {
         className: "flex flex-col gap-1.5",
         children: [
-          /* @__PURE__ */ jsx11(Label2, {
+          /* @__PURE__ */ jsx14(Label2, {
             htmlFor: "model-picker",
             className: "text-sm font-medium",
             children: "Model"
           }),
-          /* @__PURE__ */ jsxs11(Select2, {
+          /* @__PURE__ */ jsxs13(Select2, {
             name: "model-picker",
             value: value.model,
             onValueChange: handleModelChange,
             children: [
-              /* @__PURE__ */ jsx11(SelectTrigger2, {
-                children: /* @__PURE__ */ jsx11(SelectValue2, {
+              /* @__PURE__ */ jsx14(SelectTrigger2, {
+                children: /* @__PURE__ */ jsx14(SelectValue2, {
                   placeholder: "Select a model"
                 })
               }),
-              /* @__PURE__ */ jsx11(SelectContent2, {
-                children: models.map((m) => /* @__PURE__ */ jsx11(SelectItem2, {
+              /* @__PURE__ */ jsx14(SelectContent2, {
+                children: models.map((m) => /* @__PURE__ */ jsx14(SelectItem2, {
                   value: m.id,
-                  children: /* @__PURE__ */ jsxs11("div", {
+                  children: /* @__PURE__ */ jsxs13("div", {
                     className: "flex items-center gap-2",
                     children: [
-                      /* @__PURE__ */ jsx11("span", {
+                      /* @__PURE__ */ jsx14("span", {
                         children: m.name
                       }),
-                      /* @__PURE__ */ jsxs11("span", {
+                      /* @__PURE__ */ jsxs13("span", {
                         className: "text-muted-foreground text-xs",
                         children: [
                           Math.round(m.contextWindow / 1000),
                           "K"
                         ]
                       }),
-                      m.capabilities.vision && /* @__PURE__ */ jsx11(Badge, {
+                      m.capabilities.vision && /* @__PURE__ */ jsx14(Badge, {
                         variant: "outline",
                         className: "text-xs",
                         children: "Vision"
                       }),
-                      m.capabilities.reasoning && /* @__PURE__ */ jsx11(Badge, {
+                      m.capabilities.reasoning && /* @__PURE__ */ jsx14(Badge, {
                         variant: "outline",
                         className: "text-xs",
                         children: "Reasoning"
@@ -3672,23 +4127,23 @@ function ModelPicker({
           })
         ]
       }),
-      selectedModel && /* @__PURE__ */ jsxs11("div", {
+      selectedModel && /* @__PURE__ */ jsxs13("div", {
         className: "text-muted-foreground flex flex-wrap gap-2 text-xs",
         children: [
-          /* @__PURE__ */ jsxs11("span", {
+          /* @__PURE__ */ jsxs13("span", {
             children: [
               "Context: ",
               Math.round(selectedModel.contextWindow / 1000),
               "K tokens"
             ]
           }),
-          selectedModel.capabilities.vision && /* @__PURE__ */ jsx11("span", {
+          selectedModel.capabilities.vision && /* @__PURE__ */ jsx14("span", {
             children: "• Vision"
           }),
-          selectedModel.capabilities.tools && /* @__PURE__ */ jsx11("span", {
+          selectedModel.capabilities.tools && /* @__PURE__ */ jsx14("span", {
             children: "• Tools"
           }),
-          selectedModel.capabilities.reasoning && /* @__PURE__ */ jsx11("span", {
+          selectedModel.capabilities.reasoning && /* @__PURE__ */ jsx14("span", {
             children: "• Reasoning"
           })
         ]
@@ -3697,7 +4152,7 @@ function ModelPicker({
   });
 }
 // src/presentation/components/ContextIndicator.tsx
-import { cn as cn8 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { cn as cn11 } from "@contractspec/lib.ui-kit-web/ui/utils";
 import { Badge as Badge2 } from "@contractspec/lib.ui-kit-web/ui/badge";
 import {
   Tooltip,
@@ -3706,7 +4161,7 @@ import {
   TooltipTrigger
 } from "@contractspec/lib.ui-kit-web/ui/tooltip";
 import { FolderOpen, FileCode, Zap, Info } from "lucide-react";
-import { jsx as jsx12, jsxs as jsxs12, Fragment as Fragment6 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs14, Fragment as Fragment7 } from "react/jsx-runtime";
 "use client";
 function ContextIndicator({
   summary,
@@ -3715,51 +4170,51 @@ function ContextIndicator({
   showDetails = true
 }) {
   if (!summary && !active) {
-    return /* @__PURE__ */ jsxs12("div", {
-      className: cn8("flex items-center gap-1.5 text-sm", "text-muted-foreground", className),
+    return /* @__PURE__ */ jsxs14("div", {
+      className: cn11("flex items-center gap-1.5 text-sm", "text-muted-foreground", className),
       children: [
-        /* @__PURE__ */ jsx12(Info, {
+        /* @__PURE__ */ jsx15(Info, {
           className: "h-4 w-4"
         }),
-        /* @__PURE__ */ jsx12("span", {
+        /* @__PURE__ */ jsx15("span", {
           children: "No workspace context"
         })
       ]
     });
   }
-  const content = /* @__PURE__ */ jsxs12("div", {
-    className: cn8("flex items-center gap-2", active ? "text-foreground" : "text-muted-foreground", className),
+  const content = /* @__PURE__ */ jsxs14("div", {
+    className: cn11("flex items-center gap-2", active ? "text-foreground" : "text-muted-foreground", className),
     children: [
-      /* @__PURE__ */ jsxs12(Badge2, {
+      /* @__PURE__ */ jsxs14(Badge2, {
         variant: active ? "default" : "secondary",
         className: "flex items-center gap-1",
         children: [
-          /* @__PURE__ */ jsx12(Zap, {
+          /* @__PURE__ */ jsx15(Zap, {
             className: "h-3 w-3"
           }),
           "Context"
         ]
       }),
-      summary && showDetails && /* @__PURE__ */ jsxs12(Fragment6, {
+      summary && showDetails && /* @__PURE__ */ jsxs14(Fragment7, {
         children: [
-          /* @__PURE__ */ jsxs12("div", {
+          /* @__PURE__ */ jsxs14("div", {
             className: "flex items-center gap-1 text-xs",
             children: [
-              /* @__PURE__ */ jsx12(FolderOpen, {
+              /* @__PURE__ */ jsx15(FolderOpen, {
                 className: "h-3.5 w-3.5"
               }),
-              /* @__PURE__ */ jsx12("span", {
+              /* @__PURE__ */ jsx15("span", {
                 children: summary.name
               })
             ]
           }),
-          /* @__PURE__ */ jsxs12("div", {
+          /* @__PURE__ */ jsxs14("div", {
             className: "flex items-center gap-1 text-xs",
             children: [
-              /* @__PURE__ */ jsx12(FileCode, {
+              /* @__PURE__ */ jsx15(FileCode, {
                 className: "h-3.5 w-3.5"
               }),
-              /* @__PURE__ */ jsxs12("span", {
+              /* @__PURE__ */ jsxs14("span", {
                 children: [
                   summary.specs.total,
                   " specs"
@@ -3774,77 +4229,77 @@ function ContextIndicator({
   if (!summary) {
     return content;
   }
-  return /* @__PURE__ */ jsx12(TooltipProvider, {
-    children: /* @__PURE__ */ jsxs12(Tooltip, {
+  return /* @__PURE__ */ jsx15(TooltipProvider, {
+    children: /* @__PURE__ */ jsxs14(Tooltip, {
       children: [
-        /* @__PURE__ */ jsx12(TooltipTrigger, {
+        /* @__PURE__ */ jsx15(TooltipTrigger, {
           asChild: true,
           children: content
         }),
-        /* @__PURE__ */ jsx12(TooltipContent, {
+        /* @__PURE__ */ jsx15(TooltipContent, {
           side: "bottom",
           className: "max-w-[300px]",
-          children: /* @__PURE__ */ jsxs12("div", {
+          children: /* @__PURE__ */ jsxs14("div", {
             className: "flex flex-col gap-2 text-sm",
             children: [
-              /* @__PURE__ */ jsx12("div", {
+              /* @__PURE__ */ jsx15("div", {
                 className: "font-medium",
                 children: summary.name
               }),
-              /* @__PURE__ */ jsx12("div", {
+              /* @__PURE__ */ jsx15("div", {
                 className: "text-muted-foreground text-xs",
                 children: summary.path
               }),
-              /* @__PURE__ */ jsx12("div", {
+              /* @__PURE__ */ jsx15("div", {
                 className: "border-t pt-2",
-                children: /* @__PURE__ */ jsxs12("div", {
+                children: /* @__PURE__ */ jsxs14("div", {
                   className: "grid grid-cols-2 gap-1 text-xs",
                   children: [
-                    /* @__PURE__ */ jsx12("span", {
+                    /* @__PURE__ */ jsx15("span", {
                       children: "Commands:"
                     }),
-                    /* @__PURE__ */ jsx12("span", {
+                    /* @__PURE__ */ jsx15("span", {
                       className: "text-right",
                       children: summary.specs.commands
                     }),
-                    /* @__PURE__ */ jsx12("span", {
+                    /* @__PURE__ */ jsx15("span", {
                       children: "Queries:"
                     }),
-                    /* @__PURE__ */ jsx12("span", {
+                    /* @__PURE__ */ jsx15("span", {
                       className: "text-right",
                       children: summary.specs.queries
                     }),
-                    /* @__PURE__ */ jsx12("span", {
+                    /* @__PURE__ */ jsx15("span", {
                       children: "Events:"
                     }),
-                    /* @__PURE__ */ jsx12("span", {
+                    /* @__PURE__ */ jsx15("span", {
                       className: "text-right",
                       children: summary.specs.events
                     }),
-                    /* @__PURE__ */ jsx12("span", {
+                    /* @__PURE__ */ jsx15("span", {
                       children: "Presentations:"
                     }),
-                    /* @__PURE__ */ jsx12("span", {
+                    /* @__PURE__ */ jsx15("span", {
                       className: "text-right",
                       children: summary.specs.presentations
                     })
                   ]
                 })
               }),
-              /* @__PURE__ */ jsxs12("div", {
+              /* @__PURE__ */ jsxs14("div", {
                 className: "border-t pt-2 text-xs",
                 children: [
-                  /* @__PURE__ */ jsxs12("span", {
+                  /* @__PURE__ */ jsxs14("span", {
                     children: [
                       summary.files.total,
                       " files"
                     ]
                   }),
-                  /* @__PURE__ */ jsx12("span", {
+                  /* @__PURE__ */ jsx15("span", {
                     className: "mx-1",
                     children: "•"
                   }),
-                  /* @__PURE__ */ jsxs12("span", {
+                  /* @__PURE__ */ jsxs14("span", {
                     children: [
                       summary.files.specFiles,
                       " spec files"
@@ -3859,17 +4314,104 @@ function ContextIndicator({
     })
   });
 }
+// src/presentation/components/ChainOfThought.tsx
+import {
+  Collapsible as Collapsible3,
+  CollapsibleContent as CollapsibleContent3,
+  CollapsibleTrigger as CollapsibleTrigger3
+} from "@contractspec/lib.ui-kit-web/ui/collapsible";
+import { cn as cn12 } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { ChevronDown, Dot } from "lucide-react";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+"use client";
+function ChainOfThought({
+  children,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  className
+}) {
+  return /* @__PURE__ */ jsx16(Collapsible3, {
+    open,
+    defaultOpen,
+    onOpenChange,
+    className: cn12("group/cot mt-2", className),
+    children
+  });
+}
+function ChainOfThoughtHeader({
+  children = "Chain of Thought",
+  className
+}) {
+  return /* @__PURE__ */ jsxs15(CollapsibleTrigger3, {
+    className: cn12("hover:bg-muted flex w-full cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors", className),
+    children: [
+      /* @__PURE__ */ jsx16(ChevronDown, {
+        className: "text-muted-foreground h-4 w-4 shrink-0 transition-transform group-data-[state=open]/cot:rotate-180"
+      }),
+      children
+    ]
+  });
+}
+function ChainOfThoughtStep({
+  label,
+  description,
+  status = "complete",
+  icon: Icon = Dot,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs15("div", {
+    className: cn12("border-border flex gap-3 border-b py-2 last:border-b-0", className),
+    children: [
+      /* @__PURE__ */ jsx16("div", {
+        className: cn12("mt-1.5 flex h-5 w-5 shrink-0 items-center justify-center rounded-full", status === "complete" && "bg-green-500/20 text-green-700 dark:text-green-400", status === "active" && "bg-blue-500/20 text-blue-700 dark:text-blue-400", status === "pending" && "bg-muted text-muted-foreground"),
+        children: /* @__PURE__ */ jsx16(Icon, {
+          className: "h-3 w-3"
+        })
+      }),
+      /* @__PURE__ */ jsxs15("div", {
+        className: "min-w-0 flex-1",
+        children: [
+          /* @__PURE__ */ jsx16("p", {
+            className: "font-medium",
+            children: label
+          }),
+          description && /* @__PURE__ */ jsx16("p", {
+            className: "text-muted-foreground mt-0.5 text-xs",
+            children: description
+          }),
+          children && /* @__PURE__ */ jsx16("div", {
+            className: "mt-2",
+            children
+          })
+        ]
+      })
+    ]
+  });
+}
+function ChainOfThoughtContent({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx16(CollapsibleContent3, {
+    children: /* @__PURE__ */ jsx16("div", {
+      className: cn12("bg-muted border-border mt-1 rounded-md border px-3 py-2", className),
+      children
+    })
+  });
+}
 // src/presentation/hooks/useProviders.tsx
-import * as React14 from "react";
+import * as React16 from "react";
 import {
   getAvailableProviders,
   getModelsForProvider as getModelsForProvider2
 } from "@contractspec/lib.ai-providers";
 "use client";
 function useProviders() {
-  const [providers, setProviders] = React14.useState([]);
-  const [isLoading, setIsLoading] = React14.useState(true);
-  const loadProviders = React14.useCallback(async () => {
+  const [providers, setProviders] = React16.useState([]);
+  const [isLoading, setIsLoading] = React16.useState(true);
+  const loadProviders = React16.useCallback(async () => {
     setIsLoading(true);
     try {
       const available = getAvailableProviders();
@@ -3884,12 +4426,12 @@ function useProviders() {
       setIsLoading(false);
     }
   }, []);
-  React14.useEffect(() => {
+  React16.useEffect(() => {
     loadProviders();
   }, [loadProviders]);
-  const availableProviders = React14.useMemo(() => providers.filter((p) => p.available), [providers]);
-  const isAvailable = React14.useCallback((provider) => providers.some((p) => p.provider === provider && p.available), [providers]);
-  const getModelsCallback = React14.useCallback((provider) => providers.find((p) => p.provider === provider)?.models ?? [], [providers]);
+  const availableProviders = React16.useMemo(() => providers.filter((p) => p.available), [providers]);
+  const isAvailable = React16.useCallback((provider) => providers.some((p) => p.provider === provider && p.available), [providers]);
+  const getModelsCallback = React16.useCallback((provider) => providers.find((p) => p.provider === provider)?.models ?? [], [providers]);
   return {
     providers,
     availableProviders,
@@ -3910,8 +4452,18 @@ export {
   useChat,
   isPresentationToolResult,
   isFormToolResult,
+  isDataViewToolResult,
   ToolResultRenderer,
   ThinkingLevelPicker,
+  Suggestions,
+  Suggestion,
+  SourcesTrigger,
+  SourcesContent,
+  Sources,
+  Source,
+  ReasoningTrigger,
+  ReasoningContent,
+  Reasoning,
   ModelPicker,
   ContextIndicator,
   CodePreview,
@@ -3921,5 +4473,9 @@ export {
   ChatMessage,
   ChatInput,
   ChatExportToolbar,
-  ChatContainer
+  ChatContainer,
+  ChainOfThoughtStep,
+  ChainOfThoughtHeader,
+  ChainOfThoughtContent,
+  ChainOfThought
 };