@apteva/apteva-kit 0.1.12 → 0.1.15

package/dist/index.mjs

@@ -4,7 +4,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/components/Chat/Chat.tsx
-import { useState as useState2, useEffect as useEffect3 } from "react";
+import { useState as useState3, useEffect as useEffect3, useRef as useRef4 } from "react";
 
 // src/components/Chat/MessageList.tsx
 import { useEffect as useEffect2, useRef } from "react";
@@ -417,6 +417,87 @@ function generateMockCommandStream(command, onChunk, onComplete, onError, typing
   }, typingSpeed);
 }
 
+// src/utils/file-utils.ts
+function fileToBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      const base64 = result.split(",")[1];
+      resolve(base64);
+    };
+    reader.onerror = () => reject(new Error("Failed to read file"));
+    reader.readAsDataURL(file);
+  });
+}
+function getContentBlockType(mimeType) {
+  if (mimeType.startsWith("image/")) {
+    return "image";
+  }
+  return "document";
+}
+function isSupportedFileType(file) {
+  const supportedTypes = [
+    // Images
+    "image/jpeg",
+    "image/png",
+    "image/gif",
+    "image/webp",
+    // Documents
+    "application/pdf",
+    "text/plain",
+    "application/msword",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+  ];
+  return supportedTypes.includes(file.type);
+}
+async function fileToContentBlock(file) {
+  const base64 = await fileToBase64(file);
+  const blockType = getContentBlockType(file.type);
+  return {
+    type: blockType,
+    source: {
+      type: "base64",
+      media_type: file.type,
+      data: base64
+    }
+  };
+}
+async function filesToContentBlocks(files) {
+  const fileArray = Array.from(files);
+  const blocks = await Promise.all(
+    fileArray.map((file) => fileToContentBlock(file))
+  );
+  return blocks;
+}
+async function buildMessageWithAttachments(text, files) {
+  if (!files || files.length === 0) {
+    return text;
+  }
+  const blocks = [];
+  if (text.trim()) {
+    blocks.push({ type: "text", text: text.trim() });
+  }
+  const fileBlocks = await filesToContentBlocks(files);
+  blocks.push(...fileBlocks);
+  return blocks;
+}
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+var MAX_FILE_SIZE = 10 * 1024 * 1024;
+function validateFile(file) {
+  if (!isSupportedFileType(file)) {
+    return { valid: false, error: `Unsupported file type: ${file.type}` };
+  }
+  if (file.size > MAX_FILE_SIZE) {
+    return { valid: false, error: `File too large: ${formatFileSize(file.size)} (max ${formatFileSize(MAX_FILE_SIZE)})` };
+  }
+  return { valid: true };
+}
+
 // src/components/Widgets/Widgets.tsx
 import { useEffect } from "react";
 
@@ -514,29 +595,78 @@ function Button({ widget, onAction }) {
   );
 }
 
+// src/components/Widgets/widget-library/ButtonGroup.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function ButtonGroup({ widget, onAction }) {
+  const { layout = "horizontal", buttons } = widget.props;
+  const variantClasses = {
+    primary: "bg-blue-500 !text-white hover:bg-blue-600",
+    secondary: "bg-gray-200 dark:bg-gray-700 !text-gray-800 dark:!text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600",
+    outline: "border border-gray-300 dark:border-gray-600 !text-gray-700 dark:!text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"
+  };
+  const getActionForButton = (buttonId) => {
+    return widget.actions?.find((action) => action.payload?.buttonId === buttonId) || widget.actions?.[0];
+  };
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: cn(
+        "flex gap-2",
+        layout === "vertical" ? "flex-col" : "flex-row flex-wrap"
+      ),
+      children: buttons.map((button) => {
+        const action = getActionForButton(button.id);
+        return /* @__PURE__ */ jsx4(
+          "button",
+          {
+            onClick: () => {
+              if (action) {
+                onAction?.({
+                  type: action.type,
+                  payload: { ...action.payload, buttonId: button.id },
+                  widgetId: widget.id,
+                  timestamp: /* @__PURE__ */ new Date()
+                });
+              }
+            },
+            className: cn(
+              "px-4 py-2 rounded-lg font-medium transition-colors text-sm",
+              variantClasses[button.variant || "secondary"]
+            ),
+            children: button.label
+          },
+          button.id
+        );
+      })
+    }
+  );
+}
+
 // src/components/Widgets/WidgetRenderer.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function WidgetRenderer({ widget, onAction }) {
   switch (widget.type) {
     case "card":
-      return /* @__PURE__ */ jsx4(Card, { widget, onAction });
+      return /* @__PURE__ */ jsx5(Card, { widget, onAction });
     case "list":
-      return /* @__PURE__ */ jsx4(List, { widget, onAction });
+      return /* @__PURE__ */ jsx5(List, { widget, onAction });
     case "button":
-      return /* @__PURE__ */ jsx4(Button, { widget, onAction });
+      return /* @__PURE__ */ jsx5(Button, { widget, onAction });
+    case "button_group":
+      return /* @__PURE__ */ jsx5(ButtonGroup, { widget, onAction });
     default:
       return /* @__PURE__ */ jsxs3("div", { className: "p-4 border border-yellow-300 bg-yellow-50 rounded-lg", children: [
         /* @__PURE__ */ jsxs3("p", { className: "text-sm text-yellow-800", children: [
           "Unknown widget type: ",
           widget.type
         ] }),
-        /* @__PURE__ */ jsx4("pre", { className: "text-xs mt-2 overflow-auto", children: JSON.stringify(widget, null, 2) })
+        /* @__PURE__ */ jsx5("pre", { className: "text-xs mt-2 overflow-auto", children: JSON.stringify(widget, null, 2) })
       ] });
   }
 }
 
 // src/components/Widgets/Widgets.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function Widgets({
   widgets,
   onAction,
@@ -561,11 +691,11 @@ function Widgets({
     normal: "gap-4",
     loose: "gap-6"
   };
-  return /* @__PURE__ */ jsx5("div", { className: cn(layoutClasses[layout], spacingClasses[spacing], className), children: widgets.map((widget) => /* @__PURE__ */ jsx5(WidgetRenderer, { widget, onAction }, widget.id)) });
+  return /* @__PURE__ */ jsx6("div", { className: cn(layoutClasses[layout], spacingClasses[spacing], className), children: widgets.map((widget) => /* @__PURE__ */ jsx6(WidgetRenderer, { widget, onAction }, widget.id)) });
 }
 
 // src/components/Chat/MarkdownContent.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function parseInlineMarkdown(text, keyPrefix = "") {
   const result = [];
   const boldRegex = /(\*\*|__)(.+?)\1/g;
@@ -576,7 +706,7 @@ function parseInlineMarkdown(text, keyPrefix = "") {
     if (match.index > lastIndex) {
       result.push(text.slice(lastIndex, match.index));
     }
-    result.push(/* @__PURE__ */ jsx6("strong", { children: match[2] }, `${keyPrefix}b${key++}`));
+    result.push(/* @__PURE__ */ jsx7("strong", { children: match[2] }, `${keyPrefix}b${key++}`));
     lastIndex = match.index + match[0].length;
   }
   if (lastIndex < text.length) {
@@ -594,7 +724,7 @@ function parseMarkdown(content) {
     const h2Match = line.match(/^##\s+(.*)$/);
     if (h2Match) {
       result.push(
-        /* @__PURE__ */ jsx6("h2", { className: "apteva-md-h2", children: parseInlineMarkdown(h2Match[1], `${key}`) }, `h2${key++}`)
+        /* @__PURE__ */ jsx7("h2", { className: "apteva-md-h2", children: parseInlineMarkdown(h2Match[1], `${key}`) }, `h2${key++}`)
       );
       i++;
       continue;
@@ -602,7 +732,7 @@ function parseMarkdown(content) {
     const h3Match = line.match(/^###\s+(.*)$/);
     if (h3Match) {
       result.push(
-        /* @__PURE__ */ jsx6("h3", { className: "apteva-md-h3", children: parseInlineMarkdown(h3Match[1], `${key}`) }, `h3${key++}`)
+        /* @__PURE__ */ jsx7("h3", { className: "apteva-md-h3", children: parseInlineMarkdown(h3Match[1], `${key}`) }, `h3${key++}`)
       );
       i++;
       continue;
@@ -615,7 +745,7 @@ function parseMarkdown(content) {
         const itemMatch = lines[i].match(/^(\s*)([-*+])\s+(.*)$/);
         if (itemMatch && itemMatch[1].length === indent) {
           listItems.push(
-            /* @__PURE__ */ jsx6("li", { className: "apteva-md-li", children: parseInlineMarkdown(itemMatch[3], `${key}`) }, `li${key++}`)
+            /* @__PURE__ */ jsx7("li", { className: "apteva-md-li", children: parseInlineMarkdown(itemMatch[3], `${key}`) }, `li${key++}`)
           );
           i++;
         } else {
@@ -623,7 +753,7 @@ function parseMarkdown(content) {
         }
       }
       result.push(
-        /* @__PURE__ */ jsx6("ul", { className: "apteva-md-ul", children: listItems }, `ul${key++}`)
+        /* @__PURE__ */ jsx7("ul", { className: "apteva-md-ul", children: listItems }, `ul${key++}`)
       );
       continue;
     }
@@ -635,7 +765,7 @@ function parseMarkdown(content) {
         const itemMatch = lines[i].match(/^(\s*)(\d+)\.\s+(.*)$/);
         if (itemMatch && itemMatch[1].length === indent) {
           listItems.push(
-            /* @__PURE__ */ jsx6("li", { className: "apteva-md-li", children: parseInlineMarkdown(itemMatch[3], `${key}`) }, `li${key++}`)
+            /* @__PURE__ */ jsx7("li", { className: "apteva-md-li", children: parseInlineMarkdown(itemMatch[3], `${key}`) }, `li${key++}`)
           );
           i++;
         } else {
@@ -643,12 +773,39 @@ function parseMarkdown(content) {
         }
       }
       result.push(
-        /* @__PURE__ */ jsx6("ol", { className: "apteva-md-ol", children: listItems }, `ol${key++}`)
+        /* @__PURE__ */ jsx7("ol", { className: "apteva-md-ol", children: listItems }, `ol${key++}`)
       );
       continue;
     }
+    const tableMatch = line.match(/^\|(.+)\|$/);
+    if (tableMatch && i + 1 < lines.length) {
+      const separatorLine = lines[i + 1];
+      const separatorMatch = separatorLine.match(/^\|[\s:-]+\|$/);
+      if (separatorMatch) {
+        const headerCells = line.split("|").filter((cell) => cell.trim() !== "").map((cell) => cell.trim());
+        i += 2;
+        const bodyRows = [];
+        while (i < lines.length) {
+          const rowMatch = lines[i].match(/^\|(.+)\|$/);
+          if (rowMatch) {
+            const cells = lines[i].split("|").filter((cell) => cell.trim() !== "").map((cell) => cell.trim());
+            bodyRows.push(cells);
+            i++;
+          } else {
+            break;
+          }
+        }
+        result.push(
+          /* @__PURE__ */ jsx7("div", { className: "apteva-md-table-wrapper", children: /* @__PURE__ */ jsxs4("table", { className: "apteva-md-table", children: [
+            /* @__PURE__ */ jsx7("thead", { children: /* @__PURE__ */ jsx7("tr", { children: headerCells.map((cell, idx) => /* @__PURE__ */ jsx7("th", { className: "apteva-md-th", children: parseInlineMarkdown(cell, `th${key}${idx}`) }, `th${idx}`)) }) }),
+            /* @__PURE__ */ jsx7("tbody", { children: bodyRows.map((row, rowIdx) => /* @__PURE__ */ jsx7("tr", { children: row.map((cell, cellIdx) => /* @__PURE__ */ jsx7("td", { className: "apteva-md-td", children: parseInlineMarkdown(cell, `td${key}${rowIdx}${cellIdx}`) }, `td${cellIdx}`)) }, `tr${rowIdx}`)) })
+          ] }) }, `table-wrapper${key++}`)
+        );
+        continue;
+      }
+    }
     if (line === "") {
-      result.push(/* @__PURE__ */ jsx6("br", {}, `br${key++}`));
+      result.push(/* @__PURE__ */ jsx7("br", {}, `br${key++}`));
     } else {
       result.push(
         /* @__PURE__ */ jsxs4("span", { children: [
@@ -662,38 +819,38 @@ function parseMarkdown(content) {
   return result;
 }
 function MarkdownContent({ content, className = "" }) {
-  return /* @__PURE__ */ jsx6("div", { className: `apteva-md ${className}`, children: parseMarkdown(content) });
+  return /* @__PURE__ */ jsx7("div", { className: `apteva-md ${className}`, children: parseMarkdown(content) });
 }
 
 // src/components/Chat/ToolCall.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function ToolCall({ name, status }) {
   return /* @__PURE__ */ jsxs5("div", { className: "apteva-tool-call", children: [
-    status === "running" && /* @__PURE__ */ jsx7("div", { className: "apteva-tool-call-dot apteva-tool-call-dot-running" }),
-    status === "completed" && /* @__PURE__ */ jsx7("div", { className: "apteva-tool-call-dot apteva-tool-call-dot-completed" }),
-    status === "error" && /* @__PURE__ */ jsx7("div", { className: "apteva-tool-call-dot apteva-tool-call-dot-error" }),
-    /* @__PURE__ */ jsx7("span", { className: "apteva-tool-call-name", children: name }),
-    status === "running" && /* @__PURE__ */ jsx7("span", { className: "apteva-tool-call-status", children: "Running..." }),
-    status === "completed" && /* @__PURE__ */ jsx7("span", { className: "apteva-tool-call-status apteva-tool-call-status-completed", children: "Completed" }),
-    status === "error" && /* @__PURE__ */ jsx7("span", { className: "apteva-tool-call-status apteva-tool-call-status-error", children: "Error" })
+    status === "running" && /* @__PURE__ */ jsx8("div", { className: "apteva-tool-call-dot apteva-tool-call-dot-running" }),
+    status === "completed" && /* @__PURE__ */ jsx8("div", { className: "apteva-tool-call-dot apteva-tool-call-dot-completed" }),
+    status === "error" && /* @__PURE__ */ jsx8("div", { className: "apteva-tool-call-dot apteva-tool-call-dot-error" }),
+    /* @__PURE__ */ jsx8("span", { className: "apteva-tool-call-name", children: name }),
+    status === "running" && /* @__PURE__ */ jsx8("span", { className: "apteva-tool-call-status", children: "Running..." }),
+    status === "completed" && /* @__PURE__ */ jsx8("span", { className: "apteva-tool-call-status apteva-tool-call-status-completed", children: "Completed" }),
+    status === "error" && /* @__PURE__ */ jsx8("span", { className: "apteva-tool-call-status apteva-tool-call-status-error", children: "Error" })
   ] });
 }
 
 // src/components/Chat/Message.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function Message({ message, onAction }) {
   const isUser = message.role === "user";
   const contentSegments = message.metadata?.content_segments;
   const renderContent = () => {
     if (isUser) {
-      return /* @__PURE__ */ jsx8("div", { className: "whitespace-pre-wrap !text-sm leading-relaxed", children: message.content });
+      return /* @__PURE__ */ jsx9("div", { className: "whitespace-pre-wrap !text-sm leading-relaxed", children: message.content });
     }
     if (contentSegments && contentSegments.length > 0) {
-      return /* @__PURE__ */ jsx8("div", { children: contentSegments.map((segment, index) => {
+      return /* @__PURE__ */ jsx9("div", { children: contentSegments.map((segment, index) => {
         if (segment.type === "text") {
-          return segment.content ? /* @__PURE__ */ jsx8(MarkdownContent, { content: segment.content }, `text-${index}`) : null;
+          return segment.content ? /* @__PURE__ */ jsx9(MarkdownContent, { content: segment.content }, `text-${index}`) : null;
         } else if (segment.type === "tool") {
-          return /* @__PURE__ */ jsx8("div", { className: "my-2", children: /* @__PURE__ */ jsx8(
+          return /* @__PURE__ */ jsx9("div", { className: "my-2", children: /* @__PURE__ */ jsx9(
             ToolCall,
             {
               name: segment.name,
@@ -704,45 +861,205 @@ function Message({ message, onAction }) {
         return null;
       }) });
     }
-    return /* @__PURE__ */ jsx8(MarkdownContent, { content: message.content });
+    return /* @__PURE__ */ jsx9(MarkdownContent, { content: message.content });
   };
   return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: cn(
         "max-w-[80%]",
-        isUser ? "px-4 py-2.5 rounded-xl bg-gray-100 dark:bg-gray-800 !text-gray-900 dark:!text-gray-100 ml-auto" : "!text-gray-900 dark:!text-gray-100"
+        isUser ? "px-4 py-2.5 rounded-xl bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 !text-gray-900 dark:!text-gray-100 ml-auto" : "!text-gray-900 dark:!text-gray-100"
       ),
       children: [
         renderContent(),
-        message.widgets && message.widgets.length > 0 && /* @__PURE__ */ jsx8("div", { className: cn(isUser ? "mt-3" : "mt-2"), children: /* @__PURE__ */ jsx8(Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
-        /* @__PURE__ */ jsx8("div", { className: cn("!text-xs opacity-70", isUser ? "mt-1.5 !text-gray-500 dark:!text-gray-400" : "mt-1 !text-gray-500 dark:!text-gray-400"), suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
+        message.widgets && message.widgets.length > 0 && /* @__PURE__ */ jsx9("div", { className: cn(isUser ? "mt-3" : "mt-2"), children: /* @__PURE__ */ jsx9(Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
+        /* @__PURE__ */ jsx9("div", { className: cn("!text-xs opacity-70", isUser ? "mt-1.5 !text-gray-500 dark:!text-gray-400" : "mt-1 !text-gray-500 dark:!text-gray-400"), suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
       ]
     }
   );
 }
 
+// src/components/Chat/WelcomeScreen.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var DefaultIcon = () => /* @__PURE__ */ jsx10("svg", { className: "w-12 h-12 sm:w-16 sm:h-16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10(
+  "path",
+  {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: 1.5,
+    d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+  }
+) });
+var ArrowIcon = () => /* @__PURE__ */ jsx10("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 7l5 5m0 0l-5 5m5-5H6" }) });
+function WelcomeScreen({
+  title,
+  subtitle,
+  icon,
+  prompts,
+  variant = "centered",
+  onPromptClick
+}) {
+  const normalizedPrompts = (prompts || []).map(
+    (p) => typeof p === "string" ? { text: p } : p
+  );
+  const hasPrompts = normalizedPrompts.length > 0;
+  const hasHeader = title || subtitle || icon;
+  if (!hasHeader && !hasPrompts) {
+    return /* @__PURE__ */ jsx10("div", { className: "flex items-center justify-center h-full !text-gray-500 dark:!text-gray-400", children: /* @__PURE__ */ jsxs7("div", { className: "text-center space-y-2", children: [
+      /* @__PURE__ */ jsx10("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx10(DefaultIcon, {}) }),
+      /* @__PURE__ */ jsx10("p", { className: "text-sm", children: "No messages yet. Start a conversation!" })
+    ] }) });
+  }
+  if (variant === "minimal") {
+    return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col h-full px-4 py-4", children: [
+      hasHeader && /* @__PURE__ */ jsxs7("div", { className: "mb-4", children: [
+        title && /* @__PURE__ */ jsx10("h2", { className: "text-lg font-semibold !text-gray-900 dark:!text-white", children: title }),
+        subtitle && /* @__PURE__ */ jsx10("p", { className: "text-sm !text-gray-500 dark:!text-gray-400 mt-1", children: subtitle })
+      ] }),
+      hasPrompts && /* @__PURE__ */ jsx10("div", { className: "flex-1 space-y-2", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx10(
+        "button",
+        {
+          onClick: () => onPromptClick(prompt.text),
+          className: cn(
+            "w-full text-left px-4 py-3 rounded-xl",
+            "bg-gray-50 dark:bg-gray-800/50",
+            "border border-gray-200 dark:border-gray-700",
+            "hover:bg-gray-100 dark:hover:bg-gray-800",
+            "hover:border-gray-300 dark:hover:border-gray-600",
+            "transition-all duration-200",
+            "group"
+          ),
+          children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx10("div", { className: "flex-shrink-0 !text-gray-400 dark:!text-gray-500 group-hover:!text-blue-500 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ jsx10(ArrowIcon, {}) }),
+            /* @__PURE__ */ jsxs7("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx10("p", { className: "text-sm font-medium !text-gray-900 dark:!text-white truncate", children: prompt.text }),
+              prompt.description && /* @__PURE__ */ jsx10("p", { className: "text-xs !text-gray-500 dark:!text-gray-400 mt-0.5 truncate", children: prompt.description })
+            ] })
+          ] })
+        },
+        index
+      )) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-center justify-center h-full px-4 py-6 sm:py-8", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "text-center mb-6 sm:mb-8 max-w-md", children: [
+      /* @__PURE__ */ jsx10("div", { className: "mb-4 !text-gray-400 dark:!text-gray-500 flex justify-center", children: icon || /* @__PURE__ */ jsx10(DefaultIcon, {}) }),
+      title && /* @__PURE__ */ jsx10("h1", { className: "text-xl sm:text-2xl font-semibold !text-gray-900 dark:!text-white mb-2", children: title }),
+      subtitle && /* @__PURE__ */ jsx10("p", { className: "text-sm sm:text-base !text-gray-500 dark:!text-gray-400", children: subtitle })
+    ] }),
+    hasPrompts && /* @__PURE__ */ jsxs7("div", { className: "w-full max-w-2xl", children: [
+      /* @__PURE__ */ jsx10("div", { className: "sm:hidden space-y-2", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx10(
+        "button",
+        {
+          onClick: () => onPromptClick(prompt.text),
+          className: cn(
+            "w-full text-left px-4 py-3 rounded-xl",
+            "bg-white dark:bg-gray-800",
+            "border border-gray-200 dark:border-gray-700",
+            "hover:bg-gray-50 dark:hover:bg-gray-700",
+            "hover:border-blue-300 dark:hover:border-blue-600",
+            "active:scale-[0.98]",
+            "transition-all duration-200",
+            "shadow-sm hover:shadow",
+            "group"
+          ),
+          children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx10("div", { className: "flex-shrink-0 w-8 h-8 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center !text-gray-500 dark:!text-gray-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:!text-blue-600 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ jsx10(ArrowIcon, {}) }),
+            /* @__PURE__ */ jsxs7("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx10("p", { className: "text-sm font-medium !text-gray-900 dark:!text-white", children: prompt.text }),
+              prompt.description && /* @__PURE__ */ jsx10("p", { className: "text-xs !text-gray-500 dark:!text-gray-400 mt-0.5 line-clamp-1", children: prompt.description })
+            ] }),
+            /* @__PURE__ */ jsx10(
+              "svg",
+              {
+                className: "w-4 h-4 !text-gray-400 group-hover:!text-blue-500 transition-colors flex-shrink-0",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ jsx10(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M9 5l7 7-7 7"
+                  }
+                )
+              }
+            )
+          ] })
+        },
+        index
+      )) }),
+      /* @__PURE__ */ jsx10("div", { className: "hidden sm:grid sm:grid-cols-2 gap-3", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx10(
+        "button",
+        {
+          onClick: () => onPromptClick(prompt.text),
+          className: cn(
+            "text-left p-4 rounded-xl",
+            "bg-white dark:bg-gray-800",
+            "border border-gray-200 dark:border-gray-700",
+            "hover:bg-gray-50 dark:hover:bg-gray-700",
+            "hover:border-blue-300 dark:hover:border-blue-600",
+            "hover:shadow-md",
+            "active:scale-[0.98]",
+            "transition-all duration-200",
+            "group"
+          ),
+          children: /* @__PURE__ */ jsxs7("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx10("div", { className: "flex-shrink-0 w-9 h-9 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center !text-gray-500 dark:!text-gray-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:!text-blue-600 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ jsx10(ArrowIcon, {}) }),
+            /* @__PURE__ */ jsxs7("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx10("p", { className: "text-sm font-medium !text-gray-900 dark:!text-white leading-snug", children: prompt.text }),
+              prompt.description && /* @__PURE__ */ jsx10("p", { className: "text-xs !text-gray-500 dark:!text-gray-400 mt-1 line-clamp-2", children: prompt.description })
+            ] })
+          ] })
+        },
+        index
+      )) })
+    ] })
+  ] });
+}
+
 // src/components/Chat/MessageList.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-function MessageList({ messages, onAction }) {
+import { jsx as jsx11 } from "react/jsx-runtime";
+function MessageList({
+  messages,
+  onAction,
+  welcomeTitle,
+  welcomeSubtitle,
+  welcomeIcon,
+  suggestedPrompts,
+  welcomeVariant,
+  onPromptClick
+}) {
   const listRef = useRef(null);
   useEffect2(() => {
     if (listRef.current) {
       listRef.current.scrollTop = listRef.current.scrollHeight;
     }
   }, [messages]);
-  return /* @__PURE__ */ jsx9("div", { ref: listRef, className: "flex-1 overflow-y-auto px-4 py-4 space-y-3 apteva-scrollbar-hidden", children: messages.length === 0 ? /* @__PURE__ */ jsx9("div", { className: "flex items-center justify-center h-full !text-gray-500 dark:!text-gray-400", children: /* @__PURE__ */ jsxs7("div", { className: "text-center space-y-2", children: [
-    /* @__PURE__ */ jsx9("div", { className: "text-4xl", children: "\u{1F4AC}" }),
-    /* @__PURE__ */ jsx9("p", { children: "No messages yet. Start a conversation!" })
-  ] }) }) : messages.map((message) => /* @__PURE__ */ jsx9(Message, { message, onAction }, message.id)) });
+  return /* @__PURE__ */ jsx11("div", { ref: listRef, className: "flex-1 overflow-y-auto px-4 py-4 space-y-3 apteva-scrollbar-hidden", children: messages.length === 0 ? /* @__PURE__ */ jsx11(
+    WelcomeScreen,
+    {
+      title: welcomeTitle,
+      subtitle: welcomeSubtitle,
+      icon: welcomeIcon,
+      prompts: suggestedPrompts,
+      variant: welcomeVariant,
+      onPromptClick: onPromptClick || (() => {
+      })
+    }
+  ) : messages.map((message) => /* @__PURE__ */ jsx11(Message, { message, onAction }, message.id)) });
 }
 
 // src/components/Chat/Composer.tsx
 import { useState, useRef as useRef2 } from "react";
-import { Fragment, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
-function Composer({ onSendMessage, placeholder = "Type a message...", disabled = false, onFileUpload }) {
+import { Fragment, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+function Composer({ onSendMessage, placeholder = "Type a message...", disabled = false, onFileUpload, onSwitchMode }) {
   const [text, setText] = useState("");
   const [showMenu, setShowMenu] = useState(false);
+  const [pendingFiles, setPendingFiles] = useState([]);
+  const [fileError, setFileError] = useState(null);
   const textareaRef = useRef2(null);
   const fileInputRef = useRef2(null);
   const handleKeyDown = (e) => {
@@ -752,9 +1069,14 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
     }
   };
   const handleSend = () => {
-    if (text.trim() && !disabled) {
-      onSendMessage(text.trim());
+    const hasText = text.trim();
+    const hasFiles = pendingFiles.length > 0;
+    if ((hasText || hasFiles) && !disabled) {
+      const filesToSend = pendingFiles.map((pf) => pf.file);
+      onSendMessage(text.trim(), filesToSend.length > 0 ? filesToSend : void 0);
       setText("");
+      setPendingFiles([]);
+      setFileError(null);
       if (textareaRef.current) {
         textareaRef.current.style.height = "auto";
       }
@@ -767,36 +1089,123 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
   };
   const handleFileSelect = (e) => {
     if (e.target.files && e.target.files.length > 0) {
+      const files = Array.from(e.target.files);
+      const validFiles = [];
+      const errors = [];
+      files.forEach((file) => {
+        const validation = validateFile(file);
+        if (validation.valid) {
+          const pending = { file };
+          if (file.type.startsWith("image/")) {
+            pending.preview = URL.createObjectURL(file);
+          }
+          validFiles.push(pending);
+        } else {
+          errors.push(validation.error || "Invalid file");
+        }
+      });
+      if (validFiles.length > 0) {
+        setPendingFiles((prev) => [...prev, ...validFiles]);
+      }
+      if (errors.length > 0) {
+        setFileError(errors.join(", "));
+        setTimeout(() => setFileError(null), 5e3);
+      }
       onFileUpload?.(e.target.files);
       setShowMenu(false);
+      e.target.value = "";
     }
   };
-  return /* @__PURE__ */ jsxs8("div", { className: "px-4 py-3 bg-white dark:bg-gray-900 relative", children: [
+  const removeFile = (index) => {
+    setPendingFiles((prev) => {
+      const file = prev[index];
+      if (file.preview) {
+        URL.revokeObjectURL(file.preview);
+      }
+      return prev.filter((_, i) => i !== index);
+    });
+  };
+  const getFileIcon = (mimeType) => {
+    if (mimeType.startsWith("image/")) {
+      return /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) });
+    }
+    if (mimeType === "application/pdf") {
+      return /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) });
+    }
+    return /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) });
+  };
+  return /* @__PURE__ */ jsxs8("div", { className: "px-4 py-3 relative", children: [
+    fileError && /* @__PURE__ */ jsx12("div", { className: "absolute bottom-full left-4 right-4 mb-2 p-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg z-20", children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 !text-red-700 dark:!text-red-300 text-sm", children: [
+      /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+      /* @__PURE__ */ jsx12("span", { children: fileError })
+    ] }) }),
     showMenu && /* @__PURE__ */ jsxs8(Fragment, { children: [
-      /* @__PURE__ */ jsx10("div", { className: "fixed inset-0 z-10", onClick: () => setShowMenu(false) }),
-      /* @__PURE__ */ jsx10("div", { className: "absolute bottom-full left-4 mb-2 bg-gray-800 dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden z-20 min-w-[240px]", children: /* @__PURE__ */ jsxs8(
-        "button",
-        {
-          onClick: () => fileInputRef.current?.click(),
-          className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left",
-          children: [
-            /* @__PURE__ */ jsx10("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx10("path", { d: "M10.5 3.5L5.5 8.5C4.67157 9.32843 4.67157 10.6716 5.5 11.5C6.32843 12.3284 7.67157 12.3284 8.5 11.5L14.5 5.5C15.8807 4.11929 15.8807 1.88071 14.5 0.5C13.1193 -0.880711 10.8807 -0.880711 9.5 0.5L3.5 6.5C1.56846 8.43154 1.56846 11.5685 3.5 13.5C5.43154 15.4315 8.56846 15.4315 10.5 13.5L15.5 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(2, 3)" }) }),
-            /* @__PURE__ */ jsx10("span", { className: "!text-sm font-medium", children: "Add photos & files" })
-          ]
-        }
-      ) })
+      /* @__PURE__ */ jsx12("div", { className: "fixed inset-0 z-10", onClick: () => setShowMenu(false) }),
+      /* @__PURE__ */ jsxs8("div", { className: "absolute bottom-full left-4 mb-2 bg-gray-800 dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden z-20 min-w-[240px]", children: [
+        /* @__PURE__ */ jsxs8(
+          "button",
+          {
+            onClick: () => {
+              fileInputRef.current?.click();
+              setShowMenu(false);
+            },
+            className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left",
+            children: [
+              /* @__PURE__ */ jsx12("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx12("path", { d: "M10.5 3.5L5.5 8.5C4.67157 9.32843 4.67157 10.6716 5.5 11.5C6.32843 12.3284 7.67157 12.3284 8.5 11.5L14.5 5.5C15.8807 4.11929 15.8807 1.88071 14.5 0.5C13.1193 -0.880711 10.8807 -0.880711 9.5 0.5L3.5 6.5C1.56846 8.43154 1.56846 11.5685 3.5 13.5C5.43154 15.4315 8.56846 15.4315 10.5 13.5L15.5 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(2, 3)" }) }),
+              /* @__PURE__ */ jsx12("span", { className: "!text-sm font-medium", children: "Add photos & files" })
+            ]
+          }
+        ),
+        onSwitchMode && /* @__PURE__ */ jsxs8(
+          "button",
+          {
+            onClick: () => {
+              onSwitchMode();
+              setShowMenu(false);
+            },
+            className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left border-t border-gray-700 dark:border-gray-600",
+            children: [
+              /* @__PURE__ */ jsx12("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }),
+              /* @__PURE__ */ jsx12("span", { className: "!text-sm font-medium", children: "Switch to command mode" })
+            ]
+          }
+        )
+      ] })
     ] }),
+    pendingFiles.length > 0 && /* @__PURE__ */ jsx12("div", { className: "mb-2 flex flex-wrap gap-2", children: pendingFiles.map((pf, index) => /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        className: "relative group flex items-center gap-2 px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg",
+        children: [
+          pf.preview ? /* @__PURE__ */ jsx12("img", { src: pf.preview, alt: pf.file.name, className: "w-8 h-8 object-cover rounded" }) : /* @__PURE__ */ jsx12("div", { className: "w-8 h-8 flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded !text-gray-500 dark:!text-gray-400", children: getFileIcon(pf.file.type) }),
+          /* @__PURE__ */ jsxs8("div", { className: "flex flex-col min-w-0", children: [
+            /* @__PURE__ */ jsx12("span", { className: "text-xs font-medium !text-gray-700 dark:!text-gray-300 truncate max-w-[120px]", children: pf.file.name }),
+            /* @__PURE__ */ jsx12("span", { className: "text-xs !text-gray-500 dark:!text-gray-400", children: formatFileSize(pf.file.size) })
+          ] }),
+          /* @__PURE__ */ jsx12(
+            "button",
+            {
+              onClick: () => removeFile(index),
+              className: "absolute -top-1.5 -right-1.5 w-5 h-5 bg-gray-500 hover:bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",
+              title: "Remove file",
+              children: /* @__PURE__ */ jsx12("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+            }
+          )
+        ]
+      },
+      index
+    )) }),
     /* @__PURE__ */ jsxs8("div", { className: "relative border-2 border-gray-300 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-900 transition-all duration-300 flex items-center px-3 py-2 gap-3", children: [
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx12(
         "button",
         {
           onClick: () => setShowMenu(!showMenu),
           className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-gray-700 dark:!text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800",
           title: "More options",
-          children: /* @__PURE__ */ jsx10("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx10("path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+          children: /* @__PURE__ */ jsx12("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx12("path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
         }
       ),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx12(
         "textarea",
         {
           ref: textareaRef,
@@ -810,18 +1219,351 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
           style: { maxHeight: "120px" }
         }
       ),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx12(
         "button",
         {
           onClick: handleSend,
-          disabled: !text.trim() || disabled,
+          disabled: !text.trim() && pendingFiles.length === 0 || disabled,
           className: "w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 !text-gray-700 dark:!text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed !text-lg",
           title: "Send message",
-          children: /* @__PURE__ */ jsx10("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx10("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+          children: /* @__PURE__ */ jsx12("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx12("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx12(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        multiple: true,
+        onChange: handleFileSelect,
+        className: "hidden",
+        accept: "image/*,application/pdf,.doc,.docx,.txt"
+      }
+    )
+  ] });
+}
+
+// src/components/Chat/CommandComposer.tsx
+import { useState as useState2, useRef as useRef3 } from "react";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+function CommandComposer({
+  onExecute,
+  state,
+  response,
+  error,
+  plan,
+  streamedContent,
+  toolName,
+  onApprove,
+  onReject,
+  onReset,
+  onExpand,
+  placeholder = "Enter your command...",
+  disabled = false
+}) {
+  const [input, setInput] = useState2("");
+  const [pendingFiles, setPendingFiles] = useState2([]);
+  const [fileError, setFileError] = useState2(null);
+  const [showMenu, setShowMenu] = useState2(false);
+  const inputRef = useRef3(null);
+  const fileInputRef = useRef3(null);
+  const menuButtonRef = useRef3(null);
+  const handleSubmit = () => {
+    const hasText = input.trim();
+    const hasFiles = pendingFiles.length > 0;
+    if ((hasText || hasFiles) && !disabled && state === "idle") {
+      const filesToSend = pendingFiles.map((pf) => pf.file);
+      onExecute(input.trim(), filesToSend.length > 0 ? filesToSend : void 0);
+      setInput("");
+      setPendingFiles([]);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+  const handleNewCommand = () => {
+    onReset?.();
+    inputRef.current?.focus();
+  };
+  const handleInputChange = (value) => {
+    setInput(value);
+    if (inputRef.current) {
+      inputRef.current.style.height = "auto";
+      inputRef.current.style.height = `${Math.min(inputRef.current.scrollHeight, 120)}px`;
+    }
+  };
+  const handleFileSelect = (e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const files = Array.from(e.target.files);
+      const validFiles = [];
+      const errors = [];
+      files.forEach((file) => {
+        const validation = validateFile(file);
+        if (validation.valid) {
+          const pending = { file };
+          if (file.type.startsWith("image/")) {
+            pending.preview = URL.createObjectURL(file);
+          }
+          validFiles.push(pending);
+        } else {
+          errors.push(validation.error || "Invalid file");
+        }
+      });
+      if (validFiles.length > 0) {
+        setPendingFiles((prev) => [...prev, ...validFiles]);
+      }
+      if (errors.length > 0) {
+        setFileError(errors.join(", "));
+        setTimeout(() => setFileError(null), 5e3);
+      }
+      setShowMenu(false);
+      e.target.value = "";
+    }
+  };
+  const removeFile = (index) => {
+    setPendingFiles((prev) => {
+      const file = prev[index];
+      if (file.preview) {
+        URL.revokeObjectURL(file.preview);
+      }
+      return prev.filter((_, i) => i !== index);
+    });
+  };
+  const getFileIcon = (mimeType) => {
+    if (mimeType.startsWith("image/")) {
+      return /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) });
+    }
+    if (mimeType === "application/pdf") {
+      return /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) });
+    }
+    return /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) });
+  };
+  const getDisplayContent = () => {
+    if (state === "loading") {
+      if (toolName) {
+        return { text: toolName, isToolCall: true };
+      }
+      if (streamedContent) {
+        return { text: streamedContent, isToolCall: false };
+      }
+      return { text: "Processing...", isToolCall: false };
+    }
+    if (state === "success" && response) {
+      return { text: response, isToolCall: false };
+    }
+    if (state === "error" && error) {
+      return { text: error, isToolCall: false };
+    }
+    if (state === "plan-pending" && plan) {
+      return { text: plan, isToolCall: false };
+    }
+    return { text: "", isToolCall: false };
+  };
+  const isShowingResult = state !== "idle";
+  const { text: displayContent, isToolCall } = getDisplayContent();
+  return /* @__PURE__ */ jsxs9("div", { className: "w-full relative", children: [
+    fileError && /* @__PURE__ */ jsx13("div", { className: "absolute -top-12 left-0 right-0 mx-3 p-2 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg z-30", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 !text-red-700 dark:!text-red-300 text-xs", children: [
+      /* @__PURE__ */ jsx13("svg", { className: "w-3 h-3 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+      /* @__PURE__ */ jsx13("span", { children: fileError })
+    ] }) }),
+    showMenu && /* @__PURE__ */ jsxs9(Fragment2, { children: [
+      /* @__PURE__ */ jsx13("div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
+      /* @__PURE__ */ jsxs9(
+        "div",
+        {
+          className: "fixed bg-gray-800 dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
+          style: {
+            bottom: "auto",
+            left: menuButtonRef.current?.getBoundingClientRect().left ?? 0,
+            top: (menuButtonRef.current?.getBoundingClientRect().top ?? 0) - 8,
+            transform: "translateY(-100%)"
+          },
+          children: [
+            /* @__PURE__ */ jsxs9(
+              "button",
+              {
+                onClick: () => {
+                  fileInputRef.current?.click();
+                  setShowMenu(false);
+                },
+                className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left",
+                children: [
+                  /* @__PURE__ */ jsx13("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx13("path", { d: "M10.5 3.5L5.5 8.5C4.67157 9.32843 4.67157 10.6716 5.5 11.5C6.32843 12.3284 7.67157 12.3284 8.5 11.5L14.5 5.5C15.8807 4.11929 15.8807 1.88071 14.5 0.5C13.1193 -0.880711 10.8807 -0.880711 9.5 0.5L3.5 6.5C1.56846 8.43154 1.56846 11.5685 3.5 13.5C5.43154 15.4315 8.56846 15.4315 10.5 13.5L15.5 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(2, 3)" }) }),
+                  /* @__PURE__ */ jsx13("span", { className: "!text-sm font-medium", children: "Add photos & files" })
+                ]
+              }
+            ),
+            onExpand && /* @__PURE__ */ jsxs9(
+              "button",
+              {
+                onClick: () => {
+                  onExpand();
+                  setShowMenu(false);
+                },
+                className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left border-t border-gray-700 dark:border-gray-600",
+                children: [
+                  /* @__PURE__ */ jsx13("svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
+                  /* @__PURE__ */ jsx13("span", { className: "!text-sm font-medium", children: "Expand to chat" })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    pendingFiles.length > 0 && state === "idle" && /* @__PURE__ */ jsx13("div", { className: "mb-2 flex flex-wrap gap-2", children: pendingFiles.map((pf, index) => /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        className: "relative group flex items-center gap-2 px-2 py-1.5 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg",
+        children: [
+          pf.preview ? /* @__PURE__ */ jsx13("img", { src: pf.preview, alt: pf.file.name, className: "w-6 h-6 object-cover rounded" }) : /* @__PURE__ */ jsx13("div", { className: "w-6 h-6 flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded !text-gray-500 dark:!text-gray-400", children: getFileIcon(pf.file.type) }),
+          /* @__PURE__ */ jsx13("span", { className: "text-xs font-medium !text-gray-700 dark:!text-gray-300 truncate max-w-[100px]", children: pf.file.name }),
+          /* @__PURE__ */ jsx13(
+            "button",
+            {
+              onClick: () => removeFile(index),
+              className: "w-4 h-4 bg-gray-500 hover:bg-red-500 text-white rounded-full flex items-center justify-center",
+              title: "Remove file",
+              children: /* @__PURE__ */ jsx13("svg", { className: "w-2.5 h-2.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+            }
+          )
+        ]
+      },
+      index
+    )) }),
+    /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-2 px-3 py-2 border-2 rounded-2xl bg-white dark:bg-gray-900 transition-all duration-200",
+          state === "idle" && "border-gray-200 dark:border-gray-700",
+          state === "loading" && "border-blue-400 dark:border-blue-500",
+          state === "plan-pending" && "border-amber-400 dark:border-amber-500",
+          state === "success" && "border-green-400 dark:border-green-500",
+          state === "error" && "border-red-400 dark:border-red-500"
+        ),
+        children: [
+          state === "idle" && /* @__PURE__ */ jsx13(
+            "button",
+            {
+              ref: menuButtonRef,
+              onClick: () => setShowMenu(!showMenu),
+              className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-gray-500 dark:!text-gray-400 hover:!text-gray-700 dark:hover:!text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800",
+              title: "More options",
+              children: /* @__PURE__ */ jsx13("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx13("path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+            }
+          ),
+          state === "loading" && !toolName && /* @__PURE__ */ jsx13("div", { className: "w-4 h-4 border-2 border-blue-200 border-t-blue-500 rounded-full animate-spin flex-shrink-0" }),
+          state === "loading" && toolName && /* @__PURE__ */ jsx13("div", { className: "w-2 h-2 rounded-full bg-blue-500 animate-pulse flex-shrink-0" }),
+          state === "idle" ? /* @__PURE__ */ jsx13(
+            "textarea",
+            {
+              ref: inputRef,
+              value: input,
+              onChange: (e) => handleInputChange(e.target.value),
+              onKeyDown: handleKeyDown,
+              placeholder,
+              disabled,
+              rows: 1,
+              className: cn(
+                "flex-1 resize-none bg-transparent border-none focus:outline-none",
+                "!text-gray-900 dark:!text-gray-100 placeholder-gray-400 dark:placeholder-gray-500",
+                "text-sm leading-relaxed py-1",
+                "disabled:opacity-50"
+              ),
+              style: { minHeight: "24px", maxHeight: "120px" }
+            }
+          ) : /* @__PURE__ */ jsx13(
+            "div",
+            {
+              className: cn(
+                "flex-1 text-sm py-1 truncate flex items-center gap-2",
+                state === "loading" && !isToolCall && "!text-gray-600 dark:!text-gray-400",
+                state === "loading" && isToolCall && "!text-blue-600 dark:!text-blue-400",
+                state === "success" && "!text-gray-900 dark:!text-gray-100",
+                state === "error" && "!text-red-600 dark:!text-red-400",
+                state === "plan-pending" && "!text-amber-700 dark:!text-amber-300"
+              ),
+              children: isToolCall ? /* @__PURE__ */ jsxs9(Fragment2, { children: [
+                /* @__PURE__ */ jsx13("span", { className: "font-mono", children: displayContent }),
+                /* @__PURE__ */ jsx13("span", { className: "text-gray-400 dark:text-gray-500", children: "Running..." })
+              ] }) : displayContent
+            }
+          ),
+          /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
+            state === "plan-pending" && /* @__PURE__ */ jsxs9(Fragment2, { children: [
+              /* @__PURE__ */ jsx13(
+                "button",
+                {
+                  onClick: onApprove,
+                  className: "px-2 py-1 bg-amber-500 text-white rounded-lg hover:bg-amber-600 transition-colors text-xs font-medium",
+                  children: "Approve"
+                }
+              ),
+              /* @__PURE__ */ jsx13(
+                "button",
+                {
+                  onClick: onReject,
+                  className: "px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors text-xs font-medium",
+                  children: "Modify"
+                }
+              )
+            ] }),
+            (state === "success" || state === "error") && /* @__PURE__ */ jsx13(
+              "button",
+              {
+                onClick: handleNewCommand,
+                className: "w-8 h-8 rounded-lg flex items-center justify-center !text-gray-400 hover:!text-gray-600 dark:hover:!text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
+                title: "New command",
+                children: /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            ),
+            state === "idle" && /* @__PURE__ */ jsx13(
+              "button",
+              {
+                onClick: handleSubmit,
+                disabled: !input.trim() && pendingFiles.length === 0 || disabled,
+                className: cn(
+                  "w-8 h-8 rounded-lg flex items-center justify-center transition-all",
+                  "border border-gray-200 dark:border-gray-700",
+                  "disabled:opacity-30 disabled:cursor-not-allowed",
+                  input.trim() || pendingFiles.length > 0 ? "bg-gray-900 dark:bg-white !text-white dark:!text-gray-900 border-gray-900 dark:border-white" : "bg-white dark:bg-gray-800 !text-gray-400"
+                ),
+                title: "Execute command",
+                children: /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 12h14M12 5l7 7-7 7" }) })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    state === "success" && response?.includes("weather") && /* @__PURE__ */ jsx13("div", { className: "mt-3 p-3 bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-blue-900/20 dark:to-cyan-900/20 border border-blue-200 dark:border-blue-800 rounded-xl", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx13("div", { className: "text-3xl", children: "\u2600\uFE0F" }),
+      /* @__PURE__ */ jsxs9("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsx13("div", { className: "text-sm font-medium text-gray-900 dark:text-white", children: "Paris, France" }),
+        /* @__PURE__ */ jsx13("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Sunny, 22\xB0C" })
+      ] }),
+      /* @__PURE__ */ jsx13("button", { className: "px-3 py-1 text-xs bg-blue-500 text-white rounded-lg hover:bg-blue-600", children: "Details" })
+    ] }) }),
+    state === "success" && response?.includes("trip") && /* @__PURE__ */ jsxs9("div", { className: "mt-3 p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm", children: [
+      /* @__PURE__ */ jsx13("img", { src: "https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=400&h=150&fit=crop", alt: "Paris", className: "w-full h-24 object-cover rounded-lg mb-2" }),
+      /* @__PURE__ */ jsx13("div", { className: "text-sm font-medium text-gray-900 dark:text-white", children: "Paris Weekend Getaway" }),
+      /* @__PURE__ */ jsx13("div", { className: "text-xs text-gray-500 dark:text-gray-400 mb-2", children: "3 days \xB7 $850" }),
+      /* @__PURE__ */ jsxs9("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx13("button", { className: "flex-1 px-2 py-1 text-xs bg-blue-500 text-white rounded-lg hover:bg-blue-600", children: "Book" }),
+        /* @__PURE__ */ jsx13("button", { className: "flex-1 px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600", children: "Details" })
+      ] })
+    ] }),
+    state === "success" && response?.includes("task") && /* @__PURE__ */ jsx13("div", { className: "mt-3 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden", children: ["Review PR #123", "Update documentation", "Fix login bug"].map((task, i) => /* @__PURE__ */ jsxs9("div", { className: `flex items-center gap-2 px-3 py-2 ${i > 0 ? "border-t border-gray-100 dark:border-gray-800" : ""}`, children: [
+      /* @__PURE__ */ jsx13("div", { className: `w-2 h-2 rounded-full ${i === 0 ? "bg-green-500" : i === 1 ? "bg-yellow-500" : "bg-red-500"}` }),
+      /* @__PURE__ */ jsx13("span", { className: "flex-1 text-sm text-gray-700 dark:text-gray-300", children: task }),
+      /* @__PURE__ */ jsx13("button", { className: "text-xs text-blue-500 hover:text-blue-600", children: "View" })
+    ] }, i)) }),
+    /* @__PURE__ */ jsx13(
       "input",
       {
         ref: fileInputRef,
@@ -836,7 +1578,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
 }
 
 // src/lib/apteva-client.ts
-var DEFAULT_API_URL = "http://localhost:3000/agents";
+var DEFAULT_API_URL = "http://91.99.200.48:3000/agents";
 var DEFAULT_API_KEY = "agt_894abd5966bc9f1e9f8f17f2a6f6b5e0";
 var AptevaClient = class {
   constructor() {
@@ -1000,7 +1742,7 @@ var AptevaClient = class {
 var aptevaClient = new AptevaClient();
 
 // src/components/Chat/Chat.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function Chat({
   agentId,
   threadId,
@@ -1009,18 +1751,52 @@ function Chat({
   apiUrl,
   apiKey,
   useMock = false,
+  // Mode switching
+  initialMode = "chat",
+  showModeToggle = false,
+  onModeChange,
+  // Command mode options
+  commandVariant = "default",
+  planMode = false,
+  onPlanModeChange,
+  enableStreaming = true,
+  showProgress = true,
+  loadingText = "Processing...",
+  // Welcome screen
+  welcomeTitle,
+  welcomeSubtitle,
+  welcomeIcon,
+  suggestedPrompts,
+  welcomeVariant,
+  // Events
   onThreadChange,
   onMessageSent,
   onAction,
   onFileUpload,
-  placeholder = "Type a message...",
+  onComplete,
+  onError,
+  // UI
+  placeholder,
   showHeader = true,
   headerTitle = "Chat",
   className
 }) {
-  const [messages, setMessages] = useState2(initialMessages);
-  const [isLoading, setIsLoading] = useState2(false);
-  const [currentThreadId, setCurrentThreadId] = useState2(threadId || null);
+  const [messages, setMessages] = useState3(initialMessages);
+  const [isLoading, setIsLoading] = useState3(false);
+  const [currentThreadId, setCurrentThreadId] = useState3(threadId || null);
+  const [mode, setMode] = useState3(initialMode);
+  const [commandState, setCommandState] = useState3("idle");
+  const [commandResult, setCommandResult] = useState3(null);
+  const [commandError, setCommandError] = useState3(null);
+  const [progress, setProgress] = useState3(0);
+  const [commandInput, setCommandInput] = useState3("");
+  const [streamedContent, setStreamedContent] = useState3("");
+  const [currentToolName, setCurrentToolName] = useState3(null);
+  const [plan, setPlan] = useState3("");
+  const [pendingCommand, setPendingCommand] = useState3("");
+  const [internalPlanMode, setInternalPlanMode] = useState3(planMode);
+  const [showSettingsMenu, setShowSettingsMenu] = useState3(false);
+  const fileInputRef = useRef4(null);
   useEffect3(() => {
     if (apiUrl || apiKey) {
       aptevaClient.configure({
@@ -1031,21 +1807,48 @@ function Chat({
   }, [apiUrl, apiKey]);
   useEffect3(() => {
     if (threadId) {
-      console.log("Loading thread:", threadId);
       onThreadChange?.(threadId);
     }
   }, [threadId, onThreadChange]);
-  const handleSendMessage = async (text) => {
+  useEffect3(() => {
+    setInternalPlanMode(planMode);
+  }, [planMode]);
+  useEffect3(() => {
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      if (showSettingsMenu && !target.closest(".settings-menu-container")) {
+        setShowSettingsMenu(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [showSettingsMenu]);
+  const handleModeChange = (newMode) => {
+    setMode(newMode);
+    onModeChange?.(newMode);
+    if (newMode === "command") {
+      setCommandState("idle");
+      setCommandResult(null);
+      setCommandError(null);
+    }
+  };
+  const defaultPlaceholder = mode === "chat" ? "Type a message..." : "Enter your command...";
+  const handleSendMessage = async (text, files) => {
+    const hasFiles = files && files.length > 0;
+    const fileNames = hasFiles ? files.map((f) => f.name) : [];
+    const displayContent = hasFiles ? `${text}${text ? "\n" : ""}[Attached: ${fileNames.join(", ")}]` : text;
     const userMessage = {
       id: `msg-${Date.now()}`,
       role: "user",
-      content: text,
-      timestamp: /* @__PURE__ */ new Date()
+      content: displayContent,
+      timestamp: /* @__PURE__ */ new Date(),
+      metadata: hasFiles ? { attachments: fileNames } : void 0
     };
     setMessages((prev) => [...prev, userMessage]);
     onMessageSent?.(userMessage);
     setIsLoading(true);
     try {
+      const messagePayload = await buildMessageWithAttachments(text, files);
       if (useMock) {
         const response = await generateMockResponse(1e3);
         setMessages((prev) => [...prev, response]);
@@ -1074,10 +1877,7 @@ function Chat({
                   ...lastMessage,
                   content: currentTextBuffer,
                   widgets: accumulatedWidgets.length > 0 ? accumulatedWidgets : void 0,
-                  metadata: {
-                    ...lastMessage.metadata,
-                    content_segments: segments
-                  }
+                  metadata: { ...lastMessage.metadata, content_segments: segments }
                 }
               ];
             } else {
@@ -1089,9 +1889,7 @@ function Chat({
                   content: currentTextBuffer,
                   widgets: accumulatedWidgets.length > 0 ? accumulatedWidgets : void 0,
                   timestamp: /* @__PURE__ */ new Date(),
-                  metadata: {
-                    content_segments: segments
-                  }
+                  metadata: { content_segments: segments }
                 }
               ];
             }
@@ -1100,15 +1898,13 @@ function Chat({
         await aptevaClient.chatStream(
           {
             agent_id: agentId,
-            message: text,
+            message: messagePayload,
             stream: true,
             ...currentThreadId && { thread_id: currentThreadId },
             ...context && { system: context }
           },
           (chunk) => {
             switch (chunk.type) {
-              case "start":
-                break;
               case "thread_id":
                 if (chunk.thread_id) {
                   responseThreadId = chunk.thread_id;
@@ -1131,11 +1927,7 @@ function Chat({
                     contentSegments.push({ type: "text", content: currentTextBuffer });
                     currentTextBuffer = "";
                   }
-                  contentSegments.push({
-                    type: "tool",
-                    id: chunk.tool_id,
-                    name: chunk.tool_name
-                  });
+                  contentSegments.push({ type: "tool", id: chunk.tool_id, name: chunk.tool_name });
                   toolInputBuffer = "";
                   updateMessage();
                 }
@@ -1145,14 +1937,9 @@ function Chat({
                   toolInputBuffer += chunk.content;
                 }
                 break;
-              case "tool_use":
-                toolInputBuffer = "";
-                break;
               case "tool_result":
                 if (chunk.tool_id) {
-                  const toolSegment = contentSegments.find(
-                    (s) => s.type === "tool" && s.id === chunk.tool_id
-                  );
+                  const toolSegment = contentSegments.find((s) => s.type === "tool" && s.id === chunk.tool_id);
                   if (toolSegment) {
                     toolSegment.result = chunk.content;
                   }
@@ -1165,14 +1952,8 @@ function Chat({
                   updateMessage();
                 }
                 break;
-              case "stop":
-                break;
-              case "complete":
-                break;
               case "error":
                 throw new Error(chunk.message || "Stream error");
-              default:
-                break;
             }
           },
           (threadId2) => {
@@ -1194,10 +1975,7 @@ function Chat({
                     id: `msg-${Date.now()}`,
                     content: currentTextBuffer || "Response received",
                     widgets: accumulatedWidgets.length > 0 ? accumulatedWidgets : void 0,
-                    metadata: {
-                      thread_id: threadId2,
-                      content_segments: contentSegments
-                    }
+                    metadata: { thread_id: threadId2, content_segments: contentSegments }
                   }
                 ];
               }
@@ -1225,11 +2003,11 @@ function Chat({
               return [...prev, errorMessage];
             });
             setIsLoading(false);
+            onError?.(error);
           }
         );
       }
     } catch (error) {
-      console.error("Chat error:", error);
       const errorMessage = {
         id: `msg-${Date.now()}-error`,
         role: "assistant",
@@ -1238,21 +2016,280 @@ function Chat({
         metadata: { error: true }
       };
       setMessages((prev) => [...prev, errorMessage]);
+      onError?.(error instanceof Error ? error : new Error("Unknown error"));
     } finally {
       setIsLoading(false);
     }
   };
-  return /* @__PURE__ */ jsxs9("div", { className: cn("flex flex-col h-full bg-white dark:bg-gray-900", className), children: [
-    showHeader && /* @__PURE__ */ jsx11("div", { className: "px-4 py-3 bg-white dark:bg-gray-900", children: /* @__PURE__ */ jsx11("h2", { className: "!text-lg font-semibold !text-gray-900 dark:!text-white", children: headerTitle }) }),
-    /* @__PURE__ */ jsx11(MessageList, { messages, onAction }),
-    isLoading && /* @__PURE__ */ jsx11("div", { className: "px-4 py-2 !text-sm !text-gray-500 dark:!text-gray-400 italic", children: "AI is thinking..." }),
-    /* @__PURE__ */ jsx11(Composer, { onSendMessage: handleSendMessage, placeholder, disabled: isLoading, onFileUpload })
+  const executeCommand = async (commandOverride, files) => {
+    const currentCommand = commandOverride || commandInput;
+    if (!currentCommand.trim() && (!files || files.length === 0)) {
+      setCommandError(new Error("Please enter a command"));
+      setCommandState("error");
+      return;
+    }
+    if (internalPlanMode && commandState !== "plan-pending") {
+      setCommandState("loading");
+      setCommandError(null);
+      setCommandInput("");
+      if (useMock) {
+        setTimeout(() => {
+          const mockPlan = `1. Analyze the request: "${currentCommand}"
+2. Process the data
+3. Generate response
+4. Return results`;
+          setPlan(mockPlan);
+          setPendingCommand(currentCommand);
+          setCommandState("plan-pending");
+        }, 800);
+      } else {
+        try {
+          const planningInstruction = `CRITICAL PLANNING MODE: You are ONLY creating a plan. Write a numbered list of steps describing what WOULD be done. DO NOT execute anything.`;
+          const systemMessage = context ? `${context}
+
+${planningInstruction}` : planningInstruction;
+          const response = await aptevaClient.chat({
+            agent_id: agentId,
+            message: currentCommand,
+            stream: false,
+            system: systemMessage
+          });
+          setPlan(response.message);
+          setPendingCommand(currentCommand);
+          setCommandState("plan-pending");
+        } catch (err) {
+          const error = err instanceof Error ? err : new Error("Failed to generate plan");
+          setCommandError(error);
+          setCommandState("error");
+          onError?.(error);
+        }
+      }
+      return;
+    }
+    setCommandState("loading");
+    setCommandError(null);
+    setProgress(0);
+    setStreamedContent("");
+    setCommandInput("");
+    try {
+      if (useMock) {
+        if (enableStreaming) {
+          let accumulatedContent = "";
+          generateMockCommandStream(
+            currentCommand,
+            (chunk) => {
+              if (chunk.type === "token" && chunk.content) {
+                accumulatedContent += chunk.content;
+                setStreamedContent(accumulatedContent);
+                const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
+                setProgress(estimatedProgress);
+              }
+            },
+            (threadId2) => {
+              const result = {
+                success: true,
+                data: { summary: accumulatedContent, thread_id: threadId2 },
+                message: accumulatedContent || "Command executed successfully"
+              };
+              setCommandResult(result);
+              setCommandState("success");
+              setProgress(100);
+              onComplete?.(result);
+            },
+            (error) => {
+              setCommandError(error);
+              setCommandState("error");
+              onError?.(error);
+            }
+          );
+        } else {
+          await new Promise((resolve) => setTimeout(resolve, 1500));
+          const result = {
+            success: true,
+            data: { summary: `Executed: ${currentCommand}` },
+            message: `Command executed successfully`
+          };
+          setCommandResult(result);
+          setCommandState("success");
+          setProgress(100);
+          onComplete?.(result);
+        }
+      } else {
+        const commandInstruction = `CRITICAL COMMAND MODE: Maximum 10 words per response. Execute the command immediately. Make reasonable assumptions based on context. Use sensible defaults for missing details. DO NOT ask questions unless something is truly impossible without user input (e.g., missing required password). State what you're doing or the result. Examples: "Analyzing customer data from last quarter..." or "Created 5 new database entries successfully" or "Search complete: found 12 matching results". NO greetings, NO filler words, NO clarification requests. Action/result only.`;
+        const systemMessage = context ? `${context}
+
+${commandInstruction}` : commandInstruction;
+        const messagePayload = files && files.length > 0 ? await buildMessageWithAttachments(currentCommand, files) : currentCommand;
+        if (enableStreaming) {
+          let accumulatedContent = "";
+          await aptevaClient.chatStream(
+            {
+              agent_id: agentId,
+              message: messagePayload,
+              stream: true,
+              ...currentThreadId && { thread_id: currentThreadId },
+              system: systemMessage
+            },
+            (chunk) => {
+              if ((chunk.type === "token" || chunk.type === "content") && chunk.content) {
+                accumulatedContent += chunk.content;
+                setStreamedContent(accumulatedContent);
+                setCurrentToolName(null);
+                const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
+                setProgress(estimatedProgress);
+              } else if (chunk.type === "tool_call" && chunk.tool_name) {
+                setCurrentToolName(chunk.tool_name);
+                accumulatedContent = "";
+                setStreamedContent("");
+              } else if (chunk.type === "tool_result") {
+                setCurrentToolName(null);
+              } else if (chunk.type === "thread_id" && chunk.thread_id) {
+                if (!currentThreadId) {
+                  setCurrentThreadId(chunk.thread_id);
+                  onThreadChange?.(chunk.thread_id);
+                }
+              }
+            },
+            (threadId2) => {
+              const result = {
+                success: true,
+                data: { summary: accumulatedContent, thread_id: threadId2 },
+                message: accumulatedContent || "Command executed successfully"
+              };
+              setCommandResult(result);
+              setCommandState("success");
+              setProgress(100);
+              onComplete?.(result);
+            },
+            (error) => {
+              setCommandError(error);
+              setCommandState("error");
+              onError?.(error);
+            }
+          );
+        } else {
+          const response = await aptevaClient.chat({
+            agent_id: agentId,
+            message: messagePayload,
+            stream: false,
+            ...currentThreadId && { thread_id: currentThreadId },
+            system: systemMessage
+          });
+          const result = {
+            success: true,
+            data: { summary: response.message, thread_id: response.thread_id },
+            widgets: response.widgets,
+            message: response.message
+          };
+          setCommandResult(result);
+          setCommandState("success");
+          setProgress(100);
+          onComplete?.(result);
+        }
+      }
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error("Unknown error");
+      setCommandError(error);
+      setCommandState("error");
+      onError?.(error);
+    }
+  };
+  const resetCommand = () => {
+    setCommandState("idle");
+    setCommandResult(null);
+    setCommandError(null);
+    setProgress(0);
+    setCommandInput("");
+    setPlan("");
+    setPendingCommand("");
+    setStreamedContent("");
+    setCurrentToolName(null);
+  };
+  const approvePlan = () => {
+    const planToExecute = plan;
+    setPlan("");
+    setPendingCommand("");
+    const executionMessage = `Execute this plan now:
+
+${planToExecute}`;
+    executeCommand(executionMessage);
+  };
+  const rejectPlan = () => {
+    setCommandInput(pendingCommand);
+    setPlan("");
+    setPendingCommand("");
+    setCommandState("idle");
+  };
+  const isCompact = commandVariant === "compact";
+  return /* @__PURE__ */ jsxs10("div", { className: cn("flex flex-col h-full", className), children: [
+    showHeader && mode === "chat" && /* @__PURE__ */ jsx14("div", { className: "px-4 py-3 flex items-center justify-between", children: /* @__PURE__ */ jsx14("h2", { className: "!text-lg font-semibold !text-gray-900 dark:!text-white", children: headerTitle }) }),
+    mode === "chat" && /* @__PURE__ */ jsxs10(Fragment3, { children: [
+      /* @__PURE__ */ jsx14(
+        MessageList,
+        {
+          messages,
+          onAction,
+          welcomeTitle,
+          welcomeSubtitle,
+          welcomeIcon,
+          suggestedPrompts,
+          welcomeVariant,
+          onPromptClick: (prompt) => handleSendMessage(prompt)
+        }
+      ),
+      isLoading && /* @__PURE__ */ jsx14("div", { className: "px-4 py-2 !text-sm !text-gray-500 dark:!text-gray-400 italic", children: "AI is thinking..." }),
+      /* @__PURE__ */ jsx14(
+        Composer,
+        {
+          onSendMessage: handleSendMessage,
+          placeholder: placeholder || defaultPlaceholder,
+          disabled: isLoading,
+          onFileUpload,
+          onSwitchMode: showModeToggle ? () => handleModeChange("command") : void 0
+        }
+      )
+    ] }),
+    mode === "command" && /* @__PURE__ */ jsx14("div", { className: "w-full", children: /* @__PURE__ */ jsx14(
+      CommandComposer,
+      {
+        onExecute: (text, files) => {
+          setCommandInput(text);
+          executeCommand(text, files);
+        },
+        state: commandState,
+        response: commandResult?.data?.summary || commandResult?.message,
+        error: commandError?.message,
+        plan,
+        streamedContent,
+        toolName: currentToolName,
+        onApprove: approvePlan,
+        onReject: rejectPlan,
+        onReset: resetCommand,
+        onExpand: showModeToggle ? () => handleModeChange("chat") : void 0,
+        placeholder: placeholder || "Enter your command..."
+      }
+    ) }),
+    /* @__PURE__ */ jsx14("style", { dangerouslySetInnerHTML: {
+      __html: `
+          @keyframes pulse-border {
+            0%, 100% { border-color: rgb(59, 130, 246); }
+            50% { border-color: rgb(147, 197, 253); }
+          }
+          .animate-pulse-border {
+            animation: pulse-border 2s ease-in-out infinite;
+          }
+        `
+    } })
   ] });
 }
 
+// src/components/Chat/CommandOutput.tsx
+import { useState as useState4 } from "react";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+
 // src/components/Command/Command.tsx
-import React, { useState as useState3, useEffect as useEffect4 } from "react";
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import React, { useState as useState5, useEffect as useEffect4 } from "react";
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function Command({
   agentId,
   command: initialCommand,
@@ -1279,18 +2316,18 @@ function Command({
   resultRenderer,
   className
 }) {
-  const [state, setState] = useState3("idle");
-  const [result, setResult] = useState3(null);
-  const [error, setError] = useState3(null);
-  const [progress, setProgress] = useState3(0);
-  const [command, setCommand] = useState3(initialCommand || "");
-  const [streamedContent, setStreamedContent] = useState3("");
-  const [plan, setPlan] = useState3("");
-  const [pendingCommand, setPendingCommand] = useState3("");
-  const [showPlanDetails, setShowPlanDetails] = useState3(false);
-  const [uploadedFiles, setUploadedFiles] = useState3([]);
-  const [showSettingsMenu, setShowSettingsMenu] = useState3(false);
-  const [internalPlanMode, setInternalPlanMode] = useState3(planMode);
+  const [state, setState] = useState5("idle");
+  const [result, setResult] = useState5(null);
+  const [error, setError] = useState5(null);
+  const [progress, setProgress] = useState5(0);
+  const [command, setCommand] = useState5(initialCommand || "");
+  const [streamedContent, setStreamedContent] = useState5("");
+  const [plan, setPlan] = useState5("");
+  const [pendingCommand, setPendingCommand] = useState5("");
+  const [showPlanDetails, setShowPlanDetails] = useState5(false);
+  const [uploadedFiles, setUploadedFiles] = useState5([]);
+  const [showSettingsMenu, setShowSettingsMenu] = useState5(false);
+  const [internalPlanMode, setInternalPlanMode] = useState5(planMode);
   const fileInputRef = React.useRef(null);
   useEffect4(() => {
     if (autoExecute && state === "idle" && command) {
@@ -1702,7 +2739,7 @@ ${planToExecute}`;
     setUploadedFiles((prev) => prev.filter((_, i) => i !== index));
   };
   const isCompact = variant === "compact";
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: cn(
@@ -1717,9 +2754,9 @@ ${planToExecute}`;
       ),
       style: { minHeight: isCompact ? "auto" : "180px" },
       children: [
-        /* @__PURE__ */ jsxs10("div", { className: cn("flex-1 flex", isCompact ? "flex-row items-center p-3 gap-3" : "flex-col p-4"), children: [
-          state === "idle" && allowInput && !isCompact && /* @__PURE__ */ jsxs10(Fragment2, { children: [
-            /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsxs12("div", { className: cn("flex-1 flex", isCompact ? "flex-row items-center p-3 gap-3" : "flex-col p-4"), children: [
+          state === "idle" && allowInput && !isCompact && /* @__PURE__ */ jsxs12(Fragment4, { children: [
+            /* @__PURE__ */ jsx16(
               "textarea",
               {
                 value: command,
@@ -1735,42 +2772,42 @@ ${planToExecute}`;
                 rows: 6
               }
             ),
-            uploadedFiles.length > 0 && /* @__PURE__ */ jsx12("div", { className: "flex flex-wrap gap-2 mt-2", children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs10("div", { className: "relative group", children: [
-              file.type === "image" ? /* @__PURE__ */ jsx12(
+            uploadedFiles.length > 0 && /* @__PURE__ */ jsx16("div", { className: "flex flex-wrap gap-2 mt-2", children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs12("div", { className: "relative group", children: [
+              file.type === "image" ? /* @__PURE__ */ jsx16(
                 "img",
                 {
                   src: file.preview,
                   alt: file.name,
                   className: "w-20 h-20 object-cover rounded-lg border-2 border-gray-300 dark:border-gray-600"
                 }
-              ) : /* @__PURE__ */ jsxs10("div", { className: "w-20 h-20 flex flex-col items-center justify-center rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800", children: [
-                /* @__PURE__ */ jsx12("svg", { className: "w-8 h-8 text-gray-500 dark:text-gray-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx12("path", { fillRule: "evenodd", d: "M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z", clipRule: "evenodd" }) }),
-                /* @__PURE__ */ jsx12("span", { className: "text-[8px] text-gray-500 dark:text-gray-400 mt-1 px-1 truncate max-w-full", children: file.name.length > 12 ? file.name.slice(0, 12) + "..." : file.name })
+              ) : /* @__PURE__ */ jsxs12("div", { className: "w-20 h-20 flex flex-col items-center justify-center rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800", children: [
+                /* @__PURE__ */ jsx16("svg", { className: "w-8 h-8 text-gray-500 dark:text-gray-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx16("path", { fillRule: "evenodd", d: "M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z", clipRule: "evenodd" }) }),
+                /* @__PURE__ */ jsx16("span", { className: "text-[8px] text-gray-500 dark:text-gray-400 mt-1 px-1 truncate max-w-full", children: file.name.length > 12 ? file.name.slice(0, 12) + "..." : file.name })
               ] }),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx16(
                 "button",
                 {
                   onClick: () => removeFile(index),
                   className: "absolute -top-2 -right-2 w-6 h-6 bg-red-500 hover:bg-red-600 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",
                   title: `Remove ${file.type}`,
-                  children: /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                  children: /* @__PURE__ */ jsx16("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
                 }
               )
             ] }, index)) })
           ] }),
-          state === "idle" && allowInput && isCompact && /* @__PURE__ */ jsxs10(Fragment2, { children: [
-            /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
-              enableFileUpload && /* @__PURE__ */ jsx12(
+          state === "idle" && allowInput && isCompact && /* @__PURE__ */ jsxs12(Fragment4, { children: [
+            /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
+              enableFileUpload && /* @__PURE__ */ jsx16(
                 "button",
                 {
                   onClick: () => fileInputRef.current?.click(),
                   className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-gray-500 dark:!text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800",
                   title: "Attach file",
-                  children: /* @__PURE__ */ jsx12("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx12("path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
+                  children: /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16("path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
                 }
               ),
-              planMode && /* @__PURE__ */ jsxs10("div", { className: "relative settings-menu-container", children: [
-                /* @__PURE__ */ jsx12(
+              planMode && /* @__PURE__ */ jsxs12("div", { className: "relative settings-menu-container", children: [
+                /* @__PURE__ */ jsx16(
                   "button",
                   {
                     onClick: () => setShowSettingsMenu(!showSettingsMenu),
@@ -1779,28 +2816,28 @@ ${planToExecute}`;
                       internalPlanMode ? "!text-blue-600 dark:!text-blue-400" : "!text-gray-500 dark:!text-gray-500"
                     ),
                     title: "Settings",
-                    children: /* @__PURE__ */ jsxs10("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                      /* @__PURE__ */ jsx12("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
-                      /* @__PURE__ */ jsx12("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
-                      /* @__PURE__ */ jsx12("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
-                      /* @__PURE__ */ jsx12("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
-                      /* @__PURE__ */ jsx12("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
-                      /* @__PURE__ */ jsx12("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
-                      /* @__PURE__ */ jsx12("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
-                      /* @__PURE__ */ jsx12("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
-                      /* @__PURE__ */ jsx12("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
+                    children: /* @__PURE__ */ jsxs12("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                      /* @__PURE__ */ jsx16("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
+                      /* @__PURE__ */ jsx16("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
+                      /* @__PURE__ */ jsx16("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
+                      /* @__PURE__ */ jsx16("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
+                      /* @__PURE__ */ jsx16("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
+                      /* @__PURE__ */ jsx16("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
+                      /* @__PURE__ */ jsx16("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
+                      /* @__PURE__ */ jsx16("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
+                      /* @__PURE__ */ jsx16("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
                     ] })
                   }
                 ),
-                showSettingsMenu && /* @__PURE__ */ jsx12("div", { className: "absolute top-10 left-0 z-50 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-2.5 settings-menu-container", children: /* @__PURE__ */ jsxs10("label", { className: "flex items-center justify-between cursor-pointer group", children: [
-                  /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx12("svg", { className: "w-3.5 h-3.5 text-gray-500 dark:text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
-                    /* @__PURE__ */ jsxs10("div", { children: [
-                      /* @__PURE__ */ jsx12("div", { className: "text-xs font-medium text-gray-700 dark:text-gray-300", children: "Plan Mode" }),
-                      /* @__PURE__ */ jsx12("div", { className: "text-[10px] text-gray-500 dark:text-gray-400", children: "Review first" })
+                showSettingsMenu && /* @__PURE__ */ jsx16("div", { className: "absolute top-10 left-0 z-50 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-2.5 settings-menu-container", children: /* @__PURE__ */ jsxs12("label", { className: "flex items-center justify-between cursor-pointer group", children: [
+                  /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx16("svg", { className: "w-3.5 h-3.5 text-gray-500 dark:text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
+                    /* @__PURE__ */ jsxs12("div", { children: [
+                      /* @__PURE__ */ jsx16("div", { className: "text-xs font-medium text-gray-700 dark:text-gray-300", children: "Plan Mode" }),
+                      /* @__PURE__ */ jsx16("div", { className: "text-[10px] text-gray-500 dark:text-gray-400", children: "Review first" })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsx16(
                     "button",
                     {
                       onClick: (e) => {
@@ -1812,7 +2849,7 @@ ${planToExecute}`;
                         internalPlanMode ? "bg-blue-600" : "bg-gray-300 dark:bg-gray-600"
                       ),
                       type: "button",
-                      children: /* @__PURE__ */ jsx12(
+                      children: /* @__PURE__ */ jsx16(
                         "span",
                         {
                           className: cn(
@@ -1826,26 +2863,26 @@ ${planToExecute}`;
                 ] }) })
               ] })
             ] }),
-            uploadedFiles.length > 0 && /* @__PURE__ */ jsx12("div", { className: "flex gap-1 flex-shrink-0", children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs10("div", { className: "relative group", children: [
-              file.type === "image" ? /* @__PURE__ */ jsx12(
+            uploadedFiles.length > 0 && /* @__PURE__ */ jsx16("div", { className: "flex gap-1 flex-shrink-0", children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs12("div", { className: "relative group", children: [
+              file.type === "image" ? /* @__PURE__ */ jsx16(
                 "img",
                 {
                   src: file.preview,
                   alt: file.name,
                   className: "w-8 h-8 object-cover rounded border border-gray-300 dark:border-gray-600"
                 }
-              ) : /* @__PURE__ */ jsx12("div", { className: "w-8 h-8 flex items-center justify-center rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800", title: file.name, children: /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4 text-gray-500 dark:text-gray-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx12("path", { fillRule: "evenodd", d: "M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z", clipRule: "evenodd" }) }) }),
-              /* @__PURE__ */ jsx12(
+              ) : /* @__PURE__ */ jsx16("div", { className: "w-8 h-8 flex items-center justify-center rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800", title: file.name, children: /* @__PURE__ */ jsx16("svg", { className: "w-4 h-4 text-gray-500 dark:text-gray-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx16("path", { fillRule: "evenodd", d: "M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z", clipRule: "evenodd" }) }) }),
+              /* @__PURE__ */ jsx16(
                 "button",
                 {
                   onClick: () => removeFile(index),
                   className: "absolute -top-1 -right-1 w-4 h-4 bg-red-500 hover:bg-red-600 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",
                   title: "Remove",
-                  children: /* @__PURE__ */ jsx12("svg", { className: "w-2.5 h-2.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
+                  children: /* @__PURE__ */ jsx16("svg", { className: "w-2.5 h-2.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
                 }
               )
             ] }, index)) }),
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx16(
               "input",
               {
                 type: "text",
@@ -1861,7 +2898,7 @@ ${planToExecute}`;
                 className: "flex-1 bg-transparent border-none focus:outline-none !text-gray-900 dark:!text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 py-1"
               }
             ),
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx16(
               "button",
               {
                 onClick: () => executeCommand(),
@@ -1877,33 +2914,33 @@ ${planToExecute}`;
                   !command.trim() && "border-gray-200 dark:border-gray-700 !text-gray-400 dark:!text-gray-600"
                 ),
                 title: "Execute",
-                children: /* @__PURE__ */ jsx12("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx12("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                children: /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             )
           ] }),
-          state === "loading" && !isCompact && /* @__PURE__ */ jsxs10("div", { className: "flex-1 flex flex-col items-center justify-center space-y-4 py-8", children: [
-            /* @__PURE__ */ jsx12("div", { className: "w-6 h-6 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin" }),
-            /* @__PURE__ */ jsx12("div", { className: "text-gray-600 dark:text-gray-400 text-sm text-center max-w-md", children: enableStreaming && streamedContent ? streamedContent : loadingText }),
-            showProgress && /* @__PURE__ */ jsxs10("div", { className: "w-full max-w-sm", children: [
-              /* @__PURE__ */ jsx12("div", { className: "w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5", children: /* @__PURE__ */ jsx12(
+          state === "loading" && !isCompact && /* @__PURE__ */ jsxs12("div", { className: "flex-1 flex flex-col items-center justify-center space-y-4 py-8", children: [
+            /* @__PURE__ */ jsx16("div", { className: "w-6 h-6 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin" }),
+            /* @__PURE__ */ jsx16("div", { className: "text-gray-600 dark:text-gray-400 text-sm text-center max-w-md", children: enableStreaming && streamedContent ? streamedContent : loadingText }),
+            showProgress && /* @__PURE__ */ jsxs12("div", { className: "w-full max-w-sm", children: [
+              /* @__PURE__ */ jsx16("div", { className: "w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5", children: /* @__PURE__ */ jsx16(
                 "div",
                 {
                   className: "bg-blue-500 h-1.5 rounded-full transition-all duration-300",
                   style: { width: `${progress}%` }
                 }
               ) }),
-              /* @__PURE__ */ jsxs10("p", { className: "text-xs text-gray-500 mt-2 text-center", children: [
+              /* @__PURE__ */ jsxs12("p", { className: "text-xs text-gray-500 mt-2 text-center", children: [
                 progress,
                 "%"
               ] })
             ] })
           ] }),
-          state === "loading" && isCompact && /* @__PURE__ */ jsxs10(Fragment2, { children: [
-            /* @__PURE__ */ jsxs10("div", { className: "flex-1 flex items-center gap-3 py-1", children: [
-              /* @__PURE__ */ jsx12("div", { className: "w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin" }),
-              /* @__PURE__ */ jsx12("div", { className: "text-gray-600 dark:text-gray-400 text-sm truncate", children: enableStreaming && streamedContent ? streamedContent : loadingText })
+          state === "loading" && isCompact && /* @__PURE__ */ jsxs12(Fragment4, { children: [
+            /* @__PURE__ */ jsxs12("div", { className: "flex-1 flex items-center gap-3 py-1", children: [
+              /* @__PURE__ */ jsx16("div", { className: "w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin" }),
+              /* @__PURE__ */ jsx16("div", { className: "text-gray-600 dark:text-gray-400 text-sm truncate", children: enableStreaming && streamedContent ? streamedContent : loadingText })
             ] }),
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx16(
               "button",
               {
                 disabled: true,
@@ -1915,20 +2952,20 @@ ${planToExecute}`;
                   "!text-lg",
                   "opacity-30 cursor-not-allowed"
                 ),
-                children: /* @__PURE__ */ jsx12("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx12("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                children: /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             )
           ] }),
-          state === "plan-pending" && !isCompact && /* @__PURE__ */ jsx12("div", { className: "flex-1 flex flex-col", children: /* @__PURE__ */ jsxs10("div", { className: "mb-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg", children: [
-            /* @__PURE__ */ jsxs10("div", { className: "flex items-start gap-2 mb-3", children: [
-              /* @__PURE__ */ jsx12("svg", { className: "w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
-              /* @__PURE__ */ jsxs10("div", { className: "flex-1", children: [
-                /* @__PURE__ */ jsx12("h3", { className: "text-sm font-semibold text-blue-800 dark:text-blue-300 mb-1", children: "Proposed Plan" }),
-                /* @__PURE__ */ jsx12("div", { className: "text-blue-700 dark:text-blue-300 text-sm whitespace-pre-line leading-relaxed", children: plan })
+          state === "plan-pending" && !isCompact && /* @__PURE__ */ jsx16("div", { className: "flex-1 flex flex-col", children: /* @__PURE__ */ jsxs12("div", { className: "mb-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg", children: [
+            /* @__PURE__ */ jsxs12("div", { className: "flex items-start gap-2 mb-3", children: [
+              /* @__PURE__ */ jsx16("svg", { className: "w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
+              /* @__PURE__ */ jsxs12("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsx16("h3", { className: "text-sm font-semibold text-blue-800 dark:text-blue-300 mb-1", children: "Proposed Plan" }),
+                /* @__PURE__ */ jsx16("div", { className: "text-blue-700 dark:text-blue-300 text-sm whitespace-pre-line leading-relaxed", children: plan })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs10("div", { className: "flex gap-2 mt-4", children: [
-              /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsxs12("div", { className: "flex gap-2 mt-4", children: [
+              /* @__PURE__ */ jsx16(
                 "button",
                 {
                   onClick: approvePlan,
@@ -1936,7 +2973,7 @@ ${planToExecute}`;
                   children: "Approve & Execute"
                 }
               ),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx16(
                 "button",
                 {
                   onClick: rejectPlan,
@@ -1946,20 +2983,20 @@ ${planToExecute}`;
               )
             ] })
           ] }) }),
-          state === "plan-pending" && isCompact && /* @__PURE__ */ jsxs10(Fragment2, { children: [
-            /* @__PURE__ */ jsxs10(
+          state === "plan-pending" && isCompact && /* @__PURE__ */ jsxs12(Fragment4, { children: [
+            /* @__PURE__ */ jsxs12(
               "button",
               {
                 onClick: () => setShowPlanDetails(true),
                 className: "flex-1 flex items-center gap-2 px-3 py-2 bg-blue-50 dark:bg-blue-900/30 hover:bg-blue-100 dark:hover:bg-blue-900/40 border border-blue-200 dark:border-blue-800 rounded-lg transition-colors",
                 children: [
-                  /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4 text-blue-600 dark:text-blue-400 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
-                  /* @__PURE__ */ jsx12("span", { className: "text-sm font-medium text-blue-700 dark:text-blue-300 truncate flex-1", children: "View Execution Plan" })
+                  /* @__PURE__ */ jsx16("svg", { className: "w-4 h-4 text-blue-600 dark:text-blue-400 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
+                  /* @__PURE__ */ jsx16("span", { className: "text-sm font-medium text-blue-700 dark:text-blue-300 truncate flex-1", children: "View Execution Plan" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs10("div", { className: "flex gap-2 flex-shrink-0", children: [
-              /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsxs12("div", { className: "flex gap-2 flex-shrink-0", children: [
+              /* @__PURE__ */ jsx16(
                 "button",
                 {
                   onClick: approvePlan,
@@ -1967,7 +3004,7 @@ ${planToExecute}`;
                   children: "Approve"
                 }
               ),
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx16(
                 "button",
                 {
                   onClick: rejectPlan,
@@ -1977,15 +3014,15 @@ ${planToExecute}`;
               )
             ] })
           ] }),
-          state === "error" && /* @__PURE__ */ jsxs10("div", { className: "flex-1 flex flex-col", children: [
-            /* @__PURE__ */ jsx12("div", { className: "mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg", children: /* @__PURE__ */ jsxs10("div", { className: "flex items-start gap-2", children: [
-              /* @__PURE__ */ jsx12("svg", { className: "w-5 h-5 text-red-600 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-              /* @__PURE__ */ jsxs10("div", { children: [
-                /* @__PURE__ */ jsx12("h3", { className: "text-sm font-semibold text-red-800 dark:text-red-400", children: "Error" }),
-                /* @__PURE__ */ jsx12("p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: error?.message })
+          state === "error" && /* @__PURE__ */ jsxs12("div", { className: "flex-1 flex flex-col", children: [
+            /* @__PURE__ */ jsx16("div", { className: "mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg", children: /* @__PURE__ */ jsxs12("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx16("svg", { className: "w-5 h-5 text-red-600 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+              /* @__PURE__ */ jsxs12("div", { children: [
+                /* @__PURE__ */ jsx16("h3", { className: "text-sm font-semibold text-red-800 dark:text-red-400", children: "Error" }),
+                /* @__PURE__ */ jsx16("p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: error?.message })
               ] })
             ] }) }),
-            allowInput && /* @__PURE__ */ jsx12(
+            allowInput && /* @__PURE__ */ jsx16(
               "textarea",
               {
                 value: command,
@@ -2002,16 +3039,16 @@ ${planToExecute}`;
               }
             )
           ] }),
-          state === "success" && result && !isCompact && /* @__PURE__ */ jsx12("div", { className: "flex-1 overflow-auto", children: resultRenderer ? resultRenderer(result.data) : /* @__PURE__ */ jsxs10("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsxs10("div", { className: "flex items-start gap-3 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg", children: [
-              /* @__PURE__ */ jsx12("svg", { className: "w-5 h-5 text-green-600 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-              /* @__PURE__ */ jsxs10("div", { className: "flex-1", children: [
-                /* @__PURE__ */ jsx12("h3", { className: "text-sm font-semibold text-green-800 dark:text-green-400 mb-1", children: "Success" }),
-                /* @__PURE__ */ jsx12("p", { className: "text-green-700 dark:text-green-300 text-sm", children: "Command executed successfully" })
+          state === "success" && result && !isCompact && /* @__PURE__ */ jsx16("div", { className: "flex-1 overflow-auto", children: resultRenderer ? resultRenderer(result.data) : /* @__PURE__ */ jsxs12("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs12("div", { className: "flex items-start gap-3 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg", children: [
+              /* @__PURE__ */ jsx16("svg", { className: "w-5 h-5 text-green-600 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+              /* @__PURE__ */ jsxs12("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsx16("h3", { className: "text-sm font-semibold text-green-800 dark:text-green-400 mb-1", children: "Success" }),
+                /* @__PURE__ */ jsx16("p", { className: "text-green-700 dark:text-green-300 text-sm", children: "Command executed successfully" })
               ] })
             ] }),
-            result.data?.summary && /* @__PURE__ */ jsx12("div", { className: "text-gray-700 dark:text-gray-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
-            result.widgets && result.widgets.length > 0 && /* @__PURE__ */ jsx12("div", { className: "space-y-3", children: result.widgets.map((widget) => /* @__PURE__ */ jsx12(
+            result.data?.summary && /* @__PURE__ */ jsx16("div", { className: "text-gray-700 dark:text-gray-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
+            result.widgets && result.widgets.length > 0 && /* @__PURE__ */ jsx16("div", { className: "space-y-3", children: result.widgets.map((widget) => /* @__PURE__ */ jsx16(
               WidgetRenderer,
               {
                 widget,
@@ -2020,8 +3057,8 @@ ${planToExecute}`;
               widget.id
             )) })
           ] }) }),
-          state === "success" && result && isCompact && /* @__PURE__ */ jsxs10(Fragment2, { children: [
-            /* @__PURE__ */ jsxs10(
+          state === "success" && result && isCompact && /* @__PURE__ */ jsxs12(Fragment4, { children: [
+            /* @__PURE__ */ jsxs12(
               "div",
               {
                 className: "flex-1 flex items-center gap-2 py-1 cursor-text min-w-0",
@@ -2030,12 +3067,12 @@ ${planToExecute}`;
                   setResult(null);
                 },
                 children: [
-                  /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4 text-green-600 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-                  /* @__PURE__ */ jsx12("div", { className: "text-green-700 dark:text-green-300 text-sm truncate flex-1 min-w-0", children: resultRenderer ? resultRenderer(result.data) : result.message || "Command executed successfully" })
+                  /* @__PURE__ */ jsx16("svg", { className: "w-4 h-4 text-green-600 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+                  /* @__PURE__ */ jsx16("div", { className: "text-green-700 dark:text-green-300 text-sm truncate flex-1 min-w-0", children: resultRenderer ? resultRenderer(result.data) : result.message || "Command executed successfully" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx16(
               "button",
               {
                 onClick: () => {
@@ -2051,24 +3088,24 @@ ${planToExecute}`;
                   "!text-lg"
                 ),
                 title: "New command",
-                children: /* @__PURE__ */ jsx12("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx12("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                children: /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             )
           ] })
         ] }),
-        !isCompact && /* @__PURE__ */ jsxs10("div", { className: "p-3 flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ jsx12("div", { className: "flex items-center gap-1", children: state === "idle" && allowInput && /* @__PURE__ */ jsxs10(Fragment2, { children: [
-            enableFileUpload && /* @__PURE__ */ jsx12(
+        !isCompact && /* @__PURE__ */ jsxs12("div", { className: "p-3 flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx16("div", { className: "flex items-center gap-1", children: state === "idle" && allowInput && /* @__PURE__ */ jsxs12(Fragment4, { children: [
+            enableFileUpload && /* @__PURE__ */ jsx16(
               "button",
               {
                 onClick: () => fileInputRef.current?.click(),
                 className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-gray-500 dark:!text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800",
                 title: "Attach file",
-                children: /* @__PURE__ */ jsx12("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx12("path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
+                children: /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16("path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
               }
             ),
-            planMode && /* @__PURE__ */ jsxs10("div", { className: "relative settings-menu-container", children: [
-              /* @__PURE__ */ jsx12(
+            planMode && /* @__PURE__ */ jsxs12("div", { className: "relative settings-menu-container", children: [
+              /* @__PURE__ */ jsx16(
                 "button",
                 {
                   onClick: () => setShowSettingsMenu(!showSettingsMenu),
@@ -2077,28 +3114,28 @@ ${planToExecute}`;
                     internalPlanMode ? "!text-blue-600 dark:!text-blue-400" : "!text-gray-500 dark:!text-gray-500"
                   ),
                   title: "Settings",
-                  children: /* @__PURE__ */ jsxs10("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                    /* @__PURE__ */ jsx12("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
-                    /* @__PURE__ */ jsx12("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
-                    /* @__PURE__ */ jsx12("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
-                    /* @__PURE__ */ jsx12("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
-                    /* @__PURE__ */ jsx12("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
-                    /* @__PURE__ */ jsx12("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
-                    /* @__PURE__ */ jsx12("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
-                    /* @__PURE__ */ jsx12("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
-                    /* @__PURE__ */ jsx12("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
+                  children: /* @__PURE__ */ jsxs12("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsx16("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
+                    /* @__PURE__ */ jsx16("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
+                    /* @__PURE__ */ jsx16("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
+                    /* @__PURE__ */ jsx16("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
+                    /* @__PURE__ */ jsx16("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
+                    /* @__PURE__ */ jsx16("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
+                    /* @__PURE__ */ jsx16("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
+                    /* @__PURE__ */ jsx16("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
+                    /* @__PURE__ */ jsx16("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
                   ] })
                 }
               ),
-              showSettingsMenu && /* @__PURE__ */ jsx12("div", { className: "absolute top-10 left-0 z-50 w-64 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-3 settings-menu-container", children: /* @__PURE__ */ jsxs10("label", { className: "flex items-center justify-between cursor-pointer group", children: [
-                /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4 text-gray-500 dark:text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
-                  /* @__PURE__ */ jsxs10("div", { children: [
-                    /* @__PURE__ */ jsx12("div", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Plan Mode" }),
-                    /* @__PURE__ */ jsx12("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Review before executing" })
+              showSettingsMenu && /* @__PURE__ */ jsx16("div", { className: "absolute top-10 left-0 z-50 w-64 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-3 settings-menu-container", children: /* @__PURE__ */ jsxs12("label", { className: "flex items-center justify-between cursor-pointer group", children: [
+                /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx16("svg", { className: "w-4 h-4 text-gray-500 dark:text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
+                  /* @__PURE__ */ jsxs12("div", { children: [
+                    /* @__PURE__ */ jsx16("div", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Plan Mode" }),
+                    /* @__PURE__ */ jsx16("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Review before executing" })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx12(
+                /* @__PURE__ */ jsx16(
                   "button",
                   {
                     onClick: (e) => {
@@ -2110,7 +3147,7 @@ ${planToExecute}`;
                       internalPlanMode ? "bg-blue-600" : "bg-gray-300 dark:bg-gray-600"
                     ),
                     type: "button",
-                    children: /* @__PURE__ */ jsx12(
+                    children: /* @__PURE__ */ jsx16(
                       "span",
                       {
                         className: cn(
@@ -2124,9 +3161,9 @@ ${planToExecute}`;
               ] }) })
             ] })
           ] }) }),
-          !(state === "idle" && allowInput) && /* @__PURE__ */ jsx12("div", {}),
-          /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
-            (state === "success" || state === "error") && allowInput && /* @__PURE__ */ jsx12(
+          !(state === "idle" && allowInput) && /* @__PURE__ */ jsx16("div", {}),
+          /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
+            (state === "success" || state === "error") && allowInput && /* @__PURE__ */ jsx16(
               "button",
               {
                 onClick: resetCommand,
@@ -2134,7 +3171,7 @@ ${planToExecute}`;
                 children: "Reset"
               }
             ),
-            (state === "idle" || state === "error") && /* @__PURE__ */ jsx12(
+            (state === "idle" || state === "error") && /* @__PURE__ */ jsx16(
               "button",
               {
                 onClick: () => executeCommand(),
@@ -2150,29 +3187,29 @@ ${planToExecute}`;
                   !command.trim() && "border-gray-200 dark:border-gray-700 !text-gray-400 dark:!text-gray-600"
                 ),
                 title: state === "error" ? "Retry" : "Execute",
-                children: state === "error" ? /* @__PURE__ */ jsx12("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx12("path", { d: "M13 8C13 10.7614 10.7614 13 8 13C5.23858 13 3 10.7614 3 8C3 5.23858 5.23858 3 8 3C9.65685 3 11.1257 3.82818 12 5.09091M12 3V5.09091M12 5.09091H9.81818", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) : /* @__PURE__ */ jsx12("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx12("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                children: state === "error" ? /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16("path", { d: "M13 8C13 10.7614 10.7614 13 8 13C5.23858 13 3 10.7614 3 8C3 5.23858 5.23858 3 8 3C9.65685 3 11.1257 3.82818 12 5.09091M12 3V5.09091M12 5.09091H9.81818", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) : /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             )
           ] })
         ] }),
-        showPlanDetails && isCompact && state === "plan-pending" && /* @__PURE__ */ jsx12("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4", onClick: () => setShowPlanDetails(false), children: /* @__PURE__ */ jsxs10("div", { className: "bg-white dark:bg-gray-900 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden", onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700", children: [
-            /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx12("svg", { className: "w-6 h-6 text-blue-600 dark:text-blue-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
-              /* @__PURE__ */ jsx12("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: "Proposed Execution Plan" })
+        showPlanDetails && isCompact && state === "plan-pending" && /* @__PURE__ */ jsx16("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4", onClick: () => setShowPlanDetails(false), children: /* @__PURE__ */ jsxs12("div", { className: "bg-white dark:bg-gray-900 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700", children: [
+            /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx16("svg", { className: "w-6 h-6 text-blue-600 dark:text-blue-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
+              /* @__PURE__ */ jsx16("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: "Proposed Execution Plan" })
             ] }),
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx16(
               "button",
               {
                 onClick: () => setShowPlanDetails(false),
                 className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors",
-                children: /* @__PURE__ */ jsx12("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                children: /* @__PURE__ */ jsx16("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
               }
             )
           ] }),
-          /* @__PURE__ */ jsx12("div", { className: "p-6 overflow-y-auto max-h-[calc(80vh-180px)]", children: /* @__PURE__ */ jsx12("div", { className: "prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx12("div", { className: "text-gray-700 dark:text-gray-300 whitespace-pre-line leading-relaxed", children: plan }) }) }),
-          /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-end gap-3 p-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50", children: [
-            /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx16("div", { className: "p-6 overflow-y-auto max-h-[calc(80vh-180px)]", children: /* @__PURE__ */ jsx16("div", { className: "prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx16("div", { className: "text-gray-700 dark:text-gray-300 whitespace-pre-line leading-relaxed", children: plan }) }) }),
+          /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-end gap-3 p-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50", children: [
+            /* @__PURE__ */ jsx16(
               "button",
               {
                 onClick: rejectPlan,
@@ -2180,7 +3217,7 @@ ${planToExecute}`;
                 children: "Modify Command"
               }
             ),
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx16(
               "button",
               {
                 onClick: approvePlan,
@@ -2190,7 +3227,7 @@ ${planToExecute}`;
             )
           ] })
         ] }) }),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx16(
           "input",
           {
             ref: fileInputRef,
@@ -2201,7 +3238,7 @@ ${planToExecute}`;
             accept: "image/*,application/pdf,.doc,.docx,.txt"
           }
         ),
-        /* @__PURE__ */ jsx12("style", { dangerouslySetInnerHTML: {
+        /* @__PURE__ */ jsx16("style", { dangerouslySetInnerHTML: {
           __html: `
           @keyframes pulse-border {
             0%, 100% {
@@ -2222,8 +3259,8 @@ ${planToExecute}`;
 }
 
 // src/components/Prompt/Prompt.tsx
-import { useState as useState4 } from "react";
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useState as useState6 } from "react";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 function Prompt({
   agentId,
   placeholder = "Enter your prompt...",
@@ -2240,9 +3277,9 @@ function Prompt({
   showSuggestions = false,
   className
 }) {
-  const [value, setValue] = useState4(initialValue);
-  const [isLoading, setIsLoading] = useState4(false);
-  const [suggestions] = useState4(["Plan a trip", "Write a description", "Analyze data"]);
+  const [value, setValue] = useState6(initialValue);
+  const [isLoading, setIsLoading] = useState6(false);
+  const [suggestions] = useState6(["Plan a trip", "Write a description", "Analyze data"]);
   const handleChange = (e) => {
     const newValue = e.target.value;
     if (!maxLength || newValue.length <= maxLength) {
@@ -2285,9 +3322,9 @@ function Prompt({
       handleSubmit();
     }
   };
-  return /* @__PURE__ */ jsxs11("div", { className: cn("space-y-2", className), children: [
-    /* @__PURE__ */ jsxs11("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs13("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx17(
         "input",
         {
           type: "text",
@@ -2300,7 +3337,7 @@ function Prompt({
           className: "flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apteva-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white"
         }
       ),
-      submitOn === "button" && /* @__PURE__ */ jsx13(
+      submitOn === "button" && /* @__PURE__ */ jsx17(
         "button",
         {
           onClick: handleSubmit,
@@ -2310,13 +3347,13 @@ function Prompt({
         }
       )
     ] }),
-    maxLength && /* @__PURE__ */ jsxs11("p", { className: "text-xs text-gray-500", children: [
+    maxLength && /* @__PURE__ */ jsxs13("p", { className: "text-xs text-gray-500", children: [
       value.length,
       " / ",
       maxLength,
       " characters"
     ] }),
-    showSuggestions && !value && /* @__PURE__ */ jsx13("div", { className: "flex flex-wrap gap-2", children: suggestions.map((suggestion, idx) => /* @__PURE__ */ jsx13(
+    showSuggestions && !value && /* @__PURE__ */ jsx17("div", { className: "flex flex-wrap gap-2", children: suggestions.map((suggestion, idx) => /* @__PURE__ */ jsx17(
       "button",
       {
         onClick: () => setValue(suggestion),
@@ -2325,16 +3362,16 @@ function Prompt({
       },
       idx
     )) }),
-    isLoading && /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [
-      /* @__PURE__ */ jsx13("div", { className: "w-4 h-4 border-2 border-apteva-500 border-t-transparent rounded-full animate-spin" }),
-      /* @__PURE__ */ jsx13("span", { children: "AI is processing your request..." })
+    isLoading && /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [
+      /* @__PURE__ */ jsx17("div", { className: "w-4 h-4 border-2 border-apteva-500 border-t-transparent rounded-full animate-spin" }),
+      /* @__PURE__ */ jsx17("span", { children: "AI is processing your request..." })
     ] })
   ] });
 }
 
 // src/components/Stream/Stream.tsx
-import { useState as useState5, useEffect as useEffect5 } from "react";
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useState as useState7, useEffect as useEffect5 } from "react";
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function Stream({
   agentId,
   prompt,
@@ -2350,9 +3387,9 @@ function Stream({
   typingSpeed = 30,
   className
 }) {
-  const [text, setText] = useState5("");
-  const [isStreaming, setIsStreaming] = useState5(false);
-  const [isComplete, setIsComplete] = useState5(false);
+  const [text, setText] = useState7("");
+  const [isStreaming, setIsStreaming] = useState7(false);
+  const [isComplete, setIsComplete] = useState7(false);
   useEffect5(() => {
     if (autoStart && !isStreaming && !isComplete) {
       startStreaming();
@@ -2414,7 +3451,7 @@ function Stream({
     plain: "text-gray-900 dark:text-gray-100"
   };
   if (!isStreaming && !isComplete) {
-    return /* @__PURE__ */ jsx14("div", { className: cn("p-4", className), children: /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx18("div", { className: cn("p-4", className), children: /* @__PURE__ */ jsx18(
       "button",
       {
         onClick: startStreaming,
@@ -2423,19 +3460,19 @@ function Stream({
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs12("div", { className: cn(variantClasses[variant], className), children: [
+  return /* @__PURE__ */ jsxs14("div", { className: cn(variantClasses[variant], className), children: [
     text,
-    isStreaming && showCursor && /* @__PURE__ */ jsx14("span", { className: "apteva-stream-cursor" })
+    isStreaming && showCursor && /* @__PURE__ */ jsx18("span", { className: "apteva-stream-cursor" })
   ] });
 }
 
 // src/components/Threads/ThreadList.tsx
-import { useState as useState6 } from "react";
+import { useState as useState8 } from "react";
 
 // src/components/Threads/ThreadItem.tsx
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 function ThreadItem({ thread, isActive = false, onSelect, onDelete }) {
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       className: cn("apteva-thread-item", {
@@ -2443,19 +3480,19 @@ function ThreadItem({ thread, isActive = false, onSelect, onDelete }) {
       }),
       onClick: onSelect,
       children: [
-        /* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx15("h4", { className: "font-semibold text-gray-900 dark:text-white truncate", children: thread.title }),
-          thread.preview && /* @__PURE__ */ jsx15("p", { className: "text-sm text-gray-600 dark:text-gray-400 truncate", children: thread.preview }),
-          /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 mt-1 text-xs text-gray-500", children: [
-            /* @__PURE__ */ jsxs13("span", { children: [
+        /* @__PURE__ */ jsxs15("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx19("h4", { className: "font-semibold text-gray-900 dark:text-white truncate", children: thread.title }),
+          thread.preview && /* @__PURE__ */ jsx19("p", { className: "text-sm text-gray-600 dark:text-gray-400 truncate", children: thread.preview }),
+          /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 mt-1 text-xs text-gray-500", children: [
+            /* @__PURE__ */ jsxs15("span", { children: [
               thread.messageCount,
               " messages"
             ] }),
-            /* @__PURE__ */ jsx15("span", { children: "\u2022" }),
-            /* @__PURE__ */ jsx15("span", { children: formatRelativeTime(thread.updatedAt) })
+            /* @__PURE__ */ jsx19("span", { children: "\u2022" }),
+            /* @__PURE__ */ jsx19("span", { children: formatRelativeTime(thread.updatedAt) })
           ] })
         ] }),
-        onDelete && /* @__PURE__ */ jsx15(
+        onDelete && /* @__PURE__ */ jsx19(
           "button",
           {
             onClick: (e) => {
@@ -2485,7 +3522,7 @@ function formatRelativeTime(date) {
 }
 
 // src/components/Threads/ThreadList.tsx
-import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 function ThreadList({
   threads,
   currentThreadId,
@@ -2494,13 +3531,13 @@ function ThreadList({
   showSearch = false,
   groupBy = "none"
 }) {
-  const [searchQuery, setSearchQuery] = useState6("");
+  const [searchQuery, setSearchQuery] = useState8("");
   const filteredThreads = threads.filter(
     (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || thread.preview?.toLowerCase().includes(searchQuery.toLowerCase())
   );
   const groupedThreads = groupBy === "date" ? groupThreadsByDate(filteredThreads) : { All: filteredThreads };
-  return /* @__PURE__ */ jsxs14("div", { className: "flex flex-col h-full", children: [
-    showSearch && /* @__PURE__ */ jsx16("div", { className: "p-3 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs16("div", { className: "flex flex-col h-full", children: [
+    showSearch && /* @__PURE__ */ jsx20("div", { className: "p-3 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx20(
       "input",
       {
         type: "text",
@@ -2510,10 +3547,10 @@ function ThreadList({
         className: "w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apteva-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white"
       }
     ) }),
-    /* @__PURE__ */ jsxs14("div", { className: "flex-1 overflow-y-auto", children: [
-      Object.entries(groupedThreads).map(([group, groupThreads]) => /* @__PURE__ */ jsxs14("div", { children: [
-        groupBy !== "none" && /* @__PURE__ */ jsx16("div", { className: "px-3 py-2 text-xs font-semibold text-gray-500 uppercase", children: group }),
-        groupThreads.map((thread) => /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsxs16("div", { className: "flex-1 overflow-y-auto", children: [
+      Object.entries(groupedThreads).map(([group, groupThreads]) => /* @__PURE__ */ jsxs16("div", { children: [
+        groupBy !== "none" && /* @__PURE__ */ jsx20("div", { className: "px-3 py-2 text-xs font-semibold text-gray-500 uppercase", children: group }),
+        groupThreads.map((thread) => /* @__PURE__ */ jsx20(
           ThreadItem,
           {
             thread,
@@ -2524,9 +3561,9 @@ function ThreadList({
           thread.id
         ))
       ] }, group)),
-      filteredThreads.length === 0 && /* @__PURE__ */ jsxs14("div", { className: "p-8 text-center text-gray-500", children: [
-        /* @__PURE__ */ jsx16("div", { className: "text-4xl mb-2", children: "\u{1F4AC}" }),
-        /* @__PURE__ */ jsx16("p", { children: "No conversations found" })
+      filteredThreads.length === 0 && /* @__PURE__ */ jsxs16("div", { className: "p-8 text-center text-gray-500", children: [
+        /* @__PURE__ */ jsx20("svg", { className: "w-10 h-10 mx-auto mb-2 opacity-50", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx20("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
+        /* @__PURE__ */ jsx20("p", { children: "No conversations found" })
       ] })
     ] })
   ] });
@@ -2558,7 +3595,7 @@ function groupThreadsByDate(threads) {
 }
 
 // src/components/Threads/Threads.tsx
-import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 function Threads({
   threads,
   currentThreadId,
@@ -2577,8 +3614,8 @@ function Threads({
     tabs: "flex gap-2 border-b border-gray-200 dark:border-gray-700 overflow-x-auto"
   };
   if (variant === "tabs") {
-    return /* @__PURE__ */ jsxs15("div", { className: cn(variantClasses[variant], className), children: [
-      threads.slice(0, 5).map((thread) => /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsxs17("div", { className: cn(variantClasses[variant], className), children: [
+      threads.slice(0, 5).map((thread) => /* @__PURE__ */ jsx21(
         "button",
         {
           onClick: () => onThreadSelect?.(thread.id),
@@ -2590,7 +3627,7 @@ function Threads({
         },
         thread.id
       )),
-      showNewButton && onNewThread && /* @__PURE__ */ jsx17(
+      showNewButton && onNewThread && /* @__PURE__ */ jsx21(
         "button",
         {
           onClick: onNewThread,
@@ -2600,8 +3637,8 @@ function Threads({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs15("div", { className: cn(variantClasses[variant], "flex flex-col", className), children: [
-    showNewButton && onNewThread && /* @__PURE__ */ jsx17("div", { className: "p-3 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs17("div", { className: cn(variantClasses[variant], "flex flex-col", className), children: [
+    showNewButton && onNewThread && /* @__PURE__ */ jsx21("div", { className: "p-3 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx21(
       "button",
       {
         onClick: onNewThread,
@@ -2609,7 +3646,7 @@ function Threads({
         children: "+ New Conversation"
       }
     ) }),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx21(
       ThreadList,
       {
         threads,