@apteva/apteva-kit 0.1.17 → 0.1.22

package/dist/index.mjs

@@ -4,10 +4,13 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/components/Chat/Chat.tsx
-import { useState as useState3, useEffect as useEffect3, useRef as useRef4 } from "react";
+import { useState as useState3, useEffect as useEffect4, useRef as useRef5, useMemo as useMemo2 } from "react";
 
 // src/components/Chat/MessageList.tsx
-import { useEffect as useEffect2, useRef } from "react";
+import { useEffect as useEffect3, useRef as useRef2 } from "react";
+
+// src/components/Chat/Message.tsx
+import { useEffect as useEffect2, useRef, useMemo } from "react";
 
 // src/utils/cn.ts
 import { clsx } from "clsx";
@@ -498,6 +501,246 @@ function validateFile(file) {
   return { valid: true };
 }
 
+// src/utils/widget-parser.ts
+function simpleHash(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash;
+  }
+  return Math.abs(hash).toString(36);
+}
+function findMatchingBracket(text, startIndex) {
+  let depth = 0;
+  let inString = false;
+  let escapeNext = false;
+  for (let i = startIndex; i < text.length; i++) {
+    const char = text[i];
+    if (escapeNext) {
+      escapeNext = false;
+      continue;
+    }
+    if (char === "\\" && inString) {
+      escapeNext = true;
+      continue;
+    }
+    if (char === '"') {
+      inString = !inString;
+      continue;
+    }
+    if (inString) continue;
+    if (char === "[" || char === "{") {
+      depth++;
+    } else if (char === "]" || char === "}") {
+      depth--;
+      if (depth === 0) {
+        return i;
+      }
+    }
+  }
+  return -1;
+}
+function parseWidgetsFromText(text) {
+  const segments = [];
+  let hasWidgets = false;
+  let hasPendingWidget = false;
+  let currentIndex = 0;
+  let pendingWidgetType = null;
+  let processText = text;
+  const lastWidgetStart = text.lastIndexOf("@ui:");
+  if (lastWidgetStart !== -1) {
+    const afterStart = text.slice(lastWidgetStart);
+    const typeMatch = afterStart.match(/^@ui:(\w+)/);
+    if (typeMatch) {
+      const widgetType = typeMatch[1];
+      const bracketOpenIndex = afterStart.indexOf("[");
+      if (bracketOpenIndex === -1) {
+        processText = text.slice(0, lastWidgetStart);
+        pendingWidgetType = widgetType;
+        hasPendingWidget = true;
+      } else {
+        const fullBracketStart = lastWidgetStart + bracketOpenIndex;
+        const bracketEnd = findMatchingBracket(text, fullBracketStart);
+        if (bracketEnd === -1) {
+          processText = text.slice(0, lastWidgetStart);
+          pendingWidgetType = widgetType;
+          hasPendingWidget = true;
+        }
+      }
+    }
+  }
+  if (hasPendingWidget) {
+    processText = processText.replace(/[\s:;\-–—\.]+$/g, "");
+  }
+  const startPattern = /@ui:(\w+)\[/g;
+  let match;
+  while ((match = startPattern.exec(processText)) !== null) {
+    const widgetType = match[1];
+    const bracketStart = match.index + match[0].length - 1;
+    const bracketEnd = findMatchingBracket(processText, bracketStart);
+    if (bracketEnd === -1) {
+      continue;
+    }
+    const jsonContent = processText.slice(bracketStart + 1, bracketEnd);
+    if (match.index > currentIndex) {
+      const textContent = processText.slice(currentIndex, match.index).trim();
+      if (textContent) {
+        segments.push({
+          type: "text",
+          content: textContent
+        });
+      }
+    }
+    try {
+      const trimmedJson = jsonContent.trim();
+      const props = JSON.parse(trimmedJson);
+      const widgetId = `widget-${widgetType}-${simpleHash(trimmedJson)}`;
+      segments.push({
+        type: "widget",
+        widget: {
+          type: widgetType,
+          id: widgetId,
+          props
+        }
+      });
+      hasWidgets = true;
+    } catch (e) {
+    }
+    currentIndex = bracketEnd + 1;
+    startPattern.lastIndex = currentIndex;
+  }
+  if (currentIndex < processText.length) {
+    const remainingText = processText.slice(currentIndex).trim();
+    if (remainingText) {
+      segments.push({
+        type: "text",
+        content: remainingText
+      });
+    }
+  }
+  if (segments.length === 0 && processText.trim()) {
+    segments.push({
+      type: "text",
+      content: processText.trim()
+    });
+  }
+  if (pendingWidgetType) {
+    segments.push({
+      type: "widget_pending",
+      pendingType: pendingWidgetType
+    });
+  }
+  return { segments, hasWidgets, hasPendingWidget };
+}
+
+// src/utils/widget-context.ts
+var WIDGET_DEFINITIONS = {
+  card: {
+    description: "Displays a card with title and optional description, image, footer",
+    schema: '{"title": "string", "description?": "string", "image?": "url", "footer?": "string"}',
+    example: '@ui:card[{"title": "Summary", "description": "Key findings from the analysis"}]'
+  },
+  list: {
+    description: "Displays a list of items with title, subtitle, and optional description",
+    schema: '{"items": [{"id": "string", "title": "string", "subtitle?": "string", "description?": "string", "image?": "url"}]}',
+    example: '@ui:list[{"items": [{"id": "1", "title": "First item", "subtitle": "Details"}]}]'
+  },
+  button_group: {
+    description: "Displays action buttons. User clicks are sent back to you with the button id",
+    schema: '{"buttons": [{"id": "string", "label": "string", "variant?": "primary|secondary|outline"}], "layout?": "horizontal|vertical"}',
+    example: '@ui:button_group[{"buttons": [{"id": "confirm", "label": "Confirm", "variant": "primary"}, {"id": "cancel", "label": "Cancel"}]}]'
+  },
+  form: {
+    description: "Displays an input form. Submitted data is sent back to you",
+    schema: '{"title?": "string", "fields": [{"name": "string", "type": "text|number|select|checkbox|textarea|date", "label": "string", "required?": boolean, "placeholder?": "string", "options?": [{"label": "string", "value": "string"}]}]}',
+    example: '@ui:form[{"title": "Contact", "fields": [{"name": "email", "type": "text", "label": "Email", "required": true}]}]'
+  },
+  image: {
+    description: "Displays a single image with optional caption",
+    schema: '{"src": "url", "alt": "string", "caption?": "string"}',
+    example: '@ui:image[{"src": "https://example.com/img.png", "alt": "Description", "caption": "Figure 1"}]'
+  },
+  gallery: {
+    description: "Displays multiple images in a grid or carousel layout",
+    schema: '{"images": [{"id": "string", "src": "url", "alt": "string", "caption?": "string"}], "layout?": "grid|carousel"}',
+    example: '@ui:gallery[{"images": [{"id": "1", "src": "https://example.com/1.png", "alt": "Image 1"}], "layout": "grid"}]'
+  },
+  chart: {
+    description: "Displays a chart visualization (line, bar, pie, doughnut)",
+    schema: '{"chartType": "line|bar|pie|doughnut", "title?": "string", "data": {"labels": ["string"], "datasets": [{"label": "string", "data": [number], "backgroundColor?": "string|string[]"}]}}',
+    example: '@ui:chart[{"chartType": "bar", "title": "Sales", "data": {"labels": ["Q1", "Q2"], "datasets": [{"label": "Revenue", "data": [100, 150]}]}}]'
+  },
+  map: {
+    description: "Displays an interactive map with optional markers",
+    schema: '{"center": {"lat": number, "lng": number}, "zoom?": number, "markers?": [{"id": "string", "position": {"lat": number, "lng": number}, "title": "string"}]}',
+    example: '@ui:map[{"center": {"lat": 40.7128, "lng": -74.0060}, "zoom": 12, "markers": [{"id": "1", "position": {"lat": 40.7128, "lng": -74.0060}, "title": "NYC"}]}]'
+  },
+  table: {
+    description: "Displays structured data in rows and columns",
+    schema: '{"columns": [{"key": "string", "label": "string", "align?": "left|center|right"}], "rows": [{"id?": "string", ...}], "caption?": "string", "compact?": boolean, "striped?": boolean}',
+    example: '@ui:table[{"columns": [{"key": "name", "label": "Name"}, {"key": "status", "label": "Status"}], "rows": [{"name": "Item 1", "status": "Active"}, {"name": "Item 2", "status": "Pending"}]}]'
+  }
+};
+var ALL_WIDGET_TYPES = Object.keys(WIDGET_DEFINITIONS);
+function generateWidgetContext(enabledWidgets) {
+  const widgets = enabledWidgets || ALL_WIDGET_TYPES;
+  let context = `
+## Available UI Widgets
+
+`;
+  context += `You can render rich UI components in your responses using this syntax: @ui:type[{json_props}]
+
+`;
+  context += `The widget syntax will be automatically converted to interactive UI. Users see the rendered widget, not the raw syntax.
+
+`;
+  context += `### Available widgets:
+
+`;
+  for (const type of widgets) {
+    const def = WIDGET_DEFINITIONS[type];
+    if (!def) continue;
+    context += `**${type}** - ${def.description}
+`;
+    context += `Schema: \`${def.schema}\`
+`;
+    context += `Example: \`${def.example}\`
+
+`;
+  }
+  context += `### Important notes:
+`;
+  context += `- JSON must be valid (use double quotes for strings)
+`;
+  context += `- Widget actions (button clicks, form submissions) are sent back to you
+`;
+  context += `- You can include multiple widgets in a single response
+`;
+  context += `- Combine widgets with regular text for context
+`;
+  return context;
+}
+function generateCompactWidgetContext(enabledWidgets) {
+  const widgets = enabledWidgets || ALL_WIDGET_TYPES;
+  let context = `
+UI Widgets: Use @ui:type[{props}] syntax.
+`;
+  context += `Available: ${widgets.join(", ")}
+`;
+  context += `Examples:
+`;
+  const examples = ["card", "list", "button_group"].filter((w) => widgets.includes(w));
+  for (const type of examples) {
+    const def = WIDGET_DEFINITIONS[type];
+    if (def) {
+      context += `${def.example}
+`;
+    }
+  }
+  return context;
+}
+
 // src/components/Widgets/Widgets.tsx
 import { useEffect } from "react";
 
@@ -642,31 +885,109 @@ function ButtonGroup({ widget, onAction }) {
   );
 }
 
-// src/components/Widgets/WidgetRenderer.tsx
+// src/components/Widgets/widget-library/Table.tsx
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function Table({ widget, onAction }) {
+  const { columns, rows, caption, compact = false, striped = false } = widget.props;
+  const getAlignment = (align) => {
+    switch (align) {
+      case "center":
+        return "text-center";
+      case "right":
+        return "text-right";
+      default:
+        return "text-left";
+    }
+  };
+  return /* @__PURE__ */ jsx5("div", { className: "border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-900 overflow-hidden", children: /* @__PURE__ */ jsx5("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs3("table", { className: "w-full", children: [
+    caption && /* @__PURE__ */ jsx5("caption", { className: "px-4 py-2 text-sm text-gray-600 dark:text-gray-400 text-left bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: caption }),
+    /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsx5("tr", { className: "bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: columns.map((column) => /* @__PURE__ */ jsx5(
+      "th",
+      {
+        className: cn(
+          "font-semibold text-gray-900 dark:text-white",
+          compact ? "px-3 py-2 text-xs" : "px-4 py-3 text-sm",
+          getAlignment(column.align)
+        ),
+        style: column.width ? { width: column.width } : void 0,
+        children: column.label
+      },
+      column.key
+    )) }) }),
+    /* @__PURE__ */ jsxs3("tbody", { children: [
+      rows.map((row, rowIndex) => /* @__PURE__ */ jsx5(
+        "tr",
+        {
+          className: cn(
+            "border-b border-gray-200 dark:border-gray-700 last:border-b-0",
+            "transition-colors hover:bg-gray-50 dark:hover:bg-gray-800",
+            striped && rowIndex % 2 === 1 && "bg-gray-50/50 dark:bg-gray-800/50"
+          ),
+          onClick: () => {
+            if (widget.actions && widget.actions.length > 0) {
+              onAction?.({
+                type: widget.actions[0].type,
+                payload: row,
+                widgetId: widget.id,
+                timestamp: /* @__PURE__ */ new Date()
+              });
+            }
+          },
+          style: { cursor: widget.actions?.length ? "pointer" : "default" },
+          children: columns.map((column) => /* @__PURE__ */ jsx5(
+            "td",
+            {
+              className: cn(
+                "text-gray-700 dark:text-gray-300",
+                compact ? "px-3 py-2 text-xs" : "px-4 py-3 text-sm",
+                getAlignment(column.align)
+              ),
+              children: row[column.key] ?? "\u2014"
+            },
+            column.key
+          ))
+        },
+        row.id || rowIndex
+      )),
+      rows.length === 0 && /* @__PURE__ */ jsx5("tr", { children: /* @__PURE__ */ jsx5(
+        "td",
+        {
+          colSpan: columns.length,
+          className: "px-4 py-8 text-center text-sm text-gray-500 dark:text-gray-400",
+          children: "No data available"
+        }
+      ) })
+    ] })
+  ] }) }) });
+}
+
+// src/components/Widgets/WidgetRenderer.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function WidgetRenderer({ widget, onAction }) {
   switch (widget.type) {
     case "card":
-      return /* @__PURE__ */ jsx5(Card, { widget, onAction });
+      return /* @__PURE__ */ jsx6(Card, { widget, onAction });
     case "list":
-      return /* @__PURE__ */ jsx5(List, { widget, onAction });
+      return /* @__PURE__ */ jsx6(List, { widget, onAction });
     case "button":
-      return /* @__PURE__ */ jsx5(Button, { widget, onAction });
+      return /* @__PURE__ */ jsx6(Button, { widget, onAction });
     case "button_group":
-      return /* @__PURE__ */ jsx5(ButtonGroup, { widget, onAction });
+      return /* @__PURE__ */ jsx6(ButtonGroup, { widget, onAction });
+    case "table":
+      return /* @__PURE__ */ jsx6(Table, { widget, onAction });
     default:
-      return /* @__PURE__ */ jsxs3("div", { className: "p-4 border border-yellow-300 bg-yellow-50 rounded-lg", children: [
-        /* @__PURE__ */ jsxs3("p", { className: "text-sm text-yellow-800", children: [
+      return /* @__PURE__ */ jsxs4("div", { className: "p-4 border border-yellow-300 bg-yellow-50 rounded-lg", children: [
+        /* @__PURE__ */ jsxs4("p", { className: "text-sm text-yellow-800", children: [
           "Unknown widget type: ",
           widget.type
         ] }),
-        /* @__PURE__ */ jsx5("pre", { className: "text-xs mt-2 overflow-auto", children: JSON.stringify(widget, null, 2) })
+        /* @__PURE__ */ jsx6("pre", { className: "text-xs mt-2 overflow-auto", children: JSON.stringify(widget, null, 2) })
       ] });
   }
 }
 
 // src/components/Widgets/Widgets.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function Widgets({
   widgets,
   onAction,
@@ -691,22 +1012,150 @@ function Widgets({
     normal: "gap-4",
     loose: "gap-6"
   };
-  return /* @__PURE__ */ jsx6("div", { className: cn(layoutClasses[layout], spacingClasses[spacing], className), children: widgets.map((widget) => /* @__PURE__ */ jsx6(WidgetRenderer, { widget, onAction }, widget.id)) });
+  return /* @__PURE__ */ jsx7("div", { className: cn(layoutClasses[layout], spacingClasses[spacing], className), children: widgets.map((widget) => /* @__PURE__ */ jsx7(WidgetRenderer, { widget, onAction }, widget.id)) });
+}
+
+// src/components/Widgets/WidgetSkeleton.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function WidgetSkeleton({ type, className }) {
+  switch (type) {
+    case "card":
+      return /* @__PURE__ */ jsx8("div", { className: cn("animate-pulse rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden", className), children: /* @__PURE__ */ jsxs5("div", { className: "p-4 space-y-3", children: [
+        /* @__PURE__ */ jsx8("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4" }),
+        /* @__PURE__ */ jsx8("div", { className: "h-3 bg-gray-200 dark:bg-gray-700 rounded w-full" }),
+        /* @__PURE__ */ jsx8("div", { className: "h-3 bg-gray-200 dark:bg-gray-700 rounded w-5/6" })
+      ] }) });
+    case "list":
+      return /* @__PURE__ */ jsx8("div", { className: cn("animate-pulse space-y-2", className), children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700", children: [
+        /* @__PURE__ */ jsx8("div", { className: "w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full flex-shrink-0" }),
+        /* @__PURE__ */ jsxs5("div", { className: "flex-1 space-y-2", children: [
+          /* @__PURE__ */ jsx8("div", { className: "h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/2" }),
+          /* @__PURE__ */ jsx8("div", { className: "h-2 bg-gray-200 dark:bg-gray-700 rounded w-3/4" })
+        ] })
+      ] }, i)) });
+    case "button_group":
+      return /* @__PURE__ */ jsxs5("div", { className: cn("animate-pulse flex gap-2", className), children: [
+        /* @__PURE__ */ jsx8("div", { className: "h-9 bg-gray-200 dark:bg-gray-700 rounded-lg w-20" }),
+        /* @__PURE__ */ jsx8("div", { className: "h-9 bg-gray-200 dark:bg-gray-700 rounded-lg w-20" }),
+        /* @__PURE__ */ jsx8("div", { className: "h-9 bg-gray-200 dark:bg-gray-700 rounded-lg w-20" })
+      ] });
+    case "form":
+      return /* @__PURE__ */ jsxs5("div", { className: cn("animate-pulse rounded-lg border border-gray-200 dark:border-gray-700 p-4 space-y-4", className), children: [
+        /* @__PURE__ */ jsx8("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/3" }),
+        /* @__PURE__ */ jsxs5("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx8("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded" }),
+          /* @__PURE__ */ jsx8("div", { className: "h-10 bg-gray-200 dark:bg-gray-700 rounded" })
+        ] }),
+        /* @__PURE__ */ jsx8("div", { className: "h-9 bg-gray-200 dark:bg-gray-700 rounded w-24" })
+      ] });
+    case "chart":
+      return /* @__PURE__ */ jsxs5("div", { className: cn("animate-pulse rounded-lg border border-gray-200 dark:border-gray-700 p-4", className), children: [
+        /* @__PURE__ */ jsx8("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/4 mb-4" }),
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-end gap-2 h-32", children: [
+          /* @__PURE__ */ jsx8("div", { className: "flex-1 bg-gray-200 dark:bg-gray-700 rounded-t h-1/2" }),
+          /* @__PURE__ */ jsx8("div", { className: "flex-1 bg-gray-200 dark:bg-gray-700 rounded-t h-3/4" }),
+          /* @__PURE__ */ jsx8("div", { className: "flex-1 bg-gray-200 dark:bg-gray-700 rounded-t h-1/3" }),
+          /* @__PURE__ */ jsx8("div", { className: "flex-1 bg-gray-200 dark:bg-gray-700 rounded-t h-full" }),
+          /* @__PURE__ */ jsx8("div", { className: "flex-1 bg-gray-200 dark:bg-gray-700 rounded-t h-2/3" })
+        ] })
+      ] });
+    case "image":
+      return /* @__PURE__ */ jsx8("div", { className: cn("animate-pulse", className), children: /* @__PURE__ */ jsx8("div", { className: "aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg" }) });
+    case "gallery":
+      return /* @__PURE__ */ jsx8("div", { className: cn("animate-pulse grid grid-cols-3 gap-2", className), children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx8("div", { className: "aspect-square bg-gray-200 dark:bg-gray-700 rounded-lg" }, i)) });
+    case "map":
+      return /* @__PURE__ */ jsx8("div", { className: cn("animate-pulse", className), children: /* @__PURE__ */ jsx8("div", { className: "h-48 bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxs5("svg", { className: "w-8 h-8 text-gray-300 dark:text-gray-600", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
+        /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }),
+        /* @__PURE__ */ jsx8("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
+      ] }) }) });
+    case "table":
+      return /* @__PURE__ */ jsxs5("div", { className: cn("animate-pulse rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden", className), children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: [
+          /* @__PURE__ */ jsx8("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx8("div", { className: "h-3 bg-gray-300 dark:bg-gray-600 rounded w-16" }) }),
+          /* @__PURE__ */ jsx8("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx8("div", { className: "h-3 bg-gray-300 dark:bg-gray-600 rounded w-20" }) }),
+          /* @__PURE__ */ jsx8("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx8("div", { className: "h-3 bg-gray-300 dark:bg-gray-600 rounded w-14" }) })
+        ] }),
+        [1, 2, 3].map((i) => /* @__PURE__ */ jsxs5("div", { className: "flex border-b border-gray-200 dark:border-gray-700 last:border-b-0", children: [
+          /* @__PURE__ */ jsx8("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx8("div", { className: "h-3 bg-gray-200 dark:bg-gray-700 rounded w-24" }) }),
+          /* @__PURE__ */ jsx8("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx8("div", { className: "h-3 bg-gray-200 dark:bg-gray-700 rounded w-16" }) }),
+          /* @__PURE__ */ jsx8("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx8("div", { className: "h-3 bg-gray-200 dark:bg-gray-700 rounded w-20" }) })
+        ] }, i))
+      ] });
+    default:
+      return /* @__PURE__ */ jsxs5("div", { className: cn("animate-pulse rounded-lg border border-gray-200 dark:border-gray-700 p-4", className), children: [
+        /* @__PURE__ */ jsx8("div", { className: "h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mb-2" }),
+        /* @__PURE__ */ jsx8("div", { className: "h-3 bg-gray-200 dark:bg-gray-700 rounded w-full" })
+      ] });
+  }
 }
 
 // src/components/Chat/MarkdownContent.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function isImageUrl(url) {
+  const imageExtensions = /\.(jpg|jpeg|png|gif|webp|svg|bmp|ico)(\?.*)?$/i;
+  return imageExtensions.test(url);
+}
 function parseInlineMarkdown(text, keyPrefix = "") {
   const result = [];
-  const boldRegex = /(\*\*|__)(.+?)\1/g;
+  const inlineRegex = /!\[([^\]]*)\]\(([^)]+)\)|\[([^\]]+)\]\(([^)]+)\)|(\*\*|__)(.+?)\5|`([^`]+)`/g;
   let lastIndex = 0;
   let match;
   let key = 0;
-  while ((match = boldRegex.exec(text)) !== null) {
+  while ((match = inlineRegex.exec(text)) !== null) {
     if (match.index > lastIndex) {
       result.push(text.slice(lastIndex, match.index));
     }
-    result.push(/* @__PURE__ */ jsx7("strong", { children: match[2] }, `${keyPrefix}b${key++}`));
+    if (match[1] !== void 0 || match[2] !== void 0) {
+      const alt = match[1] || "";
+      const src = match[2];
+      result.push(
+        /* @__PURE__ */ jsx9(
+          "img",
+          {
+            src,
+            alt,
+            className: "apteva-md-img"
+          },
+          `${keyPrefix}img${key++}`
+        )
+      );
+    } else if (match[3] !== void 0 || match[4] !== void 0) {
+      const linkText = match[3];
+      const href = match[4];
+      if (isImageUrl(href)) {
+        result.push(
+          /* @__PURE__ */ jsx9(
+            "img",
+            {
+              src: href,
+              alt: linkText,
+              className: "apteva-md-img"
+            },
+            `${keyPrefix}img${key++}`
+          )
+        );
+      } else {
+        result.push(
+          /* @__PURE__ */ jsx9(
+            "a",
+            {
+              href,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "apteva-md-link",
+              children: linkText
+            },
+            `${keyPrefix}a${key++}`
+          )
+        );
+      }
+    } else if (match[5] !== void 0) {
+      result.push(/* @__PURE__ */ jsx9("strong", { children: match[6] }, `${keyPrefix}b${key++}`));
+    } else if (match[7] !== void 0) {
+      result.push(
+        /* @__PURE__ */ jsx9("code", { className: "apteva-md-inline-code", children: match[7] }, `${keyPrefix}code${key++}`)
+      );
+    }
     lastIndex = match.index + match[0].length;
   }
   if (lastIndex < text.length) {
@@ -724,7 +1173,7 @@ function parseMarkdown(content) {
     const h2Match = line.match(/^##\s+(.*)$/);
     if (h2Match) {
       result.push(
-        /* @__PURE__ */ jsx7("h2", { className: "apteva-md-h2", children: parseInlineMarkdown(h2Match[1], `${key}`) }, `h2${key++}`)
+        /* @__PURE__ */ jsx9("h2", { className: "apteva-md-h2", children: parseInlineMarkdown(h2Match[1], `${key}`) }, `h2${key++}`)
       );
       i++;
       continue;
@@ -732,7 +1181,7 @@ function parseMarkdown(content) {
     const h3Match = line.match(/^###\s+(.*)$/);
     if (h3Match) {
       result.push(
-        /* @__PURE__ */ jsx7("h3", { className: "apteva-md-h3", children: parseInlineMarkdown(h3Match[1], `${key}`) }, `h3${key++}`)
+        /* @__PURE__ */ jsx9("h3", { className: "apteva-md-h3", children: parseInlineMarkdown(h3Match[1], `${key}`) }, `h3${key++}`)
       );
       i++;
       continue;
@@ -745,7 +1194,7 @@ function parseMarkdown(content) {
         const itemMatch = lines[i].match(/^(\s*)([-*+])\s+(.*)$/);
         if (itemMatch && itemMatch[1].length === indent) {
           listItems.push(
-            /* @__PURE__ */ jsx7("li", { className: "apteva-md-li", children: parseInlineMarkdown(itemMatch[3], `${key}`) }, `li${key++}`)
+            /* @__PURE__ */ jsx9("li", { className: "apteva-md-li", children: parseInlineMarkdown(itemMatch[3], `${key}`) }, `li${key++}`)
           );
           i++;
         } else {
@@ -753,7 +1202,7 @@ function parseMarkdown(content) {
         }
       }
       result.push(
-        /* @__PURE__ */ jsx7("ul", { className: "apteva-md-ul", children: listItems }, `ul${key++}`)
+        /* @__PURE__ */ jsx9("ul", { className: "apteva-md-ul", children: listItems }, `ul${key++}`)
       );
       continue;
     }
@@ -765,7 +1214,7 @@ function parseMarkdown(content) {
         const itemMatch = lines[i].match(/^(\s*)(\d+)\.\s+(.*)$/);
         if (itemMatch && itemMatch[1].length === indent) {
           listItems.push(
-            /* @__PURE__ */ jsx7("li", { className: "apteva-md-li", children: parseInlineMarkdown(itemMatch[3], `${key}`) }, `li${key++}`)
+            /* @__PURE__ */ jsx9("li", { className: "apteva-md-li", children: parseInlineMarkdown(itemMatch[3], `${key}`) }, `li${key++}`)
           );
           i++;
         } else {
@@ -773,14 +1222,14 @@ function parseMarkdown(content) {
         }
       }
       result.push(
-        /* @__PURE__ */ jsx7("ol", { className: "apteva-md-ol", children: listItems }, `ol${key++}`)
+        /* @__PURE__ */ jsx9("ol", { className: "apteva-md-ol", children: listItems }, `ol${key++}`)
       );
       continue;
     }
     const tableMatch = line.match(/^\|(.+)\|$/);
     if (tableMatch && i + 1 < lines.length) {
       const separatorLine = lines[i + 1];
-      const separatorMatch = separatorLine.match(/^\|[\s:-]+\|$/);
+      const separatorMatch = separatorLine.match(/^\|([\s:-]+\|)+$/);
       if (separatorMatch) {
         const headerCells = line.split("|").filter((cell) => cell.trim() !== "").map((cell) => cell.trim());
         i += 2;
@@ -796,19 +1245,19 @@ function parseMarkdown(content) {
           }
         }
         result.push(
-          /* @__PURE__ */ jsx7("div", { className: "apteva-md-table-wrapper", children: /* @__PURE__ */ jsxs4("table", { className: "apteva-md-table", children: [
-            /* @__PURE__ */ jsx7("thead", { children: /* @__PURE__ */ jsx7("tr", { children: headerCells.map((cell, idx) => /* @__PURE__ */ jsx7("th", { className: "apteva-md-th", children: parseInlineMarkdown(cell, `th${key}${idx}`) }, `th${idx}`)) }) }),
-            /* @__PURE__ */ jsx7("tbody", { children: bodyRows.map((row, rowIdx) => /* @__PURE__ */ jsx7("tr", { children: row.map((cell, cellIdx) => /* @__PURE__ */ jsx7("td", { className: "apteva-md-td", children: parseInlineMarkdown(cell, `td${key}${rowIdx}${cellIdx}`) }, `td${cellIdx}`)) }, `tr${rowIdx}`)) })
+          /* @__PURE__ */ jsx9("div", { className: "apteva-md-table-wrapper", children: /* @__PURE__ */ jsxs6("table", { className: "apteva-md-table", children: [
+            /* @__PURE__ */ jsx9("thead", { children: /* @__PURE__ */ jsx9("tr", { children: headerCells.map((cell, idx) => /* @__PURE__ */ jsx9("th", { className: "apteva-md-th", children: parseInlineMarkdown(cell, `th${key}${idx}`) }, `th${idx}`)) }) }),
+            /* @__PURE__ */ jsx9("tbody", { children: bodyRows.map((row, rowIdx) => /* @__PURE__ */ jsx9("tr", { children: row.map((cell, cellIdx) => /* @__PURE__ */ jsx9("td", { className: "apteva-md-td", children: parseInlineMarkdown(cell, `td${key}${rowIdx}${cellIdx}`) }, `td${cellIdx}`)) }, `tr${rowIdx}`)) })
           ] }) }, `table-wrapper${key++}`)
         );
         continue;
       }
     }
     if (line === "") {
-      result.push(/* @__PURE__ */ jsx7("br", {}, `br${key++}`));
+      result.push(/* @__PURE__ */ jsx9("br", {}, `br${key++}`));
     } else {
       result.push(
-        /* @__PURE__ */ jsxs4("span", { children: [
+        /* @__PURE__ */ jsxs6("span", { children: [
           parseInlineMarkdown(line, `${key}`),
           i < lines.length - 1 ? "\n" : ""
         ] }, `p${key++}`)
@@ -819,38 +1268,116 @@ function parseMarkdown(content) {
   return result;
 }
 function MarkdownContent({ content, className = "" }) {
-  return /* @__PURE__ */ jsx7("div", { className: `apteva-md ${className}`, children: parseMarkdown(content) });
+  return /* @__PURE__ */ jsx9("div", { className: `apteva-md ${className}`, children: parseMarkdown(content) });
 }
 
 // src/components/Chat/ToolCall.tsx
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function ToolCall({ name, status }) {
-  return /* @__PURE__ */ jsxs5("div", { className: "apteva-tool-call", children: [
-    status === "running" && /* @__PURE__ */ jsx8("div", { className: "apteva-tool-call-dot apteva-tool-call-dot-running" }),
-    status === "completed" && /* @__PURE__ */ jsx8("div", { className: "apteva-tool-call-dot apteva-tool-call-dot-completed" }),
-    status === "error" && /* @__PURE__ */ jsx8("div", { className: "apteva-tool-call-dot apteva-tool-call-dot-error" }),
-    /* @__PURE__ */ jsx8("span", { className: "apteva-tool-call-name", children: name }),
-    status === "running" && /* @__PURE__ */ jsx8("span", { className: "apteva-tool-call-status", children: "Running..." }),
-    status === "completed" && /* @__PURE__ */ jsx8("span", { className: "apteva-tool-call-status apteva-tool-call-status-completed", children: "Completed" }),
-    status === "error" && /* @__PURE__ */ jsx8("span", { className: "apteva-tool-call-status apteva-tool-call-status-error", children: "Error" })
+  if (status === "running") {
+    return /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 px-3 py-2 rounded-xl bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-700 !text-blue-700 dark:!text-blue-300 text-sm", children: [
+      /* @__PURE__ */ jsxs7("svg", { className: "w-4 h-4 animate-spin", fill: "none", viewBox: "0 0 24 24", children: [
+        /* @__PURE__ */ jsx10("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ jsx10("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+      ] }),
+      /* @__PURE__ */ jsxs7("span", { children: [
+        "Calling ",
+        /* @__PURE__ */ jsx10("strong", { children: name }),
+        "..."
+      ] })
+    ] });
+  }
+  if (status === "completed") {
+    return /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 px-3 py-2 rounded-xl bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-700 !text-green-700 dark:!text-green-300 text-sm", children: [
+      /* @__PURE__ */ jsx10("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+      /* @__PURE__ */ jsxs7("span", { children: [
+        "Tool completed: ",
+        /* @__PURE__ */ jsx10("strong", { children: name })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 px-3 py-2 rounded-xl bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-700 !text-red-700 dark:!text-red-300 text-sm", children: [
+    /* @__PURE__ */ jsx10("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }),
+    /* @__PURE__ */ jsxs7("span", { children: [
+      "Tool failed: ",
+      /* @__PURE__ */ jsx10("strong", { children: name })
+    ] })
   ] });
 }
 
 // src/components/Chat/Message.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-function Message({ message, onAction }) {
+import { Fragment, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function Message({ message, onAction, enableWidgets, onWidgetRender }) {
   const isUser = message.role === "user";
   const contentSegments = message.metadata?.content_segments;
+  const isStreaming = message.metadata?.isStreaming === true;
+  const hasContent = message.content || contentSegments && contentSegments.length > 0;
+  const reportedWidgetsRef = useRef(/* @__PURE__ */ new Set());
+  const parsedWidgets = useMemo(() => {
+    if (!enableWidgets || isUser || !message.content) {
+      return [];
+    }
+    const parsed = parseWidgetsFromText(message.content);
+    return parsed.segments.filter((seg) => seg.type === "widget" && !!seg.widget).map((seg) => seg.widget);
+  }, [enableWidgets, isUser, message.content]);
+  useEffect2(() => {
+    if (onWidgetRender && message.widgets) {
+      for (const widget of message.widgets) {
+        if (!reportedWidgetsRef.current.has(widget.id)) {
+          reportedWidgetsRef.current.add(widget.id);
+          onWidgetRender(widget);
+        }
+      }
+    }
+  }, [message.widgets, onWidgetRender]);
+  useEffect2(() => {
+    if (onWidgetRender && parsedWidgets.length > 0) {
+      for (const widget of parsedWidgets) {
+        if (!reportedWidgetsRef.current.has(widget.id)) {
+          reportedWidgetsRef.current.add(widget.id);
+          onWidgetRender(widget);
+        }
+      }
+    }
+  }, [parsedWidgets, onWidgetRender]);
+  const renderTextContent = (text) => {
+    if (!enableWidgets || isUser) {
+      return /* @__PURE__ */ jsx11(MarkdownContent, { content: text });
+    }
+    const parsed = parseWidgetsFromText(text);
+    if (parsed.segments.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx11(Fragment, { children: parsed.segments.map((segment, index) => {
+      if (segment.type === "text" && segment.content) {
+        return /* @__PURE__ */ jsx11(MarkdownContent, { content: segment.content }, `text-${index}`);
+      }
+      if (segment.type === "widget" && segment.widget) {
+        return /* @__PURE__ */ jsx11("div", { className: "my-3", children: /* @__PURE__ */ jsx11(WidgetRenderer, { widget: segment.widget, onAction }) }, `widget-${index}`);
+      }
+      if (segment.type === "widget_pending" && segment.pendingType) {
+        return /* @__PURE__ */ jsx11("div", { className: "my-3", children: /* @__PURE__ */ jsx11(WidgetSkeleton, { type: segment.pendingType }) }, `pending-${index}`);
+      }
+      return null;
+    }) });
+  };
   const renderContent = () => {
     if (isUser) {
-      return /* @__PURE__ */ jsx9("div", { className: "whitespace-pre-wrap !text-sm leading-relaxed", children: message.content });
+      return /* @__PURE__ */ jsx11("div", { className: "whitespace-pre-wrap !text-sm leading-relaxed", children: message.content });
+    }
+    if (isStreaming && !hasContent) {
+      return /* @__PURE__ */ jsxs8("div", { className: "apteva-typing-indicator !text-gray-400", children: [
+        /* @__PURE__ */ jsx11("span", {}),
+        /* @__PURE__ */ jsx11("span", {}),
+        /* @__PURE__ */ jsx11("span", {})
+      ] });
     }
     if (contentSegments && contentSegments.length > 0) {
-      return /* @__PURE__ */ jsx9("div", { children: contentSegments.map((segment, index) => {
+      return /* @__PURE__ */ jsx11("div", { children: contentSegments.map((segment, index) => {
         if (segment.type === "text") {
-          return segment.content ? /* @__PURE__ */ jsx9(MarkdownContent, { content: segment.content }, `text-${index}`) : null;
+          return segment.content ? /* @__PURE__ */ jsx11("div", { children: renderTextContent(segment.content) }, `text-${index}`) : null;
         } else if (segment.type === "tool") {
-          return /* @__PURE__ */ jsx9("div", { className: "my-2", children: /* @__PURE__ */ jsx9(
+          return /* @__PURE__ */ jsx11("div", { className: "my-2", children: /* @__PURE__ */ jsx11(
             ToolCall,
             {
               name: segment.name,
@@ -861,27 +1388,27 @@ function Message({ message, onAction }) {
         return null;
       }) });
     }
-    return /* @__PURE__ */ jsx9(MarkdownContent, { content: message.content });
+    return renderTextContent(message.content);
   };
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs8(
     "div",
     {
       className: cn(
-        "max-w-[80%]",
-        isUser ? "px-4 py-2.5 rounded-xl bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 !text-gray-900 dark:!text-gray-100 ml-auto" : "!text-gray-900 dark:!text-gray-100"
+        "max-w-[80%] px-4 py-2.5 rounded-2xl",
+        isUser ? "bg-blue-600 !text-white rounded-br-md" : "bg-gray-100 dark:bg-gray-800 !text-gray-900 dark:!text-gray-100 rounded-bl-md"
       ),
       children: [
         renderContent(),
-        message.widgets && message.widgets.length > 0 && /* @__PURE__ */ jsx9("div", { className: cn(isUser ? "mt-3" : "mt-2"), children: /* @__PURE__ */ jsx9(Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
-        /* @__PURE__ */ jsx9("div", { className: cn("!text-xs opacity-70", isUser ? "mt-1.5 !text-gray-500 dark:!text-gray-400" : "mt-1 !text-gray-500 dark:!text-gray-400"), suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
+        message.widgets && message.widgets.length > 0 && /* @__PURE__ */ jsx11("div", { className: cn(isUser ? "mt-3" : "mt-2"), children: /* @__PURE__ */ jsx11(Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
+        /* @__PURE__ */ jsx11("div", { className: cn("!text-xs mt-1.5", isUser ? "!text-blue-200" : "!text-gray-500 dark:!text-gray-400"), suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
       ]
     }
   );
 }
 
 // src/components/Chat/WelcomeScreen.tsx
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
-var DefaultIcon = () => /* @__PURE__ */ jsx10("svg", { className: "w-12 h-12 sm:w-16 sm:h-16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10(
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+var DefaultIcon = () => /* @__PURE__ */ jsx12("svg", { className: "w-12 h-12 sm:w-16 sm:h-16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12(
   "path",
   {
     strokeLinecap: "round",
@@ -890,7 +1417,7 @@ var DefaultIcon = () => /* @__PURE__ */ jsx10("svg", { className: "w-12 h-12 sm:
     d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
   }
 ) });
-var ArrowIcon = () => /* @__PURE__ */ jsx10("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx10("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 7l5 5m0 0l-5 5m5-5H6" }) });
+var ArrowIcon = () => /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 7l5 5m0 0l-5 5m5-5H6" }) });
 function WelcomeScreen({
   title,
   subtitle,
@@ -905,18 +1432,18 @@ function WelcomeScreen({
   const hasPrompts = normalizedPrompts.length > 0;
   const hasHeader = title || subtitle || icon;
   if (!hasHeader && !hasPrompts) {
-    return /* @__PURE__ */ jsx10("div", { className: "flex items-center justify-center h-full !text-gray-500 dark:!text-gray-400", children: /* @__PURE__ */ jsxs7("div", { className: "text-center space-y-2", children: [
-      /* @__PURE__ */ jsx10("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx10(DefaultIcon, {}) }),
-      /* @__PURE__ */ jsx10("p", { className: "text-sm", children: "No messages yet. Start a conversation!" })
+    return /* @__PURE__ */ jsx12("div", { className: "flex items-center justify-center h-full !text-gray-500 dark:!text-gray-400", children: /* @__PURE__ */ jsxs9("div", { className: "text-center space-y-2", children: [
+      /* @__PURE__ */ jsx12("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx12(DefaultIcon, {}) }),
+      /* @__PURE__ */ jsx12("p", { className: "text-sm", children: "No messages yet. Start a conversation!" })
     ] }) });
   }
   if (variant === "minimal") {
-    return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col h-full px-4 py-4", children: [
-      hasHeader && /* @__PURE__ */ jsxs7("div", { className: "mb-4", children: [
-        title && /* @__PURE__ */ jsx10("h2", { className: "text-lg font-semibold !text-gray-900 dark:!text-white", children: title }),
-        subtitle && /* @__PURE__ */ jsx10("p", { className: "text-sm !text-gray-500 dark:!text-gray-400 mt-1", children: subtitle })
+    return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col h-full px-4 py-4", children: [
+      hasHeader && /* @__PURE__ */ jsxs9("div", { className: "mb-4", children: [
+        title && /* @__PURE__ */ jsx12("h2", { className: "text-lg font-semibold !text-gray-900 dark:!text-white", children: title }),
+        subtitle && /* @__PURE__ */ jsx12("p", { className: "text-sm !text-gray-500 dark:!text-gray-400 mt-1", children: subtitle })
       ] }),
-      hasPrompts && /* @__PURE__ */ jsx10("div", { className: "flex-1 space-y-2", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx10(
+      hasPrompts && /* @__PURE__ */ jsx12("div", { className: "flex-1 space-y-2", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx12(
         "button",
         {
           onClick: () => onPromptClick(prompt.text),
@@ -929,11 +1456,11 @@ function WelcomeScreen({
             "transition-all duration-200",
             "group"
           ),
-          children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx10("div", { className: "flex-shrink-0 !text-gray-400 dark:!text-gray-500 group-hover:!text-blue-500 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ jsx10(ArrowIcon, {}) }),
-            /* @__PURE__ */ jsxs7("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsx10("p", { className: "text-sm font-medium !text-gray-900 dark:!text-white truncate", children: prompt.text }),
-              prompt.description && /* @__PURE__ */ jsx10("p", { className: "text-xs !text-gray-500 dark:!text-gray-400 mt-0.5 truncate", children: prompt.description })
+          children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx12("div", { className: "flex-shrink-0 !text-gray-400 dark:!text-gray-500 group-hover:!text-blue-500 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ jsx12(ArrowIcon, {}) }),
+            /* @__PURE__ */ jsxs9("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx12("p", { className: "text-sm font-medium !text-gray-900 dark:!text-white truncate", children: prompt.text }),
+              prompt.description && /* @__PURE__ */ jsx12("p", { className: "text-xs !text-gray-500 dark:!text-gray-400 mt-0.5 truncate", children: prompt.description })
             ] })
           ] })
         },
@@ -941,14 +1468,14 @@ function WelcomeScreen({
       )) })
     ] });
   }
-  return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-center justify-center h-full px-4 py-6 sm:py-8", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "text-center mb-6 sm:mb-8 max-w-md", children: [
-      /* @__PURE__ */ jsx10("div", { className: "mb-4 !text-gray-400 dark:!text-gray-500 flex justify-center", children: icon || /* @__PURE__ */ jsx10(DefaultIcon, {}) }),
-      title && /* @__PURE__ */ jsx10("h1", { className: "text-xl sm:text-2xl font-semibold !text-gray-900 dark:!text-white mb-2", children: title }),
-      subtitle && /* @__PURE__ */ jsx10("p", { className: "text-sm sm:text-base !text-gray-500 dark:!text-gray-400", children: subtitle })
+  return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col items-center justify-center h-full px-4 py-6 sm:py-8", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "text-center mb-6 sm:mb-8 max-w-md", children: [
+      /* @__PURE__ */ jsx12("div", { className: "mb-4 !text-gray-400 dark:!text-gray-500 flex justify-center", children: icon || /* @__PURE__ */ jsx12(DefaultIcon, {}) }),
+      title && /* @__PURE__ */ jsx12("h1", { className: "text-xl sm:text-2xl font-semibold !text-gray-900 dark:!text-white mb-2", children: title }),
+      subtitle && /* @__PURE__ */ jsx12("p", { className: "text-sm sm:text-base !text-gray-500 dark:!text-gray-400", children: subtitle })
     ] }),
-    hasPrompts && /* @__PURE__ */ jsxs7("div", { className: "w-full max-w-2xl", children: [
-      /* @__PURE__ */ jsx10("div", { className: "sm:hidden space-y-2", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx10(
+    hasPrompts && /* @__PURE__ */ jsxs9("div", { className: "w-full max-w-2xl", children: [
+      /* @__PURE__ */ jsx12("div", { className: "sm:hidden space-y-2", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx12(
         "button",
         {
           onClick: () => onPromptClick(prompt.text),
@@ -963,20 +1490,20 @@ function WelcomeScreen({
             "shadow-sm hover:shadow",
             "group"
           ),
-          children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx10("div", { className: "flex-shrink-0 w-8 h-8 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center !text-gray-500 dark:!text-gray-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:!text-blue-600 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ jsx10(ArrowIcon, {}) }),
-            /* @__PURE__ */ jsxs7("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsx10("p", { className: "text-sm font-medium !text-gray-900 dark:!text-white", children: prompt.text }),
-              prompt.description && /* @__PURE__ */ jsx10("p", { className: "text-xs !text-gray-500 dark:!text-gray-400 mt-0.5 line-clamp-1", children: prompt.description })
+          children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx12("div", { className: "flex-shrink-0 w-8 h-8 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center !text-gray-500 dark:!text-gray-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:!text-blue-600 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ jsx12(ArrowIcon, {}) }),
+            /* @__PURE__ */ jsxs9("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx12("p", { className: "text-sm font-medium !text-gray-900 dark:!text-white", children: prompt.text }),
+              prompt.description && /* @__PURE__ */ jsx12("p", { className: "text-xs !text-gray-500 dark:!text-gray-400 mt-0.5 line-clamp-1", children: prompt.description })
             ] }),
-            /* @__PURE__ */ jsx10(
+            /* @__PURE__ */ jsx12(
               "svg",
               {
                 className: "w-4 h-4 !text-gray-400 group-hover:!text-blue-500 transition-colors flex-shrink-0",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ jsx10(
+                children: /* @__PURE__ */ jsx12(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -991,7 +1518,7 @@ function WelcomeScreen({
         },
         index
       )) }),
-      /* @__PURE__ */ jsx10("div", { className: "hidden sm:grid sm:grid-cols-2 gap-3", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx12("div", { className: "hidden sm:grid sm:grid-cols-2 gap-3", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx12(
         "button",
         {
           onClick: () => onPromptClick(prompt.text),
@@ -1006,11 +1533,11 @@ function WelcomeScreen({
             "transition-all duration-200",
             "group"
           ),
-          children: /* @__PURE__ */ jsxs7("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ jsx10("div", { className: "flex-shrink-0 w-9 h-9 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center !text-gray-500 dark:!text-gray-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:!text-blue-600 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ jsx10(ArrowIcon, {}) }),
-            /* @__PURE__ */ jsxs7("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsx10("p", { className: "text-sm font-medium !text-gray-900 dark:!text-white leading-snug", children: prompt.text }),
-              prompt.description && /* @__PURE__ */ jsx10("p", { className: "text-xs !text-gray-500 dark:!text-gray-400 mt-1 line-clamp-2", children: prompt.description })
+          children: /* @__PURE__ */ jsxs9("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx12("div", { className: "flex-shrink-0 w-9 h-9 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center !text-gray-500 dark:!text-gray-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:!text-blue-600 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ jsx12(ArrowIcon, {}) }),
+            /* @__PURE__ */ jsxs9("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx12("p", { className: "text-sm font-medium !text-gray-900 dark:!text-white leading-snug", children: prompt.text }),
+              prompt.description && /* @__PURE__ */ jsx12("p", { className: "text-xs !text-gray-500 dark:!text-gray-400 mt-1 line-clamp-2", children: prompt.description })
             ] })
           ] })
         },
@@ -1021,7 +1548,7 @@ function WelcomeScreen({
 }
 
 // src/components/Chat/MessageList.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function MessageList({
   messages,
   onAction,
@@ -1030,15 +1557,17 @@ function MessageList({
   welcomeIcon,
   suggestedPrompts,
   welcomeVariant,
-  onPromptClick
+  onPromptClick,
+  enableWidgets,
+  onWidgetRender
 }) {
-  const listRef = useRef(null);
-  useEffect2(() => {
+  const listRef = useRef2(null);
+  useEffect3(() => {
     if (listRef.current) {
       listRef.current.scrollTop = listRef.current.scrollHeight;
     }
   }, [messages]);
-  return /* @__PURE__ */ jsx11("div", { ref: listRef, className: "flex-1 overflow-y-auto px-4 py-4 space-y-3 apteva-scrollbar-hidden", children: messages.length === 0 ? /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx13("div", { ref: listRef, className: "flex-1 overflow-y-auto px-4 py-4 space-y-3 apteva-scrollbar-hidden", children: messages.length === 0 ? /* @__PURE__ */ jsx13(
     WelcomeScreen,
     {
       title: welcomeTitle,
@@ -1049,20 +1578,20 @@ function MessageList({
       onPromptClick: onPromptClick || (() => {
       })
     }
-  ) : messages.map((message) => /* @__PURE__ */ jsx11(Message, { message, onAction }, message.id)) });
+  ) : messages.map((message) => /* @__PURE__ */ jsx13("div", { className: `flex ${message.role === "user" ? "justify-end" : "justify-start"}`, children: /* @__PURE__ */ jsx13(Message, { message, onAction, enableWidgets, onWidgetRender }) }, message.id)) });
 }
 
 // src/components/Chat/Composer.tsx
-import { useState, useRef as useRef2 } from "react";
-import { Fragment, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
-function Composer({ onSendMessage, placeholder = "Type a message...", disabled = false, onFileUpload, onSwitchMode }) {
+import { useState, useRef as useRef3 } from "react";
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+function Composer({ onSendMessage, placeholder = "Type a message...", disabled = false, isLoading = false, onStop, onFileUpload, onSwitchMode }) {
   const [text, setText] = useState("");
   const [showMenu, setShowMenu] = useState(false);
   const [pendingFiles, setPendingFiles] = useState([]);
   const [fileError, setFileError] = useState(null);
-  const textareaRef = useRef2(null);
-  const fileInputRef = useRef2(null);
-  const menuButtonRef = useRef2(null);
+  const textareaRef = useRef3(null);
+  const fileInputRef = useRef3(null);
+  const menuButtonRef = useRef3(null);
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
@@ -1128,56 +1657,56 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
   };
   const getFileIcon = (mimeType) => {
     if (mimeType.startsWith("image/")) {
-      return /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) });
+      return /* @__PURE__ */ jsx14("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) });
     }
     if (mimeType === "application/pdf") {
-      return /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) });
+      return /* @__PURE__ */ jsx14("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) });
     }
-    return /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) });
+    return /* @__PURE__ */ jsx14("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) });
   };
-  return /* @__PURE__ */ jsxs8("div", { className: "px-4 py-3 relative", children: [
-    fileError && /* @__PURE__ */ jsx12("div", { className: "absolute bottom-full left-4 right-4 mb-2 p-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg z-20", children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 !text-red-700 dark:!text-red-300 text-sm", children: [
-      /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-      /* @__PURE__ */ jsx12("span", { children: fileError })
+  return /* @__PURE__ */ jsxs10("div", { className: "px-4 py-3 relative", children: [
+    fileError && /* @__PURE__ */ jsx14("div", { className: "absolute bottom-full left-4 right-4 mb-2 p-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg z-20", children: /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 !text-red-700 dark:!text-red-300 text-sm", children: [
+      /* @__PURE__ */ jsx14("svg", { className: "w-4 h-4 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+      /* @__PURE__ */ jsx14("span", { children: fileError })
     ] }) }),
-    pendingFiles.length > 0 && /* @__PURE__ */ jsx12("div", { className: "mb-2 flex flex-wrap gap-2", children: pendingFiles.map((pf, index) => /* @__PURE__ */ jsxs8(
+    pendingFiles.length > 0 && /* @__PURE__ */ jsx14("div", { className: "mb-2 flex flex-wrap gap-2", children: pendingFiles.map((pf, index) => /* @__PURE__ */ jsxs10(
       "div",
       {
         className: "relative group flex items-center gap-2 px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg",
         children: [
-          pf.preview ? /* @__PURE__ */ jsx12("img", { src: pf.preview, alt: pf.file.name, className: "w-8 h-8 object-cover rounded" }) : /* @__PURE__ */ jsx12("div", { className: "w-8 h-8 flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded !text-gray-500 dark:!text-gray-400", children: getFileIcon(pf.file.type) }),
-          /* @__PURE__ */ jsxs8("div", { className: "flex flex-col min-w-0", children: [
-            /* @__PURE__ */ jsx12("span", { className: "text-xs font-medium !text-gray-700 dark:!text-gray-300 truncate max-w-[120px]", children: pf.file.name }),
-            /* @__PURE__ */ jsx12("span", { className: "text-xs !text-gray-500 dark:!text-gray-400", children: formatFileSize(pf.file.size) })
+          pf.preview ? /* @__PURE__ */ jsx14("img", { src: pf.preview, alt: pf.file.name, className: "w-8 h-8 object-cover rounded" }) : /* @__PURE__ */ jsx14("div", { className: "w-8 h-8 flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded !text-gray-500 dark:!text-gray-400", children: getFileIcon(pf.file.type) }),
+          /* @__PURE__ */ jsxs10("div", { className: "flex flex-col min-w-0", children: [
+            /* @__PURE__ */ jsx14("span", { className: "text-xs font-medium !text-gray-700 dark:!text-gray-300 truncate max-w-[120px]", children: pf.file.name }),
+            /* @__PURE__ */ jsx14("span", { className: "text-xs !text-gray-500 dark:!text-gray-400", children: formatFileSize(pf.file.size) })
           ] }),
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx14(
             "button",
             {
               onClick: () => removeFile(index),
               className: "absolute -top-1.5 -right-1.5 w-5 h-5 bg-gray-500 hover:bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",
               title: "Remove file",
-              children: /* @__PURE__ */ jsx12("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+              children: /* @__PURE__ */ jsx14("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
             }
           )
         ]
       },
       index
     )) }),
-    /* @__PURE__ */ jsxs8("div", { className: "apteva-composer relative border-2 border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 transition-all duration-300 flex items-center px-3 py-2 gap-3", children: [
-      /* @__PURE__ */ jsxs8("div", { className: "relative flex-shrink-0", children: [
-        /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsxs10("div", { className: "apteva-composer relative border-2 border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 transition-all duration-300 flex items-center px-3 py-2 gap-3", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "relative flex-shrink-0", children: [
+        /* @__PURE__ */ jsx14(
           "button",
           {
             ref: menuButtonRef,
             onClick: () => setShowMenu(!showMenu),
             className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all !text-gray-700 dark:!text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800",
             title: "More options",
-            children: /* @__PURE__ */ jsx12("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx12("path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+            children: /* @__PURE__ */ jsx14("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx14("path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
           }
         ),
-        showMenu && /* @__PURE__ */ jsxs8(Fragment, { children: [
-          /* @__PURE__ */ jsx12("div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
-          /* @__PURE__ */ jsxs8(
+        showMenu && /* @__PURE__ */ jsxs10(Fragment2, { children: [
+          /* @__PURE__ */ jsx14("div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
+          /* @__PURE__ */ jsxs10(
             "div",
             {
               className: "fixed bg-gray-800 dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
@@ -1186,7 +1715,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
                 top: (menuButtonRef.current?.getBoundingClientRect().bottom ?? 0) + 8
               },
               children: [
-                /* @__PURE__ */ jsxs8(
+                /* @__PURE__ */ jsxs10(
                   "button",
                   {
                     onClick: () => {
@@ -1195,12 +1724,12 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
                     },
                     className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left",
                     children: [
-                      /* @__PURE__ */ jsx12("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx12("path", { d: "M10.5 3.5L5.5 8.5C4.67157 9.32843 4.67157 10.6716 5.5 11.5C6.32843 12.3284 7.67157 12.3284 8.5 11.5L14.5 5.5C15.8807 4.11929 15.8807 1.88071 14.5 0.5C13.1193 -0.880711 10.8807 -0.880711 9.5 0.5L3.5 6.5C1.56846 8.43154 1.56846 11.5685 3.5 13.5C5.43154 15.4315 8.56846 15.4315 10.5 13.5L15.5 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(2, 3)" }) }),
-                      /* @__PURE__ */ jsx12("span", { className: "!text-sm font-medium", children: "Add photos & files" })
+                      /* @__PURE__ */ jsx14("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx14("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__ */ jsx14("span", { className: "!text-sm font-medium", children: "Add photos & files" })
                     ]
                   }
                 ),
-                onSwitchMode && /* @__PURE__ */ jsxs8(
+                onSwitchMode && /* @__PURE__ */ jsxs10(
                   "button",
                   {
                     onClick: () => {
@@ -1209,8 +1738,8 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
                     },
                     className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left border-t border-gray-700 dark:border-gray-600",
                     children: [
-                      /* @__PURE__ */ jsx12("svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }),
-                      /* @__PURE__ */ jsx12("span", { className: "!text-sm font-medium", children: "Switch to command mode" })
+                      /* @__PURE__ */ jsx14("svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }),
+                      /* @__PURE__ */ jsx14("span", { className: "!text-sm font-medium", children: "Switch to command mode" })
                     ]
                   }
                 )
@@ -1219,7 +1748,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx14(
         "textarea",
         {
           ref: textareaRef,
@@ -1233,18 +1762,26 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
           style: { maxHeight: "120px" }
         }
       ),
-      /* @__PURE__ */ jsx12(
+      isLoading && onStop ? /* @__PURE__ */ jsx14(
+        "button",
+        {
+          onClick: onStop,
+          className: "w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0 border border-red-400 dark:border-red-500 bg-red-50 dark:bg-red-900/30 !text-red-600 dark:!text-red-400 hover:bg-red-100 dark:hover:bg-red-900/50",
+          title: "Stop generation",
+          children: /* @__PURE__ */ jsx14("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx14("rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
+        }
+      ) : /* @__PURE__ */ jsx14(
         "button",
         {
           onClick: handleSend,
           disabled: !text.trim() && pendingFiles.length === 0 || disabled,
           className: "w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 !text-gray-700 dark:!text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed !text-lg",
           title: "Send message",
-          children: /* @__PURE__ */ jsx12("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx12("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+          children: /* @__PURE__ */ jsx14("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx14("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
         }
       )
     ] }),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx14(
       "input",
       {
         ref: fileInputRef,
@@ -1259,8 +1796,8 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
 }
 
 // src/components/Chat/CommandComposer.tsx
-import { useState as useState2, useRef as useRef3 } from "react";
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useState as useState2, useRef as useRef4 } from "react";
+import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 function CommandComposer({
   onExecute,
   state,
@@ -1272,6 +1809,7 @@ function CommandComposer({
   onApprove,
   onReject,
   onReset,
+  onStop,
   onExpand,
   placeholder = "Enter your command...",
   disabled = false
@@ -1280,9 +1818,9 @@ function CommandComposer({
   const [pendingFiles, setPendingFiles] = useState2([]);
   const [fileError, setFileError] = useState2(null);
   const [showMenu, setShowMenu] = useState2(false);
-  const inputRef = useRef3(null);
-  const fileInputRef = useRef3(null);
-  const menuButtonRef = useRef3(null);
+  const inputRef = useRef4(null);
+  const fileInputRef = useRef4(null);
+  const menuButtonRef = useRef4(null);
   const handleSubmit = () => {
     const hasText = input.trim();
     const hasFiles = pendingFiles.length > 0;
@@ -1349,12 +1887,12 @@ function CommandComposer({
   };
   const getFileIcon = (mimeType) => {
     if (mimeType.startsWith("image/")) {
-      return /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) });
+      return /* @__PURE__ */ jsx15("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) });
     }
     if (mimeType === "application/pdf") {
-      return /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) });
+      return /* @__PURE__ */ jsx15("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) });
     }
-    return /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) });
+    return /* @__PURE__ */ jsx15("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) });
   };
   const getDisplayContent = () => {
     if (state === "loading") {
@@ -1379,12 +1917,12 @@ function CommandComposer({
   };
   const isShowingResult = state !== "idle";
   const { text: displayContent, isToolCall } = getDisplayContent();
-  return /* @__PURE__ */ jsxs9("div", { className: "w-full relative", children: [
-    fileError && /* @__PURE__ */ jsx13("div", { className: "absolute -top-12 left-0 right-0 mx-3 p-2 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg z-30", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 !text-red-700 dark:!text-red-300 text-xs", children: [
-      /* @__PURE__ */ jsx13("svg", { className: "w-3 h-3 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-      /* @__PURE__ */ jsx13("span", { children: fileError })
+  return /* @__PURE__ */ jsxs11("div", { className: "w-full relative", children: [
+    fileError && /* @__PURE__ */ jsx15("div", { className: "absolute -top-12 left-0 right-0 mx-3 p-2 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg z-30", children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 !text-red-700 dark:!text-red-300 text-xs", children: [
+      /* @__PURE__ */ jsx15("svg", { className: "w-3 h-3 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+      /* @__PURE__ */ jsx15("span", { children: fileError })
     ] }) }),
-    /* @__PURE__ */ jsxs9(
+    /* @__PURE__ */ jsxs11(
       "div",
       {
         className: cn(
@@ -1396,21 +1934,21 @@ function CommandComposer({
           state === "error" && "border-red-400 dark:border-red-500"
         ),
         children: [
-          /* @__PURE__ */ jsxs9("div", { className: "w-8 h-8 flex items-center justify-center flex-shrink-0", children: [
-            state === "idle" && /* @__PURE__ */ jsxs9("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsxs11("div", { className: "w-8 h-8 flex items-center justify-center flex-shrink-0", children: [
+            state === "idle" && /* @__PURE__ */ jsxs11("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx15(
                 "button",
                 {
                   ref: menuButtonRef,
                   onClick: () => setShowMenu(!showMenu),
                   className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all !text-gray-500 dark:!text-gray-400 hover:!text-gray-700 dark:hover:!text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800",
                   title: "More options",
-                  children: /* @__PURE__ */ jsx13("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx13("path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                  children: /* @__PURE__ */ jsx15("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx15("path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
                 }
               ),
-              showMenu && /* @__PURE__ */ jsxs9(Fragment2, { children: [
-                /* @__PURE__ */ jsx13("div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
-                /* @__PURE__ */ jsxs9(
+              showMenu && /* @__PURE__ */ jsxs11(Fragment3, { children: [
+                /* @__PURE__ */ jsx15("div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
+                /* @__PURE__ */ jsxs11(
                   "div",
                   {
                     className: "fixed bg-gray-800 dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
@@ -1419,7 +1957,7 @@ function CommandComposer({
                       top: (menuButtonRef.current?.getBoundingClientRect().bottom ?? 0) + 8
                     },
                     children: [
-                      /* @__PURE__ */ jsxs9(
+                      /* @__PURE__ */ jsxs11(
                         "button",
                         {
                           onClick: () => {
@@ -1428,12 +1966,12 @@ function CommandComposer({
                           },
                           className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left",
                           children: [
-                            /* @__PURE__ */ jsx13("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx13("path", { d: "M10.5 3.5L5.5 8.5C4.67157 9.32843 4.67157 10.6716 5.5 11.5C6.32843 12.3284 7.67157 12.3284 8.5 11.5L14.5 5.5C15.8807 4.11929 15.8807 1.88071 14.5 0.5C13.1193 -0.880711 10.8807 -0.880711 9.5 0.5L3.5 6.5C1.56846 8.43154 1.56846 11.5685 3.5 13.5C5.43154 15.4315 8.56846 15.4315 10.5 13.5L15.5 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(2, 3)" }) }),
-                            /* @__PURE__ */ jsx13("span", { className: "!text-sm font-medium", children: "Add photos & files" })
+                            /* @__PURE__ */ jsx15("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx15("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__ */ jsx15("span", { className: "!text-sm font-medium", children: "Add photos & files" })
                           ]
                         }
                       ),
-                      onExpand && /* @__PURE__ */ jsxs9(
+                      onExpand && /* @__PURE__ */ jsxs11(
                         "button",
                         {
                           onClick: () => {
@@ -1442,8 +1980,8 @@ function CommandComposer({
                           },
                           className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left border-t border-gray-700 dark:border-gray-600",
                           children: [
-                            /* @__PURE__ */ jsx13("svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
-                            /* @__PURE__ */ jsx13("span", { className: "!text-sm font-medium", children: "Expand to chat" })
+                            /* @__PURE__ */ jsx15("svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
+                            /* @__PURE__ */ jsx15("span", { className: "!text-sm font-medium", children: "Expand to chat" })
                           ]
                         }
                       )
@@ -1452,30 +1990,30 @@ function CommandComposer({
                 )
               ] })
             ] }),
-            state === "loading" && !toolName && /* @__PURE__ */ jsx13("div", { className: "w-4 h-4 border-2 border-blue-200 border-t-blue-500 rounded-full animate-spin" }),
-            state === "loading" && toolName && /* @__PURE__ */ jsx13("div", { className: "w-2 h-2 rounded-full bg-blue-500 animate-pulse" })
+            state === "loading" && !toolName && /* @__PURE__ */ jsx15("div", { className: "w-4 h-4 border-2 border-blue-200 border-t-blue-500 rounded-full animate-spin" }),
+            state === "loading" && toolName && /* @__PURE__ */ jsx15("div", { className: "w-2 h-2 rounded-full bg-blue-500 animate-pulse" })
           ] }),
-          pendingFiles.length > 0 && state === "idle" && /* @__PURE__ */ jsx13("div", { className: "flex items-center gap-1 flex-shrink-0", children: pendingFiles.map((pf, index) => /* @__PURE__ */ jsxs9(
+          pendingFiles.length > 0 && state === "idle" && /* @__PURE__ */ jsx15("div", { className: "flex items-center gap-1 flex-shrink-0", children: pendingFiles.map((pf, index) => /* @__PURE__ */ jsxs11(
             "div",
             {
               className: "relative group flex items-center justify-center w-6 h-6 bg-gray-100 dark:bg-gray-800 rounded overflow-hidden",
               title: pf.file.name,
               children: [
-                pf.preview ? /* @__PURE__ */ jsx13("img", { src: pf.preview, alt: pf.file.name, className: "w-6 h-6 object-cover" }) : /* @__PURE__ */ jsx13("span", { className: "text-xs !text-gray-500 dark:!text-gray-400", children: getFileIcon(pf.file.type) }),
-                /* @__PURE__ */ jsx13(
+                pf.preview ? /* @__PURE__ */ jsx15("img", { src: pf.preview, alt: pf.file.name, className: "w-6 h-6 object-cover" }) : /* @__PURE__ */ jsx15("span", { className: "text-xs !text-gray-500 dark:!text-gray-400", children: getFileIcon(pf.file.type) }),
+                /* @__PURE__ */ jsx15(
                   "button",
                   {
                     onClick: () => removeFile(index),
                     className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity",
                     title: "Remove",
-                    children: /* @__PURE__ */ jsx13("svg", { className: "w-3 h-3 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                    children: /* @__PURE__ */ jsx15("svg", { className: "w-3 h-3 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
                   }
                 )
               ]
             },
             index
           )) }),
-          state === "idle" ? /* @__PURE__ */ jsx13(
+          state === "idle" ? /* @__PURE__ */ jsx15(
             "textarea",
             {
               ref: inputRef,
@@ -1493,7 +2031,7 @@ function CommandComposer({
               ),
               style: { minHeight: "24px", maxHeight: "120px" }
             }
-          ) : /* @__PURE__ */ jsx13(
+          ) : /* @__PURE__ */ jsx15(
             "div",
             {
               className: cn(
@@ -1504,14 +2042,14 @@ function CommandComposer({
                 state === "error" && "!text-red-600 dark:!text-red-400",
                 state === "plan-pending" && "!text-amber-700 dark:!text-amber-300"
               ),
-              children: isToolCall ? /* @__PURE__ */ jsxs9(Fragment2, { children: [
-                /* @__PURE__ */ jsx13("span", { className: "font-mono", children: displayContent }),
-                /* @__PURE__ */ jsx13("span", { className: "text-gray-400 dark:text-gray-500", children: "Running..." })
+              children: isToolCall ? /* @__PURE__ */ jsxs11(Fragment3, { children: [
+                /* @__PURE__ */ jsx15("span", { className: "font-mono", children: displayContent }),
+                /* @__PURE__ */ jsx15("span", { className: "text-gray-400 dark:text-gray-500", children: "Running..." })
               ] }) : displayContent
             }
           ),
-          /* @__PURE__ */ jsx13("div", { className: "w-8 h-8 flex items-center justify-center flex-shrink-0", children: state === "plan-pending" ? /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx15("div", { className: "w-8 h-8 flex items-center justify-center flex-shrink-0", children: state === "plan-pending" ? /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx15(
               "button",
               {
                 onClick: onApprove,
@@ -1519,7 +2057,7 @@ function CommandComposer({
                 children: "Approve"
               }
             ),
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx15(
               "button",
               {
                 onClick: onReject,
@@ -1527,17 +2065,26 @@ function CommandComposer({
                 children: "Modify"
               }
             )
-          ] }) : /* @__PURE__ */ jsxs9(Fragment2, { children: [
-            (state === "success" || state === "error") && /* @__PURE__ */ jsx13(
+          ] }) : /* @__PURE__ */ jsxs11(Fragment3, { children: [
+            state === "loading" && onStop && /* @__PURE__ */ jsx15(
+              "button",
+              {
+                onClick: onStop,
+                className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all border border-red-400 dark:border-red-500 bg-red-50 dark:bg-red-900/30 !text-red-600 dark:!text-red-400 hover:bg-red-100 dark:hover:bg-red-900/50",
+                title: "Stop generation",
+                children: /* @__PURE__ */ jsx15("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx15("rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
+              }
+            ),
+            (state === "success" || state === "error") && /* @__PURE__ */ jsx15(
               "button",
               {
                 onClick: handleNewCommand,
                 className: "w-8 h-8 rounded-lg flex items-center justify-center !text-gray-400 hover:!text-gray-600 dark:hover:!text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
                 title: "New command",
-                children: /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                children: /* @__PURE__ */ jsx15("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
               }
             ),
-            state === "idle" && /* @__PURE__ */ jsx13(
+            state === "idle" && /* @__PURE__ */ jsx15(
               "button",
               {
                 onClick: handleSubmit,
@@ -1549,14 +2096,14 @@ function CommandComposer({
                   input.trim() || pendingFiles.length > 0 ? "bg-gray-900 dark:bg-white !text-white dark:!text-gray-900 border-gray-900 dark:border-white" : "bg-white dark:bg-gray-800 !text-gray-400"
                 ),
                 title: "Execute command",
-                children: /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 12h14M12 5l7 7-7 7" }) })
+                children: /* @__PURE__ */ jsx15("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 12h14M12 5l7 7-7 7" }) })
               }
             )
           ] }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx15(
       "input",
       {
         ref: fileInputRef,
@@ -1731,11 +2278,32 @@ var AptevaClient = class {
     const data = await response.json();
     return data.messages;
   }
+  /**
+   * Cancel an in-progress request
+   */
+  async cancelRequest(agentId, requestId) {
+    try {
+      const response = await fetch(`${this.config.apiUrl}/agents/${agentId}/requests/${requestId}/cancel`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-API-Key": this.config.apiKey
+        }
+      });
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({ error: "Cancel request failed" }));
+        throw new Error(error.error || `Cancel request failed with status ${response.status}`);
+      }
+    } catch (error) {
+      console.error("[AptevaClient] Cancel request error:", error);
+      throw error;
+    }
+  }
 };
 var aptevaClient = new AptevaClient();
 
 // src/components/Chat/Chat.tsx
-import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function Chat({
   agentId,
   threadId,
@@ -1773,12 +2341,18 @@ function Chat({
   placeholder,
   showHeader = true,
   headerTitle = "Chat",
+  // Widget detection
+  enableWidgets = false,
+  availableWidgets,
+  compactWidgetContext = false,
+  onWidgetRender,
   className
 }) {
   const [messages, setMessages] = useState3(initialMessages);
   const [isLoading, setIsLoading] = useState3(false);
   const [currentThreadId, setCurrentThreadId] = useState3(threadId || null);
   const [mode, setMode] = useState3(initialMode);
+  const [chatToolName, setChatToolName] = useState3(null);
   const [commandState, setCommandState] = useState3("idle");
   const [commandResult, setCommandResult] = useState3(null);
   const [commandError, setCommandError] = useState3(null);
@@ -1786,12 +2360,19 @@ function Chat({
   const [commandInput, setCommandInput] = useState3("");
   const [streamedContent, setStreamedContent] = useState3("");
   const [currentToolName, setCurrentToolName] = useState3(null);
+  const [currentRequestId, setCurrentRequestId] = useState3(null);
   const [plan, setPlan] = useState3("");
   const [pendingCommand, setPendingCommand] = useState3("");
   const [internalPlanMode, setInternalPlanMode] = useState3(planMode);
   const [showSettingsMenu, setShowSettingsMenu] = useState3(false);
-  const fileInputRef = useRef4(null);
-  useEffect3(() => {
+  const fileInputRef = useRef5(null);
+  const effectiveContext = useMemo2(() => {
+    if (!enableWidgets) return context;
+    const widgetContext = compactWidgetContext ? generateCompactWidgetContext(availableWidgets) : generateWidgetContext(availableWidgets);
+    return context ? `${context}
+${widgetContext}` : widgetContext;
+  }, [context, enableWidgets, availableWidgets, compactWidgetContext]);
+  useEffect4(() => {
     if (apiUrl || apiKey) {
       aptevaClient.configure({
         ...apiUrl && { apiUrl },
@@ -1799,15 +2380,15 @@ function Chat({
       });
     }
   }, [apiUrl, apiKey]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (threadId) {
       onThreadChange?.(threadId);
     }
   }, [threadId, onThreadChange]);
-  useEffect3(() => {
+  useEffect4(() => {
     setInternalPlanMode(planMode);
   }, [planMode]);
-  useEffect3(() => {
+  useEffect4(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       if (showSettingsMenu && !target.closest(".settings-menu-container")) {
@@ -1852,6 +2433,7 @@ function Chat({
         let accumulatedWidgets = [];
         let responseThreadId = currentThreadId;
         let toolInputBuffer = "";
+        const streamingMessageId = `msg-${Date.now()}`;
         const updateMessage = () => {
           const segments = [...contentSegments];
           if (currentTextBuffer) {
@@ -1871,19 +2453,19 @@ function Chat({
                   ...lastMessage,
                   content: currentTextBuffer,
                   widgets: accumulatedWidgets.length > 0 ? accumulatedWidgets : void 0,
-                  metadata: { ...lastMessage.metadata, content_segments: segments }
+                  metadata: { ...lastMessage.metadata, content_segments: segments, isStreaming: true }
                 }
               ];
             } else {
               return [
                 ...prev,
                 {
-                  id: `msg-${Date.now()}-streaming`,
+                  id: streamingMessageId,
                   role: "assistant",
                   content: currentTextBuffer,
                   widgets: accumulatedWidgets.length > 0 ? accumulatedWidgets : void 0,
                   timestamp: /* @__PURE__ */ new Date(),
-                  metadata: { content_segments: segments }
+                  metadata: { content_segments: segments, isStreaming: true }
                 }
               ];
             }
@@ -1895,7 +2477,7 @@ function Chat({
             message: messagePayload,
             stream: true,
             ...currentThreadId && { thread_id: currentThreadId },
-            ...context && { system: context }
+            ...effectiveContext && { system: effectiveContext }
           },
           (chunk) => {
             switch (chunk.type) {
@@ -1908,6 +2490,11 @@ function Chat({
                   }
                 }
                 break;
+              case "request_id":
+                if (chunk.request_id) {
+                  setCurrentRequestId(chunk.request_id);
+                }
+                break;
               case "content":
               case "token":
                 if (chunk.content) {
@@ -1923,6 +2510,7 @@ function Chat({
                   }
                   contentSegments.push({ type: "tool", id: chunk.tool_id, name: chunk.tool_name });
                   toolInputBuffer = "";
+                  setChatToolName(chunk.tool_name);
                   updateMessage();
                 }
                 break;
@@ -1938,6 +2526,7 @@ function Chat({
                     toolSegment.result = chunk.content;
                     onToolResult?.(toolSegment.name, chunk.content);
                   }
+                  setChatToolName(null);
                   updateMessage();
                 }
                 break;
@@ -1967,10 +2556,10 @@ function Chat({
                   ...prev.slice(0, -1),
                   {
                     ...lastMessage,
-                    id: `msg-${Date.now()}`,
+                    // Keep the same ID to avoid React remounting the component
                     content: currentTextBuffer || "Response received",
                     widgets: accumulatedWidgets.length > 0 ? accumulatedWidgets : void 0,
-                    metadata: { thread_id: threadId2, content_segments: contentSegments }
+                    metadata: { thread_id: threadId2, content_segments: contentSegments, isStreaming: false }
                   }
                 ];
               }
@@ -1981,6 +2570,8 @@ function Chat({
               onThreadChange?.(threadId2);
             }
             setIsLoading(false);
+            setCurrentRequestId(null);
+            setChatToolName(null);
           },
           (error) => {
             const errorMessage = {
@@ -1998,6 +2589,8 @@ function Chat({
               return [...prev, errorMessage];
             });
             setIsLoading(false);
+            setCurrentRequestId(null);
+            setChatToolName(null);
             onError?.(error);
           }
         );
@@ -2040,7 +2633,7 @@ function Chat({
       } else {
         try {
           const planningInstruction = `CRITICAL PLANNING MODE: You are ONLY creating a plan. Write a numbered list of steps describing what WOULD be done. DO NOT execute anything.`;
-          const systemMessage = context ? `${context}
+          const systemMessage = effectiveContext ? `${effectiveContext}
 
 ${planningInstruction}` : planningInstruction;
           const response = await aptevaClient.chat({
@@ -2111,7 +2704,7 @@ ${planningInstruction}` : planningInstruction;
         }
       } else {
         const commandInstruction = `CRITICAL COMMAND MODE: Maximum 10 words per response. Execute the command immediately. Make reasonable assumptions based on context. Use sensible defaults for missing details. DO NOT ask questions unless something is truly impossible without user input (e.g., missing required password). State what you're doing or the result. Examples: "Analyzing customer data from last quarter..." or "Created 5 new database entries successfully" or "Search complete: found 12 matching results". NO greetings, NO filler words, NO clarification requests. Action/result only.`;
-        const systemMessage = context ? `${context}
+        const systemMessage = effectiveContext ? `${effectiveContext}
 
 ${commandInstruction}` : commandInstruction;
         const messagePayload = files && files.length > 0 ? await buildMessageWithAttachments(currentCommand, files) : currentCommand;
@@ -2146,6 +2739,8 @@ ${commandInstruction}` : commandInstruction;
                   setCurrentThreadId(chunk.thread_id);
                   onThreadChange?.(chunk.thread_id);
                 }
+              } else if (chunk.type === "request_id" && chunk.request_id) {
+                setCurrentRequestId(chunk.request_id);
               }
             },
             (threadId2) => {
@@ -2157,11 +2752,13 @@ ${commandInstruction}` : commandInstruction;
               setCommandResult(result);
               setCommandState("success");
               setProgress(100);
+              setCurrentRequestId(null);
               onComplete?.(result);
             },
             (error) => {
               setCommandError(error);
               setCommandState("error");
+              setCurrentRequestId(null);
               onError?.(error);
             }
           );
@@ -2218,11 +2815,34 @@ ${planToExecute}`;
     setPendingCommand("");
     setCommandState("idle");
   };
+  const handleStop = async () => {
+    if (currentRequestId && agentId) {
+      try {
+        await aptevaClient.cancelRequest(agentId, currentRequestId);
+      } catch (error) {
+        console.error("Failed to cancel request:", error);
+      }
+    }
+    setIsLoading(false);
+    if (commandState === "loading") {
+      setCommandState("idle");
+      setStreamedContent("");
+      setCurrentToolName(null);
+      setProgress(0);
+    }
+    setCurrentRequestId(null);
+  };
   const isCompact = commandVariant === "compact";
-  return /* @__PURE__ */ jsxs10("div", { className: cn("flex flex-col h-full", className), children: [
-    showHeader && mode === "chat" && /* @__PURE__ */ jsx14("div", { className: "px-4 py-3 flex items-center justify-between", children: /* @__PURE__ */ jsx14("h2", { className: "!text-lg font-semibold !text-gray-900 dark:!text-white", children: headerTitle }) }),
-    mode === "chat" && /* @__PURE__ */ jsxs10(Fragment3, { children: [
-      /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs12("div", { className: cn("flex flex-col h-full", className), children: [
+    showHeader && mode === "chat" && /* @__PURE__ */ jsx16("div", { className: "px-4 py-3 flex items-center justify-between", children: /* @__PURE__ */ jsxs12("div", { children: [
+      /* @__PURE__ */ jsx16("h2", { className: "!text-lg font-semibold !text-gray-900 dark:!text-white", children: headerTitle }),
+      /* @__PURE__ */ jsx16("p", { className: cn(
+        "!text-xs",
+        isLoading ? chatToolName ? "!text-blue-500 dark:!text-blue-400" : "!text-gray-400 dark:!text-gray-500" : "!text-gray-400 dark:!text-gray-500"
+      ), children: isLoading ? chatToolName ? `Using ${chatToolName}...` : "Thinking..." : "Ready" })
+    ] }) }),
+    mode === "chat" && /* @__PURE__ */ jsxs12(Fragment4, { children: [
+      /* @__PURE__ */ jsx16(
         MessageList,
         {
           messages,
@@ -2232,22 +2852,25 @@ ${planToExecute}`;
           welcomeIcon,
           suggestedPrompts,
           welcomeVariant,
-          onPromptClick: (prompt) => handleSendMessage(prompt)
+          onPromptClick: (prompt) => handleSendMessage(prompt),
+          enableWidgets,
+          onWidgetRender
         }
       ),
-      isLoading && /* @__PURE__ */ jsx14("div", { className: "px-4 py-2 !text-sm !text-gray-500 dark:!text-gray-400 italic", children: "AI is thinking..." }),
-      /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx16(
         Composer,
         {
           onSendMessage: handleSendMessage,
           placeholder: placeholder || defaultPlaceholder,
           disabled: isLoading,
+          isLoading,
+          onStop: handleStop,
           onFileUpload,
           onSwitchMode: showModeToggle ? () => handleModeChange("command") : void 0
         }
       )
     ] }),
-    mode === "command" && /* @__PURE__ */ jsx14("div", { className: "w-full", children: /* @__PURE__ */ jsx14(
+    mode === "command" && /* @__PURE__ */ jsx16("div", { className: "w-full", children: /* @__PURE__ */ jsx16(
       CommandComposer,
       {
         onExecute: (text, files) => {
@@ -2263,11 +2886,12 @@ ${planToExecute}`;
         onApprove: approvePlan,
         onReject: rejectPlan,
         onReset: resetCommand,
+        onStop: handleStop,
         onExpand: showModeToggle ? () => handleModeChange("chat") : void 0,
         placeholder: placeholder || "Enter your command..."
       }
     ) }),
-    /* @__PURE__ */ jsx14("style", { dangerouslySetInnerHTML: {
+    /* @__PURE__ */ jsx16("style", { dangerouslySetInnerHTML: {
       __html: `
           @keyframes pulse-border {
             0%, 100% { border-color: rgb(59, 130, 246); }
@@ -2286,11 +2910,11 @@ ${planToExecute}`;
 
 // src/components/Chat/CommandOutput.tsx
 import { useState as useState4 } from "react";
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 
 // src/components/Command/Command.tsx
-import React, { useState as useState5, useEffect as useEffect4 } from "react";
-import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import React, { useState as useState5, useEffect as useEffect5 } from "react";
+import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
 function Command({
   agentId,
   command: initialCommand,
@@ -2330,15 +2954,15 @@ function Command({
   const [showSettingsMenu, setShowSettingsMenu] = useState5(false);
   const [internalPlanMode, setInternalPlanMode] = useState5(planMode);
   const fileInputRef = React.useRef(null);
-  useEffect4(() => {
+  useEffect5(() => {
     if (autoExecute && state === "idle" && command) {
       executeCommand();
     }
   }, [autoExecute]);
-  useEffect4(() => {
+  useEffect5(() => {
     setInternalPlanMode(planMode);
   }, [planMode]);
-  useEffect4(() => {
+  useEffect5(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       if (showSettingsMenu && !target.closest(".settings-menu-container")) {
@@ -2740,7 +3364,7 @@ ${planToExecute}`;
     setUploadedFiles((prev) => prev.filter((_, i) => i !== index));
   };
   const isCompact = variant === "compact";
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       className: cn(
@@ -2755,9 +3379,9 @@ ${planToExecute}`;
       ),
       style: { minHeight: isCompact ? "auto" : "180px" },
       children: [
-        /* @__PURE__ */ jsxs12("div", { className: cn("flex-1 flex", isCompact ? "flex-row items-center p-3 gap-3" : "flex-col p-4"), children: [
-          state === "idle" && allowInput && !isCompact && /* @__PURE__ */ jsxs12(Fragment4, { children: [
-            /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsxs14("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__ */ jsxs14(Fragment5, { children: [
+            /* @__PURE__ */ jsx18(
               "textarea",
               {
                 value: command,
@@ -2773,42 +3397,42 @@ ${planToExecute}`;
                 rows: 6
               }
             ),
-            uploadedFiles.length > 0 && /* @__PURE__ */ jsx16("div", { className: "flex flex-wrap gap-2 mt-2", children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs12("div", { className: "relative group", children: [
-              file.type === "image" ? /* @__PURE__ */ jsx16(
+            uploadedFiles.length > 0 && /* @__PURE__ */ jsx18("div", { className: "flex flex-wrap gap-2 mt-2", children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs14("div", { className: "relative group", children: [
+              file.type === "image" ? /* @__PURE__ */ jsx18(
                 "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__ */ jsxs12("div", { className: "w-20 h-20 flex flex-col items-center justify-center rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800", children: [
-                /* @__PURE__ */ jsx16("svg", { className: "w-8 h-8 text-gray-500 dark:text-gray-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx16("path", { fillRule: "evenodd", d: "M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z", clipRule: "evenodd" }) }),
-                /* @__PURE__ */ jsx16("span", { className: "text-[8px] text-gray-500 dark:text-gray-400 mt-1 px-1 truncate max-w-full", children: file.name.length > 12 ? file.name.slice(0, 12) + "..." : file.name })
+              ) : /* @__PURE__ */ jsxs14("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__ */ jsx18("svg", { className: "w-8 h-8 text-gray-500 dark:text-gray-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx18("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__ */ jsx18("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__ */ jsx16(
+              /* @__PURE__ */ jsx18(
                 "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__ */ jsx16("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                  children: /* @__PURE__ */ jsx18("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
                 }
               )
             ] }, index)) })
           ] }),
-          state === "idle" && allowInput && isCompact && /* @__PURE__ */ jsxs12(Fragment4, { children: [
-            /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
-              enableFileUpload && /* @__PURE__ */ jsx16(
+          state === "idle" && allowInput && isCompact && /* @__PURE__ */ jsxs14(Fragment5, { children: [
+            /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
+              enableFileUpload && /* @__PURE__ */ jsx18(
                 "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__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16("path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
+                  children: /* @__PURE__ */ jsx18("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx18("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__ */ jsxs12("div", { className: "relative settings-menu-container", children: [
-                /* @__PURE__ */ jsx16(
+              planMode && /* @__PURE__ */ jsxs14("div", { className: "relative settings-menu-container", children: [
+                /* @__PURE__ */ jsx18(
                   "button",
                   {
                     onClick: () => setShowSettingsMenu(!showSettingsMenu),
@@ -2817,28 +3441,28 @@ ${planToExecute}`;
                       internalPlanMode ? "!text-blue-600 dark:!text-blue-400" : "!text-gray-500 dark:!text-gray-500"
                     ),
                     title: "Settings",
-                    children: /* @__PURE__ */ jsxs12("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                      /* @__PURE__ */ jsx16("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
-                      /* @__PURE__ */ jsx16("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
-                      /* @__PURE__ */ jsx16("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
-                      /* @__PURE__ */ jsx16("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
-                      /* @__PURE__ */ jsx16("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
-                      /* @__PURE__ */ jsx16("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
-                      /* @__PURE__ */ jsx16("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
-                      /* @__PURE__ */ jsx16("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
-                      /* @__PURE__ */ jsx16("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
+                    children: /* @__PURE__ */ jsxs14("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                      /* @__PURE__ */ jsx18("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
+                      /* @__PURE__ */ jsx18("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
+                      /* @__PURE__ */ jsx18("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
+                      /* @__PURE__ */ jsx18("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
+                      /* @__PURE__ */ jsx18("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
+                      /* @__PURE__ */ jsx18("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
+                      /* @__PURE__ */ jsx18("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
+                      /* @__PURE__ */ jsx18("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
+                      /* @__PURE__ */ jsx18("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
                     ] })
                   }
                 ),
-                showSettingsMenu && /* @__PURE__ */ jsx16("div", { className: "absolute top-10 left-0 z-50 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-2.5 settings-menu-container", children: /* @__PURE__ */ jsxs12("label", { className: "flex items-center justify-between cursor-pointer group", children: [
-                  /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx16("svg", { className: "w-3.5 h-3.5 text-gray-500 dark:text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
-                    /* @__PURE__ */ jsxs12("div", { children: [
-                      /* @__PURE__ */ jsx16("div", { className: "text-xs font-medium text-gray-700 dark:text-gray-300", children: "Plan Mode" }),
-                      /* @__PURE__ */ jsx16("div", { className: "text-[10px] text-gray-500 dark:text-gray-400", children: "Review first" })
+                showSettingsMenu && /* @__PURE__ */ jsx18("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__ */ jsxs14("label", { className: "flex items-center justify-between cursor-pointer group", children: [
+                  /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx18("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__ */ jsx18("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__ */ jsxs14("div", { children: [
+                      /* @__PURE__ */ jsx18("div", { className: "text-xs font-medium text-gray-700 dark:text-gray-300", children: "Plan Mode" }),
+                      /* @__PURE__ */ jsx18("div", { className: "text-[10px] text-gray-500 dark:text-gray-400", children: "Review first" })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx16(
+                  /* @__PURE__ */ jsx18(
                     "button",
                     {
                       onClick: (e) => {
@@ -2850,7 +3474,7 @@ ${planToExecute}`;
                         internalPlanMode ? "bg-blue-600" : "bg-gray-300 dark:bg-gray-600"
                       ),
                       type: "button",
-                      children: /* @__PURE__ */ jsx16(
+                      children: /* @__PURE__ */ jsx18(
                         "span",
                         {
                           className: cn(
@@ -2864,26 +3488,26 @@ ${planToExecute}`;
                 ] }) })
               ] })
             ] }),
-            uploadedFiles.length > 0 && /* @__PURE__ */ jsx16("div", { className: "flex gap-1 flex-shrink-0", children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs12("div", { className: "relative group", children: [
-              file.type === "image" ? /* @__PURE__ */ jsx16(
+            uploadedFiles.length > 0 && /* @__PURE__ */ jsx18("div", { className: "flex gap-1 flex-shrink-0", children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs14("div", { className: "relative group", children: [
+              file.type === "image" ? /* @__PURE__ */ jsx18(
                 "img",
                 {
                   src: file.preview,
                   alt: file.name,
                   className: "w-8 h-8 object-cover rounded border border-gray-300 dark:border-gray-600"
                 }
-              ) : /* @__PURE__ */ jsx16("div", { className: "w-8 h-8 flex items-center justify-center rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800", title: file.name, children: /* @__PURE__ */ jsx16("svg", { className: "w-4 h-4 text-gray-500 dark:text-gray-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx16("path", { fillRule: "evenodd", d: "M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z", clipRule: "evenodd" }) }) }),
-              /* @__PURE__ */ jsx16(
+              ) : /* @__PURE__ */ jsx18("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__ */ jsx18("svg", { className: "w-4 h-4 text-gray-500 dark:text-gray-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx18("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__ */ jsx18(
                 "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__ */ jsx16("svg", { className: "w-2.5 h-2.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
+                  children: /* @__PURE__ */ jsx18("svg", { className: "w-2.5 h-2.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
                 }
               )
             ] }, index)) }),
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx18(
               "input",
               {
                 type: "text",
@@ -2899,7 +3523,7 @@ ${planToExecute}`;
                 className: "flex-1 bg-transparent border-none focus:outline-none !text-gray-900 dark:!text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 py-1"
               }
             ),
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx18(
               "button",
               {
                 onClick: () => executeCommand(),
@@ -2915,33 +3539,33 @@ ${planToExecute}`;
                   !command.trim() && "border-gray-200 dark:border-gray-700 !text-gray-400 dark:!text-gray-600"
                 ),
                 title: "Execute",
-                children: /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                children: /* @__PURE__ */ jsx18("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx18("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             )
           ] }),
-          state === "loading" && !isCompact && /* @__PURE__ */ jsxs12("div", { className: "flex-1 flex flex-col items-center justify-center space-y-4 py-8", children: [
-            /* @__PURE__ */ jsx16("div", { className: "w-6 h-6 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin" }),
-            /* @__PURE__ */ jsx16("div", { className: "text-gray-600 dark:text-gray-400 text-sm text-center max-w-md", children: enableStreaming && streamedContent ? streamedContent : loadingText }),
-            showProgress && /* @__PURE__ */ jsxs12("div", { className: "w-full max-w-sm", children: [
-              /* @__PURE__ */ jsx16("div", { className: "w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5", children: /* @__PURE__ */ jsx16(
+          state === "loading" && !isCompact && /* @__PURE__ */ jsxs14("div", { className: "flex-1 flex flex-col items-center justify-center space-y-4 py-8", children: [
+            /* @__PURE__ */ jsx18("div", { className: "w-6 h-6 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin" }),
+            /* @__PURE__ */ jsx18("div", { className: "text-gray-600 dark:text-gray-400 text-sm text-center max-w-md", children: enableStreaming && streamedContent ? streamedContent : loadingText }),
+            showProgress && /* @__PURE__ */ jsxs14("div", { className: "w-full max-w-sm", children: [
+              /* @__PURE__ */ jsx18("div", { className: "w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5", children: /* @__PURE__ */ jsx18(
                 "div",
                 {
                   className: "bg-blue-500 h-1.5 rounded-full transition-all duration-300",
                   style: { width: `${progress}%` }
                 }
               ) }),
-              /* @__PURE__ */ jsxs12("p", { className: "text-xs text-gray-500 mt-2 text-center", children: [
+              /* @__PURE__ */ jsxs14("p", { className: "text-xs text-gray-500 mt-2 text-center", children: [
                 progress,
                 "%"
               ] })
             ] })
           ] }),
-          state === "loading" && isCompact && /* @__PURE__ */ jsxs12(Fragment4, { children: [
-            /* @__PURE__ */ jsxs12("div", { className: "flex-1 flex items-center gap-3 py-1", children: [
-              /* @__PURE__ */ jsx16("div", { className: "w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin" }),
-              /* @__PURE__ */ jsx16("div", { className: "text-gray-600 dark:text-gray-400 text-sm truncate", children: enableStreaming && streamedContent ? streamedContent : loadingText })
+          state === "loading" && isCompact && /* @__PURE__ */ jsxs14(Fragment5, { children: [
+            /* @__PURE__ */ jsxs14("div", { className: "flex-1 flex items-center gap-3 py-1", children: [
+              /* @__PURE__ */ jsx18("div", { className: "w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin" }),
+              /* @__PURE__ */ jsx18("div", { className: "text-gray-600 dark:text-gray-400 text-sm truncate", children: enableStreaming && streamedContent ? streamedContent : loadingText })
             ] }),
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx18(
               "button",
               {
                 disabled: true,
@@ -2953,20 +3577,20 @@ ${planToExecute}`;
                   "!text-lg",
                   "opacity-30 cursor-not-allowed"
                 ),
-                children: /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                children: /* @__PURE__ */ jsx18("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx18("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             )
           ] }),
-          state === "plan-pending" && !isCompact && /* @__PURE__ */ jsx16("div", { className: "flex-1 flex flex-col", children: /* @__PURE__ */ jsxs12("div", { className: "mb-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg", children: [
-            /* @__PURE__ */ jsxs12("div", { className: "flex items-start gap-2 mb-3", children: [
-              /* @__PURE__ */ jsx16("svg", { className: "w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
-              /* @__PURE__ */ jsxs12("div", { className: "flex-1", children: [
-                /* @__PURE__ */ jsx16("h3", { className: "text-sm font-semibold text-blue-800 dark:text-blue-300 mb-1", children: "Proposed Plan" }),
-                /* @__PURE__ */ jsx16("div", { className: "text-blue-700 dark:text-blue-300 text-sm whitespace-pre-line leading-relaxed", children: plan })
+          state === "plan-pending" && !isCompact && /* @__PURE__ */ jsx18("div", { className: "flex-1 flex flex-col", children: /* @__PURE__ */ jsxs14("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__ */ jsxs14("div", { className: "flex items-start gap-2 mb-3", children: [
+              /* @__PURE__ */ jsx18("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__ */ jsx18("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__ */ jsxs14("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsx18("h3", { className: "text-sm font-semibold text-blue-800 dark:text-blue-300 mb-1", children: "Proposed Plan" }),
+                /* @__PURE__ */ jsx18("div", { className: "text-blue-700 dark:text-blue-300 text-sm whitespace-pre-line leading-relaxed", children: plan })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs12("div", { className: "flex gap-2 mt-4", children: [
-              /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsxs14("div", { className: "flex gap-2 mt-4", children: [
+              /* @__PURE__ */ jsx18(
                 "button",
                 {
                   onClick: approvePlan,
@@ -2974,7 +3598,7 @@ ${planToExecute}`;
                   children: "Approve & Execute"
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx18(
                 "button",
                 {
                   onClick: rejectPlan,
@@ -2984,20 +3608,20 @@ ${planToExecute}`;
               )
             ] })
           ] }) }),
-          state === "plan-pending" && isCompact && /* @__PURE__ */ jsxs12(Fragment4, { children: [
-            /* @__PURE__ */ jsxs12(
+          state === "plan-pending" && isCompact && /* @__PURE__ */ jsxs14(Fragment5, { children: [
+            /* @__PURE__ */ jsxs14(
               "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__ */ jsx16("svg", { className: "w-4 h-4 text-blue-600 dark:text-blue-400 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
-                  /* @__PURE__ */ jsx16("span", { className: "text-sm font-medium text-blue-700 dark:text-blue-300 truncate flex-1", children: "View Execution Plan" })
+                  /* @__PURE__ */ jsx18("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__ */ jsx18("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__ */ jsx18("span", { className: "text-sm font-medium text-blue-700 dark:text-blue-300 truncate flex-1", children: "View Execution Plan" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs12("div", { className: "flex gap-2 flex-shrink-0", children: [
-              /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsxs14("div", { className: "flex gap-2 flex-shrink-0", children: [
+              /* @__PURE__ */ jsx18(
                 "button",
                 {
                   onClick: approvePlan,
@@ -3005,7 +3629,7 @@ ${planToExecute}`;
                   children: "Approve"
                 }
               ),
-              /* @__PURE__ */ jsx16(
+              /* @__PURE__ */ jsx18(
                 "button",
                 {
                   onClick: rejectPlan,
@@ -3015,15 +3639,15 @@ ${planToExecute}`;
               )
             ] })
           ] }),
-          state === "error" && /* @__PURE__ */ jsxs12("div", { className: "flex-1 flex flex-col", children: [
-            /* @__PURE__ */ jsx16("div", { className: "mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg", children: /* @__PURE__ */ jsxs12("div", { className: "flex items-start gap-2", children: [
-              /* @__PURE__ */ jsx16("svg", { className: "w-5 h-5 text-red-600 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-              /* @__PURE__ */ jsxs12("div", { children: [
-                /* @__PURE__ */ jsx16("h3", { className: "text-sm font-semibold text-red-800 dark:text-red-400", children: "Error" }),
-                /* @__PURE__ */ jsx16("p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: error?.message })
+          state === "error" && /* @__PURE__ */ jsxs14("div", { className: "flex-1 flex flex-col", children: [
+            /* @__PURE__ */ jsx18("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__ */ jsxs14("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx18("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__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+              /* @__PURE__ */ jsxs14("div", { children: [
+                /* @__PURE__ */ jsx18("h3", { className: "text-sm font-semibold text-red-800 dark:text-red-400", children: "Error" }),
+                /* @__PURE__ */ jsx18("p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: error?.message })
               ] })
             ] }) }),
-            allowInput && /* @__PURE__ */ jsx16(
+            allowInput && /* @__PURE__ */ jsx18(
               "textarea",
               {
                 value: command,
@@ -3040,16 +3664,16 @@ ${planToExecute}`;
               }
             )
           ] }),
-          state === "success" && result && !isCompact && /* @__PURE__ */ jsx16("div", { className: "flex-1 overflow-auto", children: resultRenderer ? resultRenderer(result.data) : /* @__PURE__ */ jsxs12("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsxs12("div", { className: "flex items-start gap-3 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg", children: [
-              /* @__PURE__ */ jsx16("svg", { className: "w-5 h-5 text-green-600 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-              /* @__PURE__ */ jsxs12("div", { className: "flex-1", children: [
-                /* @__PURE__ */ jsx16("h3", { className: "text-sm font-semibold text-green-800 dark:text-green-400 mb-1", children: "Success" }),
-                /* @__PURE__ */ jsx16("p", { className: "text-green-700 dark:text-green-300 text-sm", children: "Command executed successfully" })
+          state === "success" && result && !isCompact && /* @__PURE__ */ jsx18("div", { className: "flex-1 overflow-auto", children: resultRenderer ? resultRenderer(result.data) : /* @__PURE__ */ jsxs14("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs14("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__ */ jsx18("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__ */ jsx18("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__ */ jsxs14("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsx18("h3", { className: "text-sm font-semibold text-green-800 dark:text-green-400 mb-1", children: "Success" }),
+                /* @__PURE__ */ jsx18("p", { className: "text-green-700 dark:text-green-300 text-sm", children: "Command executed successfully" })
               ] })
             ] }),
-            result.data?.summary && /* @__PURE__ */ jsx16("div", { className: "text-gray-700 dark:text-gray-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
-            result.widgets && result.widgets.length > 0 && /* @__PURE__ */ jsx16("div", { className: "space-y-3", children: result.widgets.map((widget) => /* @__PURE__ */ jsx16(
+            result.data?.summary && /* @__PURE__ */ jsx18("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__ */ jsx18("div", { className: "space-y-3", children: result.widgets.map((widget) => /* @__PURE__ */ jsx18(
               WidgetRenderer,
               {
                 widget,
@@ -3058,8 +3682,8 @@ ${planToExecute}`;
               widget.id
             )) })
           ] }) }),
-          state === "success" && result && isCompact && /* @__PURE__ */ jsxs12(Fragment4, { children: [
-            /* @__PURE__ */ jsxs12(
+          state === "success" && result && isCompact && /* @__PURE__ */ jsxs14(Fragment5, { children: [
+            /* @__PURE__ */ jsxs14(
               "div",
               {
                 className: "flex-1 flex items-center gap-2 py-1 cursor-text min-w-0",
@@ -3068,12 +3692,12 @@ ${planToExecute}`;
                   setResult(null);
                 },
                 children: [
-                  /* @__PURE__ */ jsx16("svg", { className: "w-4 h-4 text-green-600 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-                  /* @__PURE__ */ jsx16("div", { className: "text-green-700 dark:text-green-300 text-sm truncate flex-1 min-w-0", children: resultRenderer ? resultRenderer(result.data) : result.message || "Command executed successfully" })
+                  /* @__PURE__ */ jsx18("svg", { className: "w-4 h-4 text-green-600 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx18("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__ */ jsx18("div", { className: "text-green-700 dark:text-green-300 text-sm truncate flex-1 min-w-0", children: resultRenderer ? resultRenderer(result.data) : result.message || "Command executed successfully" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx18(
               "button",
               {
                 onClick: () => {
@@ -3089,24 +3713,24 @@ ${planToExecute}`;
                   "!text-lg"
                 ),
                 title: "New command",
-                children: /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                children: /* @__PURE__ */ jsx18("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx18("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             )
           ] })
         ] }),
-        !isCompact && /* @__PURE__ */ jsxs12("div", { className: "p-3 flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ jsx16("div", { className: "flex items-center gap-1", children: state === "idle" && allowInput && /* @__PURE__ */ jsxs12(Fragment4, { children: [
-            enableFileUpload && /* @__PURE__ */ jsx16(
+        !isCompact && /* @__PURE__ */ jsxs14("div", { className: "p-3 flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx18("div", { className: "flex items-center gap-1", children: state === "idle" && allowInput && /* @__PURE__ */ jsxs14(Fragment5, { children: [
+            enableFileUpload && /* @__PURE__ */ jsx18(
               "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__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16("path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
+                children: /* @__PURE__ */ jsx18("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx18("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__ */ jsxs12("div", { className: "relative settings-menu-container", children: [
-              /* @__PURE__ */ jsx16(
+            planMode && /* @__PURE__ */ jsxs14("div", { className: "relative settings-menu-container", children: [
+              /* @__PURE__ */ jsx18(
                 "button",
                 {
                   onClick: () => setShowSettingsMenu(!showSettingsMenu),
@@ -3115,28 +3739,28 @@ ${planToExecute}`;
                     internalPlanMode ? "!text-blue-600 dark:!text-blue-400" : "!text-gray-500 dark:!text-gray-500"
                   ),
                   title: "Settings",
-                  children: /* @__PURE__ */ jsxs12("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                    /* @__PURE__ */ jsx16("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
-                    /* @__PURE__ */ jsx16("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
-                    /* @__PURE__ */ jsx16("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
-                    /* @__PURE__ */ jsx16("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
-                    /* @__PURE__ */ jsx16("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
-                    /* @__PURE__ */ jsx16("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
-                    /* @__PURE__ */ jsx16("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
-                    /* @__PURE__ */ jsx16("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
-                    /* @__PURE__ */ jsx16("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
+                  children: /* @__PURE__ */ jsxs14("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsx18("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
+                    /* @__PURE__ */ jsx18("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
+                    /* @__PURE__ */ jsx18("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
+                    /* @__PURE__ */ jsx18("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
+                    /* @__PURE__ */ jsx18("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
+                    /* @__PURE__ */ jsx18("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
+                    /* @__PURE__ */ jsx18("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
+                    /* @__PURE__ */ jsx18("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
+                    /* @__PURE__ */ jsx18("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
                   ] })
                 }
               ),
-              showSettingsMenu && /* @__PURE__ */ jsx16("div", { className: "absolute top-10 left-0 z-50 w-64 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-3 settings-menu-container", children: /* @__PURE__ */ jsxs12("label", { className: "flex items-center justify-between cursor-pointer group", children: [
-                /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx16("svg", { className: "w-4 h-4 text-gray-500 dark:text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
-                  /* @__PURE__ */ jsxs12("div", { children: [
-                    /* @__PURE__ */ jsx16("div", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Plan Mode" }),
-                    /* @__PURE__ */ jsx16("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Review before executing" })
+              showSettingsMenu && /* @__PURE__ */ jsx18("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__ */ jsxs14("label", { className: "flex items-center justify-between cursor-pointer group", children: [
+                /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx18("svg", { className: "w-4 h-4 text-gray-500 dark:text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx18("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__ */ jsxs14("div", { children: [
+                    /* @__PURE__ */ jsx18("div", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Plan Mode" }),
+                    /* @__PURE__ */ jsx18("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Review before executing" })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx16(
+                /* @__PURE__ */ jsx18(
                   "button",
                   {
                     onClick: (e) => {
@@ -3148,7 +3772,7 @@ ${planToExecute}`;
                       internalPlanMode ? "bg-blue-600" : "bg-gray-300 dark:bg-gray-600"
                     ),
                     type: "button",
-                    children: /* @__PURE__ */ jsx16(
+                    children: /* @__PURE__ */ jsx18(
                       "span",
                       {
                         className: cn(
@@ -3162,9 +3786,9 @@ ${planToExecute}`;
               ] }) })
             ] })
           ] }) }),
-          !(state === "idle" && allowInput) && /* @__PURE__ */ jsx16("div", {}),
-          /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
-            (state === "success" || state === "error") && allowInput && /* @__PURE__ */ jsx16(
+          !(state === "idle" && allowInput) && /* @__PURE__ */ jsx18("div", {}),
+          /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2", children: [
+            (state === "success" || state === "error") && allowInput && /* @__PURE__ */ jsx18(
               "button",
               {
                 onClick: resetCommand,
@@ -3172,7 +3796,7 @@ ${planToExecute}`;
                 children: "Reset"
               }
             ),
-            (state === "idle" || state === "error") && /* @__PURE__ */ jsx16(
+            (state === "idle" || state === "error") && /* @__PURE__ */ jsx18(
               "button",
               {
                 onClick: () => executeCommand(),
@@ -3188,29 +3812,29 @@ ${planToExecute}`;
                   !command.trim() && "border-gray-200 dark:border-gray-700 !text-gray-400 dark:!text-gray-600"
                 ),
                 title: state === "error" ? "Retry" : "Execute",
-                children: state === "error" ? /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16("path", { d: "M13 8C13 10.7614 10.7614 13 8 13C5.23858 13 3 10.7614 3 8C3 5.23858 5.23858 3 8 3C9.65685 3 11.1257 3.82818 12 5.09091M12 3V5.09091M12 5.09091H9.81818", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) : /* @__PURE__ */ jsx16("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx16("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                children: state === "error" ? /* @__PURE__ */ jsx18("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx18("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__ */ jsx18("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx18("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             )
           ] })
         ] }),
-        showPlanDetails && isCompact && state === "plan-pending" && /* @__PURE__ */ jsx16("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4", onClick: () => setShowPlanDetails(false), children: /* @__PURE__ */ jsxs12("div", { className: "bg-white dark:bg-gray-900 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden", onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700", children: [
-            /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx16("svg", { className: "w-6 h-6 text-blue-600 dark:text-blue-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
-              /* @__PURE__ */ jsx16("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: "Proposed Execution Plan" })
+        showPlanDetails && isCompact && state === "plan-pending" && /* @__PURE__ */ jsx18("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4", onClick: () => setShowPlanDetails(false), children: /* @__PURE__ */ jsxs14("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__ */ jsxs14("div", { className: "flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700", children: [
+            /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx18("svg", { className: "w-6 h-6 text-blue-600 dark:text-blue-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx18("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__ */ jsx18("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: "Proposed Execution Plan" })
             ] }),
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx18(
               "button",
               {
                 onClick: () => setShowPlanDetails(false),
                 className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors",
-                children: /* @__PURE__ */ jsx16("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                children: /* @__PURE__ */ jsx18("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
               }
             )
           ] }),
-          /* @__PURE__ */ jsx16("div", { className: "p-6 overflow-y-auto max-h-[calc(80vh-180px)]", children: /* @__PURE__ */ jsx16("div", { className: "prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx16("div", { className: "text-gray-700 dark:text-gray-300 whitespace-pre-line leading-relaxed", children: plan }) }) }),
-          /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-end gap-3 p-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50", children: [
-            /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx18("div", { className: "p-6 overflow-y-auto max-h-[calc(80vh-180px)]", children: /* @__PURE__ */ jsx18("div", { className: "prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx18("div", { className: "text-gray-700 dark:text-gray-300 whitespace-pre-line leading-relaxed", children: plan }) }) }),
+          /* @__PURE__ */ jsxs14("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__ */ jsx18(
               "button",
               {
                 onClick: rejectPlan,
@@ -3218,7 +3842,7 @@ ${planToExecute}`;
                 children: "Modify Command"
               }
             ),
-            /* @__PURE__ */ jsx16(
+            /* @__PURE__ */ jsx18(
               "button",
               {
                 onClick: approvePlan,
@@ -3228,7 +3852,7 @@ ${planToExecute}`;
             )
           ] })
         ] }) }),
-        /* @__PURE__ */ jsx16(
+        /* @__PURE__ */ jsx18(
           "input",
           {
             ref: fileInputRef,
@@ -3239,7 +3863,7 @@ ${planToExecute}`;
             accept: "image/*,application/pdf,.doc,.docx,.txt"
           }
         ),
-        /* @__PURE__ */ jsx16("style", { dangerouslySetInnerHTML: {
+        /* @__PURE__ */ jsx18("style", { dangerouslySetInnerHTML: {
           __html: `
           @keyframes pulse-border {
             0%, 100% {
@@ -3261,7 +3885,7 @@ ${planToExecute}`;
 
 // src/components/Prompt/Prompt.tsx
 import { useState as useState6 } from "react";
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
 function Prompt({
   agentId,
   placeholder = "Enter your prompt...",
@@ -3323,9 +3947,9 @@ function Prompt({
       handleSubmit();
     }
   };
-  return /* @__PURE__ */ jsxs13("div", { className: cn("space-y-2", className), children: [
-    /* @__PURE__ */ jsxs13("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs15("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsxs15("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx19(
         "input",
         {
           type: "text",
@@ -3338,7 +3962,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__ */ jsx17(
+      submitOn === "button" && /* @__PURE__ */ jsx19(
         "button",
         {
           onClick: handleSubmit,
@@ -3348,13 +3972,13 @@ function Prompt({
         }
       )
     ] }),
-    maxLength && /* @__PURE__ */ jsxs13("p", { className: "text-xs text-gray-500", children: [
+    maxLength && /* @__PURE__ */ jsxs15("p", { className: "text-xs text-gray-500", children: [
       value.length,
       " / ",
       maxLength,
       " characters"
     ] }),
-    showSuggestions && !value && /* @__PURE__ */ jsx17("div", { className: "flex flex-wrap gap-2", children: suggestions.map((suggestion, idx) => /* @__PURE__ */ jsx17(
+    showSuggestions && !value && /* @__PURE__ */ jsx19("div", { className: "flex flex-wrap gap-2", children: suggestions.map((suggestion, idx) => /* @__PURE__ */ jsx19(
       "button",
       {
         onClick: () => setValue(suggestion),
@@ -3363,16 +3987,16 @@ function Prompt({
       },
       idx
     )) }),
-    isLoading && /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [
-      /* @__PURE__ */ jsx17("div", { className: "w-4 h-4 border-2 border-apteva-500 border-t-transparent rounded-full animate-spin" }),
-      /* @__PURE__ */ jsx17("span", { children: "AI is processing your request..." })
+    isLoading && /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [
+      /* @__PURE__ */ jsx19("div", { className: "w-4 h-4 border-2 border-apteva-500 border-t-transparent rounded-full animate-spin" }),
+      /* @__PURE__ */ jsx19("span", { children: "AI is processing your request..." })
     ] })
   ] });
 }
 
 // src/components/Stream/Stream.tsx
-import { useState as useState7, useEffect as useEffect5 } from "react";
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useState as useState7, useEffect as useEffect6 } from "react";
+import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 function Stream({
   agentId,
   prompt,
@@ -3391,7 +4015,7 @@ function Stream({
   const [text, setText] = useState7("");
   const [isStreaming, setIsStreaming] = useState7(false);
   const [isComplete, setIsComplete] = useState7(false);
-  useEffect5(() => {
+  useEffect6(() => {
     if (autoStart && !isStreaming && !isComplete) {
       startStreaming();
     }
@@ -3452,7 +4076,7 @@ function Stream({
     plain: "text-gray-900 dark:text-gray-100"
   };
   if (!isStreaming && !isComplete) {
-    return /* @__PURE__ */ jsx18("div", { className: cn("p-4", className), children: /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx20("div", { className: cn("p-4", className), children: /* @__PURE__ */ jsx20(
       "button",
       {
         onClick: startStreaming,
@@ -3461,9 +4085,9 @@ function Stream({
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs14("div", { className: cn(variantClasses[variant], className), children: [
+  return /* @__PURE__ */ jsxs16("div", { className: cn(variantClasses[variant], className), children: [
     text,
-    isStreaming && showCursor && /* @__PURE__ */ jsx18("span", { className: "apteva-stream-cursor" })
+    isStreaming && showCursor && /* @__PURE__ */ jsx20("span", { className: "apteva-stream-cursor" })
   ] });
 }
 
@@ -3471,9 +4095,9 @@ function Stream({
 import { useState as useState8 } from "react";
 
 // src/components/Threads/ThreadItem.tsx
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
 function ThreadItem({ thread, isActive = false, onSelect, onDelete }) {
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       className: cn("apteva-thread-item", {
@@ -3481,19 +4105,19 @@ function ThreadItem({ thread, isActive = false, onSelect, onDelete }) {
       }),
       onClick: onSelect,
       children: [
-        /* @__PURE__ */ jsxs15("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx19("h4", { className: "font-semibold text-gray-900 dark:text-white truncate", children: thread.title }),
-          thread.preview && /* @__PURE__ */ jsx19("p", { className: "text-sm text-gray-600 dark:text-gray-400 truncate", children: thread.preview }),
-          /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 mt-1 text-xs text-gray-500", children: [
-            /* @__PURE__ */ jsxs15("span", { children: [
+        /* @__PURE__ */ jsxs17("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx21("h4", { className: "font-semibold text-gray-900 dark:text-white truncate", children: thread.title }),
+          thread.preview && /* @__PURE__ */ jsx21("p", { className: "text-sm text-gray-600 dark:text-gray-400 truncate", children: thread.preview }),
+          /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2 mt-1 text-xs text-gray-500", children: [
+            /* @__PURE__ */ jsxs17("span", { children: [
               thread.messageCount,
               " messages"
             ] }),
-            /* @__PURE__ */ jsx19("span", { children: "\u2022" }),
-            /* @__PURE__ */ jsx19("span", { children: formatRelativeTime(thread.updatedAt) })
+            /* @__PURE__ */ jsx21("span", { children: "\u2022" }),
+            /* @__PURE__ */ jsx21("span", { children: formatRelativeTime(thread.updatedAt) })
           ] })
         ] }),
-        onDelete && /* @__PURE__ */ jsx19(
+        onDelete && /* @__PURE__ */ jsx21(
           "button",
           {
             onClick: (e) => {
@@ -3523,7 +4147,7 @@ function formatRelativeTime(date) {
 }
 
 // src/components/Threads/ThreadList.tsx
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
 function ThreadList({
   threads,
   currentThreadId,
@@ -3537,8 +4161,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__ */ jsxs16("div", { className: "flex flex-col h-full", children: [
-    showSearch && /* @__PURE__ */ jsx20("div", { className: "p-3 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs18("div", { className: "flex flex-col h-full", children: [
+    showSearch && /* @__PURE__ */ jsx22("div", { className: "p-3 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx22(
       "input",
       {
         type: "text",
@@ -3548,10 +4172,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__ */ jsxs16("div", { className: "flex-1 overflow-y-auto", children: [
-      Object.entries(groupedThreads).map(([group, groupThreads]) => /* @__PURE__ */ jsxs16("div", { children: [
-        groupBy !== "none" && /* @__PURE__ */ jsx20("div", { className: "px-3 py-2 text-xs font-semibold text-gray-500 uppercase", children: group }),
-        groupThreads.map((thread) => /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsxs18("div", { className: "flex-1 overflow-y-auto", children: [
+      Object.entries(groupedThreads).map(([group, groupThreads]) => /* @__PURE__ */ jsxs18("div", { children: [
+        groupBy !== "none" && /* @__PURE__ */ jsx22("div", { className: "px-3 py-2 text-xs font-semibold text-gray-500 uppercase", children: group }),
+        groupThreads.map((thread) => /* @__PURE__ */ jsx22(
           ThreadItem,
           {
             thread,
@@ -3562,9 +4186,9 @@ function ThreadList({
           thread.id
         ))
       ] }, group)),
-      filteredThreads.length === 0 && /* @__PURE__ */ jsxs16("div", { className: "p-8 text-center text-gray-500", children: [
-        /* @__PURE__ */ jsx20("svg", { className: "w-10 h-10 mx-auto mb-2 opacity-50", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx20("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
-        /* @__PURE__ */ jsx20("p", { children: "No conversations found" })
+      filteredThreads.length === 0 && /* @__PURE__ */ jsxs18("div", { className: "p-8 text-center text-gray-500", children: [
+        /* @__PURE__ */ jsx22("svg", { className: "w-10 h-10 mx-auto mb-2 opacity-50", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx22("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
+        /* @__PURE__ */ jsx22("p", { children: "No conversations found" })
       ] })
     ] })
   ] });
@@ -3596,7 +4220,7 @@ function groupThreadsByDate(threads) {
 }
 
 // src/components/Threads/Threads.tsx
-import { jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
 function Threads({
   threads,
   currentThreadId,
@@ -3615,8 +4239,8 @@ function Threads({
     tabs: "flex gap-2 border-b border-gray-200 dark:border-gray-700 overflow-x-auto"
   };
   if (variant === "tabs") {
-    return /* @__PURE__ */ jsxs17("div", { className: cn(variantClasses[variant], className), children: [
-      threads.slice(0, 5).map((thread) => /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsxs19("div", { className: cn(variantClasses[variant], className), children: [
+      threads.slice(0, 5).map((thread) => /* @__PURE__ */ jsx23(
         "button",
         {
           onClick: () => onThreadSelect?.(thread.id),
@@ -3628,7 +4252,7 @@ function Threads({
         },
         thread.id
       )),
-      showNewButton && onNewThread && /* @__PURE__ */ jsx21(
+      showNewButton && onNewThread && /* @__PURE__ */ jsx23(
         "button",
         {
           onClick: onNewThread,
@@ -3638,8 +4262,8 @@ function Threads({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs17("div", { className: cn(variantClasses[variant], "flex flex-col", className), children: [
-    showNewButton && onNewThread && /* @__PURE__ */ jsx21("div", { className: "p-3 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs19("div", { className: cn(variantClasses[variant], "flex flex-col", className), children: [
+    showNewButton && onNewThread && /* @__PURE__ */ jsx23("div", { className: "p-3 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx23(
       "button",
       {
         onClick: onNewThread,
@@ -3647,7 +4271,7 @@ function Threads({
         children: "+ New Conversation"
       }
     ) }),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx23(
       ThreadList,
       {
         threads,