@apteva/apteva-kit 0.1.7 → 0.1.10

package/dist/index.mjs

@@ -1,4 +1,7 @@
 "use client";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+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";
@@ -182,6 +185,237 @@ function generateMockStreamingResponse(text, onChunk, typingSpeed = 30) {
     }, typingSpeed);
   });
 }
+function generateMockPlan(command) {
+  const lowerCommand = command.toLowerCase();
+  if (lowerCommand.includes("analyze") || lowerCommand.includes("analysis")) {
+    return `**Plan:**
+
+1. Fetch data from the analytics database
+2. Apply filters and aggregations
+3. Calculate key metrics and trends
+4. Generate visualization data
+5. Compile insights and recommendations`;
+  }
+  if (lowerCommand.includes("sales") || lowerCommand.includes("revenue")) {
+    return `**Plan:**
+
+1. Query sales records for the specified period
+2. Calculate total revenue and growth rates
+3. Break down performance by product category
+4. Analyze regional distribution
+5. Present findings in charts and summary`;
+  }
+  if (lowerCommand.includes("report") || lowerCommand.includes("summary")) {
+    return `**Plan:**
+
+1. Gather data from all relevant sources
+2. Aggregate metrics across categories
+3. Identify key trends and anomalies
+4. Generate executive summary
+5. Create detailed breakdowns with visualizations`;
+  }
+  if (lowerCommand.includes("customer") || lowerCommand.includes("user")) {
+    return `**Plan:**
+
+1. Pull customer data from CRM
+2. Calculate engagement metrics
+3. Segment users by behavior patterns
+4. Analyze satisfaction scores
+5. Generate customer insights report`;
+  }
+  if (lowerCommand.includes("task") || lowerCommand.includes("todo") || lowerCommand.includes("work") || lowerCommand.includes("completed")) {
+    return `**Plan:**
+
+1. Retrieve task records from the database
+2. Filter by status and date range
+3. Organize by priority and category
+4. Calculate completion metrics
+5. Display in interactive list format`;
+  }
+  return `**Plan:**
+
+1. Parse and understand the command requirements
+2. Gather necessary data from available sources
+3. Process and analyze the information
+4. Format results for optimal presentation
+5. Return response with any relevant visualizations`;
+}
+function generateMockCommandResponse(command) {
+  const lowerCommand = command.toLowerCase();
+  if (lowerCommand.includes("analyze") || lowerCommand.includes("analysis")) {
+    return `Analysis complete for "${command}". Found 247 records with an average value of $1,234. The data shows a 23% increase compared to last quarter. Key insights: Revenue is up, customer satisfaction improved by 15%, and operational costs decreased by 8%.`;
+  }
+  if (lowerCommand.includes("sales") || lowerCommand.includes("revenue")) {
+    return `Sales data processed: Q4 2024 revenue reached $2.4M, representing 18% growth year-over-year. Top performing products: Enterprise Plan (+45%), Pro Plan (+32%), Basic Plan (+12%). Regional breakdown: North America (52%), Europe (31%), APAC (17%).`;
+  }
+  if (lowerCommand.includes("report") || lowerCommand.includes("summary")) {
+    return `Report generated successfully. Executive Summary: Overall performance exceeded targets by 12%. Marketing ROI improved to 3.2x, customer acquisition cost reduced by 18%, and lifetime value increased by 24%. Detailed breakdown available in attached widgets.`;
+  }
+  if (lowerCommand.includes("data") || lowerCommand.includes("metrics")) {
+    return `Data metrics retrieved: 1,847 active users, 12,394 sessions this month, 94.2% uptime, average response time 127ms. Performance is within acceptable parameters. No critical issues detected.`;
+  }
+  if (lowerCommand.includes("customer") || lowerCommand.includes("user")) {
+    return `Customer analysis complete: 523 new customers this month, 89% retention rate, average satisfaction score 4.6/5. Top feedback themes: excellent support (87%), easy to use (72%), good value (68%). 3 support tickets pending review.`;
+  }
+  return `This is a mock response showing how your agent would process and respond to commands. The actual response would be generated by your AI agent based on real data and context.`;
+}
+function generateMockCommandWithWidgets(command) {
+  const message = generateMockCommandResponse(command);
+  const lowerCommand = command.toLowerCase();
+  let widgets = [];
+  let action;
+  if (lowerCommand.includes("sales") || lowerCommand.includes("revenue") || lowerCommand.includes("analyze")) {
+    widgets.push({
+      type: "card",
+      id: `widget-${Date.now()}-1`,
+      props: {
+        title: "Q4 2024 Performance",
+        description: "Revenue: $2.4M (+18% YoY)",
+        footer: "Updated: " + (/* @__PURE__ */ new Date()).toLocaleDateString()
+      },
+      actions: [
+        {
+          type: "view_details",
+          label: "View Details",
+          handler: "client",
+          payload: { reportId: "q4-2024" }
+        }
+      ]
+    });
+  }
+  if (lowerCommand.includes("customer") || lowerCommand.includes("user")) {
+    widgets.push({
+      type: "list",
+      id: `widget-${Date.now()}-2`,
+      props: {
+        items: [
+          {
+            id: "metric-1",
+            title: "Active Users",
+            subtitle: "1,847 users",
+            description: "+12% from last month"
+          },
+          {
+            id: "metric-2",
+            title: "Retention Rate",
+            subtitle: "89%",
+            description: "Above industry average"
+          },
+          {
+            id: "metric-3",
+            title: "Satisfaction Score",
+            subtitle: "4.6/5",
+            description: "Based on 234 reviews"
+          }
+        ]
+      }
+    });
+  }
+  if (lowerCommand.includes("task") || lowerCommand.includes("todo") || lowerCommand.includes("work") || lowerCommand.includes("completed")) {
+    widgets.push({
+      type: "list",
+      id: `widget-${Date.now()}-tasks`,
+      props: {
+        items: [
+          {
+            id: "task-1",
+            title: "Implement user authentication",
+            subtitle: "Created just now",
+            description: "Added OAuth 2.0 support with Google and GitHub providers",
+            backgroundColor: "rgba(59, 130, 246, 0.15)",
+            metadata: {
+              status: "created",
+              priority: "high",
+              tags: ["backend", "security"]
+            }
+          },
+          {
+            id: "task-2",
+            title: "Update API documentation",
+            subtitle: "Modified 2 minutes ago",
+            description: "Changed endpoint descriptions and added new examples",
+            backgroundColor: "rgba(234, 179, 8, 0.15)",
+            metadata: {
+              status: "modified",
+              priority: "medium",
+              tags: ["docs"]
+            }
+          },
+          {
+            id: "task-3",
+            title: "Fix login redirect bug",
+            subtitle: "Completed 5 minutes ago",
+            description: "Users now properly redirected after successful login",
+            backgroundColor: "rgba(34, 197, 94, 0.15)",
+            metadata: {
+              status: "completed",
+              priority: "urgent",
+              tags: ["bugfix", "auth"]
+            }
+          }
+        ]
+      },
+      actions: [
+        {
+          type: "view_task",
+          label: "View",
+          handler: "client",
+          payload: {}
+        },
+        {
+          type: "undo",
+          label: "Undo",
+          handler: "server",
+          payload: {}
+        }
+      ]
+    });
+    action = {
+      type: "update_database",
+      payload: {
+        table: "tasks",
+        operation: "mark_as_viewed",
+        taskIds: ["task-1", "task-2", "task-3"],
+        timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      }
+    };
+  }
+  if (lowerCommand.includes("analyze") || lowerCommand.includes("analysis")) {
+    action = {
+      type: "send_notification",
+      payload: {
+        recipient: "team@company.com",
+        subject: "Analysis Complete",
+        message: "Your requested analysis has been completed and is ready for review."
+      }
+    };
+  }
+  return { message, widgets, action };
+}
+function generateMockCommandStream(command, onChunk, onComplete, onError, typingSpeed = 30) {
+  const { message, widgets } = generateMockCommandWithWidgets(command);
+  const words = message.split(" ");
+  let currentIndex = 0;
+  const interval = setInterval(() => {
+    try {
+      if (currentIndex < words.length) {
+        onChunk({ type: "token", content: words[currentIndex] + " " });
+        currentIndex++;
+      } else {
+        clearInterval(interval);
+        widgets.forEach((widget) => {
+          onChunk({ type: "widget", widget });
+        });
+        const threadId = `mock_thread_${Date.now()}`;
+        onChunk({ type: "complete" });
+        onComplete(threadId);
+      }
+    } catch (error) {
+      clearInterval(interval);
+      onError(error instanceof Error ? error : new Error("Mock streaming error"));
+    }
+  }, typingSpeed);
+}
 
 // src/components/Widgets/Widgets.tsx
 import { useEffect } from "react";
@@ -223,7 +457,8 @@ function List({ widget, onAction }) {
   return /* @__PURE__ */ jsx2("div", { className: "border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-900 overflow-hidden", children: items.map((item, index) => /* @__PURE__ */ jsxs2(
     "div",
     {
-      className: `flex items-center p-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors ${index !== items.length - 1 ? "border-b border-gray-200 dark:border-gray-700" : ""}`,
+      className: `flex items-center p-4 transition-colors ${index !== items.length - 1 ? "border-b border-gray-200 dark:border-gray-700" : ""} ${!item.backgroundColor ? "hover:bg-gray-50 dark:hover:bg-gray-800" : ""}`,
+      style: item.backgroundColor ? { backgroundColor: item.backgroundColor } : void 0,
       children: [
         item.image && /* @__PURE__ */ jsx2("img", { src: item.image, alt: item.title, className: "w-16 h-16 rounded object-cover" }),
         /* @__PURE__ */ jsxs2("div", { className: `flex-1 ${item.image ? "ml-4" : ""}`, children: [
@@ -329,11 +564,133 @@ function Widgets({
   return /* @__PURE__ */ jsx5("div", { className: cn(layoutClasses[layout], spacingClasses[spacing], className), children: widgets.map((widget) => /* @__PURE__ */ jsx5(WidgetRenderer, { widget, onAction }, widget.id)) });
 }
 
-// src/components/Chat/Message.tsx
+// src/components/Chat/MarkdownContent.tsx
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function parseInlineMarkdown(text, keyPrefix = "") {
+  const result = [];
+  const boldRegex = /(\*\*|__)(.+?)\1/g;
+  let lastIndex = 0;
+  let match;
+  let key = 0;
+  while ((match = boldRegex.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      result.push(text.slice(lastIndex, match.index));
+    }
+    result.push(/* @__PURE__ */ jsx6("strong", { children: match[2] }, `${keyPrefix}b${key++}`));
+    lastIndex = match.index + match[0].length;
+  }
+  if (lastIndex < text.length) {
+    result.push(text.slice(lastIndex));
+  }
+  return result.length > 0 ? result : [text];
+}
+function parseMarkdown(content) {
+  const lines = content.split("\n");
+  const result = [];
+  let key = 0;
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    const ulMatch = line.match(/^(\s*)([-*+])\s+(.*)$/);
+    if (ulMatch) {
+      const listItems = [];
+      const indent = ulMatch[1].length;
+      while (i < lines.length) {
+        const itemMatch = lines[i].match(/^(\s*)([-*+])\s+(.*)$/);
+        if (itemMatch && itemMatch[1].length === indent) {
+          listItems.push(
+            /* @__PURE__ */ jsx6("li", { children: parseInlineMarkdown(itemMatch[3], `${key}`) }, `li${key++}`)
+          );
+          i++;
+        } else {
+          break;
+        }
+      }
+      result.push(
+        /* @__PURE__ */ jsx6("ul", { className: "list-disc pl-5 my-1", children: listItems }, `ul${key++}`)
+      );
+      continue;
+    }
+    const olMatch = line.match(/^(\s*)(\d+)\.\s+(.*)$/);
+    if (olMatch) {
+      const listItems = [];
+      const indent = olMatch[1].length;
+      while (i < lines.length) {
+        const itemMatch = lines[i].match(/^(\s*)(\d+)\.\s+(.*)$/);
+        if (itemMatch && itemMatch[1].length === indent) {
+          listItems.push(
+            /* @__PURE__ */ jsx6("li", { children: parseInlineMarkdown(itemMatch[3], `${key}`) }, `li${key++}`)
+          );
+          i++;
+        } else {
+          break;
+        }
+      }
+      result.push(
+        /* @__PURE__ */ jsx6("ol", { className: "list-decimal pl-5 my-1", children: listItems }, `ol${key++}`)
+      );
+      continue;
+    }
+    if (line === "") {
+      result.push(/* @__PURE__ */ jsx6("br", {}, `br${key++}`));
+    } else {
+      result.push(
+        /* @__PURE__ */ jsxs4("span", { children: [
+          parseInlineMarkdown(line, `${key}`),
+          i < lines.length - 1 ? "\n" : ""
+        ] }, `p${key++}`)
+      );
+    }
+    i++;
+  }
+  return result;
+}
+function MarkdownContent({ content, className = "" }) {
+  return /* @__PURE__ */ jsx6("div", { className: `markdown-content !text-sm leading-relaxed whitespace-pre-wrap ${className}`, children: parseMarkdown(content) });
+}
+
+// src/components/Chat/ToolCall.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function ToolCall({ name, status }) {
+  return /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 py-2 px-3 my-2 rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-sm", children: [
+    status === "running" && /* @__PURE__ */ jsx7("div", { className: "w-2 h-2 rounded-full bg-blue-500 animate-pulse" }),
+    status === "completed" && /* @__PURE__ */ jsx7("div", { className: "w-2 h-2 rounded-full bg-green-500" }),
+    status === "error" && /* @__PURE__ */ jsx7("div", { className: "w-2 h-2 rounded-full bg-red-500" }),
+    /* @__PURE__ */ jsx7("span", { className: "text-gray-700 dark:text-gray-300 font-mono", children: name }),
+    status === "running" && /* @__PURE__ */ jsx7("span", { className: "text-gray-500 dark:text-gray-400 ml-auto", children: "Running..." }),
+    status === "completed" && /* @__PURE__ */ jsx7("span", { className: "text-green-600 dark:text-green-400 ml-auto", children: "Completed" }),
+    status === "error" && /* @__PURE__ */ jsx7("span", { className: "text-red-600 dark:text-red-400 ml-auto", children: "Error" })
+  ] });
+}
+
+// src/components/Chat/Message.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function Message({ message, onAction }) {
   const isUser = message.role === "user";
-  return /* @__PURE__ */ jsxs4(
+  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 });
+    }
+    if (contentSegments && contentSegments.length > 0) {
+      return /* @__PURE__ */ jsx8("div", { children: contentSegments.map((segment, index) => {
+        if (segment.type === "text") {
+          return segment.content ? /* @__PURE__ */ jsx8(MarkdownContent, { content: segment.content }, `text-${index}`) : null;
+        } else if (segment.type === "tool") {
+          return /* @__PURE__ */ jsx8("div", { className: "my-2", children: /* @__PURE__ */ jsx8(
+            ToolCall,
+            {
+              name: segment.name,
+              status: segment.result !== void 0 ? "completed" : "running"
+            }
+          ) }, segment.id);
+        }
+        return null;
+      }) });
+    }
+    return /* @__PURE__ */ jsx8(MarkdownContent, { content: message.content });
+  };
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: cn(
@@ -341,16 +698,16 @@ function Message({ message, onAction }) {
         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"
       ),
       children: [
-        /* @__PURE__ */ jsx6("div", { className: "whitespace-pre-wrap !text-sm leading-relaxed", children: message.content }),
-        message.widgets && message.widgets.length > 0 && /* @__PURE__ */ jsx6("div", { className: cn(isUser ? "mt-3" : "mt-2"), children: /* @__PURE__ */ jsx6(Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
-        /* @__PURE__ */ jsx6("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" }) })
+        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" }) })
       ]
     }
   );
 }
 
 // src/components/Chat/MessageList.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function MessageList({ messages, onAction }) {
   const listRef = useRef(null);
   useEffect2(() => {
@@ -358,15 +715,15 @@ function MessageList({ messages, onAction }) {
       listRef.current.scrollTop = listRef.current.scrollHeight;
     }
   }, [messages]);
-  return /* @__PURE__ */ jsx7("div", { ref: listRef, className: "flex-1 overflow-y-auto px-4 py-4 space-y-3", children: messages.length === 0 ? /* @__PURE__ */ jsx7("div", { className: "flex items-center justify-center h-full !text-gray-500 dark:!text-gray-400", children: /* @__PURE__ */ jsxs5("div", { className: "text-center space-y-2", children: [
-    /* @__PURE__ */ jsx7("div", { className: "text-4xl", children: "\u{1F4AC}" }),
-    /* @__PURE__ */ jsx7("p", { children: "No messages yet. Start a conversation!" })
-  ] }) }) : messages.map((message) => /* @__PURE__ */ jsx7(Message, { message, onAction }, message.id)) });
+  return /* @__PURE__ */ jsx9("div", { ref: listRef, className: "flex-1 overflow-y-auto px-4 py-4 space-y-3", 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)) });
 }
 
 // src/components/Chat/Composer.tsx
 import { useState, useRef as useRef2 } from "react";
-import { Fragment, jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function Composer({ onSendMessage, placeholder = "Type a message...", disabled = false, onFileUpload }) {
   const [text, setText] = useState("");
   const [showMenu, setShowMenu] = useState(false);
@@ -398,32 +755,32 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
       setShowMenu(false);
     }
   };
-  return /* @__PURE__ */ jsxs6("div", { className: "px-4 py-3 bg-white dark:bg-gray-900 relative", children: [
-    showMenu && /* @__PURE__ */ jsxs6(Fragment, { children: [
-      /* @__PURE__ */ jsx8("div", { className: "fixed inset-0 z-10", onClick: () => setShowMenu(false) }),
-      /* @__PURE__ */ jsx8("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__ */ jsxs6(
+  return /* @__PURE__ */ jsxs8("div", { className: "px-4 py-3 bg-white dark:bg-gray-900 relative", children: [
+    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__ */ jsx8("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx8("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__ */ jsx8("span", { className: "!text-sm font-medium", children: "Add photos & files" })
+            /* @__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__ */ jsxs6("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__ */ jsx8(
+    /* @__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(
         "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__ */ jsx8("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx8("path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+          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" }) })
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx10(
         "textarea",
         {
           ref: textareaRef,
@@ -437,18 +794,18 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
           style: { maxHeight: "120px" }
         }
       ),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx10(
         "button",
         {
           onClick: handleSend,
           disabled: !text.trim() || 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__ */ jsx8("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx8("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+          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" }) })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx10(
       "input",
       {
         ref: fileInputRef,
@@ -462,12 +819,178 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
   ] });
 }
 
+// src/lib/apteva-client.ts
+var DEFAULT_API_URL = "http://localhost:3000/agents";
+var DEFAULT_API_KEY = "agt_894abd5966bc9f1e9f8f17f2a6f6b5e0";
+var AptevaClient = class {
+  constructor() {
+    __publicField(this, "config");
+    this.config = {
+      apiUrl: DEFAULT_API_URL,
+      apiKey: DEFAULT_API_KEY
+    };
+  }
+  /**
+   * Update client configuration (optional - users can override defaults)
+   */
+  configure(config) {
+    if (config.apiUrl) this.config.apiUrl = config.apiUrl;
+    if (config.apiKey) this.config.apiKey = config.apiKey;
+  }
+  /**
+   * Get current configuration
+   */
+  getConfig() {
+    return { ...this.config };
+  }
+  /**
+   * Send a chat message to an agent
+   */
+  async chat(request) {
+    try {
+      console.log("[AptevaClient] Chat request:", {
+        agent_id: request.agent_id,
+        message: typeof request.message === "string" ? request.message.substring(0, 100) + "..." : "[multi-part message]",
+        system: request.system,
+        stream: request.stream
+      });
+      const response = await fetch(`${this.config.apiUrl}/chat`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-API-Key": this.config.apiKey
+        },
+        body: JSON.stringify(request)
+      });
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({ error: "Request failed" }));
+        throw new Error(error.error || `Request failed with status ${response.status}`);
+      }
+      const data = await response.json();
+      return {
+        message: data.response || data.message || "",
+        thread_id: data.thread_id,
+        widgets: data.widgets
+      };
+    } catch (error) {
+      console.error("Chat API error:", error);
+      throw error;
+    }
+  }
+  /**
+   * Send a chat message with streaming response
+   */
+  async chatStream(request, onChunk, onComplete, onError) {
+    try {
+      console.log("[AptevaClient] Chat stream request:", {
+        agent_id: request.agent_id,
+        message: typeof request.message === "string" ? request.message.substring(0, 100) + "..." : "[multi-part message]",
+        system: request.system,
+        stream: request.stream
+      });
+      const response = await fetch(`${this.config.apiUrl}/chat`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-API-Key": this.config.apiKey,
+          "Accept": "text/event-stream"
+        },
+        body: JSON.stringify({
+          ...request,
+          stream: true
+        })
+      });
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({ error: "Request failed" }));
+        throw new Error(error.error || `Request failed with status ${response.status}`);
+      }
+      const reader = response.body?.getReader();
+      if (!reader) {
+        throw new Error("Response body is not readable");
+      }
+      const decoder = new TextDecoder();
+      let buffer = "";
+      let threadId = "";
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() || "";
+        for (const line of lines) {
+          if (!line.trim() || line.startsWith(":")) continue;
+          if (line.startsWith("data: ")) {
+            const data = line.slice(6);
+            if (data === "[DONE]") {
+              onComplete?.(threadId);
+              return;
+            }
+            try {
+              const chunk = JSON.parse(data);
+              if (chunk.thread_id) {
+                threadId = chunk.thread_id;
+              }
+              onChunk(chunk);
+            } catch (e) {
+              console.warn("[AptevaClient] Failed to parse SSE data:", data);
+            }
+          }
+        }
+      }
+      onComplete?.(threadId);
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error("Unknown error");
+      onError?.(err);
+      throw err;
+    }
+  }
+  /**
+   * Create a new thread
+   */
+  async createThread(agentId, metadata) {
+    const response = await fetch(`${this.config.apiUrl}/agents/${agentId}/threads`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-API-Key": this.config.apiKey
+      },
+      body: JSON.stringify({ metadata })
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: "Request failed" }));
+      throw new Error(error.error || `Request failed with status ${response.status}`);
+    }
+    const data = await response.json();
+    return data.thread_id;
+  }
+  /**
+   * Get thread messages
+   */
+  async getThreadMessages(threadId) {
+    const response = await fetch(`${this.config.apiUrl}/threads/${threadId}/messages`, {
+      method: "GET",
+      headers: {
+        "X-API-Key": this.config.apiKey
+      }
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: "Request failed" }));
+      throw new Error(error.error || `Request failed with status ${response.status}`);
+    }
+    const data = await response.json();
+    return data.messages;
+  }
+};
+var aptevaClient = new AptevaClient();
+
 // src/components/Chat/Chat.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 function Chat({
   agentId,
   threadId,
   initialMessages = [],
+  context,
+  useMock = false,
   onThreadChange,
   onMessageSent,
   onAction,
@@ -477,8 +1000,9 @@ function Chat({
   headerTitle = "Chat",
   className
 }) {
-  const [messages, setMessages] = useState2(initialMessages.length > 0 ? initialMessages : mockMessages);
+  const [messages, setMessages] = useState2(initialMessages);
   const [isLoading, setIsLoading] = useState2(false);
+  const [currentThreadId, setCurrentThreadId] = useState2(threadId || null);
   useEffect3(() => {
     if (threadId) {
       console.log("Loading thread:", threadId);
@@ -496,31 +1020,220 @@ function Chat({
     onMessageSent?.(userMessage);
     setIsLoading(true);
     try {
-      const response = await generateMockResponse(1e3);
-      setMessages((prev) => [...prev, response]);
+      if (useMock) {
+        const response = await generateMockResponse(1e3);
+        setMessages((prev) => [...prev, response]);
+      } else {
+        let contentSegments = [];
+        let currentTextBuffer = "";
+        let accumulatedWidgets = [];
+        let responseThreadId = currentThreadId;
+        let toolInputBuffer = "";
+        const updateMessage = () => {
+          const segments = [...contentSegments];
+          if (currentTextBuffer) {
+            const lastSegment = segments[segments.length - 1];
+            if (lastSegment && lastSegment.type === "text") {
+              lastSegment.content = currentTextBuffer;
+            } else {
+              segments.push({ type: "text", content: currentTextBuffer });
+            }
+          }
+          setMessages((prev) => {
+            const lastMessage = prev[prev.length - 1];
+            if (lastMessage && lastMessage.role === "assistant") {
+              return [
+                ...prev.slice(0, -1),
+                {
+                  ...lastMessage,
+                  content: currentTextBuffer,
+                  widgets: accumulatedWidgets.length > 0 ? accumulatedWidgets : void 0,
+                  metadata: {
+                    ...lastMessage.metadata,
+                    content_segments: segments
+                  }
+                }
+              ];
+            } else {
+              return [
+                ...prev,
+                {
+                  id: `msg-${Date.now()}-streaming`,
+                  role: "assistant",
+                  content: currentTextBuffer,
+                  widgets: accumulatedWidgets.length > 0 ? accumulatedWidgets : void 0,
+                  timestamp: /* @__PURE__ */ new Date(),
+                  metadata: {
+                    content_segments: segments
+                  }
+                }
+              ];
+            }
+          });
+        };
+        await aptevaClient.chatStream(
+          {
+            agent_id: agentId,
+            message: text,
+            stream: true,
+            ...currentThreadId && { thread_id: currentThreadId },
+            ...context && { system: context }
+          },
+          (chunk) => {
+            console.log("[Chat] Chunk:", chunk);
+            switch (chunk.type) {
+              case "start":
+                break;
+              case "thread_id":
+                if (chunk.thread_id) {
+                  responseThreadId = chunk.thread_id;
+                  if (!currentThreadId) {
+                    setCurrentThreadId(chunk.thread_id);
+                    onThreadChange?.(chunk.thread_id);
+                  }
+                }
+                break;
+              case "content":
+              case "token":
+                if (chunk.content) {
+                  currentTextBuffer += chunk.content;
+                  updateMessage();
+                }
+                break;
+              case "tool_call":
+                if (chunk.tool_id && chunk.tool_name) {
+                  if (currentTextBuffer) {
+                    contentSegments.push({ type: "text", content: currentTextBuffer });
+                    currentTextBuffer = "";
+                  }
+                  contentSegments.push({
+                    type: "tool",
+                    id: chunk.tool_id,
+                    name: chunk.tool_name
+                  });
+                  toolInputBuffer = "";
+                  updateMessage();
+                }
+                break;
+              case "tool_input_delta":
+                if (chunk.tool_id && chunk.content) {
+                  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
+                  );
+                  if (toolSegment) {
+                    toolSegment.result = chunk.content;
+                  }
+                  updateMessage();
+                }
+                break;
+              case "widget":
+                if (chunk.widget) {
+                  accumulatedWidgets.push(chunk.widget);
+                  updateMessage();
+                }
+                break;
+              case "stop":
+                break;
+              case "complete":
+                break;
+              case "error":
+                throw new Error(chunk.message || "Stream error");
+              default:
+                break;
+            }
+          },
+          (threadId2) => {
+            if (currentTextBuffer) {
+              const lastSegment = contentSegments[contentSegments.length - 1];
+              if (lastSegment && lastSegment.type === "text") {
+                lastSegment.content = currentTextBuffer;
+              } else {
+                contentSegments.push({ type: "text", content: currentTextBuffer });
+              }
+            }
+            setMessages((prev) => {
+              const lastMessage = prev[prev.length - 1];
+              if (lastMessage && lastMessage.role === "assistant") {
+                return [
+                  ...prev.slice(0, -1),
+                  {
+                    ...lastMessage,
+                    id: `msg-${Date.now()}`,
+                    content: currentTextBuffer || "Response received",
+                    widgets: accumulatedWidgets.length > 0 ? accumulatedWidgets : void 0,
+                    metadata: {
+                      thread_id: threadId2,
+                      content_segments: contentSegments
+                    }
+                  }
+                ];
+              }
+              return prev;
+            });
+            if (threadId2 && threadId2 !== currentThreadId) {
+              setCurrentThreadId(threadId2);
+              onThreadChange?.(threadId2);
+            }
+            setIsLoading(false);
+          },
+          (error) => {
+            const errorMessage = {
+              id: `msg-${Date.now()}-error`,
+              role: "assistant",
+              content: `Error: ${error.message}`,
+              timestamp: /* @__PURE__ */ new Date(),
+              metadata: { error: true }
+            };
+            setMessages((prev) => {
+              const lastMessage = prev[prev.length - 1];
+              if (lastMessage && lastMessage.id.includes("streaming")) {
+                return [...prev.slice(0, -1), errorMessage];
+              }
+              return [...prev, errorMessage];
+            });
+            setIsLoading(false);
+          }
+        );
+      }
     } catch (error) {
-      console.error("Error generating response:", error);
+      console.error("Chat error:", error);
+      const errorMessage = {
+        id: `msg-${Date.now()}-error`,
+        role: "assistant",
+        content: error instanceof Error ? `Error: ${error.message}` : "An error occurred",
+        timestamp: /* @__PURE__ */ new Date(),
+        metadata: { error: true }
+      };
+      setMessages((prev) => [...prev, errorMessage]);
     } finally {
       setIsLoading(false);
     }
   };
-  return /* @__PURE__ */ jsxs7("div", { className: cn("flex flex-col h-full bg-white dark:bg-gray-900", className), children: [
-    showHeader && /* @__PURE__ */ jsxs7("div", { className: "px-4 py-3 bg-white dark:bg-gray-900", children: [
-      /* @__PURE__ */ jsx9("h2", { className: "!text-lg font-semibold !text-gray-900 dark:!text-white", children: headerTitle }),
-      /* @__PURE__ */ jsxs7("p", { className: "!text-xs !text-gray-500 dark:!text-gray-400", children: [
+  return /* @__PURE__ */ jsxs9("div", { className: cn("flex flex-col h-full bg-white dark:bg-gray-900", className), children: [
+    showHeader && /* @__PURE__ */ jsxs9("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__ */ jsxs9("p", { className: "!text-xs !text-gray-500 dark:!text-gray-400", children: [
         "Agent: ",
         agentId
       ] })
     ] }),
-    /* @__PURE__ */ jsx9(MessageList, { messages, onAction }),
-    isLoading && /* @__PURE__ */ jsx9("div", { className: "px-4 py-2 !text-sm !text-gray-500 dark:!text-gray-400 italic", children: "AI is thinking..." }),
-    /* @__PURE__ */ jsx9(Composer, { onSendMessage: handleSendMessage, placeholder, disabled: isLoading, onFileUpload })
+    /* @__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 })
   ] });
 }
 
 // src/components/Command/Command.tsx
 import React, { useState as useState3, useEffect as useEffect4 } from "react";
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 function Command({
   agentId,
   command: initialCommand,
@@ -530,12 +1243,17 @@ function Command({
   placeholder = "Enter your command...",
   submitButtonText = "Execute",
   variant = "default",
+  useMock = false,
+  planMode = false,
+  onPlanModeChange,
+  enableFileUpload = true,
   onStart,
   onProgress,
   onChunk,
   onComplete,
   onError,
   onFileUpload,
+  onAction,
   loadingText = "Processing...",
   showProgress = true,
   enableStreaming = false,
@@ -548,82 +1266,345 @@ function Command({
   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 fileInputRef = React.useRef(null);
   useEffect4(() => {
     if (autoExecute && state === "idle" && command) {
       executeCommand();
     }
   }, [autoExecute]);
-  const executeCommand = async () => {
-    if (!command.trim()) {
+  useEffect4(() => {
+    setInternalPlanMode(planMode);
+  }, [planMode]);
+  useEffect4(() => {
+    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 executeCommand = async (commandOverride) => {
+    const currentCommand = commandOverride || command;
+    if (!currentCommand.trim()) {
       setError(new Error("Please enter a command"));
       setState("error");
       return;
     }
-    const currentCommand = command;
+    if (internalPlanMode && state !== "plan-pending") {
+      setState("loading");
+      setError(null);
+      setCommand("");
+      if (useMock) {
+        setTimeout(() => {
+          const mockPlan = generateMockPlan(currentCommand);
+          setPlan(mockPlan);
+          setPendingCommand(currentCommand);
+          setState("plan-pending");
+        }, 800);
+      } else {
+        try {
+          let messageContent;
+          if (uploadedFiles.length > 0) {
+            messageContent = [
+              {
+                type: "text",
+                text: currentCommand
+              },
+              ...uploadedFiles.map((file) => ({
+                type: file.type,
+                source: {
+                  type: "base64",
+                  media_type: file.mediaType,
+                  data: file.data
+                }
+              }))
+            ];
+          } else {
+            messageContent = currentCommand;
+          }
+          let systemMessage = context || "";
+          const planningInstruction = `CRITICAL PLANNING MODE - READ CAREFULLY:
+
+You are ONLY creating a plan. You are NOT executing anything.
+
+YOUR TASK: Write a numbered list of steps describing what WOULD be done.
+DO NOT: Execute any actions, make API calls, access databases, modify data, or perform any operations.
+DO NOT: Ask questions or clarifications. Make reasonable assumptions.
+DO: Describe the steps as "Step 1: Would search database...", "Step 2: Would analyze results...", etc.
+DO: Use default values or best practices if details are missing.
+
+FORMAT REQUIRED:
+1. [First action that would be taken]
+2. [Second action that would be taken]
+3. [Third action that would be taken]
+...
+
+IMPORTANT: This is COMMAND MODE - figure things out yourself. Make intelligent assumptions based on context. ONLY ask questions if something is absolutely impossible to proceed without (e.g., missing required credentials). Otherwise, use sensible defaults and proceed with the plan.
+
+REMEMBER: This is ONLY a plan. The user will approve it, THEN it will be executed. Right now you are just describing what would happen - NOT doing it.`;
+          systemMessage = systemMessage ? `${systemMessage}
+
+${planningInstruction}` : planningInstruction;
+          aptevaClient.chat({
+            agent_id: agentId,
+            message: messageContent,
+            stream: false,
+            system: systemMessage
+          }).then((response) => {
+            setPlan(response.message);
+            setPendingCommand(currentCommand);
+            setState("plan-pending");
+          }).catch((err) => {
+            const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
+            setError(error2);
+            setState("error");
+            onError?.(error2);
+          });
+        } catch (err) {
+          const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
+          setError(error2);
+          setState("error");
+          onError?.(error2);
+        }
+      }
+      return;
+    }
     setState("loading");
     setError(null);
     setProgress(0);
     setStreamedContent("");
     setCommand("");
+    setUploadedFiles([]);
     onStart?.();
     try {
-      if (enableStreaming) {
-        const mockStreamChunks = [
-          "Initializing...",
-          "Connecting to agent...",
-          "Processing your request...",
-          "Analyzing data sources...",
-          "Gathering information...",
-          "Generating response...",
-          "Finalizing results..."
-        ];
-        for (let i = 0; i < mockStreamChunks.length; i++) {
-          await new Promise((resolve) => setTimeout(resolve, 600 + Math.random() * 400));
-          const chunk = mockStreamChunks[i];
-          setStreamedContent(chunk);
-          onChunk?.(chunk);
-          setProgress(Math.round((i + 1) / mockStreamChunks.length * 100));
-          onProgress?.(Math.round((i + 1) / mockStreamChunks.length * 100));
+      if (useMock) {
+        if (enableStreaming) {
+          let accumulatedContent = "";
+          generateMockCommandStream(
+            currentCommand,
+            (chunk) => {
+              if (chunk.type === "token" && chunk.content) {
+                accumulatedContent += chunk.content;
+                setStreamedContent(accumulatedContent);
+                onChunk?.(chunk.content);
+                const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
+                setProgress(estimatedProgress);
+                onProgress?.(estimatedProgress);
+              } else if (chunk.type === "widget" && chunk.widget) {
+                const widget = chunk.widget;
+                setResult((prev) => ({
+                  success: true,
+                  data: prev?.data || {},
+                  widgets: [...prev?.widgets || [], widget],
+                  message: accumulatedContent || "Command executed successfully"
+                }));
+              }
+            },
+            (threadId) => {
+              const result2 = {
+                success: true,
+                data: {
+                  summary: accumulatedContent,
+                  thread_id: threadId,
+                  agentId,
+                  context,
+                  timestamp: (/* @__PURE__ */ new Date()).toISOString()
+                },
+                message: accumulatedContent || "Command executed successfully"
+              };
+              setResult(result2);
+              setState("success");
+              setProgress(100);
+              onComplete?.(result2);
+            },
+            (error2) => {
+              setError(error2);
+              setState("error");
+              onError?.(error2);
+            }
+          );
+        } else {
+          const progressInterval = setInterval(() => {
+            setProgress((prev) => {
+              const next = Math.min(prev + 10, 90);
+              onProgress?.(next);
+              return next;
+            });
+          }, 200);
+          await new Promise((resolve) => setTimeout(resolve, 1500));
+          clearInterval(progressInterval);
+          const mockResponse = generateMockCommandWithWidgets(currentCommand);
+          const result2 = {
+            success: true,
+            data: {
+              summary: mockResponse.message,
+              thread_id: `mock_thread_${Date.now()}`,
+              agentId,
+              context,
+              timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+              action: mockResponse.action
+              // Include agent action intent
+            },
+            widgets: mockResponse.widgets,
+            message: mockResponse.message
+          };
+          setResult(result2);
+          setState("success");
+          setProgress(100);
+          onComplete?.(result2);
         }
-        const mockResult = {
-          success: true,
-          data: {
-            summary: `Successfully processed: "${currentCommand}"`,
-            agentId,
-            context,
-            timestamp: (/* @__PURE__ */ new Date()).toISOString()
-          },
-          message: "Command executed successfully"
-        };
-        setResult(mockResult);
-        setState("success");
-        setProgress(100);
-        onComplete?.(mockResult);
       } else {
-        const progressInterval = setInterval(() => {
-          setProgress((prev) => {
-            const next = Math.min(prev + 10, 90);
-            onProgress?.(next);
-            return next;
+        if (enableStreaming) {
+          let accumulatedContent = "";
+          let messageContent;
+          if (uploadedFiles.length > 0) {
+            messageContent = [
+              {
+                type: "text",
+                text: currentCommand
+              },
+              ...uploadedFiles.map((file) => ({
+                type: file.type,
+                // 'image' or 'document'
+                source: {
+                  type: "base64",
+                  media_type: file.mediaType,
+                  data: file.data
+                }
+              }))
+            ];
+          } else {
+            messageContent = currentCommand;
+          }
+          let systemMessage = context || "";
+          let commandInstruction;
+          if (isCompact) {
+            commandInstruction = 'CRITICAL COMMAND MODE: Maximum 10 words per response. Execute immediately, make intelligent assumptions, use defaults when needed. NO questions unless absolutely critical (missing required credentials). State action or result ONLY. Examples: "Searching database for matching records..." or "Found 3 user records in database" or "Task completed successfully". NO greetings, NO explanations, NO clarification requests. Just execute and report.';
+          } else {
+            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.`;
+          }
+          systemMessage = systemMessage ? `${systemMessage}
+
+${commandInstruction}` : commandInstruction;
+          await aptevaClient.chatStream(
+            {
+              agent_id: agentId,
+              message: messageContent,
+              stream: true,
+              ...systemMessage && { system: systemMessage }
+            },
+            (chunk) => {
+              if (chunk.type === "token" && chunk.content) {
+                accumulatedContent += chunk.content;
+                setStreamedContent(accumulatedContent);
+                onChunk?.(chunk.content);
+                const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
+                setProgress(estimatedProgress);
+                onProgress?.(estimatedProgress);
+              } else if (chunk.type === "widget" && chunk.widget) {
+                const widget = chunk.widget;
+                setResult((prev) => ({
+                  success: true,
+                  data: prev?.data || {},
+                  widgets: [...prev?.widgets || [], widget],
+                  message: accumulatedContent || "Command executed successfully"
+                }));
+              }
+            },
+            (threadId) => {
+              const result2 = {
+                success: true,
+                data: {
+                  summary: accumulatedContent,
+                  thread_id: threadId,
+                  agentId,
+                  context,
+                  timestamp: (/* @__PURE__ */ new Date()).toISOString()
+                },
+                message: accumulatedContent || "Command executed successfully"
+              };
+              setResult(result2);
+              setState("success");
+              setProgress(100);
+              onComplete?.(result2);
+            },
+            (error2) => {
+              const err = error2 instanceof Error ? error2 : new Error("Unknown error");
+              setError(err);
+              setState("error");
+              onError?.(err);
+            }
+          );
+        } else {
+          const progressInterval = setInterval(() => {
+            setProgress((prev) => {
+              const next = Math.min(prev + 10, 90);
+              onProgress?.(next);
+              return next;
+            });
+          }, 200);
+          let messageContent;
+          if (uploadedFiles.length > 0) {
+            messageContent = [
+              {
+                type: "text",
+                text: currentCommand
+              },
+              ...uploadedFiles.map((file) => ({
+                type: file.type,
+                // 'image' or 'document'
+                source: {
+                  type: "base64",
+                  media_type: file.mediaType,
+                  data: file.data
+                }
+              }))
+            ];
+          } else {
+            messageContent = currentCommand;
+          }
+          let systemMessage = context || "";
+          let commandInstruction;
+          if (isCompact) {
+            commandInstruction = 'CRITICAL COMMAND MODE: Maximum 10 words per response. Execute immediately, make intelligent assumptions, use defaults when needed. NO questions unless absolutely critical (missing required credentials). State action or result ONLY. Examples: "Searching database for matching records..." or "Found 3 user records in database" or "Task completed successfully". NO greetings, NO explanations, NO clarification requests. Just execute and report.';
+          } else {
+            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.`;
+          }
+          systemMessage = systemMessage ? `${systemMessage}
+
+${commandInstruction}` : commandInstruction;
+          const response = await aptevaClient.chat({
+            agent_id: agentId,
+            message: messageContent,
+            stream: false,
+            ...systemMessage && { system: systemMessage }
           });
-        }, 200);
-        await new Promise((resolve) => setTimeout(resolve, 2e3));
-        clearInterval(progressInterval);
-        const mockResult = {
-          success: true,
-          data: {
-            summary: `Command "${currentCommand}" executed successfully`,
-            agentId,
-            context,
-            timestamp: (/* @__PURE__ */ new Date()).toISOString()
-          },
-          message: "Execution complete"
-        };
-        setResult(mockResult);
-        setState("success");
-        setProgress(100);
-        onComplete?.(mockResult);
+          clearInterval(progressInterval);
+          const result2 = {
+            success: true,
+            data: {
+              summary: response.message,
+              thread_id: response.thread_id,
+              agentId,
+              context,
+              timestamp: (/* @__PURE__ */ new Date()).toISOString()
+            },
+            widgets: response.widgets,
+            message: response.message
+          };
+          setResult(result2);
+          setState("success");
+          setProgress(100);
+          onComplete?.(result2);
+        }
       }
     } catch (err) {
       const error2 = err instanceof Error ? err : new Error("Unknown error");
@@ -638,14 +1619,71 @@ function Command({
     setError(null);
     setProgress(0);
     setCommand("");
+    setPlan("");
+    setPendingCommand("");
+    setShowPlanDetails(false);
+    setUploadedFiles([]);
   };
-  const handleFileSelect = (e) => {
+  const approvePlan = () => {
+    setShowPlanDetails(false);
+    const planToExecute = plan;
+    setPlan("");
+    setPendingCommand("");
+    const executionMessage = `Execute this plan now:
+
+${planToExecute}`;
+    executeCommand(executionMessage);
+  };
+  const rejectPlan = () => {
+    setCommand(pendingCommand);
+    setPlan("");
+    setPendingCommand("");
+    setShowPlanDetails(false);
+    setState("idle");
+  };
+  const handleFileSelect = async (e) => {
     if (e.target.files && e.target.files.length > 0) {
       onFileUpload?.(e.target.files);
+      const files = [];
+      for (let i = 0; i < e.target.files.length; i++) {
+        const file = e.target.files[i];
+        const reader = new FileReader();
+        await new Promise((resolve) => {
+          reader.onload = (event) => {
+            if (event.target?.result) {
+              const fullDataUrl = event.target.result;
+              const base64Data = fullDataUrl.split(",")[1];
+              if (file.type.startsWith("image/")) {
+                files.push({
+                  type: "image",
+                  data: base64Data,
+                  mediaType: file.type,
+                  preview: fullDataUrl,
+                  // Keep full data URL for preview
+                  name: file.name
+                });
+              } else if (file.type === "application/pdf" || file.type.startsWith("application/")) {
+                files.push({
+                  type: "document",
+                  data: base64Data,
+                  mediaType: file.type,
+                  name: file.name
+                });
+              }
+            }
+            resolve();
+          };
+          reader.readAsDataURL(file);
+        });
+      }
+      setUploadedFiles((prev) => [...prev, ...files]);
     }
   };
+  const removeFile = (index) => {
+    setUploadedFiles((prev) => prev.filter((_, i) => i !== index));
+  };
   const isCompact = variant === "compact";
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs10(
     "div",
     {
       className: cn(
@@ -653,40 +1691,142 @@ function Command({
         state === "loading" && "animate-pulse-border",
         state === "idle" && "border-gray-300 dark:border-gray-700",
         state === "loading" && "border-blue-500",
+        state === "plan-pending" && "border-blue-400",
         state === "success" && "border-green-500",
         state === "error" && "border-red-500",
         className
       ),
       style: { minHeight: isCompact ? "auto" : "180px" },
       children: [
-        /* @__PURE__ */ jsxs8("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__ */ jsx10(
-            "textarea",
-            {
-              value: command,
-              onChange: (e) => setCommand(e.target.value),
-              onKeyDown: (e) => {
-                if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-                  e.preventDefault();
-                  executeCommand();
-                }
-              },
-              placeholder,
-              className: "flex-1 w-full resize-none bg-transparent border-none focus:outline-none !text-gray-900 dark:!text-gray-100 placeholder-gray-400 dark:placeholder-gray-500",
-              rows: 6
-            }
-          ),
-          state === "idle" && allowInput && isCompact && /* @__PURE__ */ jsxs8(Fragment2, { children: [
-            /* @__PURE__ */ jsx10(
-              "button",
+        /* @__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(
+              "textarea",
               {
-                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__ */ 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.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)" }) })
+                value: command,
+                onChange: (e) => setCommand(e.target.value),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                    e.preventDefault();
+                    executeCommand();
+                  }
+                },
+                placeholder,
+                className: "flex-1 w-full resize-none bg-transparent border-none focus:outline-none !text-gray-900 dark:!text-gray-100 placeholder-gray-400 dark:placeholder-gray-500",
+                rows: 6
               }
             ),
-            /* @__PURE__ */ jsx10(
+            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(
+                "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__ */ jsx12(
+                "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" }) })
+                }
+              )
+            ] }, 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(
+                "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)" }) })
+                }
+              ),
+              planMode && /* @__PURE__ */ jsxs10("div", { className: "relative settings-menu-container", children: [
+                /* @__PURE__ */ jsx12(
+                  "button",
+                  {
+                    onClick: () => setShowSettingsMenu(!showSettingsMenu),
+                    className: cn(
+                      "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 hover:bg-gray-100 dark:hover:bg-gray-800",
+                      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" })
+                    ] })
+                  }
+                ),
+                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" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx12(
+                    "button",
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        setInternalPlanMode(!internalPlanMode);
+                      },
+                      className: cn(
+                        "relative inline-flex h-4 w-8 items-center rounded-full transition-colors",
+                        internalPlanMode ? "bg-blue-600" : "bg-gray-300 dark:bg-gray-600"
+                      ),
+                      type: "button",
+                      children: /* @__PURE__ */ jsx12(
+                        "span",
+                        {
+                          className: cn(
+                            "inline-block h-3 w-3 transform rounded-full bg-white transition-transform",
+                            internalPlanMode ? "translate-x-4.5" : "translate-x-0.5"
+                          )
+                        }
+                      )
+                    }
+                  )
+                ] }) })
+              ] })
+            ] }),
+            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(
+                "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(
+                "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" }) })
+                }
+              )
+            ] }, index)) }),
+            /* @__PURE__ */ jsx12(
               "input",
               {
                 type: "text",
@@ -702,10 +1842,10 @@ function Command({
                 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__ */ jsx10(
+            /* @__PURE__ */ jsx12(
               "button",
               {
-                onClick: executeCommand,
+                onClick: () => executeCommand(),
                 disabled: !command.trim(),
                 className: cn(
                   "w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0",
@@ -718,33 +1858,33 @@ function Command({
                   !command.trim() && "border-gray-200 dark:border-gray-700 !text-gray-400 dark:!text-gray-600"
                 ),
                 title: "Execute",
-                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" }) })
               }
             )
           ] }),
-          state === "loading" && !isCompact && /* @__PURE__ */ jsxs8("div", { className: "flex-1 flex flex-col items-center justify-center space-y-4 py-8", children: [
-            /* @__PURE__ */ jsx10("div", { className: "w-6 h-6 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin" }),
-            /* @__PURE__ */ jsx10("div", { className: "text-gray-600 dark:text-gray-400 text-sm text-center max-w-md", children: enableStreaming && streamedContent ? streamedContent : loadingText }),
-            showProgress && /* @__PURE__ */ jsxs8("div", { className: "w-full max-w-sm", children: [
-              /* @__PURE__ */ jsx10("div", { className: "w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5", children: /* @__PURE__ */ jsx10(
+          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(
                 "div",
                 {
                   className: "bg-blue-500 h-1.5 rounded-full transition-all duration-300",
                   style: { width: `${progress}%` }
                 }
               ) }),
-              /* @__PURE__ */ jsxs8("p", { className: "text-xs text-gray-500 mt-2 text-center", children: [
+              /* @__PURE__ */ jsxs10("p", { className: "text-xs text-gray-500 mt-2 text-center", children: [
                 progress,
                 "%"
               ] })
             ] })
           ] }),
-          state === "loading" && isCompact && /* @__PURE__ */ jsxs8(Fragment2, { children: [
-            /* @__PURE__ */ jsxs8("div", { className: "flex-1 flex items-center gap-3 py-1", children: [
-              /* @__PURE__ */ jsx10("div", { className: "w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin" }),
-              /* @__PURE__ */ jsx10("div", { className: "text-gray-600 dark:text-gray-400 text-sm truncate", children: enableStreaming && streamedContent ? streamedContent : loadingText })
+          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 })
             ] }),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx12(
               "button",
               {
                 disabled: true,
@@ -756,19 +1896,77 @@ function Command({
                   "!text-lg",
                   "opacity-30 cursor-not-allowed"
                 ),
-                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" }) })
               }
             )
           ] }),
-          state === "error" && /* @__PURE__ */ jsxs8("div", { className: "flex-1 flex flex-col", children: [
-            /* @__PURE__ */ jsx10("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__ */ jsxs8("div", { className: "flex items-start gap-2", children: [
-              /* @__PURE__ */ jsx10("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__ */ jsx10("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-              /* @__PURE__ */ jsxs8("div", { children: [
-                /* @__PURE__ */ jsx10("h3", { className: "text-sm font-semibold text-red-800 dark:text-red-400", children: "Error" }),
-                /* @__PURE__ */ jsx10("p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: error?.message })
+          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 })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs10("div", { className: "flex gap-2 mt-4", children: [
+              /* @__PURE__ */ jsx12(
+                "button",
+                {
+                  onClick: approvePlan,
+                  className: "flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium",
+                  children: "Approve & Execute"
+                }
+              ),
+              /* @__PURE__ */ jsx12(
+                "button",
+                {
+                  onClick: rejectPlan,
+                  className: "flex-1 px-4 py-2 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-sm font-medium",
+                  children: "Modify"
+                }
+              )
+            ] })
+          ] }) }),
+          state === "plan-pending" && isCompact && /* @__PURE__ */ jsxs10(Fragment2, { children: [
+            /* @__PURE__ */ jsxs10(
+              "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__ */ jsxs10("div", { className: "flex gap-2 flex-shrink-0", children: [
+              /* @__PURE__ */ jsx12(
+                "button",
+                {
+                  onClick: approvePlan,
+                  className: "px-3 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-xs font-medium",
+                  children: "Approve"
+                }
+              ),
+              /* @__PURE__ */ jsx12(
+                "button",
+                {
+                  onClick: rejectPlan,
+                  className: "px-3 py-1.5 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 === "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 })
               ] })
             ] }) }),
-            allowInput && /* @__PURE__ */ jsx10(
+            allowInput && /* @__PURE__ */ jsx12(
               "textarea",
               {
                 value: command,
@@ -785,32 +1983,40 @@ function Command({
               }
             )
           ] }),
-          state === "success" && result && !isCompact && /* @__PURE__ */ jsx10("div", { className: "flex-1 overflow-auto", children: resultRenderer ? resultRenderer(result.data) : /* @__PURE__ */ jsxs8("div", { children: [
-            /* @__PURE__ */ jsxs8("div", { className: "flex items-start gap-3 mb-3 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg", children: [
-              /* @__PURE__ */ jsx10("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__ */ jsx10("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__ */ jsxs8("div", { className: "flex-1", children: [
-                /* @__PURE__ */ jsx10("h3", { className: "text-sm font-semibold text-green-800 dark:text-green-400 mb-1", children: "Success" }),
-                /* @__PURE__ */ jsx10("p", { className: "text-green-700 dark:text-green-300 text-sm", children: result.message || "Command executed successfully" })
+          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" })
               ] })
             ] }),
-            result.data?.summary && /* @__PURE__ */ jsx10("div", { className: "text-gray-700 dark:text-gray-300 text-sm leading-relaxed", children: result.data.summary })
+            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(
+              WidgetRenderer,
+              {
+                widget,
+                onAction
+              },
+              widget.id
+            )) })
           ] }) }),
-          state === "success" && result && isCompact && /* @__PURE__ */ jsxs8(Fragment2, { children: [
-            /* @__PURE__ */ jsxs8(
+          state === "success" && result && isCompact && /* @__PURE__ */ jsxs10(Fragment2, { children: [
+            /* @__PURE__ */ jsxs10(
               "div",
               {
-                className: "flex-1 flex items-center gap-2 py-1 cursor-text",
+                className: "flex-1 flex items-center gap-2 py-1 cursor-text min-w-0",
                 onClick: () => {
                   setState("idle");
                   setResult(null);
                 },
                 children: [
-                  /* @__PURE__ */ jsx10("svg", { className: "w-4 h-4 text-green-600 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx10("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__ */ jsx10("div", { className: "text-green-700 dark:text-green-300 text-sm truncate", children: resultRenderer ? resultRenderer(result.data) : result.message || "Command executed successfully" })
+                  /* @__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__ */ jsx10(
+            /* @__PURE__ */ jsx12(
               "button",
               {
                 onClick: () => {
@@ -826,24 +2032,82 @@ function Command({
                   "!text-lg"
                 ),
                 title: "New command",
-                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" }) })
               }
             )
           ] })
         ] }),
-        !isCompact && /* @__PURE__ */ jsxs8("div", { className: "p-3 flex items-center justify-between gap-2", children: [
-          state === "idle" && allowInput && /* @__PURE__ */ jsx10(
-            "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__ */ 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.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)" }) })
-            }
-          ),
-          !(state === "idle" && allowInput) && /* @__PURE__ */ jsx10("div", {}),
-          /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
-            (state === "success" || state === "error") && allowInput && /* @__PURE__ */ jsx10(
+        !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(
+              "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)" }) })
+              }
+            ),
+            planMode && /* @__PURE__ */ jsxs10("div", { className: "relative settings-menu-container", children: [
+              /* @__PURE__ */ jsx12(
+                "button",
+                {
+                  onClick: () => setShowSettingsMenu(!showSettingsMenu),
+                  className: cn(
+                    "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 hover:bg-gray-100 dark:hover:bg-gray-800",
+                    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" })
+                  ] })
+                }
+              ),
+              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" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx12(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      setInternalPlanMode(!internalPlanMode);
+                    },
+                    className: cn(
+                      "relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
+                      internalPlanMode ? "bg-blue-600" : "bg-gray-300 dark:bg-gray-600"
+                    ),
+                    type: "button",
+                    children: /* @__PURE__ */ jsx12(
+                      "span",
+                      {
+                        className: cn(
+                          "inline-block h-3.5 w-3.5 transform rounded-full bg-white transition-transform",
+                          internalPlanMode ? "translate-x-5" : "translate-x-0.5"
+                        )
+                      }
+                    )
+                  }
+                )
+              ] }) })
+            ] })
+          ] }) }),
+          !(state === "idle" && allowInput) && /* @__PURE__ */ jsx12("div", {}),
+          /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+            (state === "success" || state === "error") && allowInput && /* @__PURE__ */ jsx12(
               "button",
               {
                 onClick: resetCommand,
@@ -851,10 +2115,10 @@ function Command({
                 children: "Reset"
               }
             ),
-            (state === "idle" || state === "error") && /* @__PURE__ */ jsx10(
+            (state === "idle" || state === "error") && /* @__PURE__ */ jsx12(
               "button",
               {
-                onClick: executeCommand,
+                onClick: () => executeCommand(),
                 disabled: !command.trim(),
                 className: cn(
                   "w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all",
@@ -867,12 +2131,47 @@ function Command({
                   !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__ */ 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: "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__ */ 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: 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" }) })
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx10(
+        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" })
+            ] }),
+            /* @__PURE__ */ jsx12(
+              "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" }) })
+              }
+            )
+          ] }),
+          /* @__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(
+              "button",
+              {
+                onClick: rejectPlan,
+                className: "px-6 py-2.5 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 font-medium",
+                children: "Modify Command"
+              }
+            ),
+            /* @__PURE__ */ jsx12(
+              "button",
+              {
+                onClick: approvePlan,
+                className: "px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium",
+                children: "Approve & Execute"
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx12(
           "input",
           {
             ref: fileInputRef,
@@ -883,7 +2182,7 @@ function Command({
             accept: "image/*,application/pdf,.doc,.docx,.txt"
           }
         ),
-        /* @__PURE__ */ jsx10("style", { dangerouslySetInnerHTML: {
+        /* @__PURE__ */ jsx12("style", { dangerouslySetInnerHTML: {
           __html: `
           @keyframes pulse-border {
             0%, 100% {
@@ -905,11 +2204,12 @@ function Command({
 
 // src/components/Prompt/Prompt.tsx
 import { useState as useState4 } from "react";
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 function Prompt({
   agentId,
   placeholder = "Enter your prompt...",
   initialValue = "",
+  useMock = true,
   submitOn = "button",
   debounceMs = 0,
   minLength = 0,
@@ -936,10 +2236,19 @@ function Prompt({
     onSubmit?.(value);
     setIsLoading(true);
     try {
-      await new Promise((resolve) => setTimeout(resolve, 1500));
-      const mockResult = `Enhanced version: ${value} [AI-generated content]`;
-      onResult?.(mockResult);
-      setValue("");
+      if (useMock) {
+        await new Promise((resolve) => setTimeout(resolve, 1500));
+        const mockResult = `Enhanced version: ${value} [AI-generated content]`;
+        onResult?.(mockResult);
+        setValue("");
+      } else {
+        const response = await aptevaClient.chat({
+          agent_id: agentId,
+          message: value
+        });
+        onResult?.(response.message);
+        setValue("");
+      }
     } catch (error) {
       console.error("Error processing prompt:", error);
     } finally {
@@ -957,9 +2266,9 @@ function Prompt({
       handleSubmit();
     }
   };
-  return /* @__PURE__ */ jsxs9("div", { className: cn("space-y-2", className), children: [
-    /* @__PURE__ */ jsxs9("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs11("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsxs11("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx13(
         "input",
         {
           type: "text",
@@ -972,7 +2281,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__ */ jsx11(
+      submitOn === "button" && /* @__PURE__ */ jsx13(
         "button",
         {
           onClick: handleSubmit,
@@ -982,13 +2291,13 @@ function Prompt({
         }
       )
     ] }),
-    maxLength && /* @__PURE__ */ jsxs9("p", { className: "text-xs text-gray-500", children: [
+    maxLength && /* @__PURE__ */ jsxs11("p", { className: "text-xs text-gray-500", children: [
       value.length,
       " / ",
       maxLength,
       " characters"
     ] }),
-    showSuggestions && !value && /* @__PURE__ */ jsx11("div", { className: "flex flex-wrap gap-2", children: suggestions.map((suggestion, idx) => /* @__PURE__ */ jsx11(
+    showSuggestions && !value && /* @__PURE__ */ jsx13("div", { className: "flex flex-wrap gap-2", children: suggestions.map((suggestion, idx) => /* @__PURE__ */ jsx13(
       "button",
       {
         onClick: () => setValue(suggestion),
@@ -997,21 +2306,22 @@ function Prompt({
       },
       idx
     )) }),
-    isLoading && /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [
-      /* @__PURE__ */ jsx11("div", { className: "w-4 h-4 border-2 border-apteva-500 border-t-transparent rounded-full animate-spin" }),
-      /* @__PURE__ */ jsx11("span", { children: "AI is processing your request..." })
+    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..." })
     ] })
   ] });
 }
 
 // src/components/Stream/Stream.tsx
 import { useState as useState5, useEffect as useEffect5 } from "react";
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function Stream({
   agentId,
   prompt,
   context,
   autoStart = false,
+  useMock = true,
   onStart,
   onChunk,
   onComplete,
@@ -1032,19 +2342,47 @@ function Stream({
   const startStreaming = async () => {
     setIsStreaming(true);
     onStart?.();
-    const mockText = "This is a simulated streaming response from the AI agent. In a real implementation, this would stream data from your backend API. The text appears word by word to simulate the streaming effect. You can customize the typing speed and styling based on your needs.";
     try {
-      await generateMockStreamingResponse(
-        mockText,
-        (chunk) => {
-          setText((prev) => prev + chunk);
-          onChunk?.(chunk);
-        },
-        typingSpeed
-      );
-      setIsComplete(true);
-      setIsStreaming(false);
-      onComplete?.(text + mockText);
+      if (useMock) {
+        const mockText = "This is a simulated streaming response from the AI agent. In a real implementation, this would stream data from your backend API. The text appears word by word to simulate the streaming effect. You can customize the typing speed and styling based on your needs.";
+        await generateMockStreamingResponse(
+          mockText,
+          (chunk) => {
+            setText((prev) => prev + chunk);
+            onChunk?.(chunk);
+          },
+          typingSpeed
+        );
+        setIsComplete(true);
+        setIsStreaming(false);
+        onComplete?.(text + mockText);
+      } else {
+        let accumulatedText = "";
+        await aptevaClient.chatStream(
+          {
+            agent_id: agentId,
+            message: prompt,
+            stream: true
+          },
+          (chunk) => {
+            if (chunk.type === "token" && chunk.content) {
+              accumulatedText += chunk.content;
+              setText(accumulatedText);
+              onChunk?.(chunk.content);
+            }
+          },
+          () => {
+            setIsComplete(true);
+            setIsStreaming(false);
+            onComplete?.(accumulatedText);
+          },
+          (error) => {
+            const err = error instanceof Error ? error : new Error("Streaming error");
+            onError?.(err);
+            setIsStreaming(false);
+          }
+        );
+      }
     } catch (error) {
       const err = error instanceof Error ? error : new Error("Streaming error");
       onError?.(err);
@@ -1057,7 +2395,7 @@ function Stream({
     plain: "text-gray-900 dark:text-gray-100"
   };
   if (!isStreaming && !isComplete) {
-    return /* @__PURE__ */ jsx12("div", { className: cn("p-4", className), children: /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx14("div", { className: cn("p-4", className), children: /* @__PURE__ */ jsx14(
       "button",
       {
         onClick: startStreaming,
@@ -1066,9 +2404,9 @@ function Stream({
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs10("div", { className: cn(variantClasses[variant], className), children: [
+  return /* @__PURE__ */ jsxs12("div", { className: cn(variantClasses[variant], className), children: [
     text,
-    isStreaming && showCursor && /* @__PURE__ */ jsx12("span", { className: "apteva-stream-cursor" })
+    isStreaming && showCursor && /* @__PURE__ */ jsx14("span", { className: "apteva-stream-cursor" })
   ] });
 }
 
@@ -1076,9 +2414,9 @@ function Stream({
 import { useState as useState6 } from "react";
 
 // src/components/Threads/ThreadItem.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
 function ThreadItem({ thread, isActive = false, onSelect, onDelete }) {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       className: cn("apteva-thread-item", {
@@ -1086,19 +2424,19 @@ function ThreadItem({ thread, isActive = false, onSelect, onDelete }) {
       }),
       onClick: onSelect,
       children: [
-        /* @__PURE__ */ jsxs11("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx13("h4", { className: "font-semibold text-gray-900 dark:text-white truncate", children: thread.title }),
-          thread.preview && /* @__PURE__ */ jsx13("p", { className: "text-sm text-gray-600 dark:text-gray-400 truncate", children: thread.preview }),
-          /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 mt-1 text-xs text-gray-500", children: [
-            /* @__PURE__ */ jsxs11("span", { 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: [
               thread.messageCount,
               " messages"
             ] }),
-            /* @__PURE__ */ jsx13("span", { children: "\u2022" }),
-            /* @__PURE__ */ jsx13("span", { children: formatRelativeTime(thread.updatedAt) })
+            /* @__PURE__ */ jsx15("span", { children: "\u2022" }),
+            /* @__PURE__ */ jsx15("span", { children: formatRelativeTime(thread.updatedAt) })
           ] })
         ] }),
-        onDelete && /* @__PURE__ */ jsx13(
+        onDelete && /* @__PURE__ */ jsx15(
           "button",
           {
             onClick: (e) => {
@@ -1128,7 +2466,7 @@ function formatRelativeTime(date) {
 }
 
 // src/components/Threads/ThreadList.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 function ThreadList({
   threads,
   currentThreadId,
@@ -1142,8 +2480,8 @@ function ThreadList({
     (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || thread.preview?.toLowerCase().includes(searchQuery.toLowerCase())
   );
   const groupedThreads = groupBy === "date" ? groupThreadsByDate(filteredThreads) : { All: filteredThreads };
-  return /* @__PURE__ */ jsxs12("div", { className: "flex flex-col h-full", children: [
-    showSearch && /* @__PURE__ */ jsx14("div", { className: "p-3 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx14(
+  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(
       "input",
       {
         type: "text",
@@ -1153,10 +2491,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__ */ jsxs12("div", { className: "flex-1 overflow-y-auto", children: [
-      Object.entries(groupedThreads).map(([group, groupThreads]) => /* @__PURE__ */ jsxs12("div", { children: [
-        groupBy !== "none" && /* @__PURE__ */ jsx14("div", { className: "px-3 py-2 text-xs font-semibold text-gray-500 uppercase", children: group }),
-        groupThreads.map((thread) => /* @__PURE__ */ jsx14(
+    /* @__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(
           ThreadItem,
           {
             thread,
@@ -1167,9 +2505,9 @@ function ThreadList({
           thread.id
         ))
       ] }, group)),
-      filteredThreads.length === 0 && /* @__PURE__ */ jsxs12("div", { className: "p-8 text-center text-gray-500", children: [
-        /* @__PURE__ */ jsx14("div", { className: "text-4xl mb-2", children: "\u{1F4AC}" }),
-        /* @__PURE__ */ jsx14("p", { children: "No conversations found" })
+      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" })
       ] })
     ] })
   ] });
@@ -1201,7 +2539,7 @@ function groupThreadsByDate(threads) {
 }
 
 // src/components/Threads/Threads.tsx
-import { jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
 function Threads({
   threads,
   currentThreadId,
@@ -1220,8 +2558,8 @@ function Threads({
     tabs: "flex gap-2 border-b border-gray-200 dark:border-gray-700 overflow-x-auto"
   };
   if (variant === "tabs") {
-    return /* @__PURE__ */ jsxs13("div", { className: cn(variantClasses[variant], className), children: [
-      threads.slice(0, 5).map((thread) => /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsxs15("div", { className: cn(variantClasses[variant], className), children: [
+      threads.slice(0, 5).map((thread) => /* @__PURE__ */ jsx17(
         "button",
         {
           onClick: () => onThreadSelect?.(thread.id),
@@ -1233,7 +2571,7 @@ function Threads({
         },
         thread.id
       )),
-      showNewButton && onNewThread && /* @__PURE__ */ jsx15(
+      showNewButton && onNewThread && /* @__PURE__ */ jsx17(
         "button",
         {
           onClick: onNewThread,
@@ -1243,8 +2581,8 @@ function Threads({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs13("div", { className: cn(variantClasses[variant], "flex flex-col", className), children: [
-    showNewButton && onNewThread && /* @__PURE__ */ jsx15("div", { className: "p-3 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx15(
+  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(
       "button",
       {
         onClick: onNewThread,
@@ -1252,7 +2590,7 @@ function Threads({
         children: "+ New Conversation"
       }
     ) }),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx17(
       ThreadList,
       {
         threads,
@@ -1290,6 +2628,7 @@ function getThemeScript() {
   return themeScript;
 }
 export {
+  AptevaClient,
   Button,
   Card,
   Chat,
@@ -1299,6 +2638,7 @@ export {
   Stream,
   Threads,
   Widgets,
+  aptevaClient,
   cn,
   getThemeScript,
   mockMessages,