@apteva/apteva-kit 0.1.7 → 0.1.9

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: [
@@ -468,6 +703,7 @@ function Chat({
   agentId,
   threadId,
   initialMessages = [],
+  context,
   onThreadChange,
   onMessageSent,
   onAction,
@@ -520,6 +756,178 @@ function Chat({
 
 // src/components/Command/Command.tsx
 import React, { useState as useState3, useEffect as useEffect4 } from "react";
+
+// 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;
+              }
+              if (chunk.type === "token" && chunk.content) {
+                onChunk({ type: "token", content: chunk.content });
+              } else if (chunk.type === "widget" && chunk.widget) {
+                onChunk({ type: "widget", widget: chunk.widget });
+              } else if (chunk.type === "complete") {
+                onChunk({ type: "complete", thread_id: threadId });
+              }
+            } catch (e) {
+              console.warn("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/Command/Command.tsx
 import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
 function Command({
   agentId,
@@ -530,12 +938,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 +961,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,12 +1314,69 @@ 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(
     "div",
@@ -653,6 +1386,7 @@ 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
@@ -660,32 +1394,133 @@ function Command({
       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: [
+          state === "idle" && allowInput && !isCompact && /* @__PURE__ */ jsxs8(Fragment2, { children: [
             /* @__PURE__ */ jsx10(
-              "button",
+              "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
               }
             ),
+            uploadedFiles.length > 0 && /* @__PURE__ */ jsx10("div", { className: "flex flex-wrap gap-2 mt-2", children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs8("div", { className: "relative group", children: [
+              file.type === "image" ? /* @__PURE__ */ jsx10(
+                "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__ */ jsxs8("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__ */ jsx10("svg", { className: "w-8 h-8 text-gray-500 dark:text-gray-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx10("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__ */ jsx10("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__ */ jsx10(
+                "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__ */ jsx10("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx10("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                }
+              )
+            ] }, index)) })
+          ] }),
+          state === "idle" && allowInput && isCompact && /* @__PURE__ */ jsxs8(Fragment2, { children: [
+            /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
+              enableFileUpload && /* @__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)" }) })
+                }
+              ),
+              planMode && /* @__PURE__ */ jsxs8("div", { className: "relative settings-menu-container", children: [
+                /* @__PURE__ */ jsx10(
+                  "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__ */ jsxs8("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                      /* @__PURE__ */ jsx10("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
+                      /* @__PURE__ */ jsx10("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
+                      /* @__PURE__ */ jsx10("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
+                      /* @__PURE__ */ jsx10("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
+                      /* @__PURE__ */ jsx10("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
+                      /* @__PURE__ */ jsx10("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
+                      /* @__PURE__ */ jsx10("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
+                      /* @__PURE__ */ jsx10("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
+                      /* @__PURE__ */ jsx10("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
+                    ] })
+                  }
+                ),
+                showSettingsMenu && /* @__PURE__ */ jsx10("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__ */ jsxs8("label", { className: "flex items-center justify-between cursor-pointer group", children: [
+                  /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx10("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__ */ jsx10("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__ */ jsxs8("div", { children: [
+                      /* @__PURE__ */ jsx10("div", { className: "text-xs font-medium text-gray-700 dark:text-gray-300", children: "Plan Mode" }),
+                      /* @__PURE__ */ jsx10("div", { className: "text-[10px] text-gray-500 dark:text-gray-400", children: "Review first" })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx10(
+                    "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__ */ jsx10(
+                        "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__ */ jsx10("div", { className: "flex gap-1 flex-shrink-0", children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs8("div", { className: "relative group", children: [
+              file.type === "image" ? /* @__PURE__ */ jsx10(
+                "img",
+                {
+                  src: file.preview,
+                  alt: file.name,
+                  className: "w-8 h-8 object-cover rounded border border-gray-300 dark:border-gray-600"
+                }
+              ) : /* @__PURE__ */ jsx10("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__ */ jsx10("svg", { className: "w-4 h-4 text-gray-500 dark:text-gray-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx10("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__ */ jsx10(
+                "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__ */ jsx10("svg", { className: "w-2.5 h-2.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx10("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
+                }
+              )
+            ] }, index)) }),
             /* @__PURE__ */ jsx10(
               "input",
               {
@@ -705,7 +1540,7 @@ function Command({
             /* @__PURE__ */ jsx10(
               "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",
@@ -760,6 +1595,64 @@ function Command({
               }
             )
           ] }),
+          state === "plan-pending" && !isCompact && /* @__PURE__ */ jsx10("div", { className: "flex-1 flex flex-col", children: /* @__PURE__ */ jsxs8("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__ */ jsxs8("div", { className: "flex items-start gap-2 mb-3", children: [
+              /* @__PURE__ */ jsx10("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__ */ jsx10("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__ */ jsxs8("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsx10("h3", { className: "text-sm font-semibold text-blue-800 dark:text-blue-300 mb-1", children: "Proposed Plan" }),
+                /* @__PURE__ */ jsx10("div", { className: "text-blue-700 dark:text-blue-300 text-sm whitespace-pre-line leading-relaxed", children: plan })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs8("div", { className: "flex gap-2 mt-4", children: [
+              /* @__PURE__ */ jsx10(
+                "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__ */ jsx10(
+                "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__ */ jsxs8(Fragment2, { children: [
+            /* @__PURE__ */ jsxs8(
+              "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__ */ jsx10("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__ */ jsx10("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__ */ jsx10("span", { className: "text-sm font-medium text-blue-700 dark:text-blue-300 truncate flex-1", children: "View Execution Plan" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs8("div", { className: "flex gap-2 flex-shrink-0", children: [
+              /* @__PURE__ */ jsx10(
+                "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__ */ jsx10(
+                "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__ */ 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" }) }),
@@ -785,28 +1678,36 @@ 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: [
+          state === "success" && result && !isCompact && /* @__PURE__ */ jsx10("div", { className: "flex-1 overflow-auto", children: resultRenderer ? resultRenderer(result.data) : /* @__PURE__ */ jsxs8("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs8("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__ */ 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" })
+                /* @__PURE__ */ jsx10("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__ */ jsx10("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__ */ jsx10("div", { className: "space-y-3", children: result.widgets.map((widget) => /* @__PURE__ */ jsx10(
+              WidgetRenderer,
+              {
+                widget,
+                onAction
+              },
+              widget.id
+            )) })
           ] }) }),
           state === "success" && result && isCompact && /* @__PURE__ */ jsxs8(Fragment2, { children: [
             /* @__PURE__ */ jsxs8(
               "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__ */ jsx10("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" })
                 ]
               }
             ),
@@ -832,15 +1733,73 @@ function Command({
           ] })
         ] }),
         !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)" }) })
-            }
-          ),
+          /* @__PURE__ */ jsx10("div", { className: "flex items-center gap-1", children: state === "idle" && allowInput && /* @__PURE__ */ jsxs8(Fragment2, { children: [
+            enableFileUpload && /* @__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)" }) })
+              }
+            ),
+            planMode && /* @__PURE__ */ jsxs8("div", { className: "relative settings-menu-container", children: [
+              /* @__PURE__ */ jsx10(
+                "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__ */ jsxs8("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsx10("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
+                    /* @__PURE__ */ jsx10("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
+                    /* @__PURE__ */ jsx10("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
+                    /* @__PURE__ */ jsx10("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
+                    /* @__PURE__ */ jsx10("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
+                    /* @__PURE__ */ jsx10("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
+                    /* @__PURE__ */ jsx10("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
+                    /* @__PURE__ */ jsx10("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
+                    /* @__PURE__ */ jsx10("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
+                  ] })
+                }
+              ),
+              showSettingsMenu && /* @__PURE__ */ jsx10("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__ */ jsxs8("label", { className: "flex items-center justify-between cursor-pointer group", children: [
+                /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx10("svg", { className: "w-4 h-4 text-gray-500 dark:text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx10("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__ */ jsxs8("div", { children: [
+                    /* @__PURE__ */ jsx10("div", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Plan Mode" }),
+                    /* @__PURE__ */ jsx10("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Review before executing" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx10(
+                  "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__ */ jsx10(
+                      "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__ */ jsx10("div", {}),
           /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
             (state === "success" || state === "error") && allowInput && /* @__PURE__ */ jsx10(
@@ -854,7 +1813,7 @@ function Command({
             (state === "idle" || state === "error") && /* @__PURE__ */ jsx10(
               "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",
@@ -872,6 +1831,41 @@ function Command({
             )
           ] })
         ] }),
+        showPlanDetails && isCompact && state === "plan-pending" && /* @__PURE__ */ jsx10("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4", onClick: () => setShowPlanDetails(false), children: /* @__PURE__ */ jsxs8("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__ */ jsxs8("div", { className: "flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700", children: [
+            /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx10("svg", { className: "w-6 h-6 text-blue-600 dark:text-blue-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx10("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__ */ jsx10("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: "Proposed Execution Plan" })
+            ] }),
+            /* @__PURE__ */ jsx10(
+              "button",
+              {
+                onClick: () => setShowPlanDetails(false),
+                className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors",
+                children: /* @__PURE__ */ jsx10("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx10("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx10("div", { className: "p-6 overflow-y-auto max-h-[calc(80vh-180px)]", children: /* @__PURE__ */ jsx10("div", { className: "prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx10("div", { className: "text-gray-700 dark:text-gray-300 whitespace-pre-line leading-relaxed", children: plan }) }) }),
+          /* @__PURE__ */ jsxs8("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__ */ jsx10(
+              "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__ */ jsx10(
+              "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__ */ jsx10(
           "input",
           {
@@ -910,6 +1904,7 @@ function Prompt({
   agentId,
   placeholder = "Enter your prompt...",
   initialValue = "",
+  useMock = true,
   submitOn = "button",
   debounceMs = 0,
   minLength = 0,
@@ -936,10 +1931,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 {
@@ -1012,6 +2016,7 @@ function Stream({
   prompt,
   context,
   autoStart = false,
+  useMock = true,
   onStart,
   onChunk,
   onComplete,
@@ -1032,19 +2037,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);
@@ -1290,6 +2323,7 @@ function getThemeScript() {
   return themeScript;
 }
 export {
+  AptevaClient,
   Button,
   Card,
   Chat,
@@ -1299,6 +2333,7 @@ export {
   Stream,
   Threads,
   Widgets,
+  aptevaClient,
   cn,
   getThemeScript,
   mockMessages,