@apteva/apteva-kit 0.1.101 → 0.1.104

package/dist/index.mjs

@@ -797,6 +797,347 @@ Widgets: @ui:type[{json}] - MUST use square brackets []. Example: @ui:list[{"ite
 `;
 }
 
+// src/utils/interface-parser.ts
+function findMatchingBracket2(text, startIndex) {
+  const openChar = text[startIndex];
+  const closeChar = openChar === "[" ? "]" : "}";
+  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 === openChar || char === (openChar === "[" ? "{" : "[")) {
+      if (char === openChar) depth++;
+    } else if (char === closeChar || char === (closeChar === "]" ? "}" : "]")) {
+      if (char === closeChar) {
+        depth--;
+        if (depth === 0) return i;
+      }
+    }
+  }
+  return -1;
+}
+function parseInterfaceFromText(text) {
+  const marker = "@interface[";
+  const idx = text.indexOf(marker);
+  if (idx === -1) return null;
+  const bracketStart = idx + marker.length - 1;
+  const bracketEnd = findMatchingBracket2(text, bracketStart);
+  if (bracketEnd === -1) return null;
+  const jsonContent = text.slice(bracketStart + 1, bracketEnd);
+  try {
+    const parsed = JSON.parse(jsonContent);
+    if (!parsed.root || !parsed.root.id) return null;
+    return {
+      version: parsed.version || 1,
+      root: parsed.root
+    };
+  } catch {
+    return null;
+  }
+}
+function parseUpdatesFromText(text) {
+  const updates = [];
+  const marker = "@update[";
+  let searchFrom = 0;
+  while (true) {
+    const idx = text.indexOf(marker, searchFrom);
+    if (idx === -1) break;
+    const bracketStart = idx + marker.length - 1;
+    const bracketEnd = findMatchingBracket2(text, bracketStart);
+    if (bracketEnd === -1) break;
+    const jsonContent = text.slice(bracketStart + 1, bracketEnd);
+    try {
+      const parsed = JSON.parse(jsonContent);
+      if (Array.isArray(parsed)) {
+        updates.push(...parsed);
+      } else if (parsed.op && parsed.target) {
+        updates.push(parsed);
+      }
+    } catch {
+    }
+    searchFrom = bracketEnd + 1;
+  }
+  return updates;
+}
+function containsInterface(text) {
+  return text.includes("@interface[") || text.includes("@update[");
+}
+function stripInterface(text) {
+  let result = text;
+  const ifacePattern = /@interface\[/g;
+  let match;
+  while ((match = ifacePattern.exec(result)) !== null) {
+    const bracketStart = match.index + match[0].length - 1;
+    const bracketEnd = findMatchingBracket2(result, bracketStart);
+    if (bracketEnd === -1) break;
+    result = result.slice(0, match.index) + result.slice(bracketEnd + 1);
+    ifacePattern.lastIndex = match.index;
+  }
+  const updatePattern = /@update\[/g;
+  while ((match = updatePattern.exec(result)) !== null) {
+    const bracketStart = match.index + match[0].length - 1;
+    const bracketEnd = findMatchingBracket2(result, bracketStart);
+    if (bracketEnd === -1) break;
+    result = result.slice(0, match.index) + result.slice(bracketEnd + 1);
+    updatePattern.lastIndex = match.index;
+  }
+  return result.replace(/\s+/g, " ").trim();
+}
+
+// src/utils/interface-context.ts
+function generateInterfaceContext() {
+  return `## Auto Interface Mode
+
+You generate full page interfaces as JSON. When asked for a dashboard, form, or any UI, respond with an @interface block.
+
+### CRITICAL FORMAT RULES
+1. Wrap your JSON in: @interface[{...}]
+2. Every node MUST have: "type", "id", and "props" (an object)
+3. Widget properties go INSIDE "props", NOT at the top level
+4. The "type" field is the ACTUAL widget name (e.g. "form", "kpi", "table") \u2014 NEVER use "widget" as a type
+5. Layout nodes use type: "layout" with a "layout" field for the layout kind
+
+### Node structure
+
+Layout node:
+{"type": "layout", "id": "unique-id", "layout": "page|row|stack|columns|sidebar|tabs", "props": {...}, "children": [...]}
+
+Widget node:
+{"type": "kpi|text_block|form|table|chart|list|card|spacer|button_group|image", "id": "unique-id", "props": {...}}
+
+### Layout types and their props
+- page: { title?, padding?: "none"|"sm"|"md"|"lg", maxWidth?: "sm"|"md"|"lg"|"xl"|"full" }
+- row: { columns?: number[] (e.g. [1,2] for 1/3+2/3), gap?: "none"|"sm"|"md"|"lg" }
+- stack: { gap?: "none"|"sm"|"md"|"lg", align?: "left"|"center"|"right"|"stretch" }
+- columns: { count?: number, gap?: "none"|"sm"|"md"|"lg" }
+- sidebar: { side?: "left"|"right", width?: string }
+- tabs: { labels: string[], defaultTab?: number }
+
+### Widget types and their props
+- kpi: { label: string, value: string, change?: string, trend?: "up"|"down"|"flat" }
+- text_block: { content: string (markdown), variant?: "heading"|"body"|"caption" }
+- spacer: { height?: "sm"|"md"|"lg", variant?: "line"|"space" }
+- card: { title: string, description?: string, image?: string, footer?: string }
+- list: { items: [{ id: string, title: string, subtitle?: string }] }
+- table: { columns: [{ key: string, label: string }], rows: [{ key: value, ... }], striped?: boolean, compact?: boolean }
+- chart: { chartType: "line"|"bar"|"pie", title?: string, data: { labels: string[], datasets: [{ label: string, data: number[] }] } }
+- form: { title?: string, fields: [{ name: string, type: "text"|"email"|"select"|"textarea"|"checkbox", label: string, required?: boolean, placeholder?: string, options?: [{ label: string, value: string }] }] }
+- button_group: { buttons: [{ id: string, label: string, variant?: string }] }
+- image: { src: string, alt: string, caption?: string }
+
+### CORRECT example
+
+@interface[{"version":1,"root":{"type":"layout","id":"root","layout":"page","props":{"title":"My Form"},"children":[{"type":"text_block","id":"t1","props":{"content":"Fill out the form below","variant":"body"}},{"type":"form","id":"f1","props":{"fields":[{"name":"name","type":"text","label":"Name","required":true},{"name":"email","type":"email","label":"Email"}]}},{"type":"button_group","id":"b1","props":{"buttons":[{"id":"submit","label":"Submit"}]}}]}}]
+
+### WRONG (do NOT do these)
+- {"type": "widget", "props": {"widget": "form"}} \u2014 WRONG, type must be "form" directly
+- {"type": "text_block", "content": "hello"} \u2014 WRONG, content must be inside props
+- {"type": "text_block", "props": {"style": "heading"}} \u2014 WRONG, use "variant" not "style"
+
+### Guidelines
+- Always use unique IDs for every node
+- Organize content logically: KPIs in a row, charts with supporting lists, etc.
+- Use text_block for descriptions and headings within layouts
+- Use spacer with variant "line" to separate sections
+- You can include normal text before/after the @interface block
+- For updates use: @update[{"op": "update", "target": "widget-id", "props": {"key": "new-value"}}]`;
+}
+function generateCompactInterfaceContext() {
+  return `Generate a UI interface as JSON wrapped in @interface[{...}].
+
+STRICT FORMAT \u2014 every node needs "type", "id", and "props" (object):
+- Layout: {"type":"layout","id":"x","layout":"page|row|stack|tabs","props":{...},"children":[...]}
+- Widget: {"type":"kpi|text_block|form|table|chart|list|card|spacer|button_group|image","id":"x","props":{...}}
+
+NEVER use type:"widget". The type IS the widget name. All widget properties go INSIDE "props".
+
+Widget props:
+- kpi: {label,value,change?,trend?}
+- text_block: {content,variant?:"heading"|"body"|"caption"}
+- form: {fields:[{name,type,label,required?,placeholder?}]}
+- table: {columns:[{key,label}],rows:[{...}]}
+- chart: {chartType:"line"|"bar"|"pie",data:{labels,datasets:[{label,data}]}}
+- list: {items:[{id,title,subtitle?}]}
+- button_group: {buttons:[{id,label}]}
+
+Row props: {columns:[1,2]} means 1/3+2/3. Page props: {title:"..."}.
+
+Example: @interface[{"version":1,"root":{"type":"layout","id":"root","layout":"page","props":{"title":"Form"},"children":[{"type":"form","id":"f1","props":{"fields":[{"name":"name","type":"text","label":"Name"}]}}]}}]`;
+}
+
+// src/utils/interface-operations.ts
+function findNode(root, id) {
+  if (root.id === id) return root;
+  if (root.children) {
+    for (const child of root.children) {
+      const found = findNode(child, id);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+function replaceNode(root, targetId, newNode) {
+  if (root.id === targetId) return newNode;
+  if (!root.children) return root;
+  const newChildren = root.children.map((child) => replaceNode(child, targetId, newNode));
+  if (newChildren.every((child, i) => child === root.children[i])) return root;
+  return { ...root, children: newChildren };
+}
+function updateNodeProps(root, targetId, props) {
+  if (root.id === targetId) {
+    return { ...root, props: { ...root.props, ...props } };
+  }
+  if (!root.children) return root;
+  const newChildren = root.children.map((child) => updateNodeProps(child, targetId, props));
+  if (newChildren.every((child, i) => child === root.children[i])) return root;
+  return { ...root, children: newChildren };
+}
+function removeNode(root, targetId) {
+  if (root.id === targetId) return null;
+  if (!root.children) return root;
+  const newChildren = root.children.map((child) => removeNode(child, targetId)).filter((child) => child !== null);
+  if (newChildren.length === root.children.length && newChildren.every((child, i) => child === root.children[i])) return root;
+  return { ...root, children: newChildren };
+}
+function appendNode(root, targetId, newNode) {
+  if (root.id === targetId) {
+    return { ...root, children: [...root.children || [], newNode] };
+  }
+  if (!root.children) return root;
+  const newChildren = root.children.map((child) => appendNode(child, targetId, newNode));
+  if (newChildren.every((child, i) => child === root.children[i])) return root;
+  return { ...root, children: newChildren };
+}
+function prependNode(root, targetId, newNode) {
+  if (root.id === targetId) {
+    return { ...root, children: [newNode, ...root.children || []] };
+  }
+  if (!root.children) return root;
+  const newChildren = root.children.map((child) => prependNode(child, targetId, newNode));
+  if (newChildren.every((child, i) => child === root.children[i])) return root;
+  return { ...root, children: newChildren };
+}
+function applyUpdate(spec, update) {
+  let newRoot = spec.root;
+  switch (update.op) {
+    case "replace":
+      if (!update.node) return spec;
+      newRoot = replaceNode(spec.root, update.target, update.node);
+      break;
+    case "update":
+      if (!update.props) return spec;
+      newRoot = updateNodeProps(spec.root, update.target, update.props);
+      break;
+    case "remove":
+      newRoot = removeNode(spec.root, update.target);
+      if (!newRoot) return spec;
+      break;
+    case "append":
+      if (!update.node) return spec;
+      newRoot = appendNode(spec.root, update.target, update.node);
+      break;
+    case "prepend":
+      if (!update.node) return spec;
+      newRoot = prependNode(spec.root, update.target, update.node);
+      break;
+    default:
+      return spec;
+  }
+  if (newRoot === spec.root) return spec;
+  return { ...spec, root: newRoot };
+}
+function applyUpdates(spec, updates) {
+  return updates.reduce((s, update) => applyUpdate(s, update), spec);
+}
+
+// src/utils/message-converter.ts
+function convertApiMessages(apiMessages) {
+  const result = [];
+  let lastAssistantSegments = null;
+  for (let i = 0; i < apiMessages.length; i++) {
+    const msg = apiMessages[i];
+    const timestamp = msg.created_at || msg.timestamp ? new Date(msg.created_at || msg.timestamp) : /* @__PURE__ */ new Date();
+    if (typeof msg.content === "string") {
+      const message = {
+        id: msg.id || `thread-msg-${i}`,
+        role: msg.role,
+        content: msg.content,
+        timestamp
+      };
+      result.push(message);
+      lastAssistantSegments = null;
+    } else if (Array.isArray(msg.content)) {
+      if (msg.role === "assistant") {
+        const segments = [];
+        let textContent = "";
+        for (const block of msg.content) {
+          if (block.type === "text" && block.text) {
+            segments.push({ type: "text", content: block.text });
+            textContent += block.text;
+          } else if (block.type === "tool_use") {
+            segments.push({
+              type: "tool",
+              id: block.id || `tool-${i}-${segments.length}`,
+              name: block.name || "unknown",
+              status: "completed"
+            });
+          }
+        }
+        const message = {
+          id: msg.id || `thread-msg-${i}`,
+          role: "assistant",
+          content: textContent,
+          timestamp,
+          metadata: segments.length > 0 ? { content_segments: segments } : void 0
+        };
+        result.push(message);
+        lastAssistantSegments = segments;
+      } else if (msg.role === "user") {
+        const hasToolResults = msg.content.some((b) => b.type === "tool_result");
+        if (hasToolResults && lastAssistantSegments) {
+          for (const block of msg.content) {
+            if (block.type === "tool_result" && block.tool_use_id) {
+              const toolSegment = lastAssistantSegments.find(
+                (s) => s.type === "tool" && s.id === block.tool_use_id
+              );
+              if (toolSegment && toolSegment.type === "tool") {
+                toolSegment.result = typeof block.content === "string" ? block.content : Array.isArray(block.content) ? block.content.map((c) => c.text || "").join("") : void 0;
+                toolSegment.status = block.is_error ? "error" : "completed";
+              }
+            }
+          }
+        } else {
+          const textContent = msg.content.filter((b) => b.type === "text").map((b) => b.text || "").join("");
+          if (textContent) {
+            result.push({
+              id: msg.id || `thread-msg-${i}`,
+              role: "user",
+              content: textContent,
+              timestamp
+            });
+          }
+          lastAssistantSegments = null;
+        }
+      }
+    }
+  }
+  return result;
+}
+
 // src/components/Widgets/Widgets.tsx
 import { useEffect as useEffect3 } from "react";
 
@@ -1436,42 +1777,183 @@ function Flow({ widget }) {
   ] });
 }
 
-// src/components/Widgets/WidgetRenderer.tsx
+// src/components/Widgets/widget-library/Kpi.tsx
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var trendIcons = {
+  up: { symbol: "\u2191", color: "text-emerald-500" },
+  down: { symbol: "\u2193", color: "text-red-500" },
+  flat: { symbol: "\u2192", color: "text-neutral-400" }
+};
+function Kpi({ widget, onAction }) {
+  const { label = "", value = "", change, trend } = widget.props || {};
+  const trendInfo = trend ? trendIcons[trend] : null;
+  return /* @__PURE__ */ jsxs7("div", { className: "border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-900 p-5", children: [
+    /* @__PURE__ */ jsx9("div", { className: "!text-sm font-medium !text-neutral-500 dark:!text-neutral-400 mb-1", children: label }),
+    /* @__PURE__ */ jsxs7("div", { className: "flex items-end gap-2", children: [
+      /* @__PURE__ */ jsx9("div", { className: "!text-2xl font-bold !text-neutral-900 dark:!text-white", children: value }),
+      change && trendInfo && /* @__PURE__ */ jsxs7("div", { className: `flex items-center gap-0.5 !text-sm font-medium ${trendInfo.color} mb-0.5`, children: [
+        /* @__PURE__ */ jsx9("span", { children: trendInfo.symbol }),
+        /* @__PURE__ */ jsx9("span", { children: change })
+      ] }),
+      change && !trendInfo && /* @__PURE__ */ jsx9("div", { className: "!text-sm font-medium !text-neutral-400 mb-0.5", children: change })
+    ] }),
+    widget.actions && widget.actions.length > 0 && /* @__PURE__ */ jsx9("div", { className: "flex gap-2 mt-3 pt-3 border-t border-neutral-200 dark:border-neutral-700", children: widget.actions.map((action, idx) => /* @__PURE__ */ jsx9(
+      "button",
+      {
+        onClick: () => onAction?.({
+          type: action.type,
+          payload: action.payload,
+          widgetId: widget.id,
+          timestamp: /* @__PURE__ */ new Date()
+        }),
+        className: "px-2 py-1 !text-xs rounded font-medium transition-colors bg-neutral-100 dark:bg-neutral-800 !text-neutral-600 dark:!text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-700",
+        children: action.label
+      },
+      idx
+    )) })
+  ] });
+}
+
+// src/components/Widgets/widget-library/TextBlock.tsx
+import { Fragment, jsx as jsx10 } from "react/jsx-runtime";
+function TextBlock({ widget }) {
+  const { content = "", variant = "body" } = widget.props || {};
+  const variantClasses = {
+    heading: "!text-xl font-bold !text-neutral-900 dark:!text-white",
+    body: "!text-sm !text-neutral-700 dark:!text-neutral-300 leading-relaxed",
+    caption: "!text-xs !text-neutral-500 dark:!text-neutral-400"
+  };
+  const renderMarkdown = (text) => {
+    const lines = text.split("\n");
+    const elements = [];
+    let i = 0;
+    while (i < lines.length) {
+      const line = lines[i];
+      if (line.startsWith("### ")) {
+        elements.push(
+          /* @__PURE__ */ jsx10("h3", { className: "!text-base font-semibold !text-neutral-900 dark:!text-white mt-3 mb-1", children: renderInline(line.slice(4)) }, i)
+        );
+      } else if (line.startsWith("## ")) {
+        elements.push(
+          /* @__PURE__ */ jsx10("h2", { className: "!text-lg font-bold !text-neutral-900 dark:!text-white mt-4 mb-1", children: renderInline(line.slice(3)) }, i)
+        );
+      } else if (/^[-*+]\s/.test(line)) {
+        const listItems = [];
+        while (i < lines.length && /^[-*+]\s/.test(lines[i])) {
+          listItems.push(
+            /* @__PURE__ */ jsx10("li", { className: "ml-4 list-disc", children: renderInline(lines[i].slice(2)) }, i)
+          );
+          i++;
+        }
+        elements.push(/* @__PURE__ */ jsx10("ul", { className: "my-1 space-y-0.5", children: listItems }, `list-${i}`));
+        continue;
+      } else if (line.trim() === "") {
+        elements.push(/* @__PURE__ */ jsx10("div", { className: "h-2" }, i));
+      } else {
+        elements.push(/* @__PURE__ */ jsx10("p", { className: "my-0.5", children: renderInline(line) }, i));
+      }
+      i++;
+    }
+    return elements;
+  };
+  const renderInline = (text) => {
+    const parts = [];
+    let remaining = text;
+    let key = 0;
+    while (remaining.length > 0) {
+      const boldMatch = remaining.match(/\*\*(.+?)\*\*/);
+      const codeMatch = remaining.match(/`(.+?)`/);
+      const linkMatch = remaining.match(/\[(.+?)\]\((.+?)\)/);
+      const matches = [
+        boldMatch ? { type: "bold", index: boldMatch.index, match: boldMatch } : null,
+        codeMatch ? { type: "code", index: codeMatch.index, match: codeMatch } : null,
+        linkMatch ? { type: "link", index: linkMatch.index, match: linkMatch } : null
+      ].filter(Boolean).sort((a, b) => a.index - b.index);
+      if (matches.length === 0) {
+        parts.push(remaining);
+        break;
+      }
+      const first = matches[0];
+      if (first.index > 0) {
+        parts.push(remaining.slice(0, first.index));
+      }
+      if (first.type === "bold") {
+        parts.push(/* @__PURE__ */ jsx10("strong", { className: "font-semibold", children: first.match[1] }, key++));
+        remaining = remaining.slice(first.index + first.match[0].length);
+      } else if (first.type === "code") {
+        parts.push(
+          /* @__PURE__ */ jsx10("code", { className: "px-1 py-0.5 bg-neutral-100 dark:bg-neutral-800 rounded text-xs font-mono", children: first.match[1] }, key++)
+        );
+        remaining = remaining.slice(first.index + first.match[0].length);
+      } else if (first.type === "link") {
+        parts.push(
+          /* @__PURE__ */ jsx10("a", { href: first.match[2], className: "text-blue-500 hover:underline", target: "_blank", rel: "noopener noreferrer", children: first.match[1] }, key++)
+        );
+        remaining = remaining.slice(first.index + first.match[0].length);
+      }
+    }
+    return parts.length === 1 ? parts[0] : /* @__PURE__ */ jsx10(Fragment, { children: parts });
+  };
+  return /* @__PURE__ */ jsx10("div", { className: variantClasses[variant] || variantClasses.body, children: renderMarkdown(content) });
+}
+
+// src/components/Widgets/widget-library/Spacer.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var heightClasses = {
+  sm: "h-2",
+  md: "h-4",
+  lg: "h-8"
+};
+function Spacer({ widget }) {
+  const { height = "md", variant = "space" } = widget.props || {};
+  if (variant === "line") {
+    return /* @__PURE__ */ jsx11("div", { className: heightClasses[height] || heightClasses.md + " flex items-center", children: /* @__PURE__ */ jsx11("hr", { className: "w-full border-neutral-200 dark:border-neutral-700" }) });
+  }
+  return /* @__PURE__ */ jsx11("div", { className: heightClasses[height] || heightClasses.md });
+}
+
+// src/components/Widgets/WidgetRenderer.tsx
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function WidgetRenderer({ widget, onAction }) {
   const renderWidget = () => {
     switch (widget.type) {
       case "card":
-        return /* @__PURE__ */ jsx9(Card, { widget, onAction });
+        return /* @__PURE__ */ jsx12(Card, { widget, onAction });
       case "list":
-        return /* @__PURE__ */ jsx9(List, { widget, onAction });
+        return /* @__PURE__ */ jsx12(List, { widget, onAction });
       case "button":
-        return /* @__PURE__ */ jsx9(Button, { widget, onAction });
+        return /* @__PURE__ */ jsx12(Button, { widget, onAction });
       case "button_group":
-        return /* @__PURE__ */ jsx9(ButtonGroup, { widget, onAction });
+        return /* @__PURE__ */ jsx12(ButtonGroup, { widget, onAction });
       case "table":
-        return /* @__PURE__ */ jsx9(Table, { widget, onAction });
+        return /* @__PURE__ */ jsx12(Table, { widget, onAction });
       case "form":
-        return /* @__PURE__ */ jsx9(Form, { widget, onAction });
+        return /* @__PURE__ */ jsx12(Form, { widget, onAction });
       case "image":
-        return /* @__PURE__ */ jsx9(Image, { widget });
+        return /* @__PURE__ */ jsx12(Image, { widget });
       case "flow":
-        return /* @__PURE__ */ jsx9(Flow, { widget });
+        return /* @__PURE__ */ jsx12(Flow, { widget });
+      case "kpi":
+        return /* @__PURE__ */ jsx12(Kpi, { widget, onAction });
+      case "text_block":
+        return /* @__PURE__ */ jsx12(TextBlock, { widget });
+      case "spacer":
+        return /* @__PURE__ */ jsx12(Spacer, { widget });
       default:
-        return /* @__PURE__ */ jsxs7("div", { className: "p-4 border border-yellow-300 bg-yellow-50 rounded-lg", children: [
-          /* @__PURE__ */ jsxs7("p", { className: "text-sm text-yellow-800", children: [
+        return /* @__PURE__ */ jsxs8("div", { className: "p-4 border border-yellow-300 bg-yellow-50 rounded-lg", children: [
+          /* @__PURE__ */ jsxs8("p", { className: "text-sm text-yellow-800", children: [
             "Unknown widget type: ",
             widget.type
           ] }),
-          /* @__PURE__ */ jsx9("pre", { className: "text-xs mt-2 overflow-auto", children: JSON.stringify(widget, null, 2) })
+          /* @__PURE__ */ jsx12("pre", { className: "text-xs mt-2 overflow-auto", children: JSON.stringify(widget, null, 2) })
         ] });
     }
   };
-  return /* @__PURE__ */ jsx9("div", { className: "apteva-widget", children: renderWidget() });
+  return /* @__PURE__ */ jsx12("div", { className: "apteva-widget", children: renderWidget() });
 }
 
 // src/components/Widgets/Widgets.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function Widgets({
   widgets,
   onAction,
@@ -1496,85 +1978,85 @@ function Widgets({
     normal: "gap-4",
     loose: "gap-6"
   };
-  return /* @__PURE__ */ jsx10("div", { className: cn(layoutClasses[layout], spacingClasses[spacing], className), children: widgets.map((widget) => /* @__PURE__ */ jsx10(WidgetRenderer, { widget, onAction }, widget.id)) });
+  return /* @__PURE__ */ jsx13("div", { className: cn(layoutClasses[layout], spacingClasses[spacing], className), children: widgets.map((widget) => /* @__PURE__ */ jsx13(WidgetRenderer, { widget, onAction }, widget.id)) });
 }
 
 // src/components/Widgets/WidgetSkeleton.tsx
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 function WidgetSkeleton({ type, className }) {
   switch (type) {
     case "card":
-      return /* @__PURE__ */ jsx11("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 overflow-hidden", className), children: /* @__PURE__ */ jsxs8("div", { className: "p-4 space-y-3", children: [
-        /* @__PURE__ */ jsx11("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-3/4" }),
-        /* @__PURE__ */ jsx11("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-full" }),
-        /* @__PURE__ */ jsx11("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-5/6" })
+      return /* @__PURE__ */ jsx14("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 overflow-hidden", className), children: /* @__PURE__ */ jsxs9("div", { className: "p-4 space-y-3", children: [
+        /* @__PURE__ */ jsx14("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-3/4" }),
+        /* @__PURE__ */ jsx14("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-full" }),
+        /* @__PURE__ */ jsx14("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-5/6" })
       ] }) });
     case "list":
-      return /* @__PURE__ */ jsx11("div", { className: cn("apteva-widget-skeleton animate-pulse space-y-2", className), children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3 p-3 rounded-lg border border-neutral-200 dark:border-neutral-800", children: [
-        /* @__PURE__ */ jsx11("div", { className: "w-10 h-10 bg-neutral-200 dark:bg-neutral-700 rounded-full flex-shrink-0" }),
-        /* @__PURE__ */ jsxs8("div", { className: "flex-1 space-y-2", children: [
-          /* @__PURE__ */ jsx11("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2" }),
-          /* @__PURE__ */ jsx11("div", { className: "h-2 bg-neutral-200 dark:bg-neutral-700 rounded w-3/4" })
+      return /* @__PURE__ */ jsx14("div", { className: cn("apteva-widget-skeleton animate-pulse space-y-2", className), children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3 p-3 rounded-lg border border-neutral-200 dark:border-neutral-800", children: [
+        /* @__PURE__ */ jsx14("div", { className: "w-10 h-10 bg-neutral-200 dark:bg-neutral-700 rounded-full flex-shrink-0" }),
+        /* @__PURE__ */ jsxs9("div", { className: "flex-1 space-y-2", children: [
+          /* @__PURE__ */ jsx14("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2" }),
+          /* @__PURE__ */ jsx14("div", { className: "h-2 bg-neutral-200 dark:bg-neutral-700 rounded w-3/4" })
         ] })
       ] }, i)) });
     case "button_group":
-      return /* @__PURE__ */ jsxs8("div", { className: cn("apteva-widget-skeleton animate-pulse flex gap-2", className), children: [
-        /* @__PURE__ */ jsx11("div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20" }),
-        /* @__PURE__ */ jsx11("div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20" }),
-        /* @__PURE__ */ jsx11("div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20" })
+      return /* @__PURE__ */ jsxs9("div", { className: cn("apteva-widget-skeleton animate-pulse flex gap-2", className), children: [
+        /* @__PURE__ */ jsx14("div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20" }),
+        /* @__PURE__ */ jsx14("div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20" }),
+        /* @__PURE__ */ jsx14("div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20" })
       ] });
     case "form":
-      return /* @__PURE__ */ jsxs8("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 p-4 space-y-4", className), children: [
-        /* @__PURE__ */ jsx11("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/3" }),
-        /* @__PURE__ */ jsxs8("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsx11("div", { className: "h-10 bg-neutral-200 dark:bg-neutral-700 rounded" }),
-          /* @__PURE__ */ jsx11("div", { className: "h-10 bg-neutral-200 dark:bg-neutral-700 rounded" })
+      return /* @__PURE__ */ jsxs9("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 p-4 space-y-4", className), children: [
+        /* @__PURE__ */ jsx14("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/3" }),
+        /* @__PURE__ */ jsxs9("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx14("div", { className: "h-10 bg-neutral-200 dark:bg-neutral-700 rounded" }),
+          /* @__PURE__ */ jsx14("div", { className: "h-10 bg-neutral-200 dark:bg-neutral-700 rounded" })
         ] }),
-        /* @__PURE__ */ jsx11("div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded w-24" })
+        /* @__PURE__ */ jsx14("div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded w-24" })
       ] });
     case "chart":
-      return /* @__PURE__ */ jsxs8("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 p-4", className), children: [
-        /* @__PURE__ */ jsx11("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/4 mb-4" }),
-        /* @__PURE__ */ jsxs8("div", { className: "flex items-end gap-2 h-32", children: [
-          /* @__PURE__ */ jsx11("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-1/2" }),
-          /* @__PURE__ */ jsx11("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-3/4" }),
-          /* @__PURE__ */ jsx11("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-1/3" }),
-          /* @__PURE__ */ jsx11("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-full" }),
-          /* @__PURE__ */ jsx11("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-2/3" })
+      return /* @__PURE__ */ jsxs9("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 p-4", className), children: [
+        /* @__PURE__ */ jsx14("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/4 mb-4" }),
+        /* @__PURE__ */ jsxs9("div", { className: "flex items-end gap-2 h-32", children: [
+          /* @__PURE__ */ jsx14("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-1/2" }),
+          /* @__PURE__ */ jsx14("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-3/4" }),
+          /* @__PURE__ */ jsx14("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-1/3" }),
+          /* @__PURE__ */ jsx14("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-full" }),
+          /* @__PURE__ */ jsx14("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-2/3" })
         ] })
       ] });
     case "image":
-      return /* @__PURE__ */ jsx11("div", { className: cn("apteva-widget-skeleton animate-pulse", className), children: /* @__PURE__ */ jsx11("div", { className: "aspect-video bg-neutral-200 dark:bg-neutral-700 rounded-lg" }) });
+      return /* @__PURE__ */ jsx14("div", { className: cn("apteva-widget-skeleton animate-pulse", className), children: /* @__PURE__ */ jsx14("div", { className: "aspect-video bg-neutral-200 dark:bg-neutral-700 rounded-lg" }) });
     case "gallery":
-      return /* @__PURE__ */ jsx11("div", { className: cn("apteva-widget-skeleton animate-pulse grid grid-cols-3 gap-2", className), children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx11("div", { className: "aspect-square bg-neutral-200 dark:bg-neutral-700 rounded-lg" }, i)) });
+      return /* @__PURE__ */ jsx14("div", { className: cn("apteva-widget-skeleton animate-pulse grid grid-cols-3 gap-2", className), children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx14("div", { className: "aspect-square bg-neutral-200 dark:bg-neutral-700 rounded-lg" }, i)) });
     case "map":
-      return /* @__PURE__ */ jsx11("div", { className: cn("apteva-widget-skeleton animate-pulse", className), children: /* @__PURE__ */ jsx11("div", { className: "h-48 bg-neutral-200 dark:bg-neutral-700 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxs8("svg", { className: "w-8 h-8 text-neutral-400 dark:text-neutral-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
-        /* @__PURE__ */ jsx11("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__ */ jsx11("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
+      return /* @__PURE__ */ jsx14("div", { className: cn("apteva-widget-skeleton animate-pulse", className), children: /* @__PURE__ */ jsx14("div", { className: "h-48 bg-neutral-200 dark:bg-neutral-700 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxs9("svg", { className: "w-8 h-8 text-neutral-400 dark:text-neutral-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
+        /* @__PURE__ */ jsx14("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__ */ jsx14("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__ */ jsxs8("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 overflow-hidden", className), children: [
-        /* @__PURE__ */ jsxs8("div", { className: "flex bg-neutral-100 dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700", children: [
-          /* @__PURE__ */ jsx11("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx11("div", { className: "h-3 bg-neutral-300 dark:bg-neutral-600 rounded w-16" }) }),
-          /* @__PURE__ */ jsx11("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx11("div", { className: "h-3 bg-neutral-300 dark:bg-neutral-600 rounded w-20" }) }),
-          /* @__PURE__ */ jsx11("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx11("div", { className: "h-3 bg-neutral-300 dark:bg-neutral-600 rounded w-14" }) })
+      return /* @__PURE__ */ jsxs9("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 overflow-hidden", className), children: [
+        /* @__PURE__ */ jsxs9("div", { className: "flex bg-neutral-100 dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700", children: [
+          /* @__PURE__ */ jsx14("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx14("div", { className: "h-3 bg-neutral-300 dark:bg-neutral-600 rounded w-16" }) }),
+          /* @__PURE__ */ jsx14("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx14("div", { className: "h-3 bg-neutral-300 dark:bg-neutral-600 rounded w-20" }) }),
+          /* @__PURE__ */ jsx14("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx14("div", { className: "h-3 bg-neutral-300 dark:bg-neutral-600 rounded w-14" }) })
         ] }),
-        [1, 2, 3].map((i) => /* @__PURE__ */ jsxs8("div", { className: "flex border-b border-neutral-200 dark:border-neutral-800 last:border-b-0", children: [
-          /* @__PURE__ */ jsx11("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx11("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-24" }) }),
-          /* @__PURE__ */ jsx11("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx11("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-16" }) }),
-          /* @__PURE__ */ jsx11("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx11("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-20" }) })
+        [1, 2, 3].map((i) => /* @__PURE__ */ jsxs9("div", { className: "flex border-b border-neutral-200 dark:border-neutral-800 last:border-b-0", children: [
+          /* @__PURE__ */ jsx14("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx14("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-24" }) }),
+          /* @__PURE__ */ jsx14("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx14("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-16" }) }),
+          /* @__PURE__ */ jsx14("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx14("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-20" }) })
         ] }, i))
       ] });
     default:
-      return /* @__PURE__ */ jsxs8("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 p-4", className), children: [
-        /* @__PURE__ */ jsx11("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2 mb-2" }),
-        /* @__PURE__ */ jsx11("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-full" })
+      return /* @__PURE__ */ jsxs9("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 p-4", className), children: [
+        /* @__PURE__ */ jsx14("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2 mb-2" }),
+        /* @__PURE__ */ jsx14("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-full" })
       ] });
   }
 }
 
 // src/components/Chat/MarkdownContent.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function isImageUrl(url) {
   const imageExtensions = /\.(jpg|jpeg|png|gif|webp|svg|bmp|ico)(\?.*)?$/i;
   return imageExtensions.test(url);
@@ -1593,7 +2075,7 @@ function parseInlineMarkdown(text, keyPrefix = "") {
       const alt = match[1] || "";
       const src = match[2];
       result.push(
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx15(
           "img",
           {
             src,
@@ -1608,7 +2090,7 @@ function parseInlineMarkdown(text, keyPrefix = "") {
       const href = match[4];
       if (isImageUrl(href)) {
         result.push(
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx15(
             "img",
             {
               src: href,
@@ -1620,7 +2102,7 @@ function parseInlineMarkdown(text, keyPrefix = "") {
         );
       } else {
         result.push(
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx15(
             "a",
             {
               href,
@@ -1634,10 +2116,10 @@ function parseInlineMarkdown(text, keyPrefix = "") {
         );
       }
     } else if (match[5] !== void 0) {
-      result.push(/* @__PURE__ */ jsx12("strong", { children: match[6] }, `${keyPrefix}b${key++}`));
+      result.push(/* @__PURE__ */ jsx15("strong", { children: match[6] }, `${keyPrefix}b${key++}`));
     } else if (match[7] !== void 0) {
       result.push(
-        /* @__PURE__ */ jsx12("code", { className: "apteva-md-inline-code", children: match[7] }, `${keyPrefix}code${key++}`)
+        /* @__PURE__ */ jsx15("code", { className: "apteva-md-inline-code", children: match[7] }, `${keyPrefix}code${key++}`)
       );
     }
     lastIndex = match.index + match[0].length;
@@ -1657,7 +2139,7 @@ function parseMarkdown(content) {
     const h2Match = line.match(/^##\s+(.*)$/);
     if (h2Match) {
       result.push(
-        /* @__PURE__ */ jsx12("h2", { className: "apteva-md-h2", children: parseInlineMarkdown(h2Match[1], `${key}`) }, `h2${key++}`)
+        /* @__PURE__ */ jsx15("h2", { className: "apteva-md-h2", children: parseInlineMarkdown(h2Match[1], `${key}`) }, `h2${key++}`)
       );
       i++;
       continue;
@@ -1665,7 +2147,7 @@ function parseMarkdown(content) {
     const h3Match = line.match(/^###\s+(.*)$/);
     if (h3Match) {
       result.push(
-        /* @__PURE__ */ jsx12("h3", { className: "apteva-md-h3", children: parseInlineMarkdown(h3Match[1], `${key}`) }, `h3${key++}`)
+        /* @__PURE__ */ jsx15("h3", { className: "apteva-md-h3", children: parseInlineMarkdown(h3Match[1], `${key}`) }, `h3${key++}`)
       );
       i++;
       continue;
@@ -1678,7 +2160,7 @@ function parseMarkdown(content) {
         const itemMatch = lines[i].match(/^(\s*)([-*+])\s+(.*)$/);
         if (itemMatch && itemMatch[1].length === indent) {
           listItems.push(
-            /* @__PURE__ */ jsx12("li", { className: "apteva-md-li", children: parseInlineMarkdown(itemMatch[3], `${key}`) }, `li${key++}`)
+            /* @__PURE__ */ jsx15("li", { className: "apteva-md-li", children: parseInlineMarkdown(itemMatch[3], `${key}`) }, `li${key++}`)
           );
           i++;
         } else {
@@ -1686,7 +2168,7 @@ function parseMarkdown(content) {
         }
       }
       result.push(
-        /* @__PURE__ */ jsx12("ul", { className: "apteva-md-ul", children: listItems }, `ul${key++}`)
+        /* @__PURE__ */ jsx15("ul", { className: "apteva-md-ul", children: listItems }, `ul${key++}`)
       );
       continue;
     }
@@ -1698,7 +2180,7 @@ function parseMarkdown(content) {
         const itemMatch = lines[i].match(/^(\s*)(\d+)\.\s+(.*)$/);
         if (itemMatch && itemMatch[1].length === indent) {
           listItems.push(
-            /* @__PURE__ */ jsx12("li", { className: "apteva-md-li", children: parseInlineMarkdown(itemMatch[3], `${key}`) }, `li${key++}`)
+            /* @__PURE__ */ jsx15("li", { className: "apteva-md-li", children: parseInlineMarkdown(itemMatch[3], `${key}`) }, `li${key++}`)
           );
           i++;
         } else {
@@ -1706,7 +2188,7 @@ function parseMarkdown(content) {
         }
       }
       result.push(
-        /* @__PURE__ */ jsx12("ol", { className: "apteva-md-ol", children: listItems }, `ol${key++}`)
+        /* @__PURE__ */ jsx15("ol", { className: "apteva-md-ol", children: listItems }, `ol${key++}`)
       );
       continue;
     }
@@ -1729,19 +2211,19 @@ function parseMarkdown(content) {
           }
         }
         result.push(
-          /* @__PURE__ */ jsx12("div", { className: "apteva-md-table-wrapper", children: /* @__PURE__ */ jsxs9("table", { className: "apteva-md-table", children: [
-            /* @__PURE__ */ jsx12("thead", { children: /* @__PURE__ */ jsx12("tr", { children: headerCells.map((cell, idx) => /* @__PURE__ */ jsx12("th", { className: "apteva-md-th", children: parseInlineMarkdown(cell, `th${key}${idx}`) }, `th${idx}`)) }) }),
-            /* @__PURE__ */ jsx12("tbody", { children: bodyRows.map((row, rowIdx) => /* @__PURE__ */ jsx12("tr", { children: row.map((cell, cellIdx) => /* @__PURE__ */ jsx12("td", { className: "apteva-md-td", children: parseInlineMarkdown(cell, `td${key}${rowIdx}${cellIdx}`) }, `td${cellIdx}`)) }, `tr${rowIdx}`)) })
+          /* @__PURE__ */ jsx15("div", { className: "apteva-md-table-wrapper", children: /* @__PURE__ */ jsxs10("table", { className: "apteva-md-table", children: [
+            /* @__PURE__ */ jsx15("thead", { children: /* @__PURE__ */ jsx15("tr", { children: headerCells.map((cell, idx) => /* @__PURE__ */ jsx15("th", { className: "apteva-md-th", children: parseInlineMarkdown(cell, `th${key}${idx}`) }, `th${idx}`)) }) }),
+            /* @__PURE__ */ jsx15("tbody", { children: bodyRows.map((row, rowIdx) => /* @__PURE__ */ jsx15("tr", { children: row.map((cell, cellIdx) => /* @__PURE__ */ jsx15("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__ */ jsx12("br", {}, `br${key++}`));
+      result.push(/* @__PURE__ */ jsx15("br", {}, `br${key++}`));
     } else {
       result.push(
-        /* @__PURE__ */ jsxs9("span", { children: [
+        /* @__PURE__ */ jsxs10("span", { children: [
           parseInlineMarkdown(line, `${key}`),
           i < lines.length - 1 ? "\n" : ""
         ] }, `p${key++}`)
@@ -1752,53 +2234,53 @@ function parseMarkdown(content) {
   return result;
 }
 function MarkdownContent({ content, className = "" }) {
-  return /* @__PURE__ */ jsx12("div", { className: `apteva-md ${className}`, children: parseMarkdown(content) });
+  return /* @__PURE__ */ jsx15("div", { className: `apteva-md ${className}`, children: parseMarkdown(content) });
 }
 
 // src/components/Chat/ToolCall.tsx
-import { Fragment, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 function ToolCall({ name, status, isReceiving = false, inputLength = 0, streamOutput }) {
   if (status === "preparing") {
-    return /* @__PURE__ */ jsxs10("div", { className: "apteva-tool-card apteva-tool-card-preparing", children: [
-      /* @__PURE__ */ jsxs10("svg", { className: "apteva-tool-icon apteva-tool-icon-spin", fill: "none", viewBox: "0 0 24 24", children: [
-        /* @__PURE__ */ jsx13("circle", { className: "apteva-tool-spinner-track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-        /* @__PURE__ */ jsx13("path", { className: "apteva-tool-spinner-fill", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+    return /* @__PURE__ */ jsxs11("div", { className: "apteva-tool-card apteva-tool-card-preparing", children: [
+      /* @__PURE__ */ jsxs11("svg", { className: "apteva-tool-icon apteva-tool-icon-spin", fill: "none", viewBox: "0 0 24 24", children: [
+        /* @__PURE__ */ jsx16("circle", { className: "apteva-tool-spinner-track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ jsx16("path", { className: "apteva-tool-spinner-fill", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
       ] }),
-      /* @__PURE__ */ jsxs10("span", { className: "apteva-tool-label", children: [
-        /* @__PURE__ */ jsx13("strong", { children: name }),
-        /* @__PURE__ */ jsx13("span", { className: "apteva-tool-status-text", children: " preparing..." })
+      /* @__PURE__ */ jsxs11("span", { className: "apteva-tool-label", children: [
+        /* @__PURE__ */ jsx16("strong", { children: name }),
+        /* @__PURE__ */ jsx16("span", { className: "apteva-tool-status-text", children: " preparing..." })
       ] })
     ] });
   }
   if (status === "running") {
-    return /* @__PURE__ */ jsxs10("div", { className: "apteva-tool-card apteva-tool-card-running", children: [
-      /* @__PURE__ */ jsxs10("svg", { className: "apteva-tool-icon apteva-tool-icon-spin", fill: "none", viewBox: "0 0 24 24", children: [
-        /* @__PURE__ */ jsx13("circle", { className: "apteva-tool-spinner-track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-        /* @__PURE__ */ jsx13("path", { className: "apteva-tool-spinner-fill", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+    return /* @__PURE__ */ jsxs11("div", { className: "apteva-tool-card apteva-tool-card-running", children: [
+      /* @__PURE__ */ jsxs11("svg", { className: "apteva-tool-icon apteva-tool-icon-spin", fill: "none", viewBox: "0 0 24 24", children: [
+        /* @__PURE__ */ jsx16("circle", { className: "apteva-tool-spinner-track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ jsx16("path", { className: "apteva-tool-spinner-fill", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
       ] }),
-      /* @__PURE__ */ jsxs10("span", { className: "apteva-tool-label", children: [
-        /* @__PURE__ */ jsx13("strong", { children: name }),
-        streamOutput ? /* @__PURE__ */ jsx13("span", { className: "apteva-tool-stream-separator", children: " \xB7 " }) : null,
-        streamOutput ? /* @__PURE__ */ jsx13("span", { className: "apteva-tool-stream-output", children: streamOutput }) : /* @__PURE__ */ jsxs10(Fragment, { children: [
-          /* @__PURE__ */ jsx13("span", { className: "apteva-tool-status-text", children: " running" }),
-          /* @__PURE__ */ jsxs10("span", { className: "apteva-tool-dots", children: [
-            /* @__PURE__ */ jsx13("span", { children: "." }),
-            /* @__PURE__ */ jsx13("span", { children: "." }),
-            /* @__PURE__ */ jsx13("span", { children: "." })
+      /* @__PURE__ */ jsxs11("span", { className: "apteva-tool-label", children: [
+        /* @__PURE__ */ jsx16("strong", { children: name }),
+        streamOutput ? /* @__PURE__ */ jsx16("span", { className: "apteva-tool-stream-separator", children: " \xB7 " }) : null,
+        streamOutput ? /* @__PURE__ */ jsx16("span", { className: "apteva-tool-stream-output", children: streamOutput }) : /* @__PURE__ */ jsxs11(Fragment2, { children: [
+          /* @__PURE__ */ jsx16("span", { className: "apteva-tool-status-text", children: " running" }),
+          /* @__PURE__ */ jsxs11("span", { className: "apteva-tool-dots", children: [
+            /* @__PURE__ */ jsx16("span", { children: "." }),
+            /* @__PURE__ */ jsx16("span", { children: "." }),
+            /* @__PURE__ */ jsx16("span", { children: "." })
           ] })
         ] })
       ] })
     ] });
   }
   if (status === "completed") {
-    return /* @__PURE__ */ jsxs10("div", { className: "apteva-tool-card apteva-tool-card-completed", children: [
-      /* @__PURE__ */ jsx13("svg", { className: "apteva-tool-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
-      /* @__PURE__ */ jsx13("span", { className: "apteva-tool-label", children: name })
+    return /* @__PURE__ */ jsxs11("div", { className: "apteva-tool-card apteva-tool-card-completed", children: [
+      /* @__PURE__ */ jsx16("svg", { className: "apteva-tool-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+      /* @__PURE__ */ jsx16("span", { className: "apteva-tool-label", children: name })
     ] });
   }
-  return /* @__PURE__ */ jsxs10("div", { className: "apteva-tool-card apteva-tool-card-error", children: [
-    /* @__PURE__ */ jsx13("svg", { className: "apteva-tool-icon", 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" }) }),
-    /* @__PURE__ */ jsxs10("span", { className: "apteva-tool-label", children: [
+  return /* @__PURE__ */ jsxs11("div", { className: "apteva-tool-card apteva-tool-card-error", children: [
+    /* @__PURE__ */ jsx16("svg", { className: "apteva-tool-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }),
+    /* @__PURE__ */ jsxs11("span", { className: "apteva-tool-label", children: [
       name,
       " failed"
     ] })
@@ -1806,7 +2288,7 @@ function ToolCall({ name, status, isReceiving = false, inputLength = 0, streamOu
 }
 
 // src/components/Chat/Message.tsx
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 function Message({ message, onAction, enableWidgets, onWidgetRender }) {
   const isUser = message.role === "user";
   const contentSegments = message.metadata?.content_segments;
@@ -1842,14 +2324,14 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
   }, [parsedWidgets, onWidgetRender]);
   const renderTextContent = (text) => {
     if (!enableWidgets || isUser) {
-      return /* @__PURE__ */ jsx14(MarkdownContent, { content: text });
+      return /* @__PURE__ */ jsx17(MarkdownContent, { content: text });
     }
     const parsed = parseWidgetsFromText(text);
     const cleanedText = parsed.segments.filter((seg) => seg.type === "text" && seg.content).map((seg) => seg.content).join("");
     if (!cleanedText.trim()) {
       return null;
     }
-    return /* @__PURE__ */ jsx14(MarkdownContent, { content: cleanedText });
+    return /* @__PURE__ */ jsx17(MarkdownContent, { content: cleanedText });
   };
   const renderContentWithWidgets = () => {
     if (!enableWidgets || isUser || !message.content) {
@@ -1864,28 +2346,28 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
       } else if (segment.type === "widget" && segment.widget) {
         if (textBuffer.trim()) {
           elements.push(
-            /* @__PURE__ */ jsx14("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx14("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx14(MarkdownContent, { content: textBuffer }) }) }, `text-${index}`)
+            /* @__PURE__ */ jsx17("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx17("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx17(MarkdownContent, { content: textBuffer }) }) }, `text-${index}`)
           );
           textBuffer = "";
         }
         elements.push(
-          /* @__PURE__ */ jsx14("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx14(WidgetRenderer, { widget: segment.widget, onAction }) }, `widget-${index}`)
+          /* @__PURE__ */ jsx17("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx17(WidgetRenderer, { widget: segment.widget, onAction }) }, `widget-${index}`)
         );
       } else if (segment.type === "widget_pending" && segment.pendingType) {
         if (textBuffer.trim()) {
           elements.push(
-            /* @__PURE__ */ jsx14("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx14("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx14(MarkdownContent, { content: textBuffer }) }) }, `text-${index}`)
+            /* @__PURE__ */ jsx17("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx17("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx17(MarkdownContent, { content: textBuffer }) }) }, `text-${index}`)
           );
           textBuffer = "";
         }
         elements.push(
-          /* @__PURE__ */ jsx14("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx14(WidgetSkeleton, { type: segment.pendingType }) }, `pending-${index}`)
+          /* @__PURE__ */ jsx17("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx17(WidgetSkeleton, { type: segment.pendingType }) }, `pending-${index}`)
         );
       }
     });
     if (textBuffer.trim()) {
       elements.push(
-        /* @__PURE__ */ jsx14("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx14("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx14(MarkdownContent, { content: textBuffer }) }) }, "text-final")
+        /* @__PURE__ */ jsx17("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx17("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx17(MarkdownContent, { content: textBuffer }) }) }, "text-final")
       );
     }
     return elements.length > 0 ? elements : null;
@@ -1894,11 +2376,11 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
   const hasAttachments = attachments.length > 0;
   const renderAttachments = () => {
     if (!hasAttachments) return null;
-    return /* @__PURE__ */ jsx14("div", { className: "apteva-message-attachments flex flex-wrap gap-2 mb-2 justify-end", children: attachments.map((att, index) => {
+    return /* @__PURE__ */ jsx17("div", { className: "apteva-message-attachments flex flex-wrap gap-2 mb-2 justify-end", children: attachments.map((att, index) => {
       const isImage = att.type.startsWith("image/");
       const isPdf = att.type === "application/pdf";
       if (isImage && att.preview) {
-        return /* @__PURE__ */ jsx14("div", { className: "apteva-attachment-image relative rounded-lg overflow-hidden shadow-sm", children: /* @__PURE__ */ jsx14(
+        return /* @__PURE__ */ jsx17("div", { className: "apteva-attachment-image relative rounded-lg overflow-hidden shadow-sm", children: /* @__PURE__ */ jsx17(
           "img",
           {
             src: att.preview,
@@ -1907,15 +2389,15 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
           }
         ) }, index);
       }
-      return /* @__PURE__ */ jsxs11(
+      return /* @__PURE__ */ jsxs12(
         "div",
         {
           className: "apteva-attachment-doc flex items-center gap-3 px-4 py-3 bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-sm",
           children: [
-            /* @__PURE__ */ jsx14("div", { className: "w-10 h-10 flex items-center justify-center bg-red-100 dark:bg-red-900/30 rounded-lg text-red-600 dark:text-red-400", children: isPdf ? /* @__PURE__ */ jsx14("svg", { className: "w-5 h-5", 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" }) }) : /* @__PURE__ */ jsx14("svg", { className: "w-5 h-5", 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" }) }) }),
-            /* @__PURE__ */ jsxs11("div", { className: "flex flex-col min-w-0", children: [
-              /* @__PURE__ */ jsx14("span", { className: "text-sm font-medium text-neutral-800 dark:text-neutral-200 truncate max-w-[180px]", children: att.name }),
-              /* @__PURE__ */ jsxs11("span", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: [
+            /* @__PURE__ */ jsx17("div", { className: "w-10 h-10 flex items-center justify-center bg-red-100 dark:bg-red-900/30 rounded-lg text-red-600 dark:text-red-400", children: isPdf ? /* @__PURE__ */ jsx17("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("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" }) }) : /* @__PURE__ */ jsx17("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("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" }) }) }),
+            /* @__PURE__ */ jsxs12("div", { className: "flex flex-col min-w-0", children: [
+              /* @__PURE__ */ jsx17("span", { className: "text-sm font-medium text-neutral-800 dark:text-neutral-200 truncate max-w-[180px]", children: att.name }),
+              /* @__PURE__ */ jsxs12("span", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: [
                 isPdf ? "PDF" : "Document",
                 " \xB7 ",
                 formatFileSize(att.size)
@@ -1929,13 +2411,13 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
   };
   const renderContent = () => {
     if (isUser) {
-      return /* @__PURE__ */ jsx14("div", { className: "apteva-message-text", children: message.content });
+      return /* @__PURE__ */ jsx17("div", { className: "apteva-message-text", children: message.content });
     }
     if (isStreaming && !hasContent) {
-      return /* @__PURE__ */ jsxs11("div", { className: "apteva-typing-indicator", children: [
-        /* @__PURE__ */ jsx14("span", {}),
-        /* @__PURE__ */ jsx14("span", {}),
-        /* @__PURE__ */ jsx14("span", {})
+      return /* @__PURE__ */ jsxs12("div", { className: "apteva-typing-indicator", children: [
+        /* @__PURE__ */ jsx17("span", {}),
+        /* @__PURE__ */ jsx17("span", {}),
+        /* @__PURE__ */ jsx17("span", {})
       ] });
     }
     if (contentSegments && contentSegments.length > 0) {
@@ -1945,7 +2427,7 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
   };
   const renderTextSegmentWithWidgets = (text, keyPrefix) => {
     if (!enableWidgets) {
-      return /* @__PURE__ */ jsx14("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx14("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx14(MarkdownContent, { content: text }) }) }, keyPrefix);
+      return /* @__PURE__ */ jsx17("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx17("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx17(MarkdownContent, { content: text }) }) }, keyPrefix);
     }
     const parsed = parseWidgetsFromText(text);
     const elements = [];
@@ -1956,28 +2438,28 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
       } else if (seg.type === "widget" && seg.widget) {
         if (textBuffer.trim()) {
           elements.push(
-            /* @__PURE__ */ jsx14("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx14("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx14(MarkdownContent, { content: textBuffer }) }) }, `${keyPrefix}-text-${idx}`)
+            /* @__PURE__ */ jsx17("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx17("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx17(MarkdownContent, { content: textBuffer }) }) }, `${keyPrefix}-text-${idx}`)
           );
           textBuffer = "";
         }
         elements.push(
-          /* @__PURE__ */ jsx14("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx14(WidgetRenderer, { widget: seg.widget, onAction }) }, `${keyPrefix}-widget-${idx}`)
+          /* @__PURE__ */ jsx17("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx17(WidgetRenderer, { widget: seg.widget, onAction }) }, `${keyPrefix}-widget-${idx}`)
         );
       } else if (seg.type === "widget_pending" && seg.pendingType) {
         if (textBuffer.trim()) {
           elements.push(
-            /* @__PURE__ */ jsx14("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx14("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx14(MarkdownContent, { content: textBuffer }) }) }, `${keyPrefix}-text-${idx}`)
+            /* @__PURE__ */ jsx17("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx17("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx17(MarkdownContent, { content: textBuffer }) }) }, `${keyPrefix}-text-${idx}`)
           );
           textBuffer = "";
         }
         elements.push(
-          /* @__PURE__ */ jsx14("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx14(WidgetSkeleton, { type: seg.pendingType }) }, `${keyPrefix}-pending-${idx}`)
+          /* @__PURE__ */ jsx17("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx17(WidgetSkeleton, { type: seg.pendingType }) }, `${keyPrefix}-pending-${idx}`)
         );
       }
     });
     if (textBuffer.trim()) {
       elements.push(
-        /* @__PURE__ */ jsx14("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx14("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx14(MarkdownContent, { content: textBuffer }) }) }, `${keyPrefix}-text-final`)
+        /* @__PURE__ */ jsx17("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx17("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx17(MarkdownContent, { content: textBuffer }) }) }, `${keyPrefix}-text-final`)
       );
     }
     return elements;
@@ -1997,7 +2479,7 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
         }
       } else if (segment.type === "tool") {
         elements.push(
-          /* @__PURE__ */ jsx14("div", { className: "apteva-tool-call-standalone", children: /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx17("div", { className: "apteva-tool-call-standalone", children: /* @__PURE__ */ jsx17(
             ToolCall,
             {
               name: segment.name,
@@ -2013,28 +2495,28 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
     return elements;
   };
   if (!isUser && (contentSegments && contentSegments.length > 0)) {
-    return /* @__PURE__ */ jsxs11("div", { className: "apteva-message-segmented", children: [
+    return /* @__PURE__ */ jsxs12("div", { className: "apteva-message-segmented", children: [
       renderSegmentedContent(),
-      message.widgets && message.widgets.length > 0 && /* @__PURE__ */ jsx14("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx14(Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
-      /* @__PURE__ */ jsx14("div", { className: "apteva-message-timestamp apteva-message-timestamp-assistant", suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
+      message.widgets && message.widgets.length > 0 && /* @__PURE__ */ jsx17("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx17(Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
+      /* @__PURE__ */ jsx17("div", { className: "apteva-message-timestamp apteva-message-timestamp-assistant", suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
     ] });
   }
   const widgetContent = renderContentWithWidgets();
   if (!isUser && enableWidgets && widgetContent) {
-    return /* @__PURE__ */ jsxs11("div", { className: "apteva-message-segmented", children: [
+    return /* @__PURE__ */ jsxs12("div", { className: "apteva-message-segmented", children: [
       widgetContent,
-      message.widgets && message.widgets.length > 0 && /* @__PURE__ */ jsx14("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx14(Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
-      /* @__PURE__ */ jsx14("div", { className: "apteva-message-timestamp apteva-message-timestamp-assistant", suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
+      message.widgets && message.widgets.length > 0 && /* @__PURE__ */ jsx17("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx17(Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
+      /* @__PURE__ */ jsx17("div", { className: "apteva-message-timestamp apteva-message-timestamp-assistant", suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
     ] });
   }
   if (isUser && hasAttachments) {
-    return /* @__PURE__ */ jsxs11("div", { className: "apteva-message-segmented apteva-message-user-with-attachments flex flex-col items-end", children: [
+    return /* @__PURE__ */ jsxs12("div", { className: "apteva-message-segmented apteva-message-user-with-attachments flex flex-col items-end", children: [
       renderAttachments(),
-      message.content && /* @__PURE__ */ jsx14("div", { className: "apteva-message-bubble apteva-message-user", children: /* @__PURE__ */ jsx14("div", { className: "apteva-message-content-user", children: /* @__PURE__ */ jsx14("div", { className: "apteva-message-text", children: message.content }) }) }),
-      /* @__PURE__ */ jsx14("div", { className: "apteva-message-timestamp apteva-message-timestamp-user", suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
+      message.content && /* @__PURE__ */ jsx17("div", { className: "apteva-message-bubble apteva-message-user", children: /* @__PURE__ */ jsx17("div", { className: "apteva-message-content-user", children: /* @__PURE__ */ jsx17("div", { className: "apteva-message-text", children: message.content }) }) }),
+      /* @__PURE__ */ jsx17("div", { className: "apteva-message-timestamp apteva-message-timestamp-user", suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: cn(
@@ -2042,17 +2524,17 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
         isUser ? "apteva-message-user" : "apteva-message-assistant"
       ),
       children: [
-        /* @__PURE__ */ jsx14("div", { className: isUser ? "apteva-message-content-user" : "apteva-message-content-assistant", children: renderContent() }),
-        message.widgets && message.widgets.length > 0 && /* @__PURE__ */ jsx14("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx14(Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
-        /* @__PURE__ */ jsx14("div", { className: cn("apteva-message-timestamp", isUser ? "apteva-message-timestamp-user" : "apteva-message-timestamp-assistant"), suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
+        /* @__PURE__ */ jsx17("div", { className: isUser ? "apteva-message-content-user" : "apteva-message-content-assistant", children: renderContent() }),
+        message.widgets && message.widgets.length > 0 && /* @__PURE__ */ jsx17("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx17(Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
+        /* @__PURE__ */ jsx17("div", { className: cn("apteva-message-timestamp", isUser ? "apteva-message-timestamp-user" : "apteva-message-timestamp-assistant"), suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
       ]
     }
   );
 }
 
 // src/components/Chat/WelcomeScreen.tsx
-import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
-var DefaultIcon = () => /* @__PURE__ */ jsx15("svg", { className: "w-12 h-12 sm:w-16 sm:h-16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15(
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+var DefaultIcon = () => /* @__PURE__ */ jsx18("svg", { className: "w-12 h-12 sm:w-16 sm:h-16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18(
   "path",
   {
     strokeLinecap: "round",
@@ -2061,16 +2543,7 @@ var DefaultIcon = () => /* @__PURE__ */ jsx15("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 TerminalIcon = () => /* @__PURE__ */ jsx15("svg", { className: "w-12 h-12 sm:w-16 sm:h-16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx15(
-  "path",
-  {
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 1.5,
-    d: "M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-  }
-) });
-var ArrowIcon = () => /* @__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: "M13 7l5 5m0 0l-5 5m5-5H6" }) });
+var ArrowIcon = () => /* @__PURE__ */ jsx18("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 7l5 5m0 0l-5 5m5-5H6" }) });
 function WelcomeScreen({
   title,
   subtitle,
@@ -2080,25 +2553,24 @@ function WelcomeScreen({
   chatVariant = "default",
   onPromptClick
 }) {
-  const WelcomeIcon = chatVariant === "terminal" ? TerminalIcon : DefaultIcon;
   const normalizedPrompts = (prompts || []).map(
     (p) => typeof p === "string" ? { text: p } : p
   );
   const hasPrompts = normalizedPrompts.length > 0;
   const hasHeader = title || subtitle || icon;
   if (!hasHeader && !hasPrompts) {
-    return /* @__PURE__ */ jsx15("div", { className: "flex items-center justify-center h-full !text-neutral-500 dark:!text-neutral-400", children: /* @__PURE__ */ jsxs12("div", { className: "text-center space-y-2", children: [
-      /* @__PURE__ */ jsx15("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx15(WelcomeIcon, {}) }),
-      /* @__PURE__ */ jsx15("p", { className: "text-sm", children: "No messages yet. Start a conversation!" })
+    return /* @__PURE__ */ jsx18("div", { className: "flex items-center justify-center h-full !text-neutral-500 dark:!text-neutral-400", children: /* @__PURE__ */ jsxs13("div", { className: "text-center space-y-2", children: [
+      /* @__PURE__ */ jsx18("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx18(DefaultIcon, {}) }),
+      /* @__PURE__ */ jsx18("p", { className: "text-sm", children: "No messages yet. Start a conversation!" })
     ] }) });
   }
   if (variant === "minimal") {
-    return /* @__PURE__ */ jsxs12("div", { className: "flex flex-col h-full px-4 py-4", children: [
-      hasHeader && /* @__PURE__ */ jsxs12("div", { className: "mb-4", children: [
-        title && /* @__PURE__ */ jsx15("h2", { className: "text-lg font-semibold !text-neutral-900 dark:!text-white", children: title }),
-        subtitle && /* @__PURE__ */ jsx15("p", { className: "text-sm !text-neutral-500 dark:!text-neutral-400 mt-1", children: subtitle })
+    return /* @__PURE__ */ jsxs13("div", { className: "flex flex-col h-full px-4 py-4", children: [
+      hasHeader && /* @__PURE__ */ jsxs13("div", { className: "mb-4", children: [
+        title && /* @__PURE__ */ jsx18("h2", { className: "text-lg font-semibold !text-neutral-900 dark:!text-white", children: title }),
+        subtitle && /* @__PURE__ */ jsx18("p", { className: "text-sm !text-neutral-500 dark:!text-neutral-400 mt-1", children: subtitle })
       ] }),
-      hasPrompts && /* @__PURE__ */ jsx15("div", { className: "flex-1 space-y-2", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx15(
+      hasPrompts && /* @__PURE__ */ jsx18("div", { className: "flex-1 space-y-2", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx18(
         "button",
         {
           onClick: () => onPromptClick(prompt.text),
@@ -2111,11 +2583,11 @@ function WelcomeScreen({
             "transition-all duration-200",
             "group"
           ),
-          children: /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx15("div", { className: "flex-shrink-0 !text-neutral-400 dark:!text-neutral-500 group-hover:!text-blue-500 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ jsx15(ArrowIcon, {}) }),
-            /* @__PURE__ */ jsxs12("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsx15("p", { className: "text-sm font-medium !text-neutral-900 dark:!text-white truncate", children: prompt.text }),
-              prompt.description && /* @__PURE__ */ jsx15("p", { className: "text-xs !text-neutral-500 dark:!text-neutral-400 mt-0.5 truncate", children: prompt.description })
+          children: /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx18("div", { className: "flex-shrink-0 !text-neutral-400 dark:!text-neutral-500 group-hover:!text-blue-500 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ jsx18(ArrowIcon, {}) }),
+            /* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx18("p", { className: "text-sm font-medium !text-neutral-900 dark:!text-white truncate", children: prompt.text }),
+              prompt.description && /* @__PURE__ */ jsx18("p", { className: "text-xs !text-neutral-500 dark:!text-neutral-400 mt-0.5 truncate", children: prompt.description })
             ] })
           ] })
         },
@@ -2123,14 +2595,14 @@ function WelcomeScreen({
       )) })
     ] });
   }
-  return /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center h-full px-4 py-6 sm:py-8", children: [
-    /* @__PURE__ */ jsxs12("div", { className: "text-center mb-6 sm:mb-8 max-w-md", children: [
-      /* @__PURE__ */ jsx15("div", { className: "mb-4 !text-neutral-400 dark:!text-neutral-500 flex justify-center", children: icon || /* @__PURE__ */ jsx15(WelcomeIcon, {}) }),
-      title && /* @__PURE__ */ jsx15("h1", { className: "text-xl sm:text-2xl font-semibold !text-neutral-900 dark:!text-white mb-2", children: title }),
-      subtitle && /* @__PURE__ */ jsx15("p", { className: "text-sm sm:text-base !text-neutral-500 dark:!text-neutral-400", children: subtitle })
+  return /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-center justify-center h-full px-4 py-6 sm:py-8", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "text-center mb-6 sm:mb-8 max-w-md", children: [
+      /* @__PURE__ */ jsx18("div", { className: "mb-4 !text-neutral-400 dark:!text-neutral-500 flex justify-center", children: icon || /* @__PURE__ */ jsx18(DefaultIcon, {}) }),
+      title && /* @__PURE__ */ jsx18("h1", { className: "text-xl sm:text-2xl font-semibold !text-neutral-900 dark:!text-white mb-2", children: title }),
+      subtitle && /* @__PURE__ */ jsx18("p", { className: "text-sm sm:text-base !text-neutral-500 dark:!text-neutral-400", children: subtitle })
     ] }),
-    hasPrompts && /* @__PURE__ */ jsxs12("div", { className: "w-full max-w-2xl", children: [
-      /* @__PURE__ */ jsx15("div", { className: "sm:hidden space-y-2", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx15(
+    hasPrompts && /* @__PURE__ */ jsxs13("div", { className: "w-full max-w-2xl", children: [
+      /* @__PURE__ */ jsx18("div", { className: "sm:hidden space-y-2", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx18(
         "button",
         {
           onClick: () => onPromptClick(prompt.text),
@@ -2145,20 +2617,20 @@ function WelcomeScreen({
             "shadow-sm hover:shadow",
             "group"
           ),
-          children: /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx15("div", { className: "flex-shrink-0 w-8 h-8 rounded-lg bg-neutral-100 dark:bg-neutral-700 flex items-center justify-center !text-neutral-500 dark:!text-neutral-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__ */ jsx15(ArrowIcon, {}) }),
-            /* @__PURE__ */ jsxs12("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsx15("p", { className: "text-sm font-medium !text-neutral-900 dark:!text-white", children: prompt.text }),
-              prompt.description && /* @__PURE__ */ jsx15("p", { className: "text-xs !text-neutral-500 dark:!text-neutral-400 mt-0.5 line-clamp-1", children: prompt.description })
+          children: /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx18("div", { className: "flex-shrink-0 w-8 h-8 rounded-lg bg-neutral-100 dark:bg-neutral-700 flex items-center justify-center !text-neutral-500 dark:!text-neutral-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__ */ jsx18(ArrowIcon, {}) }),
+            /* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx18("p", { className: "text-sm font-medium !text-neutral-900 dark:!text-white", children: prompt.text }),
+              prompt.description && /* @__PURE__ */ jsx18("p", { className: "text-xs !text-neutral-500 dark:!text-neutral-400 mt-0.5 line-clamp-1", children: prompt.description })
             ] }),
-            /* @__PURE__ */ jsx15(
+            /* @__PURE__ */ jsx18(
               "svg",
               {
                 className: "w-4 h-4 !text-neutral-400 group-hover:!text-blue-500 transition-colors flex-shrink-0",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ jsx15(
+                children: /* @__PURE__ */ jsx18(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -2173,7 +2645,7 @@ function WelcomeScreen({
         },
         index
       )) }),
-      /* @__PURE__ */ jsx15("div", { className: "hidden sm:grid sm:grid-cols-2 gap-3", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsx18("div", { className: "hidden sm:grid sm:grid-cols-2 gap-3", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx18(
         "button",
         {
           onClick: () => onPromptClick(prompt.text),
@@ -2188,11 +2660,11 @@ function WelcomeScreen({
             "transition-all duration-200",
             "group"
           ),
-          children: /* @__PURE__ */ jsxs12("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ jsx15("div", { className: "flex-shrink-0 w-9 h-9 rounded-lg bg-neutral-100 dark:bg-neutral-700 flex items-center justify-center !text-neutral-500 dark:!text-neutral-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__ */ jsx15(ArrowIcon, {}) }),
-            /* @__PURE__ */ jsxs12("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsx15("p", { className: "text-sm font-medium !text-neutral-900 dark:!text-white leading-snug", children: prompt.text }),
-              prompt.description && /* @__PURE__ */ jsx15("p", { className: "text-xs !text-neutral-500 dark:!text-neutral-400 mt-1 line-clamp-2", children: prompt.description })
+          children: /* @__PURE__ */ jsxs13("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx18("div", { className: "flex-shrink-0 w-9 h-9 rounded-lg bg-neutral-100 dark:bg-neutral-700 flex items-center justify-center !text-neutral-500 dark:!text-neutral-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__ */ jsx18(ArrowIcon, {}) }),
+            /* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx18("p", { className: "text-sm font-medium !text-neutral-900 dark:!text-white leading-snug", children: prompt.text }),
+              prompt.description && /* @__PURE__ */ jsx18("p", { className: "text-xs !text-neutral-500 dark:!text-neutral-400 mt-1 line-clamp-2", children: prompt.description })
             ] })
           ] })
         },
@@ -2203,7 +2675,7 @@ function WelcomeScreen({
 }
 
 // src/components/Chat/MessageList.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function MessageList({
   messages,
   onAction,
@@ -2235,7 +2707,7 @@ function MessageList({
       }
     }
   }, [messages]);
-  return /* @__PURE__ */ jsx16("div", { ref: listRef, className: "apteva-message-list apteva-scrollbar-hidden", onScroll: handleScroll, children: messages.length === 0 ? /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx19("div", { ref: listRef, className: "apteva-message-list apteva-scrollbar-hidden", onScroll: handleScroll, children: messages.length === 0 ? /* @__PURE__ */ jsx19(
     WelcomeScreen,
     {
       title: welcomeTitle,
@@ -2247,12 +2719,12 @@ function MessageList({
       onPromptClick: onPromptClick || (() => {
       })
     }
-  ) : messages.map((message) => /* @__PURE__ */ jsx16("div", { className: message.role === "user" ? "apteva-message-row-user" : "apteva-message-row-assistant", children: /* @__PURE__ */ jsx16(Message, { message, onAction, enableWidgets, onWidgetRender }) }, message.id)) });
+  ) : messages.map((message) => /* @__PURE__ */ jsx19("div", { className: message.role === "user" ? "apteva-message-row-user" : "apteva-message-row-assistant", children: /* @__PURE__ */ jsx19(Message, { message, onAction, enableWidgets, onWidgetRender }) }, message.id)) });
 }
 
 // src/components/Chat/Composer.tsx
 import { useState as useState4, useRef as useRef5 } from "react";
-import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 function Composer({ onSendMessage, placeholder = "Type a message...", disabled = false, isLoading = false, onStop, onFileUpload, onSwitchMode }) {
   const [text, setText] = useState4("");
   const [showMenu, setShowMenu] = useState4(false);
@@ -2337,42 +2809,35 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
   };
   const getFileIcon = (mimeType) => {
     if (mimeType.startsWith("image/")) {
-      return /* @__PURE__ */ jsx17("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("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__ */ jsx20("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx20("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__ */ jsx17("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("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__ */ jsx20("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx20("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__ */ jsx17("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("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__ */ jsx20("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx20("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__ */ jsxs13("div", { className: "px-4 py-3 relative", children: [
-    fileError && /* @__PURE__ */ jsx17("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__ */ jsxs13("div", { className: "flex items-center gap-2 !text-red-700 dark:!text-red-300 text-sm", children: [
-      /* @__PURE__ */ jsx17("svg", { className: "w-4 h-4 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-      /* @__PURE__ */ jsx17("span", { children: fileError })
+  return /* @__PURE__ */ jsxs14("div", { className: "px-4 py-3 relative", children: [
+    fileError && /* @__PURE__ */ jsx20("div", { className: "apteva-file-error", children: /* @__PURE__ */ jsxs14("div", { className: "apteva-file-error-content", children: [
+      /* @__PURE__ */ jsx20("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx20("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+      /* @__PURE__ */ jsx20("span", { children: fileError })
     ] }) }),
-    pendingFiles.length > 0 && /* @__PURE__ */ jsx17("div", { className: "mb-2 flex flex-wrap gap-2", children: pendingFiles.map((pf, index) => /* @__PURE__ */ jsxs13(
-      "div",
-      {
-        className: "relative group flex items-center gap-2 px-3 py-2 bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg",
-        children: [
-          pf.preview ? /* @__PURE__ */ jsx17("img", { src: pf.preview, alt: pf.file.name, className: "w-8 h-8 object-cover rounded" }) : /* @__PURE__ */ jsx17("div", { className: "w-8 h-8 flex items-center justify-center bg-neutral-200 dark:bg-neutral-700 rounded !text-neutral-500 dark:!text-neutral-400", children: getFileIcon(pf.file.type) }),
-          /* @__PURE__ */ jsxs13("div", { className: "flex flex-col min-w-0", children: [
-            /* @__PURE__ */ jsx17("span", { className: "text-xs font-medium !text-neutral-700 dark:!text-neutral-300 truncate max-w-[120px]", children: pf.file.name }),
-            /* @__PURE__ */ jsx17("span", { className: "text-xs !text-neutral-500 dark:!text-neutral-400", children: formatFileSize(pf.file.size) })
-          ] }),
-          /* @__PURE__ */ jsx17(
-            "button",
-            {
-              onClick: () => removeFile(index),
-              className: "absolute -top-1.5 -right-1.5 w-5 h-5 bg-neutral-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__ */ jsx17("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
-            }
-          )
-        ]
-      },
-      index
-    )) }),
-    /* @__PURE__ */ jsxs13(
+    pendingFiles.length > 0 && /* @__PURE__ */ jsx20("div", { className: "apteva-file-preview", children: pendingFiles.map((pf, index) => /* @__PURE__ */ jsxs14("div", { className: "apteva-file-item", children: [
+      pf.preview ? /* @__PURE__ */ jsx20("img", { src: pf.preview, alt: pf.file.name, className: "apteva-file-thumb" }) : /* @__PURE__ */ jsx20("div", { className: "apteva-file-icon", children: getFileIcon(pf.file.type) }),
+      /* @__PURE__ */ jsxs14("div", { className: "apteva-file-info", children: [
+        /* @__PURE__ */ jsx20("span", { className: "apteva-file-name", children: pf.file.name }),
+        /* @__PURE__ */ jsx20("span", { className: "apteva-file-size", children: formatFileSize(pf.file.size) })
+      ] }),
+      /* @__PURE__ */ jsx20(
+        "button",
+        {
+          onClick: () => removeFile(index),
+          className: "apteva-file-remove",
+          title: "Remove file",
+          children: /* @__PURE__ */ jsx20("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx20("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+        }
+      )
+    ] }, index)) }),
+    /* @__PURE__ */ jsxs14(
       "div",
       {
         className: "apteva-composer",
@@ -2382,20 +2847,20 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
           alignItems: "end"
         },
         children: [
-          /* @__PURE__ */ jsxs13("div", { className: "relative flex-shrink-0 self-end", style: { gridArea: "plus" }, children: [
-            /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsxs14("div", { className: "relative flex-shrink-0 self-end", style: { gridArea: "plus" }, children: [
+            /* @__PURE__ */ jsx20(
               "button",
               {
                 ref: menuButtonRef,
                 onClick: () => setShowMenu(!showMenu),
                 className: "apteva-composer-menu-btn w-8 h-8 rounded-lg flex items-center justify-center transition-all !text-neutral-700 dark:!text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800",
                 title: "More options",
-                children: /* @__PURE__ */ jsx17("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx17("path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                children: /* @__PURE__ */ jsx20("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx20("path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             ),
-            showMenu && /* @__PURE__ */ jsxs13(Fragment2, { children: [
-              /* @__PURE__ */ jsx17("div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
-              /* @__PURE__ */ jsxs13(
+            showMenu && /* @__PURE__ */ jsxs14(Fragment3, { children: [
+              /* @__PURE__ */ jsx20("div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
+              /* @__PURE__ */ jsxs14(
                 "div",
                 {
                   className: "apteva-composer-menu fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
@@ -2404,7 +2869,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
                     bottom: window.innerHeight - (menuButtonRef.current?.getBoundingClientRect().top ?? 0) + 8
                   },
                   children: [
-                    /* @__PURE__ */ jsxs13(
+                    /* @__PURE__ */ jsxs14(
                       "button",
                       {
                         onClick: () => {
@@ -2413,12 +2878,12 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
                         },
                         className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left",
                         children: [
-                          /* @__PURE__ */ jsx17("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx17("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__ */ jsx17("span", { className: "!text-sm font-medium", children: "Add photos & files" })
+                          /* @__PURE__ */ jsx20("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx20("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__ */ jsx20("span", { className: "!text-sm font-medium", children: "Add photos & files" })
                         ]
                       }
                     ),
-                    onSwitchMode && /* @__PURE__ */ jsxs13(
+                    onSwitchMode && /* @__PURE__ */ jsxs14(
                       "button",
                       {
                         onClick: () => {
@@ -2427,8 +2892,8 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
                         },
                         className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left border-t border-neutral-700 dark:border-neutral-700",
                         children: [
-                          /* @__PURE__ */ jsx17("svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }),
-                          /* @__PURE__ */ jsx17("span", { className: "!text-sm font-medium", children: "Switch to command mode" })
+                          /* @__PURE__ */ jsx20("svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx20("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }),
+                          /* @__PURE__ */ jsx20("span", { className: "!text-sm font-medium", children: "Switch to command mode" })
                         ]
                       }
                     )
@@ -2437,7 +2902,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx20(
             "textarea",
             {
               ref: textareaRef,
@@ -2451,28 +2916,28 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
               rows: 1
             }
           ),
-          /* @__PURE__ */ jsx17("div", { className: "self-end", style: { gridArea: "send" }, children: isLoading && onStop ? /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx20("div", { className: "self-end", style: { gridArea: "send" }, children: isLoading && onStop ? /* @__PURE__ */ jsx20(
             "button",
             {
               onClick: onStop,
               className: "apteva-composer-stop-btn",
               title: "Stop generation",
-              children: /* @__PURE__ */ jsx17("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx17("rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
+              children: /* @__PURE__ */ jsx20("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx20("rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
             }
-          ) : /* @__PURE__ */ jsx17(
+          ) : /* @__PURE__ */ jsx20(
             "button",
             {
               onClick: handleSend,
               disabled: !text.trim() && pendingFiles.length === 0 || disabled,
               className: "apteva-composer-send-btn w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 !text-neutral-700 dark:!text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700 disabled:opacity-30 disabled:cursor-not-allowed !text-lg",
               title: "Send message",
-              children: /* @__PURE__ */ jsx17("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx17("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+              children: /* @__PURE__ */ jsx20("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx20("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
             }
           ) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx20(
       "input",
       {
         ref: fileInputRef,
@@ -2488,7 +2953,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
 
 // src/components/Chat/CommandComposer.tsx
 import { useState as useState5, useRef as useRef6 } from "react";
-import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 function CommandComposer({
   onExecute,
   state,
@@ -2578,12 +3043,12 @@ function CommandComposer({
   };
   const getFileIcon = (mimeType) => {
     if (mimeType.startsWith("image/")) {
-      return /* @__PURE__ */ jsx18("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("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__ */ jsx21("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx21("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__ */ jsx18("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("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__ */ jsx21("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx21("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__ */ jsx18("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("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__ */ jsx21("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx21("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") {
@@ -2608,12 +3073,12 @@ function CommandComposer({
   };
   const isShowingResult = state !== "idle";
   const { text: displayContent, isToolCall } = getDisplayContent();
-  return /* @__PURE__ */ jsxs14("div", { className: "w-full relative", children: [
-    fileError && /* @__PURE__ */ jsx18("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__ */ jsxs14("div", { className: "flex items-center gap-2 !text-red-700 dark:!text-red-300 text-xs", children: [
-      /* @__PURE__ */ jsx18("svg", { className: "w-3 h-3 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", 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__ */ jsx18("span", { children: fileError })
+  return /* @__PURE__ */ jsxs15("div", { className: "w-full relative", children: [
+    fileError && /* @__PURE__ */ jsx21("div", { className: "apteva-file-error", style: { top: "-3rem", bottom: "auto" }, children: /* @__PURE__ */ jsxs15("div", { className: "apteva-file-error-content", children: [
+      /* @__PURE__ */ jsx21("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx21("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+      /* @__PURE__ */ jsx21("span", { children: fileError })
     ] }) }),
-    /* @__PURE__ */ jsxs14(
+    /* @__PURE__ */ jsxs15(
       "div",
       {
         className: cn(
@@ -2625,21 +3090,21 @@ function CommandComposer({
           state === "error" && "border-red-400 dark:border-red-500"
         ),
         children: [
-          /* @__PURE__ */ jsxs14("div", { className: "w-8 h-8 flex items-center justify-center flex-shrink-0", children: [
-            state === "idle" && /* @__PURE__ */ jsxs14("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsxs15("div", { className: "w-8 h-8 flex items-center justify-center flex-shrink-0", children: [
+            state === "idle" && /* @__PURE__ */ jsxs15("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx21(
                 "button",
                 {
                   ref: menuButtonRef,
                   onClick: () => setShowMenu(!showMenu),
                   className: "apteva-composer-menu-btn w-8 h-8 rounded-lg flex items-center justify-center transition-all !text-neutral-500 dark:!text-neutral-400 hover:!text-neutral-700 dark:hover:!text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800",
                   title: "More options",
-                  children: /* @__PURE__ */ jsx18("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx18("path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                  children: /* @__PURE__ */ jsx21("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx21("path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
                 }
               ),
-              showMenu && /* @__PURE__ */ jsxs14(Fragment3, { children: [
-                /* @__PURE__ */ jsx18("div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
-                /* @__PURE__ */ jsxs14(
+              showMenu && /* @__PURE__ */ jsxs15(Fragment4, { children: [
+                /* @__PURE__ */ jsx21("div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
+                /* @__PURE__ */ jsxs15(
                   "div",
                   {
                     className: "apteva-composer-menu fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
@@ -2648,7 +3113,7 @@ function CommandComposer({
                       top: (menuButtonRef.current?.getBoundingClientRect().bottom ?? 0) + 8
                     },
                     children: [
-                      /* @__PURE__ */ jsxs14(
+                      /* @__PURE__ */ jsxs15(
                         "button",
                         {
                           onClick: () => {
@@ -2657,12 +3122,12 @@ function CommandComposer({
                           },
                           className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left",
                           children: [
-                            /* @__PURE__ */ jsx18("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx18("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__ */ jsx18("span", { className: "!text-sm font-medium", children: "Add photos & files" })
+                            /* @__PURE__ */ jsx21("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx21("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__ */ jsx21("span", { className: "!text-sm font-medium", children: "Add photos & files" })
                           ]
                         }
                       ),
-                      onExpand && /* @__PURE__ */ jsxs14(
+                      onExpand && /* @__PURE__ */ jsxs15(
                         "button",
                         {
                           onClick: () => {
@@ -2671,8 +3136,8 @@ function CommandComposer({
                           },
                           className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left border-t border-neutral-700 dark:border-neutral-700",
                           children: [
-                            /* @__PURE__ */ jsx18("svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("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__ */ jsx18("span", { className: "!text-sm font-medium", children: "Expand to chat" })
+                            /* @__PURE__ */ jsx21("svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx21("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__ */ jsx21("span", { className: "!text-sm font-medium", children: "Expand to chat" })
                           ]
                         }
                       )
@@ -2681,30 +3146,22 @@ function CommandComposer({
                 )
               ] })
             ] }),
-            state === "loading" && !toolName && /* @__PURE__ */ jsx18("div", { className: "w-4 h-4 border-2 border-blue-200 border-t-blue-500 rounded-full animate-spin" }),
-            state === "loading" && toolName && /* @__PURE__ */ jsx18("div", { className: "w-2 h-2 rounded-full bg-blue-500 animate-pulse" })
+            state === "loading" && !toolName && /* @__PURE__ */ jsx21("div", { className: "w-4 h-4 border-2 border-blue-200 border-t-blue-500 rounded-full animate-spin" }),
+            state === "loading" && toolName && /* @__PURE__ */ jsx21("div", { className: "w-2 h-2 rounded-full bg-blue-500 animate-pulse" })
           ] }),
-          pendingFiles.length > 0 && state === "idle" && /* @__PURE__ */ jsx18("div", { className: "flex items-center gap-1 flex-shrink-0", children: pendingFiles.map((pf, index) => /* @__PURE__ */ jsxs14(
-            "div",
-            {
-              className: "relative group flex items-center justify-center w-6 h-6 bg-neutral-100 dark:bg-neutral-800 rounded overflow-hidden",
-              title: pf.file.name,
-              children: [
-                pf.preview ? /* @__PURE__ */ jsx18("img", { src: pf.preview, alt: pf.file.name, className: "w-6 h-6 object-cover" }) : /* @__PURE__ */ jsx18("span", { className: "text-xs !text-neutral-500 dark:!text-neutral-400", children: getFileIcon(pf.file.type) }),
-                /* @__PURE__ */ jsx18(
-                  "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__ */ jsx18("svg", { className: "w-3 h-3 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
-                  }
-                )
-              ]
-            },
-            index
-          )) }),
-          state === "idle" ? /* @__PURE__ */ jsx18(
+          pendingFiles.length > 0 && state === "idle" && /* @__PURE__ */ jsx21("div", { className: "apteva-file-badges", children: pendingFiles.map((pf, index) => /* @__PURE__ */ jsxs15("div", { className: "apteva-file-badge", title: pf.file.name, children: [
+            pf.preview ? /* @__PURE__ */ jsx21("img", { src: pf.preview, alt: pf.file.name, className: "apteva-file-badge-img" }) : /* @__PURE__ */ jsx21("span", { className: "apteva-file-badge-icon", children: getFileIcon(pf.file.type) }),
+            /* @__PURE__ */ jsx21(
+              "button",
+              {
+                onClick: () => removeFile(index),
+                className: "apteva-file-badge-remove",
+                title: "Remove",
+                children: /* @__PURE__ */ jsx21("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx21("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            )
+          ] }, index)) }),
+          state === "idle" ? /* @__PURE__ */ jsx21(
             "textarea",
             {
               ref: inputRef,
@@ -2722,7 +3179,7 @@ function CommandComposer({
               ),
               style: { minHeight: "24px", maxHeight: "120px" }
             }
-          ) : /* @__PURE__ */ jsx18(
+          ) : /* @__PURE__ */ jsx21(
             "div",
             {
               className: cn(
@@ -2733,14 +3190,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__ */ jsxs14(Fragment3, { children: [
-                /* @__PURE__ */ jsx18("span", { className: "font-mono", children: displayContent }),
-                /* @__PURE__ */ jsx18("span", { className: "text-neutral-400 dark:text-neutral-500", children: "Running..." })
+              children: isToolCall ? /* @__PURE__ */ jsxs15(Fragment4, { children: [
+                /* @__PURE__ */ jsx21("span", { className: "font-mono", children: displayContent }),
+                /* @__PURE__ */ jsx21("span", { className: "text-neutral-400 dark:text-neutral-500", children: "Running..." })
               ] }) : displayContent
             }
           ),
-          /* @__PURE__ */ jsx18("div", { className: "w-8 h-8 flex items-center justify-center flex-shrink-0", children: state === "plan-pending" ? /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx18(
+          /* @__PURE__ */ jsx21("div", { className: "w-8 h-8 flex items-center justify-center flex-shrink-0", children: state === "plan-pending" ? /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx21(
               "button",
               {
                 onClick: onApprove,
@@ -2748,7 +3205,7 @@ function CommandComposer({
                 children: "Approve"
               }
             ),
-            /* @__PURE__ */ jsx18(
+            /* @__PURE__ */ jsx21(
               "button",
               {
                 onClick: onReject,
@@ -2756,26 +3213,26 @@ function CommandComposer({
                 children: "Modify"
               }
             )
-          ] }) : /* @__PURE__ */ jsxs14(Fragment3, { children: [
-            state === "loading" && onStop && /* @__PURE__ */ jsx18(
+          ] }) : /* @__PURE__ */ jsxs15(Fragment4, { children: [
+            state === "loading" && onStop && /* @__PURE__ */ jsx21(
               "button",
               {
                 onClick: onStop,
                 className: "apteva-composer-stop-btn",
                 title: "Stop generation",
-                children: /* @__PURE__ */ jsx18("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx18("rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
+                children: /* @__PURE__ */ jsx21("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx21("rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
               }
             ),
-            (state === "success" || state === "error") && /* @__PURE__ */ jsx18(
+            (state === "success" || state === "error") && /* @__PURE__ */ jsx21(
               "button",
               {
                 onClick: handleNewCommand,
                 className: "w-8 h-8 rounded-lg flex items-center justify-center !text-neutral-400 hover:!text-neutral-600 dark:hover:!text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors",
                 title: "New command",
-                children: /* @__PURE__ */ jsx18("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                children: /* @__PURE__ */ jsx21("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx21("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
               }
             ),
-            state === "idle" && /* @__PURE__ */ jsx18(
+            state === "idle" && /* @__PURE__ */ jsx21(
               "button",
               {
                 onClick: handleSubmit,
@@ -2787,14 +3244,14 @@ function CommandComposer({
                   input.trim() || pendingFiles.length > 0 ? "bg-neutral-900 dark:bg-white !text-white dark:!text-neutral-900 border-neutral-900 dark:border-white" : "bg-white dark:bg-neutral-800 !text-neutral-400"
                 ),
                 title: "Execute command",
-                children: /* @__PURE__ */ jsx18("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 12h14M12 5l7 7-7 7" }) })
+                children: /* @__PURE__ */ jsx21("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx21("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 12h14M12 5l7 7-7 7" }) })
               }
             )
           ] }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx21(
       "input",
       {
         ref: fileInputRef,
@@ -2809,22 +3266,20 @@ function CommandComposer({
 }
 
 // src/lib/apteva-client.ts
-var DEFAULT_API_URL = "http://91.99.200.48:3000/agents";
-var DEFAULT_API_KEY = "agt_894abd5966bc9f1e9f8f17f2a6f6b5e0";
 var AptevaClient = class {
-  constructor() {
+  constructor(config) {
     __publicField(this, "config");
     this.config = {
-      apiUrl: DEFAULT_API_URL,
-      apiKey: DEFAULT_API_KEY
+      apiUrl: config?.apiUrl ?? "",
+      apiKey: config?.apiKey ?? ""
     };
   }
   /**
    * Update client configuration (optional - users can override defaults)
    */
   configure(config) {
-    if (config.apiUrl) this.config.apiUrl = config.apiUrl;
-    if (config.apiKey) this.config.apiKey = config.apiKey;
+    if (config.apiUrl !== void 0) this.config.apiUrl = config.apiUrl;
+    if (config.apiKey !== void 0) this.config.apiKey = config.apiKey;
   }
   /**
    * Get current configuration
@@ -2994,7 +3449,7 @@ var AptevaClient = class {
 var aptevaClient = new AptevaClient();
 
 // src/components/Chat/Chat.tsx
-import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 var Chat = forwardRef(function Chat2({
   agentId,
   threadId,
@@ -3034,6 +3489,7 @@ var Chat = forwardRef(function Chat2({
   placeholder,
   showHeader = true,
   headerTitle = "Chat",
+  onHeaderBack,
   // Widget detection
   enableWidgets = false,
   availableWidgets,
@@ -3148,7 +3604,7 @@ ${widgetContext}` : widgetContext;
         let responseThreadId = currentThreadId;
         const toolInputBuffers = {};
         const receivingTimeouts = {};
-        const streamingMessageId = `msg-${Date.now()}`;
+        const streamingMessageId = `msg-${Date.now()}-res`;
         const updateMessage = () => {
           const segments = [...contentSegments];
           if (currentTextBuffer) {
@@ -3599,16 +4055,19 @@ ${planToExecute}`;
     setCurrentRequestId(null);
   };
   const isCompact = commandVariant === "compact";
-  return /* @__PURE__ */ jsxs15("div", { className: cn("apteva-chat flex flex-col h-full", variant !== "default" && `apteva-chat-${variant}`, className), children: [
-    showHeader && mode === "chat" && /* @__PURE__ */ jsx19("div", { className: "apteva-chat-header px-4 py-3 flex items-center justify-between", children: /* @__PURE__ */ jsxs15("div", { children: [
-      /* @__PURE__ */ jsx19("div", { className: "apteva-chat-title", children: headerTitle }),
-      /* @__PURE__ */ jsx19("div", { className: cn(
-        "apteva-chat-status",
-        isLoading ? chatToolName ? "apteva-chat-status-tool" : "apteva-chat-status-thinking" : "apteva-chat-status-ready"
-      ), children: isLoading ? chatToolName ? `Using ${chatToolName}...` : "Thinking..." : "Ready" })
+  return /* @__PURE__ */ jsxs16("div", { className: cn("apteva-chat flex flex-col h-full", variant !== "default" && `apteva-chat-${variant}`, className), children: [
+    showHeader && mode === "chat" && /* @__PURE__ */ jsx22("div", { className: "apteva-chat-header px-4 py-3", children: /* @__PURE__ */ jsxs16("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+      onHeaderBack && /* @__PURE__ */ jsx22("button", { onClick: onHeaderBack, className: "apteva-chat-back", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx22("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx22("path", { d: "M10 12L6 8l4-4" }) }) }),
+      /* @__PURE__ */ jsxs16("div", { children: [
+        /* @__PURE__ */ jsx22("div", { className: "apteva-chat-title", children: headerTitle }),
+        /* @__PURE__ */ jsx22("div", { className: cn(
+          "apteva-chat-status",
+          isLoading ? chatToolName ? "apteva-chat-status-tool" : "apteva-chat-status-thinking" : "apteva-chat-status-ready"
+        ), children: isLoading ? chatToolName ? `Using ${chatToolName}...` : "Thinking..." : "Ready" })
+      ] })
     ] }) }),
-    mode === "chat" && /* @__PURE__ */ jsxs15(Fragment4, { children: [
-      /* @__PURE__ */ jsx19(
+    mode === "chat" && /* @__PURE__ */ jsxs16(Fragment5, { children: [
+      /* @__PURE__ */ jsx22(
         MessageList,
         {
           messages,
@@ -3624,7 +4083,7 @@ ${planToExecute}`;
           onWidgetRender
         }
       ),
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx22(
         Composer,
         {
           onSendMessage: handleSendMessage,
@@ -3637,7 +4096,7 @@ ${planToExecute}`;
         }
       )
     ] }),
-    mode === "command" && /* @__PURE__ */ jsx19("div", { className: "w-full", children: /* @__PURE__ */ jsx19(
+    mode === "command" && /* @__PURE__ */ jsx22("div", { className: "w-full", children: /* @__PURE__ */ jsx22(
       CommandComposer,
       {
         onExecute: (text, files) => {
@@ -3658,7 +4117,7 @@ ${planToExecute}`;
         placeholder: placeholder || "Enter your command..."
       }
     ) }),
-    /* @__PURE__ */ jsx19("style", { dangerouslySetInnerHTML: {
+    /* @__PURE__ */ jsx22("style", { dangerouslySetInnerHTML: {
       __html: `
           @keyframes pulse-border {
             0%, 100% { border-color: rgb(59, 130, 246); }
@@ -3677,11 +4136,11 @@ ${planToExecute}`;
 
 // src/components/Chat/CommandOutput.tsx
 import { useState as useState7 } from "react";
-import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 
 // src/components/Command/Command.tsx
 import React, { useState as useState8, useEffect as useEffect7 } from "react";
-import { Fragment as Fragment5, jsx as jsx21, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 function Command({
   agentId,
   command: initialCommand,
@@ -4131,7 +4590,7 @@ ${planToExecute}`;
     setUploadedFiles((prev) => prev.filter((_, i) => i !== index));
   };
   const isCompact = variant === "compact";
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       className: cn(
@@ -4146,9 +4605,9 @@ ${planToExecute}`;
       ),
       style: { minHeight: isCompact ? "auto" : "180px" },
       children: [
-        /* @__PURE__ */ jsxs17("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__ */ jsxs17(Fragment5, { children: [
-            /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsxs18("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__ */ jsxs18(Fragment6, { children: [
+            /* @__PURE__ */ jsx24(
               "textarea",
               {
                 value: command,
@@ -4164,42 +4623,42 @@ ${planToExecute}`;
                 rows: 6
               }
             ),
-            uploadedFiles.length > 0 && /* @__PURE__ */ jsx21("div", { className: "flex flex-wrap gap-2 mt-2", children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs17("div", { className: "relative group", children: [
-              file.type === "image" ? /* @__PURE__ */ jsx21(
+            uploadedFiles.length > 0 && /* @__PURE__ */ jsx24("div", { className: "flex flex-wrap gap-2 mt-2", children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs18("div", { className: "relative group", children: [
+              file.type === "image" ? /* @__PURE__ */ jsx24(
                 "img",
                 {
                   src: file.preview,
                   alt: file.name,
                   className: "w-20 h-20 object-cover rounded-lg border-2 border-neutral-300 dark:border-neutral-600"
                 }
-              ) : /* @__PURE__ */ jsxs17("div", { className: "w-20 h-20 flex flex-col items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800", children: [
-                /* @__PURE__ */ jsx21("svg", { className: "w-8 h-8 text-neutral-500 dark:text-neutral-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx21("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__ */ jsx21("span", { className: "text-[8px] text-neutral-500 dark:text-neutral-400 mt-1 px-1 truncate max-w-full", children: file.name.length > 12 ? file.name.slice(0, 12) + "..." : file.name })
+              ) : /* @__PURE__ */ jsxs18("div", { className: "w-20 h-20 flex flex-col items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800", children: [
+                /* @__PURE__ */ jsx24("svg", { className: "w-8 h-8 text-neutral-500 dark:text-neutral-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx24("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__ */ jsx24("span", { className: "text-[8px] text-neutral-500 dark:text-neutral-400 mt-1 px-1 truncate max-w-full", children: file.name.length > 12 ? file.name.slice(0, 12) + "..." : file.name })
               ] }),
-              /* @__PURE__ */ jsx21(
+              /* @__PURE__ */ jsx24(
                 "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__ */ jsx21("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx21("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                  children: /* @__PURE__ */ jsx24("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
                 }
               )
             ] }, index)) })
           ] }),
-          state === "idle" && allowInput && isCompact && /* @__PURE__ */ jsxs17(Fragment5, { children: [
-            /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
-              enableFileUpload && /* @__PURE__ */ jsx21(
+          state === "idle" && allowInput && isCompact && /* @__PURE__ */ jsxs18(Fragment6, { children: [
+            /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
+              enableFileUpload && /* @__PURE__ */ jsx24(
                 "button",
                 {
                   onClick: () => fileInputRef.current?.click(),
                   className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-neutral-500 dark:!text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800",
                   title: "Attach file",
-                  children: /* @__PURE__ */ jsx21("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx21("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__ */ jsx24("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx24("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__ */ jsxs17("div", { className: "relative settings-menu-container", children: [
-                /* @__PURE__ */ jsx21(
+              planMode && /* @__PURE__ */ jsxs18("div", { className: "relative settings-menu-container", children: [
+                /* @__PURE__ */ jsx24(
                   "button",
                   {
                     onClick: () => setShowSettingsMenu(!showSettingsMenu),
@@ -4208,28 +4667,28 @@ ${planToExecute}`;
                       internalPlanMode ? "!text-blue-600 dark:!text-blue-400" : "!text-neutral-500 dark:!text-neutral-500"
                     ),
                     title: "Settings",
-                    children: /* @__PURE__ */ jsxs17("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                      /* @__PURE__ */ jsx21("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
-                      /* @__PURE__ */ jsx21("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
-                      /* @__PURE__ */ jsx21("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
-                      /* @__PURE__ */ jsx21("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
-                      /* @__PURE__ */ jsx21("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
-                      /* @__PURE__ */ jsx21("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
-                      /* @__PURE__ */ jsx21("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
-                      /* @__PURE__ */ jsx21("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
-                      /* @__PURE__ */ jsx21("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
+                    children: /* @__PURE__ */ jsxs18("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                      /* @__PURE__ */ jsx24("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
+                      /* @__PURE__ */ jsx24("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
+                      /* @__PURE__ */ jsx24("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
+                      /* @__PURE__ */ jsx24("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
+                      /* @__PURE__ */ jsx24("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
+                      /* @__PURE__ */ jsx24("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
+                      /* @__PURE__ */ jsx24("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
+                      /* @__PURE__ */ jsx24("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
+                      /* @__PURE__ */ jsx24("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
                     ] })
                   }
                 ),
-                showSettingsMenu && /* @__PURE__ */ jsx21("div", { className: "absolute top-10 left-0 z-50 w-56 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg p-2.5 settings-menu-container", children: /* @__PURE__ */ jsxs17("label", { className: "flex items-center justify-between cursor-pointer group", children: [
-                  /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx21("svg", { className: "w-3.5 h-3.5 text-neutral-500 dark:text-neutral-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx21("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__ */ jsxs17("div", { children: [
-                      /* @__PURE__ */ jsx21("div", { className: "text-xs font-medium text-neutral-700 dark:text-neutral-300", children: "Plan Mode" }),
-                      /* @__PURE__ */ jsx21("div", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: "Review first" })
+                showSettingsMenu && /* @__PURE__ */ jsx24("div", { className: "absolute top-10 left-0 z-50 w-56 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg p-2.5 settings-menu-container", children: /* @__PURE__ */ jsxs18("label", { className: "flex items-center justify-between cursor-pointer group", children: [
+                  /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx24("svg", { className: "w-3.5 h-3.5 text-neutral-500 dark:text-neutral-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx24("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__ */ jsxs18("div", { children: [
+                      /* @__PURE__ */ jsx24("div", { className: "text-xs font-medium text-neutral-700 dark:text-neutral-300", children: "Plan Mode" }),
+                      /* @__PURE__ */ jsx24("div", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: "Review first" })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx21(
+                  /* @__PURE__ */ jsx24(
                     "button",
                     {
                       onClick: (e) => {
@@ -4241,7 +4700,7 @@ ${planToExecute}`;
                         internalPlanMode ? "bg-blue-600" : "bg-neutral-300 dark:bg-neutral-600"
                       ),
                       type: "button",
-                      children: /* @__PURE__ */ jsx21(
+                      children: /* @__PURE__ */ jsx24(
                         "span",
                         {
                           className: cn(
@@ -4255,26 +4714,26 @@ ${planToExecute}`;
                 ] }) })
               ] })
             ] }),
-            uploadedFiles.length > 0 && /* @__PURE__ */ jsx21("div", { className: "flex gap-1 flex-shrink-0", children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs17("div", { className: "relative group", children: [
-              file.type === "image" ? /* @__PURE__ */ jsx21(
+            uploadedFiles.length > 0 && /* @__PURE__ */ jsx24("div", { className: "flex gap-1 flex-shrink-0", children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs18("div", { className: "relative group", children: [
+              file.type === "image" ? /* @__PURE__ */ jsx24(
                 "img",
                 {
                   src: file.preview,
                   alt: file.name,
                   className: "w-8 h-8 object-cover rounded border border-neutral-300 dark:border-neutral-600"
                 }
-              ) : /* @__PURE__ */ jsx21("div", { className: "w-8 h-8 flex items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800", title: file.name, children: /* @__PURE__ */ jsx21("svg", { className: "w-4 h-4 text-neutral-500 dark:text-neutral-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx21("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__ */ jsx21(
+              ) : /* @__PURE__ */ jsx24("div", { className: "w-8 h-8 flex items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800", title: file.name, children: /* @__PURE__ */ jsx24("svg", { className: "w-4 h-4 text-neutral-500 dark:text-neutral-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx24("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__ */ jsx24(
                 "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__ */ jsx21("svg", { className: "w-2.5 h-2.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx21("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
+                  children: /* @__PURE__ */ jsx24("svg", { className: "w-2.5 h-2.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
                 }
               )
             ] }, index)) }),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx24(
               "input",
               {
                 type: "text",
@@ -4290,7 +4749,7 @@ ${planToExecute}`;
                 className: "flex-1 bg-transparent border-none focus:outline-none !text-neutral-900 dark:!text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 py-1"
               }
             ),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx24(
               "button",
               {
                 onClick: () => executeCommand(),
@@ -4306,33 +4765,33 @@ ${planToExecute}`;
                   !command.trim() && "border-neutral-200 dark:border-neutral-700 !text-neutral-400 dark:!text-neutral-600"
                 ),
                 title: "Execute",
-                children: /* @__PURE__ */ jsx21("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx21("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                children: /* @__PURE__ */ jsx24("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx24("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             )
           ] }),
-          state === "loading" && !isCompact && /* @__PURE__ */ jsxs17("div", { className: "flex-1 flex flex-col items-center justify-center space-y-4 py-8", children: [
-            /* @__PURE__ */ jsx21("div", { className: "w-6 h-6 border-2 border-neutral-300 border-t-blue-500 rounded-full animate-spin" }),
-            /* @__PURE__ */ jsx21("div", { className: "text-neutral-600 dark:text-neutral-400 text-sm text-center max-w-md", children: enableStreaming && streamedContent ? streamedContent : loadingText }),
-            showProgress && /* @__PURE__ */ jsxs17("div", { className: "w-full max-w-sm", children: [
-              /* @__PURE__ */ jsx21("div", { className: "w-full bg-neutral-200 dark:bg-neutral-700 rounded-full h-1.5", children: /* @__PURE__ */ jsx21(
+          state === "loading" && !isCompact && /* @__PURE__ */ jsxs18("div", { className: "flex-1 flex flex-col items-center justify-center space-y-4 py-8", children: [
+            /* @__PURE__ */ jsx24("div", { className: "w-6 h-6 border-2 border-neutral-300 border-t-blue-500 rounded-full animate-spin" }),
+            /* @__PURE__ */ jsx24("div", { className: "text-neutral-600 dark:text-neutral-400 text-sm text-center max-w-md", children: enableStreaming && streamedContent ? streamedContent : loadingText }),
+            showProgress && /* @__PURE__ */ jsxs18("div", { className: "w-full max-w-sm", children: [
+              /* @__PURE__ */ jsx24("div", { className: "w-full bg-neutral-200 dark:bg-neutral-700 rounded-full h-1.5", children: /* @__PURE__ */ jsx24(
                 "div",
                 {
                   className: "bg-blue-500 h-1.5 rounded-full transition-all duration-300",
                   style: { width: `${progress}%` }
                 }
               ) }),
-              /* @__PURE__ */ jsxs17("p", { className: "text-xs text-neutral-500 mt-2 text-center", children: [
+              /* @__PURE__ */ jsxs18("p", { className: "text-xs text-neutral-500 mt-2 text-center", children: [
                 progress,
                 "%"
               ] })
             ] })
           ] }),
-          state === "loading" && isCompact && /* @__PURE__ */ jsxs17(Fragment5, { children: [
-            /* @__PURE__ */ jsxs17("div", { className: "flex-1 flex items-center gap-3 py-1", children: [
-              /* @__PURE__ */ jsx21("div", { className: "w-4 h-4 border-2 border-neutral-300 border-t-blue-500 rounded-full animate-spin" }),
-              /* @__PURE__ */ jsx21("div", { className: "text-neutral-600 dark:text-neutral-400 text-sm truncate", children: enableStreaming && streamedContent ? streamedContent : loadingText })
+          state === "loading" && isCompact && /* @__PURE__ */ jsxs18(Fragment6, { children: [
+            /* @__PURE__ */ jsxs18("div", { className: "flex-1 flex items-center gap-3 py-1", children: [
+              /* @__PURE__ */ jsx24("div", { className: "w-4 h-4 border-2 border-neutral-300 border-t-blue-500 rounded-full animate-spin" }),
+              /* @__PURE__ */ jsx24("div", { className: "text-neutral-600 dark:text-neutral-400 text-sm truncate", children: enableStreaming && streamedContent ? streamedContent : loadingText })
             ] }),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx24(
               "button",
               {
                 disabled: true,
@@ -4344,20 +4803,20 @@ ${planToExecute}`;
                   "!text-lg",
                   "opacity-30 cursor-not-allowed"
                 ),
-                children: /* @__PURE__ */ jsx21("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx21("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                children: /* @__PURE__ */ jsx24("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx24("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             )
           ] }),
-          state === "plan-pending" && !isCompact && /* @__PURE__ */ jsx21("div", { className: "flex-1 flex flex-col", children: /* @__PURE__ */ jsxs17("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__ */ jsxs17("div", { className: "flex items-start gap-2 mb-3", children: [
-              /* @__PURE__ */ jsx21("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__ */ jsx21("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__ */ jsxs17("div", { className: "flex-1", children: [
-                /* @__PURE__ */ jsx21("h3", { className: "text-sm font-semibold text-blue-800 dark:text-blue-300 mb-1", children: "Proposed Plan" }),
-                /* @__PURE__ */ jsx21("div", { className: "text-blue-700 dark:text-blue-300 text-sm whitespace-pre-line leading-relaxed", children: plan })
+          state === "plan-pending" && !isCompact && /* @__PURE__ */ jsx24("div", { className: "flex-1 flex flex-col", children: /* @__PURE__ */ jsxs18("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__ */ jsxs18("div", { className: "flex items-start gap-2 mb-3", children: [
+              /* @__PURE__ */ jsx24("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__ */ jsx24("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__ */ jsxs18("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsx24("h3", { className: "text-sm font-semibold text-blue-800 dark:text-blue-300 mb-1", children: "Proposed Plan" }),
+                /* @__PURE__ */ jsx24("div", { className: "text-blue-700 dark:text-blue-300 text-sm whitespace-pre-line leading-relaxed", children: plan })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs17("div", { className: "flex gap-2 mt-4", children: [
-              /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsxs18("div", { className: "flex gap-2 mt-4", children: [
+              /* @__PURE__ */ jsx24(
                 "button",
                 {
                   onClick: approvePlan,
@@ -4365,7 +4824,7 @@ ${planToExecute}`;
                   children: "Approve & Execute"
                 }
               ),
-              /* @__PURE__ */ jsx21(
+              /* @__PURE__ */ jsx24(
                 "button",
                 {
                   onClick: rejectPlan,
@@ -4375,20 +4834,20 @@ ${planToExecute}`;
               )
             ] })
           ] }) }),
-          state === "plan-pending" && isCompact && /* @__PURE__ */ jsxs17(Fragment5, { children: [
-            /* @__PURE__ */ jsxs17(
+          state === "plan-pending" && isCompact && /* @__PURE__ */ jsxs18(Fragment6, { children: [
+            /* @__PURE__ */ jsxs18(
               "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__ */ jsx21("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__ */ jsx21("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__ */ jsx21("span", { className: "text-sm font-medium text-blue-700 dark:text-blue-300 truncate flex-1", children: "View Execution Plan" })
+                  /* @__PURE__ */ jsx24("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__ */ jsx24("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__ */ jsx24("span", { className: "text-sm font-medium text-blue-700 dark:text-blue-300 truncate flex-1", children: "View Execution Plan" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs17("div", { className: "flex gap-2 flex-shrink-0", children: [
-              /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsxs18("div", { className: "flex gap-2 flex-shrink-0", children: [
+              /* @__PURE__ */ jsx24(
                 "button",
                 {
                   onClick: approvePlan,
@@ -4396,7 +4855,7 @@ ${planToExecute}`;
                   children: "Approve"
                 }
               ),
-              /* @__PURE__ */ jsx21(
+              /* @__PURE__ */ jsx24(
                 "button",
                 {
                   onClick: rejectPlan,
@@ -4406,15 +4865,15 @@ ${planToExecute}`;
               )
             ] })
           ] }),
-          state === "error" && /* @__PURE__ */ jsxs17("div", { className: "flex-1 flex flex-col", children: [
-            /* @__PURE__ */ jsx21("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__ */ jsxs17("div", { className: "flex items-start gap-2", children: [
-              /* @__PURE__ */ jsx21("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__ */ jsx21("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-              /* @__PURE__ */ jsxs17("div", { children: [
-                /* @__PURE__ */ jsx21("h3", { className: "text-sm font-semibold text-red-800 dark:text-red-400", children: "Error" }),
-                /* @__PURE__ */ jsx21("p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: error?.message })
+          state === "error" && /* @__PURE__ */ jsxs18("div", { className: "flex-1 flex flex-col", children: [
+            /* @__PURE__ */ jsx24("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__ */ jsxs18("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx24("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__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+              /* @__PURE__ */ jsxs18("div", { children: [
+                /* @__PURE__ */ jsx24("h3", { className: "text-sm font-semibold text-red-800 dark:text-red-400", children: "Error" }),
+                /* @__PURE__ */ jsx24("p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: error?.message })
               ] })
             ] }) }),
-            allowInput && /* @__PURE__ */ jsx21(
+            allowInput && /* @__PURE__ */ jsx24(
               "textarea",
               {
                 value: command,
@@ -4431,16 +4890,16 @@ ${planToExecute}`;
               }
             )
           ] }),
-          state === "success" && result && !isCompact && /* @__PURE__ */ jsx21("div", { className: "flex-1 overflow-auto", children: resultRenderer ? resultRenderer(result.data) : /* @__PURE__ */ jsxs17("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsxs17("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__ */ jsx21("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__ */ jsx21("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__ */ jsxs17("div", { className: "flex-1", children: [
-                /* @__PURE__ */ jsx21("h3", { className: "text-sm font-semibold text-green-800 dark:text-green-400 mb-1", children: "Success" }),
-                /* @__PURE__ */ jsx21("p", { className: "text-green-700 dark:text-green-300 text-sm", children: "Command executed successfully" })
+          state === "success" && result && !isCompact && /* @__PURE__ */ jsx24("div", { className: "flex-1 overflow-auto", children: resultRenderer ? resultRenderer(result.data) : /* @__PURE__ */ jsxs18("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs18("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__ */ jsx24("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__ */ jsx24("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__ */ jsxs18("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsx24("h3", { className: "text-sm font-semibold text-green-800 dark:text-green-400 mb-1", children: "Success" }),
+                /* @__PURE__ */ jsx24("p", { className: "text-green-700 dark:text-green-300 text-sm", children: "Command executed successfully" })
               ] })
             ] }),
-            result.data?.summary && /* @__PURE__ */ jsx21("div", { className: "text-neutral-700 dark:text-neutral-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
-            result.widgets && result.widgets.length > 0 && /* @__PURE__ */ jsx21("div", { className: "space-y-3", children: result.widgets.map((widget) => /* @__PURE__ */ jsx21(
+            result.data?.summary && /* @__PURE__ */ jsx24("div", { className: "text-neutral-700 dark:text-neutral-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
+            result.widgets && result.widgets.length > 0 && /* @__PURE__ */ jsx24("div", { className: "space-y-3", children: result.widgets.map((widget) => /* @__PURE__ */ jsx24(
               WidgetRenderer,
               {
                 widget,
@@ -4449,8 +4908,8 @@ ${planToExecute}`;
               widget.id
             )) })
           ] }) }),
-          state === "success" && result && isCompact && /* @__PURE__ */ jsxs17(Fragment5, { children: [
-            /* @__PURE__ */ jsxs17(
+          state === "success" && result && isCompact && /* @__PURE__ */ jsxs18(Fragment6, { children: [
+            /* @__PURE__ */ jsxs18(
               "div",
               {
                 className: "flex-1 flex items-center gap-2 py-1 cursor-text min-w-0",
@@ -4459,12 +4918,12 @@ ${planToExecute}`;
                   setResult(null);
                 },
                 children: [
-                  /* @__PURE__ */ jsx21("svg", { className: "w-4 h-4 text-green-600 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx21("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__ */ jsx21("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__ */ jsx24("svg", { className: "w-4 h-4 text-green-600 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx24("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__ */ jsx24("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__ */ jsx21(
+            /* @__PURE__ */ jsx24(
               "button",
               {
                 onClick: () => {
@@ -4480,24 +4939,24 @@ ${planToExecute}`;
                   "!text-lg"
                 ),
                 title: "New command",
-                children: /* @__PURE__ */ jsx21("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx21("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                children: /* @__PURE__ */ jsx24("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx24("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             )
           ] })
         ] }),
-        !isCompact && /* @__PURE__ */ jsxs17("div", { className: "p-3 flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ jsx21("div", { className: "flex items-center gap-1", children: state === "idle" && allowInput && /* @__PURE__ */ jsxs17(Fragment5, { children: [
-            enableFileUpload && /* @__PURE__ */ jsx21(
+        !isCompact && /* @__PURE__ */ jsxs18("div", { className: "p-3 flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx24("div", { className: "flex items-center gap-1", children: state === "idle" && allowInput && /* @__PURE__ */ jsxs18(Fragment6, { children: [
+            enableFileUpload && /* @__PURE__ */ jsx24(
               "button",
               {
                 onClick: () => fileInputRef.current?.click(),
                 className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-neutral-500 dark:!text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800",
                 title: "Attach file",
-                children: /* @__PURE__ */ jsx21("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx21("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__ */ jsx24("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx24("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__ */ jsxs17("div", { className: "relative settings-menu-container", children: [
-              /* @__PURE__ */ jsx21(
+            planMode && /* @__PURE__ */ jsxs18("div", { className: "relative settings-menu-container", children: [
+              /* @__PURE__ */ jsx24(
                 "button",
                 {
                   onClick: () => setShowSettingsMenu(!showSettingsMenu),
@@ -4506,28 +4965,28 @@ ${planToExecute}`;
                     internalPlanMode ? "!text-blue-600 dark:!text-blue-400" : "!text-neutral-500 dark:!text-neutral-500"
                   ),
                   title: "Settings",
-                  children: /* @__PURE__ */ jsxs17("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                    /* @__PURE__ */ jsx21("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
-                    /* @__PURE__ */ jsx21("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
-                    /* @__PURE__ */ jsx21("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
-                    /* @__PURE__ */ jsx21("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
-                    /* @__PURE__ */ jsx21("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
-                    /* @__PURE__ */ jsx21("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
-                    /* @__PURE__ */ jsx21("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
-                    /* @__PURE__ */ jsx21("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
-                    /* @__PURE__ */ jsx21("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
+                  children: /* @__PURE__ */ jsxs18("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsx24("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
+                    /* @__PURE__ */ jsx24("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
+                    /* @__PURE__ */ jsx24("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
+                    /* @__PURE__ */ jsx24("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
+                    /* @__PURE__ */ jsx24("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
+                    /* @__PURE__ */ jsx24("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
+                    /* @__PURE__ */ jsx24("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
+                    /* @__PURE__ */ jsx24("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
+                    /* @__PURE__ */ jsx24("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
                   ] })
                 }
               ),
-              showSettingsMenu && /* @__PURE__ */ jsx21("div", { className: "absolute top-10 left-0 z-50 w-64 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg p-3 settings-menu-container", children: /* @__PURE__ */ jsxs17("label", { className: "flex items-center justify-between cursor-pointer group", children: [
-                /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx21("svg", { className: "w-4 h-4 text-neutral-500 dark:text-neutral-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx21("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__ */ jsxs17("div", { children: [
-                    /* @__PURE__ */ jsx21("div", { className: "text-sm font-medium text-neutral-700 dark:text-neutral-300", children: "Plan Mode" }),
-                    /* @__PURE__ */ jsx21("div", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: "Review before executing" })
+              showSettingsMenu && /* @__PURE__ */ jsx24("div", { className: "absolute top-10 left-0 z-50 w-64 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg p-3 settings-menu-container", children: /* @__PURE__ */ jsxs18("label", { className: "flex items-center justify-between cursor-pointer group", children: [
+                /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx24("svg", { className: "w-4 h-4 text-neutral-500 dark:text-neutral-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx24("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__ */ jsxs18("div", { children: [
+                    /* @__PURE__ */ jsx24("div", { className: "text-sm font-medium text-neutral-700 dark:text-neutral-300", children: "Plan Mode" }),
+                    /* @__PURE__ */ jsx24("div", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: "Review before executing" })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx21(
+                /* @__PURE__ */ jsx24(
                   "button",
                   {
                     onClick: (e) => {
@@ -4539,7 +4998,7 @@ ${planToExecute}`;
                       internalPlanMode ? "bg-blue-600" : "bg-neutral-300 dark:bg-neutral-600"
                     ),
                     type: "button",
-                    children: /* @__PURE__ */ jsx21(
+                    children: /* @__PURE__ */ jsx24(
                       "span",
                       {
                         className: cn(
@@ -4553,9 +5012,9 @@ ${planToExecute}`;
               ] }) })
             ] })
           ] }) }),
-          !(state === "idle" && allowInput) && /* @__PURE__ */ jsx21("div", {}),
-          /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-2", children: [
-            (state === "success" || state === "error") && allowInput && /* @__PURE__ */ jsx21(
+          !(state === "idle" && allowInput) && /* @__PURE__ */ jsx24("div", {}),
+          /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
+            (state === "success" || state === "error") && allowInput && /* @__PURE__ */ jsx24(
               "button",
               {
                 onClick: resetCommand,
@@ -4563,7 +5022,7 @@ ${planToExecute}`;
                 children: "Reset"
               }
             ),
-            (state === "idle" || state === "error") && /* @__PURE__ */ jsx21(
+            (state === "idle" || state === "error") && /* @__PURE__ */ jsx24(
               "button",
               {
                 onClick: () => executeCommand(),
@@ -4579,29 +5038,29 @@ ${planToExecute}`;
                   !command.trim() && "border-neutral-200 dark:border-neutral-700 !text-neutral-400 dark:!text-neutral-600"
                 ),
                 title: state === "error" ? "Retry" : "Execute",
-                children: state === "error" ? /* @__PURE__ */ jsx21("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx21("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__ */ jsx21("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx21("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                children: state === "error" ? /* @__PURE__ */ jsx24("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx24("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__ */ jsx24("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx24("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             )
           ] })
         ] }),
-        showPlanDetails && isCompact && state === "plan-pending" && /* @__PURE__ */ jsx21("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4", onClick: () => setShowPlanDetails(false), children: /* @__PURE__ */ jsxs17("div", { className: "bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden", onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-between p-6 border-b border-neutral-200 dark:border-neutral-700", children: [
-            /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx21("svg", { className: "w-6 h-6 text-blue-600 dark:text-blue-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx21("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__ */ jsx21("h2", { className: "text-xl font-semibold text-neutral-900 dark:text-white", children: "Proposed Execution Plan" })
+        showPlanDetails && isCompact && state === "plan-pending" && /* @__PURE__ */ jsx24("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4", onClick: () => setShowPlanDetails(false), children: /* @__PURE__ */ jsxs18("div", { className: "bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between p-6 border-b border-neutral-200 dark:border-neutral-700", children: [
+            /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx24("svg", { className: "w-6 h-6 text-blue-600 dark:text-blue-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx24("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__ */ jsx24("h2", { className: "text-xl font-semibold text-neutral-900 dark:text-white", children: "Proposed Execution Plan" })
             ] }),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx24(
               "button",
               {
                 onClick: () => setShowPlanDetails(false),
                 className: "text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors",
-                children: /* @__PURE__ */ jsx21("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx21("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                children: /* @__PURE__ */ jsx24("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
               }
             )
           ] }),
-          /* @__PURE__ */ jsx21("div", { className: "p-6 overflow-y-auto max-h-[calc(80vh-180px)]", children: /* @__PURE__ */ jsx21("div", { className: "prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx21("div", { className: "text-neutral-700 dark:text-neutral-300 whitespace-pre-line leading-relaxed", children: plan }) }) }),
-          /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-end gap-3 p-6 border-t border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800/50", children: [
-            /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx24("div", { className: "p-6 overflow-y-auto max-h-[calc(80vh-180px)]", children: /* @__PURE__ */ jsx24("div", { className: "prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx24("div", { className: "text-neutral-700 dark:text-neutral-300 whitespace-pre-line leading-relaxed", children: plan }) }) }),
+          /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-end gap-3 p-6 border-t border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800/50", children: [
+            /* @__PURE__ */ jsx24(
               "button",
               {
                 onClick: rejectPlan,
@@ -4609,7 +5068,7 @@ ${planToExecute}`;
                 children: "Modify Command"
               }
             ),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx24(
               "button",
               {
                 onClick: approvePlan,
@@ -4619,7 +5078,7 @@ ${planToExecute}`;
             )
           ] })
         ] }) }),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx24(
           "input",
           {
             ref: fileInputRef,
@@ -4630,7 +5089,7 @@ ${planToExecute}`;
             accept: "image/*,application/pdf,.doc,.docx,.txt"
           }
         ),
-        /* @__PURE__ */ jsx21("style", { dangerouslySetInnerHTML: {
+        /* @__PURE__ */ jsx24("style", { dangerouslySetInnerHTML: {
           __html: `
           @keyframes pulse-border {
             0%, 100% {
@@ -4652,7 +5111,7 @@ ${planToExecute}`;
 
 // src/components/Prompt/Prompt.tsx
 import { useState as useState9 } from "react";
-import { jsx as jsx22, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
 function Prompt({
   agentId,
   placeholder = "Enter your prompt...",
@@ -4714,9 +5173,9 @@ function Prompt({
       handleSubmit();
     }
   };
-  return /* @__PURE__ */ jsxs18("div", { className: cn("space-y-2", className), children: [
-    /* @__PURE__ */ jsxs18("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs19("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsxs19("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx25(
         "input",
         {
           type: "text",
@@ -4729,7 +5188,7 @@ function Prompt({
           className: "flex-1 px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apteva-500 dark:bg-neutral-800 dark:border-neutral-600 dark:text-white"
         }
       ),
-      submitOn === "button" && /* @__PURE__ */ jsx22(
+      submitOn === "button" && /* @__PURE__ */ jsx25(
         "button",
         {
           onClick: handleSubmit,
@@ -4739,13 +5198,13 @@ function Prompt({
         }
       )
     ] }),
-    maxLength && /* @__PURE__ */ jsxs18("p", { className: "text-xs text-neutral-500", children: [
+    maxLength && /* @__PURE__ */ jsxs19("p", { className: "text-xs text-neutral-500", children: [
       value.length,
       " / ",
       maxLength,
       " characters"
     ] }),
-    showSuggestions && !value && /* @__PURE__ */ jsx22("div", { className: "flex flex-wrap gap-2", children: suggestions.map((suggestion, idx) => /* @__PURE__ */ jsx22(
+    showSuggestions && !value && /* @__PURE__ */ jsx25("div", { className: "flex flex-wrap gap-2", children: suggestions.map((suggestion, idx) => /* @__PURE__ */ jsx25(
       "button",
       {
         onClick: () => setValue(suggestion),
@@ -4754,16 +5213,16 @@ function Prompt({
       },
       idx
     )) }),
-    isLoading && /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2 text-sm text-neutral-500", children: [
-      /* @__PURE__ */ jsx22("div", { className: "w-4 h-4 border-2 border-apteva-500 border-t-transparent rounded-full animate-spin" }),
-      /* @__PURE__ */ jsx22("span", { children: "AI is processing your request..." })
+    isLoading && /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2 text-sm text-neutral-500", children: [
+      /* @__PURE__ */ jsx25("div", { className: "w-4 h-4 border-2 border-apteva-500 border-t-transparent rounded-full animate-spin" }),
+      /* @__PURE__ */ jsx25("span", { children: "AI is processing your request..." })
     ] })
   ] });
 }
 
 // src/components/Stream/Stream.tsx
 import { useState as useState10, useEffect as useEffect8 } from "react";
-import { jsx as jsx23, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 function Stream({
   agentId,
   prompt,
@@ -4843,7 +5302,7 @@ function Stream({
     plain: "text-neutral-900 dark:text-neutral-100"
   };
   if (!isStreaming && !isComplete) {
-    return /* @__PURE__ */ jsx23("div", { className: cn("p-4", className), children: /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsx26("div", { className: cn("p-4", className), children: /* @__PURE__ */ jsx26(
       "button",
       {
         onClick: startStreaming,
@@ -4852,9 +5311,9 @@ function Stream({
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs19("div", { className: cn(variantClasses[variant], className), children: [
+  return /* @__PURE__ */ jsxs20("div", { className: cn(variantClasses[variant], className), children: [
     text,
-    isStreaming && showCursor && /* @__PURE__ */ jsx23("span", { className: "apteva-stream-cursor" })
+    isStreaming && showCursor && /* @__PURE__ */ jsx26("span", { className: "apteva-stream-cursor" })
   ] });
 }
 
@@ -4862,9 +5321,9 @@ function Stream({
 import { useState as useState11 } from "react";
 
 // src/components/Threads/ThreadItem.tsx
-import { jsx as jsx24, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 function ThreadItem({ thread, isActive = false, onSelect, onDelete }) {
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       className: cn("apteva-thread-item", {
@@ -4872,19 +5331,19 @@ function ThreadItem({ thread, isActive = false, onSelect, onDelete }) {
       }),
       onClick: onSelect,
       children: [
-        /* @__PURE__ */ jsxs20("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx24("h4", { className: "font-semibold text-neutral-900 dark:text-white truncate", children: thread.title }),
-          thread.preview && /* @__PURE__ */ jsx24("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 truncate", children: thread.preview }),
-          /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 mt-1 text-xs text-neutral-500", children: [
-            /* @__PURE__ */ jsxs20("span", { children: [
+        /* @__PURE__ */ jsxs21("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx27("h4", { className: "font-semibold text-neutral-900 dark:text-white truncate", children: thread.title }),
+          thread.preview && /* @__PURE__ */ jsx27("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 truncate", children: thread.preview }),
+          /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2 mt-1 text-xs text-neutral-500", children: [
+            /* @__PURE__ */ jsxs21("span", { children: [
               thread.messageCount,
               " messages"
             ] }),
-            /* @__PURE__ */ jsx24("span", { children: "\u2022" }),
-            /* @__PURE__ */ jsx24("span", { children: formatRelativeTime(thread.updatedAt) })
+            /* @__PURE__ */ jsx27("span", { children: "\u2022" }),
+            /* @__PURE__ */ jsx27("span", { children: formatRelativeTime(thread.updatedAt) })
           ] })
         ] }),
-        onDelete && /* @__PURE__ */ jsx24(
+        onDelete && /* @__PURE__ */ jsx27(
           "button",
           {
             onClick: (e) => {
@@ -4914,7 +5373,7 @@ function formatRelativeTime(date) {
 }
 
 // src/components/Threads/ThreadList.tsx
-import { jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
 function ThreadList({
   threads,
   currentThreadId,
@@ -4928,8 +5387,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__ */ jsxs21("div", { className: "flex flex-col h-full", children: [
-    showSearch && /* @__PURE__ */ jsx25("div", { className: "p-3 border-b border-neutral-200 dark:border-neutral-700", children: /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs22("div", { className: "flex flex-col h-full", children: [
+    showSearch && /* @__PURE__ */ jsx28("div", { className: "p-3 border-b border-neutral-200 dark:border-neutral-700", children: /* @__PURE__ */ jsx28(
       "input",
       {
         type: "text",
@@ -4939,10 +5398,10 @@ function ThreadList({
         className: "w-full px-3 py-2 text-sm border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apteva-500 dark:bg-neutral-800 dark:border-neutral-600 dark:text-white"
       }
     ) }),
-    /* @__PURE__ */ jsxs21("div", { className: "flex-1 overflow-y-auto", children: [
-      Object.entries(groupedThreads).map(([group, groupThreads]) => /* @__PURE__ */ jsxs21("div", { children: [
-        groupBy !== "none" && /* @__PURE__ */ jsx25("div", { className: "px-3 py-2 text-xs font-semibold text-neutral-500 uppercase", children: group }),
-        groupThreads.map((thread) => /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsxs22("div", { className: "flex-1 overflow-y-auto", children: [
+      Object.entries(groupedThreads).map(([group, groupThreads]) => /* @__PURE__ */ jsxs22("div", { children: [
+        groupBy !== "none" && /* @__PURE__ */ jsx28("div", { className: "px-3 py-2 text-xs font-semibold text-neutral-500 uppercase", children: group }),
+        groupThreads.map((thread) => /* @__PURE__ */ jsx28(
           ThreadItem,
           {
             thread,
@@ -4953,9 +5412,9 @@ function ThreadList({
           thread.id
         ))
       ] }, group)),
-      filteredThreads.length === 0 && /* @__PURE__ */ jsxs21("div", { className: "p-8 text-center text-neutral-500", children: [
-        /* @__PURE__ */ jsx25("svg", { className: "w-10 h-10 mx-auto mb-2 opacity-50", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx25("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__ */ jsx25("p", { children: "No conversations found" })
+      filteredThreads.length === 0 && /* @__PURE__ */ jsxs22("div", { className: "p-8 text-center text-neutral-500", children: [
+        /* @__PURE__ */ jsx28("svg", { className: "w-10 h-10 mx-auto mb-2 opacity-50", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx28("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__ */ jsx28("p", { children: "No conversations found" })
       ] })
     ] })
   ] });
@@ -4987,7 +5446,7 @@ function groupThreadsByDate(threads) {
 }
 
 // src/components/Threads/Threads.tsx
-import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
 function Threads({
   threads,
   currentThreadId,
@@ -5006,8 +5465,8 @@ function Threads({
     tabs: "flex gap-2 border-b border-neutral-200 dark:border-neutral-700 overflow-x-auto"
   };
   if (variant === "tabs") {
-    return /* @__PURE__ */ jsxs22("div", { className: cn(variantClasses[variant], className), children: [
-      threads.slice(0, 5).map((thread) => /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsxs23("div", { className: cn(variantClasses[variant], className), children: [
+      threads.slice(0, 5).map((thread) => /* @__PURE__ */ jsx29(
         "button",
         {
           onClick: () => onThreadSelect?.(thread.id),
@@ -5019,7 +5478,7 @@ function Threads({
         },
         thread.id
       )),
-      showNewButton && onNewThread && /* @__PURE__ */ jsx26(
+      showNewButton && onNewThread && /* @__PURE__ */ jsx29(
         "button",
         {
           onClick: onNewThread,
@@ -5029,8 +5488,8 @@ function Threads({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs22("div", { className: cn(variantClasses[variant], "flex flex-col", className), children: [
-    showNewButton && onNewThread && /* @__PURE__ */ jsx26("div", { className: "p-3 border-b border-neutral-200 dark:border-neutral-700", children: /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs23("div", { className: cn(variantClasses[variant], "flex flex-col", className), children: [
+    showNewButton && onNewThread && /* @__PURE__ */ jsx29("div", { className: "p-3 border-b border-neutral-200 dark:border-neutral-700", children: /* @__PURE__ */ jsx29(
       "button",
       {
         onClick: onNewThread,
@@ -5038,7 +5497,7 @@ function Threads({
         children: "+ New Conversation"
       }
     ) }),
-    /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsx29(
       ThreadList,
       {
         threads,
@@ -5052,6 +5511,418 @@ function Threads({
   ] });
 }
 
+// src/components/AutoInterface/AutoInterface.tsx
+import { useState as useState13, useRef as useRef8, useCallback, useEffect as useEffect9 } from "react";
+
+// src/components/AutoInterface/LayoutRenderer.tsx
+import { useState as useState12 } from "react";
+import { Fragment as Fragment7, jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+var gapClasses = {
+  none: "gap-0",
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6"
+};
+var paddingClasses = {
+  none: "p-0",
+  sm: "p-2",
+  md: "p-4",
+  lg: "p-6"
+};
+var maxWidthClasses = {
+  sm: "max-w-2xl",
+  md: "max-w-4xl",
+  lg: "max-w-6xl",
+  xl: "max-w-7xl",
+  full: "max-w-full"
+};
+function LayoutRenderer({ node, onAction, renderNode }) {
+  const children = node.children || [];
+  switch (node.layout) {
+    case "page":
+      return /* @__PURE__ */ jsx30(PageLayout, { node, renderNode });
+    case "row":
+      return /* @__PURE__ */ jsx30(RowLayout, { node, renderNode });
+    case "columns":
+      return /* @__PURE__ */ jsx30(ColumnsLayout, { node, renderNode });
+    case "stack":
+      return /* @__PURE__ */ jsx30(StackLayout, { node, renderNode });
+    case "sidebar":
+      return /* @__PURE__ */ jsx30(SidebarLayout, { node, renderNode });
+    case "tabs":
+      return /* @__PURE__ */ jsx30(TabsLayout, { node, renderNode });
+    default:
+      return /* @__PURE__ */ jsx30("div", { className: "space-y-4", children: children.map((child) => /* @__PURE__ */ jsx30("div", { children: renderNode(child) }, child.id)) });
+  }
+}
+function PageLayout({ node, renderNode }) {
+  const { title, padding = "md", maxWidth = "xl" } = node.props || {};
+  const children = node.children || [];
+  return /* @__PURE__ */ jsxs24("div", { className: cn("w-full mx-auto", paddingClasses[padding], maxWidthClasses[maxWidth]), children: [
+    title && /* @__PURE__ */ jsx30("h1", { className: "!text-2xl font-bold !text-neutral-900 dark:!text-white mb-6", children: title }),
+    /* @__PURE__ */ jsx30("div", { className: "space-y-6", children: children.map((child) => /* @__PURE__ */ jsx30("div", { children: renderNode(child) }, child.id)) })
+  ] });
+}
+function RowLayout({ node, renderNode }) {
+  const { columns, gap = "md", align = "stretch" } = node.props || {};
+  const children = node.children || [];
+  const templateColumns = columns ? columns.map((c) => `${c}fr`).join(" ") : `repeat(${children.length}, 1fr)`;
+  const alignClasses = {
+    start: "items-start",
+    center: "items-center",
+    end: "items-end",
+    stretch: "items-stretch"
+  };
+  return /* @__PURE__ */ jsx30(
+    "div",
+    {
+      className: cn("grid", gapClasses[gap], alignClasses[align]),
+      style: { gridTemplateColumns: templateColumns },
+      children: children.map((child) => /* @__PURE__ */ jsx30("div", { children: renderNode(child) }, child.id))
+    }
+  );
+}
+function ColumnsLayout({ node, renderNode }) {
+  const { count, gap = "md" } = node.props || {};
+  const children = node.children || [];
+  const colCount = count || children.length;
+  return /* @__PURE__ */ jsx30(
+    "div",
+    {
+      className: cn("grid", gapClasses[gap]),
+      style: { gridTemplateColumns: `repeat(${colCount}, 1fr)` },
+      children: children.map((child) => /* @__PURE__ */ jsx30("div", { children: renderNode(child) }, child.id))
+    }
+  );
+}
+function StackLayout({ node, renderNode }) {
+  const { gap = "md", align = "stretch" } = node.props || {};
+  const children = node.children || [];
+  const alignClasses = {
+    left: "items-start",
+    center: "items-center",
+    right: "items-end",
+    stretch: "items-stretch"
+  };
+  return /* @__PURE__ */ jsx30("div", { className: cn("flex flex-col", gapClasses[gap], alignClasses[align]), children: children.map((child) => /* @__PURE__ */ jsx30("div", { children: renderNode(child) }, child.id)) });
+}
+function SidebarLayout({ node, renderNode }) {
+  const { side = "left", width = "280px" } = node.props || {};
+  const children = node.children || [];
+  const [sidebarChild, ...mainChildren] = side === "left" ? children : [...children].reverse();
+  if (!sidebarChild) return null;
+  const sidebar = /* @__PURE__ */ jsx30(
+    "div",
+    {
+      className: "flex-shrink-0 overflow-y-auto border-neutral-200 dark:border-neutral-700",
+      style: { width },
+      children: renderNode(sidebarChild)
+    }
+  );
+  const main = /* @__PURE__ */ jsx30("div", { className: "flex-1 overflow-y-auto min-w-0", children: mainChildren.map((child) => /* @__PURE__ */ jsx30("div", { children: renderNode(child) }, child.id)) });
+  return /* @__PURE__ */ jsx30("div", { className: "flex h-full gap-4", children: side === "left" ? /* @__PURE__ */ jsxs24(Fragment7, { children: [
+    sidebar,
+    main
+  ] }) : /* @__PURE__ */ jsxs24(Fragment7, { children: [
+    main,
+    sidebar
+  ] }) });
+}
+function TabsLayout({ node, renderNode }) {
+  const { labels = [], defaultTab = 0 } = node.props || {};
+  const children = node.children || [];
+  const [activeTab, setActiveTab] = useState12(defaultTab);
+  return /* @__PURE__ */ jsxs24("div", { children: [
+    /* @__PURE__ */ jsx30("div", { className: "flex border-b border-neutral-200 dark:border-neutral-700 mb-4", children: labels.map((label, idx) => /* @__PURE__ */ jsx30(
+      "button",
+      {
+        onClick: () => setActiveTab(idx),
+        className: cn(
+          "px-4 py-2 !text-sm font-medium transition-colors border-b-2 -mb-px",
+          activeTab === idx ? "border-blue-500 !text-blue-600 dark:!text-blue-400" : "border-transparent !text-neutral-500 hover:!text-neutral-700 dark:hover:!text-neutral-300"
+        ),
+        children: label
+      },
+      idx
+    )) }),
+    children[activeTab] && renderNode(children[activeTab])
+  ] });
+}
+
+// src/components/AutoInterface/InterfaceRenderer.tsx
+import { Fragment as Fragment8, jsx as jsx31 } from "react/jsx-runtime";
+var STRUCTURAL_KEYS = /* @__PURE__ */ new Set(["type", "id", "layout", "props", "children", "actions", "metadata", "isStreaming"]);
+function normalizeNode(n) {
+  let node = { ...n };
+  if (node.type === "widget" && node.props?.widget) {
+    node.type = node.props.widget;
+    const { widget: _, ...rest } = node.props;
+    node.props = rest;
+  }
+  const explicit = node.props || {};
+  const extra = {};
+  for (const key of Object.keys(node)) {
+    if (!STRUCTURAL_KEYS.has(key)) {
+      extra[key] = node[key];
+    }
+  }
+  node.props = { ...extra, ...explicit };
+  if (node.props.style && !node.props.variant) {
+    node.props.variant = node.props.style;
+    delete node.props.style;
+  }
+  if (node.children) {
+    node.children = node.children.map(normalizeNode);
+  }
+  return node;
+}
+function InterfaceRenderer({ node, onAction }) {
+  const renderNode = (rawNode) => {
+    const n = normalizeNode(rawNode);
+    if (n.type === "layout" && n.layout) {
+      return /* @__PURE__ */ jsx31(
+        LayoutRenderer,
+        {
+          node: n,
+          onAction,
+          renderNode
+        },
+        n.id
+      );
+    }
+    return /* @__PURE__ */ jsx31(
+      WidgetRenderer,
+      {
+        widget: {
+          type: n.type,
+          id: n.id,
+          props: n.props || {},
+          actions: n.actions,
+          metadata: n.metadata,
+          isStreaming: n.isStreaming
+        },
+        onAction
+      },
+      n.id
+    );
+  };
+  return /* @__PURE__ */ jsx31(Fragment8, { children: renderNode(node) });
+}
+
+// src/components/AutoInterface/InterfaceSkeleton.tsx
+import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
+function InterfaceSkeleton({ className }) {
+  return /* @__PURE__ */ jsxs25("div", { className: cn("animate-pulse space-y-6 p-6", className), children: [
+    /* @__PURE__ */ jsx32("div", { className: "h-7 bg-neutral-200 dark:bg-neutral-700 rounded w-1/3" }),
+    /* @__PURE__ */ jsx32("div", { className: "grid grid-cols-4 gap-4", children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsxs25("div", { className: "border border-neutral-200 dark:border-neutral-700 rounded-xl p-5 space-y-2", children: [
+      /* @__PURE__ */ jsx32("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-2/3" }),
+      /* @__PURE__ */ jsx32("div", { className: "h-8 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2" })
+    ] }, i)) }),
+    /* @__PURE__ */ jsxs25("div", { className: "grid grid-cols-3 gap-4", children: [
+      /* @__PURE__ */ jsxs25("div", { className: "col-span-2 border border-neutral-200 dark:border-neutral-700 rounded-xl p-5 space-y-3", children: [
+        /* @__PURE__ */ jsx32("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/4" }),
+        /* @__PURE__ */ jsx32("div", { className: "h-40 bg-neutral-200 dark:bg-neutral-700 rounded" })
+      ] }),
+      /* @__PURE__ */ jsxs25("div", { className: "border border-neutral-200 dark:border-neutral-700 rounded-xl p-5 space-y-3", children: [
+        /* @__PURE__ */ jsx32("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2" }),
+        [1, 2, 3].map((i) => /* @__PURE__ */ jsx32("div", { className: "h-10 bg-neutral-200 dark:bg-neutral-700 rounded" }, i))
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/AutoInterface/AutoInterface.tsx
+import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
+async function generateInitialInterface(apiUrl, apiKey, agentId, prompt) {
+  const systemContext = generateCompactInterfaceContext();
+  const message = `${systemContext}
+
+Generate an interface for: ${prompt}`;
+  const headers = { "Content-Type": "application/json" };
+  if (apiKey) headers["X-API-Key"] = apiKey;
+  const response = await fetch(`${apiUrl}/chat`, {
+    method: "POST",
+    headers,
+    body: JSON.stringify({
+      agent_id: agentId,
+      message,
+      stream: false
+    })
+  });
+  if (!response.ok) {
+    const err = await response.json().catch(() => ({ error: "Request failed" }));
+    throw new Error(err.error || `Request failed with status ${response.status}`);
+  }
+  const data = await response.json();
+  const text = data.response || data.message || "";
+  console.log("[AutoInterface] Raw API response:", data);
+  console.log("[AutoInterface] Extracted text (" + text.length + " chars):", text.substring(0, 500));
+  const spec = parseInterfaceFromText(text);
+  console.log("[AutoInterface] Parsed spec:", spec ? "OK" : "null", spec ? JSON.stringify(spec).substring(0, 300) + "..." : "");
+  return { spec, threadId: data.thread_id || null };
+}
+function AutoInterface({
+  agentId,
+  threadId,
+  initialPrompt,
+  initialInterface,
+  context,
+  apiUrl,
+  apiKey,
+  onInterfaceChange,
+  onAction,
+  onThreadChange,
+  onError,
+  chatPosition = "right",
+  chatWidth = "380px",
+  chatCollapsible = true,
+  chatPlaceholder = "Ask the AI to generate or update the interface...",
+  chatWelcomeTitle = "Auto Interface",
+  useMock,
+  theme,
+  className
+}) {
+  const [interfaceSpec, setInterfaceSpec] = useState13(initialInterface || null);
+  const [isGenerating, setIsGenerating] = useState13(false);
+  const [chatCollapsed, setChatCollapsed] = useState13(false);
+  const chatRef = useRef8(null);
+  const systemContext = [
+    generateInterfaceContext(),
+    context || ""
+  ].filter(Boolean).join("\n\n");
+  const updateInterface = useCallback((newSpec) => {
+    setInterfaceSpec(newSpec);
+    onInterfaceChange?.(newSpec);
+  }, [onInterfaceChange]);
+  const handleAction = useCallback((action) => {
+    onAction?.(action);
+    if (chatRef.current) {
+      chatRef.current.sendMessage(
+        `[Action: ${action.type} on widget ${action.widgetId || "unknown"}. Payload: ${JSON.stringify(action.payload)}]`
+      );
+    }
+  }, [onAction]);
+  const handleMessageComplete = useCallback((result) => {
+    if (!result?.data) return;
+    const text = typeof result.data === "string" ? result.data : result.data.message || "";
+    console.log("[AutoInterface] Chat message complete, text (" + text.length + " chars):", text.substring(0, 300));
+    const parsed = parseInterfaceFromText(text);
+    if (parsed) {
+      console.log("[AutoInterface] Parsed full interface from chat");
+      updateInterface(parsed);
+      setIsGenerating(false);
+      return;
+    }
+    const updates = parseUpdatesFromText(text);
+    if (updates.length > 0 && interfaceSpec) {
+      console.log("[AutoInterface] Parsed", updates.length, "updates from chat");
+      const newSpec = applyUpdates(interfaceSpec, updates);
+      updateInterface(newSpec);
+    } else {
+      console.log("[AutoInterface] No interface or updates found in chat message");
+    }
+    setIsGenerating(false);
+  }, [interfaceSpec, updateInterface]);
+  useEffect9(() => {
+    if (!initialPrompt || initialInterface || useMock) return;
+    if (!apiUrl) return;
+    let cancelled = false;
+    setIsGenerating(true);
+    console.log("[AutoInterface] Generating initial interface for prompt:", initialPrompt);
+    console.log("[AutoInterface] API URL:", apiUrl, "| Agent:", agentId);
+    generateInitialInterface(apiUrl, apiKey, agentId, initialPrompt).then(({ spec, threadId: threadId2 }) => {
+      if (cancelled) return;
+      console.log("[AutoInterface] Generation complete. Spec:", spec ? "parsed OK" : "null", "| Thread:", threadId2);
+      if (spec) {
+        console.log("[AutoInterface] Setting interface with", JSON.stringify(spec).length, "bytes");
+        updateInterface(spec);
+      } else {
+        console.warn("[AutoInterface] Agent did not return a parseable @interface block");
+      }
+      setIsGenerating(false);
+    }).catch((err) => {
+      if (cancelled) return;
+      console.error("[AutoInterface] Initial generation failed:", err);
+      onError?.(err instanceof Error ? err : new Error(String(err)));
+      setIsGenerating(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [initialPrompt]);
+  const hasInterface = interfaceSpec !== null;
+  const showSkeleton = isGenerating && !hasInterface;
+  return /* @__PURE__ */ jsxs26("div", { className: cn(
+    "flex h-full bg-neutral-50 dark:bg-black",
+    chatPosition === "bottom" ? "flex-col" : "flex-row",
+    className
+  ), children: [
+    /* @__PURE__ */ jsxs26("div", { className: cn(
+      "flex-1 overflow-y-auto min-w-0",
+      hasInterface || showSkeleton ? "" : "hidden"
+    ), children: [
+      showSkeleton && /* @__PURE__ */ jsx33(InterfaceSkeleton, {}),
+      hasInterface && interfaceSpec && /* @__PURE__ */ jsx33("div", { className: "p-4", children: /* @__PURE__ */ jsx33(
+        InterfaceRenderer,
+        {
+          node: interfaceSpec.root,
+          onAction: handleAction
+        }
+      ) })
+    ] }),
+    chatCollapsible && hasInterface && chatPosition === "right" && /* @__PURE__ */ jsx33(
+      "button",
+      {
+        onClick: () => setChatCollapsed(!chatCollapsed),
+        className: "flex-shrink-0 w-6 flex items-center justify-center border-l border-neutral-200 dark:border-neutral-700 bg-neutral-100 dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors",
+        title: chatCollapsed ? "Show chat" : "Hide chat",
+        children: /* @__PURE__ */ jsx33("span", { className: "!text-xs !text-neutral-500 dark:!text-neutral-400", children: chatCollapsed ? "\u25C0" : "\u25B6" })
+      }
+    ),
+    /* @__PURE__ */ jsx33(
+      "div",
+      {
+        className: cn(
+          "flex-shrink-0 border-neutral-200 dark:border-neutral-700",
+          chatPosition === "right" ? "border-l" : "border-t",
+          chatCollapsed && "hidden",
+          // When no interface is generated yet, chat takes full width
+          !hasInterface && !showSkeleton && "flex-1"
+        ),
+        style: hasInterface || showSkeleton ? chatPosition === "right" ? { width: chatWidth } : { height: "300px" } : void 0,
+        children: /* @__PURE__ */ jsx33(
+          Chat,
+          {
+            ref: chatRef,
+            agentId,
+            threadId,
+            apiUrl,
+            apiKey,
+            useMock,
+            context: systemContext,
+            placeholder: chatPlaceholder,
+            welcomeTitle: chatWelcomeTitle,
+            welcomeSubtitle: "Describe the interface you want to create",
+            enableStreaming: true,
+            enableWidgets: true,
+            showHeader: true,
+            headerTitle: "Chat",
+            onThreadChange,
+            onComplete: handleMessageComplete,
+            onError,
+            className: "h-full",
+            suggestedPrompts: !hasInterface ? [
+              "Show me a sales dashboard",
+              "Create a user management panel",
+              "Build a project overview page"
+            ] : void 0
+          }
+        )
+      }
+    )
+  ] });
+}
+
 // src/utils/theme-script.ts
 var themeScript = `
 (function() {
@@ -5075,22 +5946,155 @@ var themeScript = `
 function getThemeScript() {
   return themeScript;
 }
+
+// src/hooks/useInterfaceState.ts
+import { useState as useState14, useCallback as useCallback2 } from "react";
+function useInterfaceState(initialSpec) {
+  const [spec, setSpec] = useState14(initialSpec || null);
+  const [isStreaming, setIsStreaming] = useState14(false);
+  const setInterface = useCallback2((newSpec) => {
+    setSpec(newSpec);
+  }, []);
+  const clearInterface = useCallback2(() => {
+    setSpec(null);
+  }, []);
+  const applyInterfaceUpdate = useCallback2((update) => {
+    setSpec((prev) => {
+      if (!prev) return prev;
+      return applyUpdate(prev, update);
+    });
+  }, []);
+  const applyInterfaceUpdates = useCallback2((updates) => {
+    setSpec((prev) => {
+      if (!prev) return prev;
+      return applyUpdates(prev, updates);
+    });
+  }, []);
+  const getNode = useCallback2((id) => {
+    if (!spec) return null;
+    return findNode(spec.root, id);
+  }, [spec]);
+  return {
+    spec,
+    isStreaming,
+    setInterface,
+    clearInterface,
+    applyInterfaceUpdate,
+    applyInterfaceUpdates,
+    setIsStreaming,
+    getNode
+  };
+}
+
+// src/hooks/useInterfaceAI.ts
+import { useCallback as useCallback3, useRef as useRef9 } from "react";
+function useInterfaceAI({
+  agentId,
+  apiUrl,
+  apiKey,
+  context,
+  onInterface,
+  onUpdates,
+  onError,
+  onStreamStart,
+  onStreamEnd
+}) {
+  const threadIdRef = useRef9(null);
+  const accumulatedTextRef = useRef9("");
+  if (apiUrl || apiKey) {
+    aptevaClient.configure({
+      ...apiUrl && { apiUrl },
+      ...apiKey && { apiKey }
+    });
+  }
+  const sendMessage = useCallback3(async (message) => {
+    accumulatedTextRef.current = "";
+    onStreamStart?.();
+    const systemPrompt = [
+      generateInterfaceContext(),
+      context || ""
+    ].filter(Boolean).join("\n\n");
+    try {
+      await aptevaClient.chatStream(
+        {
+          agent_id: agentId,
+          message,
+          thread_id: threadIdRef.current || void 0,
+          stream: true,
+          system: systemPrompt
+        },
+        // onChunk
+        (chunk) => {
+          if (chunk.thread_id) {
+            threadIdRef.current = chunk.thread_id;
+          }
+          if (chunk.type === "content" || chunk.type === "token") {
+            accumulatedTextRef.current += chunk.content || "";
+            const parsed = parseInterfaceFromText(accumulatedTextRef.current);
+            if (parsed) {
+              onInterface?.(parsed);
+            }
+            const updates = parseUpdatesFromText(accumulatedTextRef.current);
+            if (updates.length > 0) {
+              onUpdates?.(updates);
+            }
+          }
+        },
+        // onComplete
+        () => {
+          onStreamEnd?.();
+        },
+        // onError
+        (error) => {
+          onError?.(error);
+          onStreamEnd?.();
+        }
+      );
+    } catch (error) {
+      onError?.(error instanceof Error ? error : new Error("Unknown error"));
+      onStreamEnd?.();
+    }
+  }, [agentId, context, onInterface, onUpdates, onError, onStreamStart, onStreamEnd]);
+  return {
+    sendMessage,
+    threadId: threadIdRef.current
+  };
+}
 export {
   AptevaClient,
+  AutoInterface,
   Button,
   Card,
   Chat,
   Command,
+  InterfaceRenderer,
+  InterfaceSkeleton,
+  Kpi,
+  LayoutRenderer,
   List,
   Prompt,
+  Spacer,
   Stream,
+  TextBlock,
   Threads,
   Widgets,
+  applyUpdate,
+  applyUpdates,
   aptevaClient,
   cn,
+  containsInterface,
+  convertApiMessages,
+  findNode,
+  generateCompactInterfaceContext,
+  generateInterfaceContext,
   getThemeScript,
   mockMessages,
   mockThreads,
-  mockWidgets
+  mockWidgets,
+  parseInterfaceFromText,
+  parseUpdatesFromText,
+  stripInterface,
+  useInterfaceAI,
+  useInterfaceState
 };
 //# sourceMappingURL=index.mjs.map