@apteva/apteva-kit 0.1.101 → 0.1.104

package/dist/index.js

@@ -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 (e2) {
+    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 (e3) {
+    }
+    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
 
 
@@ -1436,6 +1777,141 @@ function Flow({ widget }) {
   ] });
 }
 
+// src/components/Widgets/widget-library/Kpi.tsx
+
+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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-900 p-5", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "!text-sm font-medium !text-neutral-500 dark:!text-neutral-400 mb-1", children: label }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-end gap-2", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "!text-2xl font-bold !text-neutral-900 dark:!text-white", children: value }),
+      change && trendInfo && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `flex items-center gap-0.5 !text-sm font-medium ${trendInfo.color} mb-0.5`, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: trendInfo.symbol }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: change })
+      ] }),
+      change && !trendInfo && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "!text-sm font-medium !text-neutral-400 mb-0.5", children: change })
+    ] }),
+    widget.actions && widget.actions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, 
+      "button",
+      {
+        onClick: () => _optionalChain([onAction, 'optionalCall', _32 => _32({
+          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
+
+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__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "li", { className: "ml-4 list-disc", children: renderInline(lines[i].slice(2)) }, i)
+          );
+          i++;
+        }
+        elements.push(/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { className: "my-1 space-y-0.5", children: listItems }, `list-${i}`));
+        continue;
+      } else if (line.trim() === "") {
+        elements.push(/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-2" }, i));
+      } else {
+        elements.push(/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: parts });
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: variantClasses[variant] || variantClasses.body, children: renderMarkdown(content) });
+}
+
+// src/components/Widgets/widget-library/Spacer.tsx
+
+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__ */ _jsxruntime.jsx.call(void 0, "div", { className: heightClasses[height] || heightClasses.md + " flex items-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "hr", { className: "w-full border-neutral-200 dark:border-neutral-700" }) });
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: heightClasses[height] || heightClasses.md });
+}
+
 // src/components/Widgets/WidgetRenderer.tsx
 
 function WidgetRenderer({ widget, onAction }) {
@@ -1457,6 +1933,12 @@ function WidgetRenderer({ widget, onAction }) {
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Image, { widget });
       case "flow":
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Flow, { widget });
+      case "kpi":
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Kpi, { widget, onAction });
+      case "text_block":
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextBlock, { widget });
+      case "spacer":
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spacer, { widget });
       default:
         return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "p-4 border border-yellow-300 bg-yellow-50 rounded-lg", children: [
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-sm text-yellow-800", children: [
@@ -1483,7 +1965,7 @@ function Widgets({
 }) {
   _react.useEffect.call(void 0, () => {
     widgets.forEach((widget) => {
-      _optionalChain([onWidgetMount, 'optionalCall', _32 => _32(widget.id)]);
+      _optionalChain([onWidgetMount, 'optionalCall', _33 => _33(widget.id)]);
     });
   }, [widgets, onWidgetMount]);
   const layoutClasses = {
@@ -1809,8 +2291,8 @@ function ToolCall({ name, status, isReceiving = false, inputLength = 0, streamOu
 
 function Message({ message, onAction, enableWidgets, onWidgetRender }) {
   const isUser = message.role === "user";
-  const contentSegments = _optionalChain([message, 'access', _33 => _33.metadata, 'optionalAccess', _34 => _34.content_segments]);
-  const isStreaming = _optionalChain([message, 'access', _35 => _35.metadata, 'optionalAccess', _36 => _36.isStreaming]) === true;
+  const contentSegments = _optionalChain([message, 'access', _34 => _34.metadata, 'optionalAccess', _35 => _35.content_segments]);
+  const isStreaming = _optionalChain([message, 'access', _36 => _36.metadata, 'optionalAccess', _37 => _37.isStreaming]) === true;
   const hasContent = message.content || contentSegments && contentSegments.length > 0;
   const reportedWidgetsRef = _react.useRef.call(void 0, /* @__PURE__ */ new Set());
   const parsedWidgets = _react.useMemo.call(void 0, () => {
@@ -1890,7 +2372,7 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
     }
     return elements.length > 0 ? elements : null;
   };
-  const attachments = _optionalChain([message, 'access', _37 => _37.metadata, 'optionalAccess', _38 => _38.attachments]) || [];
+  const attachments = _optionalChain([message, 'access', _38 => _38.metadata, 'optionalAccess', _39 => _39.attachments]) || [];
   const hasAttachments = attachments.length > 0;
   const renderAttachments = () => {
     if (!hasAttachments) return null;
@@ -2061,15 +2543,6 @@ var DefaultIcon = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { cl
     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__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-12 h-12 sm:w-16 sm:h-16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  "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__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 7l5 5m0 0l-5 5m5-5H6" }) });
 function WelcomeScreen({
   title,
@@ -2080,7 +2553,6 @@ function WelcomeScreen({
   chatVariant = "default",
   onPromptClick
 }) {
-  const WelcomeIcon = chatVariant === "terminal" ? TerminalIcon : DefaultIcon;
   const normalizedPrompts = (prompts || []).map(
     (p) => typeof p === "string" ? { text: p } : p
   );
@@ -2088,7 +2560,7 @@ function WelcomeScreen({
   const hasHeader = title || subtitle || icon;
   if (!hasHeader && !hasPrompts) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center justify-center h-full !text-neutral-500 dark:!text-neutral-400", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "text-center space-y-2", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WelcomeIcon, {}) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DefaultIcon, {}) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm", children: "No messages yet. Start a conversation!" })
     ] }) });
   }
@@ -2125,7 +2597,7 @@ function WelcomeScreen({
   }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-center justify-center h-full px-4 py-6 sm:py-8", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "text-center mb-6 sm:mb-8 max-w-md", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mb-4 !text-neutral-400 dark:!text-neutral-500 flex justify-center", children: icon || /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WelcomeIcon, {}) }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mb-4 !text-neutral-400 dark:!text-neutral-500 flex justify-center", children: icon || /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DefaultIcon, {}) }),
       title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h1", { className: "text-xl sm:text-2xl font-semibold !text-neutral-900 dark:!text-white mb-2", children: title }),
       subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm sm:text-base !text-neutral-500 dark:!text-neutral-400", children: subtitle })
     ] }),
@@ -2321,7 +2793,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
         setFileError(errors.join(", "));
         setTimeout(() => setFileError(null), 5e3);
       }
-      _optionalChain([onFileUpload, 'optionalCall', _39 => _39(e.target.files)]);
+      _optionalChain([onFileUpload, 'optionalCall', _40 => _40(e.target.files)]);
       setShowMenu(false);
       e.target.value = "";
     }
@@ -2345,33 +2817,26 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "px-4 py-3 relative", children: [
-    fileError && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 !text-red-700 dark:!text-red-300 text-sm", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+    fileError && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-file-error", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-file-error-content", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: fileError })
     ] }) }),
-    pendingFiles.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mb-2 flex flex-wrap gap-2", children: pendingFiles.map((pf, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      "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__ */ _jsxruntime.jsx.call(void 0, "img", { src: pf.preview, alt: pf.file.name, className: "w-8 h-8 object-cover rounded" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col min-w-0", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs font-medium !text-neutral-700 dark:!text-neutral-300 truncate max-w-[120px]", children: pf.file.name }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs !text-neutral-500 dark:!text-neutral-400", children: formatFileSize(pf.file.size) })
-          ] }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            "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__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
-            }
-          )
-        ]
-      },
-      index
-    )) }),
+    pendingFiles.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-file-preview", children: pendingFiles.map((pf, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-file-item", children: [
+      pf.preview ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: pf.preview, alt: pf.file.name, className: "apteva-file-thumb" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-file-icon", children: getFileIcon(pf.file.type) }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-file-info", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-file-name", children: pf.file.name }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-file-size", children: formatFileSize(pf.file.size) })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          onClick: () => removeFile(index),
+          className: "apteva-file-remove",
+          title: "Remove file",
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+        }
+      )
+    ] }, index)) }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
       {
@@ -2400,15 +2865,15 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
                 {
                   className: "apteva-composer-menu fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
                   style: {
-                    left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _40 => _40.current, 'optionalAccess', _41 => _41.getBoundingClientRect, 'call', _42 => _42(), 'access', _43 => _43.left]), () => ( 0)),
-                    bottom: window.innerHeight - (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _44 => _44.current, 'optionalAccess', _45 => _45.getBoundingClientRect, 'call', _46 => _46(), 'access', _47 => _47.top]), () => ( 0))) + 8
+                    left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _41 => _41.current, 'optionalAccess', _42 => _42.getBoundingClientRect, 'call', _43 => _43(), 'access', _44 => _44.left]), () => ( 0)),
+                    bottom: window.innerHeight - (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _45 => _45.current, 'optionalAccess', _46 => _46.getBoundingClientRect, 'call', _47 => _47(), 'access', _48 => _48.top]), () => ( 0))) + 8
                   },
                   children: [
                     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                       "button",
                       {
                         onClick: () => {
-                          _optionalChain([fileInputRef, 'access', _48 => _48.current, 'optionalAccess', _49 => _49.click, 'call', _50 => _50()]);
+                          _optionalChain([fileInputRef, 'access', _49 => _49.current, 'optionalAccess', _50 => _50.click, 'call', _51 => _51()]);
                           setShowMenu(false);
                         },
                         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",
@@ -2529,8 +2994,8 @@ function CommandComposer({
     }
   };
   const handleNewCommand = () => {
-    _optionalChain([onReset, 'optionalCall', _51 => _51()]);
-    _optionalChain([inputRef, 'access', _52 => _52.current, 'optionalAccess', _53 => _53.focus, 'call', _54 => _54()]);
+    _optionalChain([onReset, 'optionalCall', _52 => _52()]);
+    _optionalChain([inputRef, 'access', _53 => _53.current, 'optionalAccess', _54 => _54.focus, 'call', _55 => _55()]);
   };
   const handleInputChange = (value) => {
     setInput(value);
@@ -2609,8 +3074,8 @@ function CommandComposer({
   const isShowingResult = state !== "idle";
   const { text: displayContent, isToolCall } = getDisplayContent();
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "w-full relative", children: [
-    fileError && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 !text-red-700 dark:!text-red-300 text-xs", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-3 h-3 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+    fileError && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-file-error", style: { top: "-3rem", bottom: "auto" }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-file-error-content", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: fileError })
     ] }) }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
@@ -2644,15 +3109,15 @@ function CommandComposer({
                   {
                     className: "apteva-composer-menu fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
                     style: {
-                      left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _55 => _55.current, 'optionalAccess', _56 => _56.getBoundingClientRect, 'call', _57 => _57(), 'access', _58 => _58.left]), () => ( 0)),
-                      top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _59 => _59.current, 'optionalAccess', _60 => _60.getBoundingClientRect, 'call', _61 => _61(), 'access', _62 => _62.bottom]), () => ( 0))) + 8
+                      left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _56 => _56.current, 'optionalAccess', _57 => _57.getBoundingClientRect, 'call', _58 => _58(), 'access', _59 => _59.left]), () => ( 0)),
+                      top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _60 => _60.current, 'optionalAccess', _61 => _61.getBoundingClientRect, 'call', _62 => _62(), 'access', _63 => _63.bottom]), () => ( 0))) + 8
                     },
                     children: [
                       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                         "button",
                         {
                           onClick: () => {
-                            _optionalChain([fileInputRef, 'access', _63 => _63.current, 'optionalAccess', _64 => _64.click, 'call', _65 => _65()]);
+                            _optionalChain([fileInputRef, 'access', _64 => _64.current, 'optionalAccess', _65 => _65.click, 'call', _66 => _66()]);
                             setShowMenu(false);
                           },
                           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",
@@ -2684,26 +3149,18 @@ function CommandComposer({
             state === "loading" && !toolName && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-4 h-4 border-2 border-blue-200 border-t-blue-500 rounded-full animate-spin" }),
             state === "loading" && toolName && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-2 h-2 rounded-full bg-blue-500 animate-pulse" })
           ] }),
-          pendingFiles.length > 0 && state === "idle" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center gap-1 flex-shrink-0", children: pendingFiles.map((pf, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-            "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__ */ _jsxruntime.jsx.call(void 0, "img", { src: pf.preview, alt: pf.file.name, className: "w-6 h-6 object-cover" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs !text-neutral-500 dark:!text-neutral-400", children: getFileIcon(pf.file.type) }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  "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__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-3 h-3 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
-                  }
-                )
-              ]
-            },
-            index
-          )) }),
+          pendingFiles.length > 0 && state === "idle" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-file-badges", children: pendingFiles.map((pf, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-file-badge", title: pf.file.name, children: [
+            pf.preview ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: pf.preview, alt: pf.file.name, className: "apteva-file-badge-img" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-file-badge-icon", children: getFileIcon(pf.file.type) }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                onClick: () => removeFile(index),
+                className: "apteva-file-badge-remove",
+                title: "Remove",
+                children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+              }
+            )
+          ] }, index)) }),
           state === "idle" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "textarea",
             {
@@ -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: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _67 => _67.apiUrl]), () => ( "")),
+      apiKey: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _68 => _68.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
@@ -2893,7 +3348,7 @@ var AptevaClient = class {
         const error = await response.json().catch(() => ({ error: "Request failed" }));
         throw new Error(error.error || `Request failed with status ${response.status}`);
       }
-      const reader = _optionalChain([response, 'access', _66 => _66.body, 'optionalAccess', _67 => _67.getReader, 'call', _68 => _68()]);
+      const reader = _optionalChain([response, 'access', _69 => _69.body, 'optionalAccess', _70 => _70.getReader, 'call', _71 => _71()]);
       if (!reader) {
         throw new Error("Response body is not readable");
       }
@@ -2911,7 +3366,7 @@ var AptevaClient = class {
           if (line.startsWith("data: ")) {
             const data = line.slice(6);
             if (data === "[DONE]") {
-              _optionalChain([onComplete, 'optionalCall', _69 => _69(threadId)]);
+              _optionalChain([onComplete, 'optionalCall', _72 => _72(threadId)]);
               return;
             }
             try {
@@ -2926,10 +3381,10 @@ var AptevaClient = class {
           }
         }
       }
-      _optionalChain([onComplete, 'optionalCall', _70 => _70(threadId)]);
+      _optionalChain([onComplete, 'optionalCall', _73 => _73(threadId)]);
     } catch (error) {
       const err = error instanceof Error ? error : new Error("Unknown error");
-      _optionalChain([onError, 'optionalCall', _71 => _71(err)]);
+      _optionalChain([onError, 'optionalCall', _74 => _74(err)]);
       throw err;
     }
   }
@@ -3034,6 +3489,7 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   placeholder,
   showHeader = true,
   headerTitle = "Chat",
+  onHeaderBack,
   // Widget detection
   enableWidgets = false,
   availableWidgets,
@@ -3090,7 +3546,7 @@ ${widgetContext}` : widgetContext;
   }, [apiUrl, apiKey]);
   _react.useEffect.call(void 0, () => {
     if (threadId) {
-      _optionalChain([onThreadChange, 'optionalCall', _72 => _72(threadId)]);
+      _optionalChain([onThreadChange, 'optionalCall', _75 => _75(threadId)]);
     }
   }, [threadId, onThreadChange]);
   _react.useEffect.call(void 0, () => {
@@ -3108,7 +3564,7 @@ ${widgetContext}` : widgetContext;
   }, [showSettingsMenu]);
   const handleModeChange = (newMode) => {
     setMode(newMode);
-    _optionalChain([onModeChange, 'optionalCall', _73 => _73(newMode)]);
+    _optionalChain([onModeChange, 'optionalCall', _76 => _76(newMode)]);
     if (newMode === "command") {
       setCommandState("idle");
       setCommandResult(null);
@@ -3133,7 +3589,7 @@ ${widgetContext}` : widgetContext;
         metadata: hasFiles ? { attachments } : void 0
       };
       setMessages((prev) => [...prev, userMessage]);
-      _optionalChain([onMessageSent, 'optionalCall', _74 => _74(userMessage)]);
+      _optionalChain([onMessageSent, 'optionalCall', _77 => _77(userMessage)]);
     }
     setIsLoading(true);
     try {
@@ -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) {
@@ -3201,7 +3657,7 @@ ${widgetContext}` : widgetContext;
                   responseThreadId = chunk.thread_id;
                   if (!currentThreadId) {
                     setCurrentThreadId(chunk.thread_id);
-                    _optionalChain([onThreadChange, 'optionalCall', _75 => _75(chunk.thread_id)]);
+                    _optionalChain([onThreadChange, 'optionalCall', _78 => _78(chunk.thread_id)]);
                   }
                 }
                 break;
@@ -3227,7 +3683,7 @@ ${widgetContext}` : widgetContext;
                   contentSegments.push({ type: "tool", id: chunk.tool_id, name: displayName, status: "preparing" });
                   toolInputBuffers[chunk.tool_id] = "";
                   setChatToolName(displayName);
-                  _optionalChain([onToolCall, 'optionalCall', _76 => _76(chunk.tool_name, chunk.tool_id)]);
+                  _optionalChain([onToolCall, 'optionalCall', _79 => _79(chunk.tool_name, chunk.tool_id)]);
                   updateMessage();
                 }
                 break;
@@ -3287,7 +3743,7 @@ ${widgetContext}` : widgetContext;
                     toolSegment.result = chunk.content;
                     toolSegment.status = "completed";
                     toolSegment.isReceiving = false;
-                    _optionalChain([onToolResult, 'optionalCall', _77 => _77(toolSegment.name, chunk.content)]);
+                    _optionalChain([onToolResult, 'optionalCall', _80 => _80(toolSegment.name, chunk.content)]);
                   }
                   setChatToolName(null);
                   updateMessage();
@@ -3330,7 +3786,7 @@ ${widgetContext}` : widgetContext;
             });
             if (threadId2 && threadId2 !== currentThreadId) {
               setCurrentThreadId(threadId2);
-              _optionalChain([onThreadChange, 'optionalCall', _78 => _78(threadId2)]);
+              _optionalChain([onThreadChange, 'optionalCall', _81 => _81(threadId2)]);
             }
             setIsLoading(false);
             setCurrentRequestId(null);
@@ -3354,7 +3810,7 @@ ${widgetContext}` : widgetContext;
             setIsLoading(false);
             setCurrentRequestId(null);
             setChatToolName(null);
-            _optionalChain([onError, 'optionalCall', _79 => _79(error)]);
+            _optionalChain([onError, 'optionalCall', _82 => _82(error)]);
           }
         );
       }
@@ -3367,7 +3823,7 @@ ${widgetContext}` : widgetContext;
         metadata: { error: true }
       };
       setMessages((prev) => [...prev, errorMessage]);
-      _optionalChain([onError, 'optionalCall', _80 => _80(error instanceof Error ? error : new Error("Unknown error"))]);
+      _optionalChain([onError, 'optionalCall', _83 => _83(error instanceof Error ? error : new Error("Unknown error"))]);
     } finally {
       setIsLoading(false);
     }
@@ -3413,7 +3869,7 @@ ${planningInstruction}` : planningInstruction;
           const error = err instanceof Error ? err : new Error("Failed to generate plan");
           setCommandError(error);
           setCommandState("error");
-          _optionalChain([onError, 'optionalCall', _81 => _81(error)]);
+          _optionalChain([onError, 'optionalCall', _84 => _84(error)]);
         }
       }
       return;
@@ -3446,12 +3902,12 @@ ${planningInstruction}` : planningInstruction;
               setCommandResult(result);
               setCommandState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _82 => _82(result)]);
+              _optionalChain([onComplete, 'optionalCall', _85 => _85(result)]);
             },
             (error) => {
               setCommandError(error);
               setCommandState("error");
-              _optionalChain([onError, 'optionalCall', _83 => _83(error)]);
+              _optionalChain([onError, 'optionalCall', _86 => _86(error)]);
             }
           );
         } else {
@@ -3464,7 +3920,7 @@ ${planningInstruction}` : planningInstruction;
           setCommandResult(result);
           setCommandState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _84 => _84(result)]);
+          _optionalChain([onComplete, 'optionalCall', _87 => _87(result)]);
         }
       } else {
         const commandInstruction = `CRITICAL COMMAND MODE: Maximum 10 words per response. Execute the command immediately. Make reasonable assumptions based on context. Use sensible defaults for missing details. DO NOT ask questions unless something is truly impossible without user input (e.g., missing required password). State what you're doing or the result. Examples: "Analyzing customer data from last quarter..." or "Created 5 new database entries successfully" or "Search complete: found 12 matching results". NO greetings, NO filler words, NO clarification requests. Action/result only.`;
@@ -3494,16 +3950,16 @@ ${commandInstruction}` : commandInstruction;
                 const displayName = chunk.tool_display_name || chunk.tool_name;
                 lastToolName = chunk.tool_name;
                 setCurrentToolName(displayName);
-                _optionalChain([onToolCall, 'optionalCall', _85 => _85(chunk.tool_name, chunk.tool_id || "")]);
+                _optionalChain([onToolCall, 'optionalCall', _88 => _88(chunk.tool_name, chunk.tool_id || "")]);
                 accumulatedContent = "";
                 setStreamedContent("");
               } else if (chunk.type === "tool_result") {
-                _optionalChain([onToolResult, 'optionalCall', _86 => _86(lastToolName, chunk.content)]);
+                _optionalChain([onToolResult, 'optionalCall', _89 => _89(lastToolName, chunk.content)]);
                 setCurrentToolName(null);
               } else if (chunk.type === "thread_id" && chunk.thread_id) {
                 if (!currentThreadId) {
                   setCurrentThreadId(chunk.thread_id);
-                  _optionalChain([onThreadChange, 'optionalCall', _87 => _87(chunk.thread_id)]);
+                  _optionalChain([onThreadChange, 'optionalCall', _90 => _90(chunk.thread_id)]);
                 }
               } else if (chunk.type === "request_id" && chunk.request_id) {
                 setCurrentRequestId(chunk.request_id);
@@ -3519,13 +3975,13 @@ ${commandInstruction}` : commandInstruction;
               setCommandState("success");
               setProgress(100);
               setCurrentRequestId(null);
-              _optionalChain([onComplete, 'optionalCall', _88 => _88(result)]);
+              _optionalChain([onComplete, 'optionalCall', _91 => _91(result)]);
             },
             (error) => {
               setCommandError(error);
               setCommandState("error");
               setCurrentRequestId(null);
-              _optionalChain([onError, 'optionalCall', _89 => _89(error)]);
+              _optionalChain([onError, 'optionalCall', _92 => _92(error)]);
             }
           );
         } else {
@@ -3545,14 +4001,14 @@ ${commandInstruction}` : commandInstruction;
           setCommandResult(result);
           setCommandState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _90 => _90(result)]);
+          _optionalChain([onComplete, 'optionalCall', _93 => _93(result)]);
         }
       }
     } catch (err) {
       const error = err instanceof Error ? err : new Error("Unknown error");
       setCommandError(error);
       setCommandState("error");
-      _optionalChain([onError, 'optionalCall', _91 => _91(error)]);
+      _optionalChain([onError, 'optionalCall', _94 => _94(error)]);
     }
   };
   const resetCommand = () => {
@@ -3600,12 +4056,15 @@ ${planToExecute}`;
   };
   const isCompact = commandVariant === "compact";
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("apteva-chat flex flex-col h-full", variant !== "default" && `apteva-chat-${variant}`, className), children: [
-    showHeader && mode === "chat" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-chat-header px-4 py-3 flex items-center justify-between", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-chat-title", children: headerTitle }),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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" })
+    showHeader && mode === "chat" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-chat-header px-4 py-3", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+      onHeaderBack && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { onClick: onHeaderBack, className: "apteva-chat-back", style: { flexShrink: 0 }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 12L6 8l4-4" }) }) }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-chat-title", children: headerTitle }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -3645,8 +4104,8 @@ ${planToExecute}`;
           executeCommand(text, files);
         },
         state: commandState,
-        response: _optionalChain([commandResult, 'optionalAccess', _92 => _92.data, 'optionalAccess', _93 => _93.summary]) || _optionalChain([commandResult, 'optionalAccess', _94 => _94.message]),
-        error: _optionalChain([commandError, 'optionalAccess', _95 => _95.message]),
+        response: _optionalChain([commandResult, 'optionalAccess', _95 => _95.data, 'optionalAccess', _96 => _96.summary]) || _optionalChain([commandResult, 'optionalAccess', _97 => _97.message]),
+        error: _optionalChain([commandError, 'optionalAccess', _98 => _98.message]),
         plan,
         streamedContent,
         toolName: currentToolName,
@@ -3814,13 +4273,13 @@ ${planningInstruction}` : planningInstruction;
             const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
             setError(error2);
             setState("error");
-            _optionalChain([onError, 'optionalCall', _96 => _96(error2)]);
+            _optionalChain([onError, 'optionalCall', _99 => _99(error2)]);
           });
         } catch (err) {
           const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
           setError(error2);
           setState("error");
-          _optionalChain([onError, 'optionalCall', _97 => _97(error2)]);
+          _optionalChain([onError, 'optionalCall', _100 => _100(error2)]);
         }
       }
       return;
@@ -3831,7 +4290,7 @@ ${planningInstruction}` : planningInstruction;
     setStreamedContent("");
     setCommand("");
     setUploadedFiles([]);
-    _optionalChain([onStart, 'optionalCall', _98 => _98()]);
+    _optionalChain([onStart, 'optionalCall', _101 => _101()]);
     try {
       if (useMock) {
         if (enableStreaming) {
@@ -3842,16 +4301,16 @@ ${planningInstruction}` : planningInstruction;
               if (chunk.type === "token" && chunk.content) {
                 accumulatedContent += chunk.content;
                 setStreamedContent(accumulatedContent);
-                _optionalChain([onChunk, 'optionalCall', _99 => _99(chunk.content)]);
+                _optionalChain([onChunk, 'optionalCall', _102 => _102(chunk.content)]);
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
-                _optionalChain([onProgress, 'optionalCall', _100 => _100(estimatedProgress)]);
+                _optionalChain([onProgress, 'optionalCall', _103 => _103(estimatedProgress)]);
               } else if (chunk.type === "widget" && chunk.widget) {
                 const widget = chunk.widget;
                 setResult((prev) => ({
                   success: true,
-                  data: _optionalChain([prev, 'optionalAccess', _101 => _101.data]) || {},
-                  widgets: [..._optionalChain([prev, 'optionalAccess', _102 => _102.widgets]) || [], widget],
+                  data: _optionalChain([prev, 'optionalAccess', _104 => _104.data]) || {},
+                  widgets: [..._optionalChain([prev, 'optionalAccess', _105 => _105.widgets]) || [], widget],
                   message: accumulatedContent || "Command executed successfully"
                 }));
               }
@@ -3871,19 +4330,19 @@ ${planningInstruction}` : planningInstruction;
               setResult(result2);
               setState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _103 => _103(result2)]);
+              _optionalChain([onComplete, 'optionalCall', _106 => _106(result2)]);
             },
             (error2) => {
               setError(error2);
               setState("error");
-              _optionalChain([onError, 'optionalCall', _104 => _104(error2)]);
+              _optionalChain([onError, 'optionalCall', _107 => _107(error2)]);
             }
           );
         } else {
           const progressInterval = setInterval(() => {
             setProgress((prev) => {
               const next = Math.min(prev + 10, 90);
-              _optionalChain([onProgress, 'optionalCall', _105 => _105(next)]);
+              _optionalChain([onProgress, 'optionalCall', _108 => _108(next)]);
               return next;
             });
           }, 200);
@@ -3907,7 +4366,7 @@ ${planningInstruction}` : planningInstruction;
           setResult(result2);
           setState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _106 => _106(result2)]);
+          _optionalChain([onComplete, 'optionalCall', _109 => _109(result2)]);
         }
       } else {
         if (enableStreaming) {
@@ -3953,16 +4412,16 @@ ${commandInstruction}` : commandInstruction;
               if (chunk.type === "token" && chunk.content) {
                 accumulatedContent += chunk.content;
                 setStreamedContent(accumulatedContent);
-                _optionalChain([onChunk, 'optionalCall', _107 => _107(chunk.content)]);
+                _optionalChain([onChunk, 'optionalCall', _110 => _110(chunk.content)]);
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
-                _optionalChain([onProgress, 'optionalCall', _108 => _108(estimatedProgress)]);
+                _optionalChain([onProgress, 'optionalCall', _111 => _111(estimatedProgress)]);
               } else if (chunk.type === "widget" && chunk.widget) {
                 const widget = chunk.widget;
                 setResult((prev) => ({
                   success: true,
-                  data: _optionalChain([prev, 'optionalAccess', _109 => _109.data]) || {},
-                  widgets: [..._optionalChain([prev, 'optionalAccess', _110 => _110.widgets]) || [], widget],
+                  data: _optionalChain([prev, 'optionalAccess', _112 => _112.data]) || {},
+                  widgets: [..._optionalChain([prev, 'optionalAccess', _113 => _113.widgets]) || [], widget],
                   message: accumulatedContent || "Command executed successfully"
                 }));
               }
@@ -3982,20 +4441,20 @@ ${commandInstruction}` : commandInstruction;
               setResult(result2);
               setState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _111 => _111(result2)]);
+              _optionalChain([onComplete, 'optionalCall', _114 => _114(result2)]);
             },
             (error2) => {
               const err = error2 instanceof Error ? error2 : new Error("Unknown error");
               setError(err);
               setState("error");
-              _optionalChain([onError, 'optionalCall', _112 => _112(err)]);
+              _optionalChain([onError, 'optionalCall', _115 => _115(err)]);
             }
           );
         } else {
           const progressInterval = setInterval(() => {
             setProgress((prev) => {
               const next = Math.min(prev + 10, 90);
-              _optionalChain([onProgress, 'optionalCall', _113 => _113(next)]);
+              _optionalChain([onProgress, 'optionalCall', _116 => _116(next)]);
               return next;
             });
           }, 200);
@@ -4051,14 +4510,14 @@ ${commandInstruction}` : commandInstruction;
           setResult(result2);
           setState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _114 => _114(result2)]);
+          _optionalChain([onComplete, 'optionalCall', _117 => _117(result2)]);
         }
       }
     } catch (err) {
       const error2 = err instanceof Error ? err : new Error("Unknown error");
       setError(error2);
       setState("error");
-      _optionalChain([onError, 'optionalCall', _115 => _115(error2)]);
+      _optionalChain([onError, 'optionalCall', _118 => _118(error2)]);
     }
   };
   const resetCommand = () => {
@@ -4091,14 +4550,14 @@ ${planToExecute}`;
   };
   const handleFileSelect = async (e) => {
     if (e.target.files && e.target.files.length > 0) {
-      _optionalChain([onFileUpload, 'optionalCall', _116 => _116(e.target.files)]);
+      _optionalChain([onFileUpload, 'optionalCall', _119 => _119(e.target.files)]);
       const files = [];
       for (let i = 0; i < e.target.files.length; i++) {
         const file = e.target.files[i];
         const reader = new FileReader();
         await new Promise((resolve) => {
           reader.onload = (event) => {
-            if (_optionalChain([event, 'access', _117 => _117.target, 'optionalAccess', _118 => _118.result])) {
+            if (_optionalChain([event, 'access', _120 => _120.target, 'optionalAccess', _121 => _121.result])) {
               const fullDataUrl = event.target.result;
               const base64Data = fullDataUrl.split(",")[1];
               if (file.type.startsWith("image/")) {
@@ -4192,7 +4651,7 @@ ${planToExecute}`;
               enableFileUpload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "button",
                 {
-                  onClick: () => _optionalChain([fileInputRef, 'access', _119 => _119.current, 'optionalAccess', _120 => _120.click, 'call', _121 => _121()]),
+                  onClick: () => _optionalChain([fileInputRef, 'access', _122 => _122.current, 'optionalAccess', _123 => _123.click, 'call', _124 => _124()]),
                   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__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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)" }) })
@@ -4411,7 +4870,7 @@ ${planToExecute}`;
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
               /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "text-sm font-semibold text-red-800 dark:text-red-400", children: "Error" }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: _optionalChain([error, 'optionalAccess', _122 => _122.message]) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: _optionalChain([error, 'optionalAccess', _125 => _125.message]) })
               ] })
             ] }) }),
             allowInput && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -4439,7 +4898,7 @@ ${planToExecute}`;
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-green-700 dark:text-green-300 text-sm", children: "Command executed successfully" })
               ] })
             ] }),
-            _optionalChain([result, 'access', _123 => _123.data, 'optionalAccess', _124 => _124.summary]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-neutral-700 dark:text-neutral-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
+            _optionalChain([result, 'access', _126 => _126.data, 'optionalAccess', _127 => _127.summary]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "div", { className: "space-y-3", children: result.widgets.map((widget) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               WidgetRenderer,
               {
@@ -4490,7 +4949,7 @@ ${planToExecute}`;
             enableFileUpload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
-                onClick: () => _optionalChain([fileInputRef, 'access', _125 => _125.current, 'optionalAccess', _126 => _126.click, 'call', _127 => _127()]),
+                onClick: () => _optionalChain([fileInputRef, 'access', _128 => _128.current, 'optionalAccess', _129 => _129.click, 'call', _130 => _130()]),
                 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__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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)" }) })
@@ -4676,25 +5135,25 @@ function Prompt({
     const newValue = e.target.value;
     if (!maxLength || newValue.length <= maxLength) {
       setValue(newValue);
-      _optionalChain([onChange, 'optionalCall', _128 => _128(newValue)]);
+      _optionalChain([onChange, 'optionalCall', _131 => _131(newValue)]);
     }
   };
   const handleSubmit = async () => {
     if (value.length < minLength) return;
-    _optionalChain([onSubmit, 'optionalCall', _129 => _129(value)]);
+    _optionalChain([onSubmit, 'optionalCall', _132 => _132(value)]);
     setIsLoading(true);
     try {
       if (useMock) {
         await new Promise((resolve) => setTimeout(resolve, 1500));
         const mockResult = `Enhanced version: ${value} [AI-generated content]`;
-        _optionalChain([onResult, 'optionalCall', _130 => _130(mockResult)]);
+        _optionalChain([onResult, 'optionalCall', _133 => _133(mockResult)]);
         setValue("");
       } else {
         const response = await aptevaClient.chat({
           agent_id: agentId,
           message: value
         });
-        _optionalChain([onResult, 'optionalCall', _131 => _131(response.message)]);
+        _optionalChain([onResult, 'optionalCall', _134 => _134(response.message)]);
         setValue("");
       }
     } catch (error) {
@@ -4789,7 +5248,7 @@ function Stream({
   }, [autoStart]);
   const startStreaming = async () => {
     setIsStreaming(true);
-    _optionalChain([onStart, 'optionalCall', _132 => _132()]);
+    _optionalChain([onStart, 'optionalCall', _135 => _135()]);
     try {
       if (useMock) {
         const mockText = "This is a simulated streaming response from the AI agent. In a real implementation, this would stream data from your backend API. The text appears word by word to simulate the streaming effect. You can customize the typing speed and styling based on your needs.";
@@ -4797,13 +5256,13 @@ function Stream({
           mockText,
           (chunk) => {
             setText((prev) => prev + chunk);
-            _optionalChain([onChunk, 'optionalCall', _133 => _133(chunk)]);
+            _optionalChain([onChunk, 'optionalCall', _136 => _136(chunk)]);
           },
           typingSpeed
         );
         setIsComplete(true);
         setIsStreaming(false);
-        _optionalChain([onComplete, 'optionalCall', _134 => _134(text + mockText)]);
+        _optionalChain([onComplete, 'optionalCall', _137 => _137(text + mockText)]);
       } else {
         let accumulatedText = "";
         await aptevaClient.chatStream(
@@ -4816,24 +5275,24 @@ function Stream({
             if (chunk.type === "token" && chunk.content) {
               accumulatedText += chunk.content;
               setText(accumulatedText);
-              _optionalChain([onChunk, 'optionalCall', _135 => _135(chunk.content)]);
+              _optionalChain([onChunk, 'optionalCall', _138 => _138(chunk.content)]);
             }
           },
           () => {
             setIsComplete(true);
             setIsStreaming(false);
-            _optionalChain([onComplete, 'optionalCall', _136 => _136(accumulatedText)]);
+            _optionalChain([onComplete, 'optionalCall', _139 => _139(accumulatedText)]);
           },
           (error) => {
             const err = error instanceof Error ? error : new Error("Streaming error");
-            _optionalChain([onError, 'optionalCall', _137 => _137(err)]);
+            _optionalChain([onError, 'optionalCall', _140 => _140(err)]);
             setIsStreaming(false);
           }
         );
       }
     } catch (error) {
       const err = error instanceof Error ? error : new Error("Streaming error");
-      _optionalChain([onError, 'optionalCall', _138 => _138(err)]);
+      _optionalChain([onError, 'optionalCall', _141 => _141(err)]);
       setIsStreaming(false);
     }
   };
@@ -4925,7 +5384,7 @@ function ThreadList({
 }) {
   const [searchQuery, setSearchQuery] = _react.useState.call(void 0, "");
   const filteredThreads = threads.filter(
-    (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || _optionalChain([thread, 'access', _139 => _139.preview, 'optionalAccess', _140 => _140.toLowerCase, 'call', _141 => _141(), 'access', _142 => _142.includes, 'call', _143 => _143(searchQuery.toLowerCase())])
+    (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || _optionalChain([thread, 'access', _142 => _142.preview, 'optionalAccess', _143 => _143.toLowerCase, 'call', _144 => _144(), 'access', _145 => _145.includes, 'call', _146 => _146(searchQuery.toLowerCase())])
   );
   const groupedThreads = groupBy === "date" ? groupThreadsByDate(filteredThreads) : { All: filteredThreads };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col h-full", children: [
@@ -4947,8 +5406,8 @@ function ThreadList({
           {
             thread,
             isActive: thread.id === currentThreadId,
-            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _144 => _144(thread.id)]),
-            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _145 => _145(thread.id)])
+            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _147 => _147(thread.id)]),
+            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _148 => _148(thread.id)])
           },
           thread.id
         ))
@@ -5010,7 +5469,7 @@ function Threads({
       threads.slice(0, 5).map((thread) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
-          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _146 => _146(thread.id)]),
+          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _149 => _149(thread.id)]),
           className: cn(
             "px-4 py-2 whitespace-nowrap font-medium transition-colors",
             thread.id === currentThreadId ? "border-b-2 border-apteva-500 text-apteva-500" : "text-neutral-600 hover:text-neutral-900"
@@ -5052,6 +5511,418 @@ function Threads({
   ] });
 }
 
+// src/components/AutoInterface/AutoInterface.tsx
+
+
+// src/components/AutoInterface/LayoutRenderer.tsx
+
+
+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__ */ _jsxruntime.jsx.call(void 0, PageLayout, { node, renderNode });
+    case "row":
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, RowLayout, { node, renderNode });
+    case "columns":
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ColumnsLayout, { node, renderNode });
+    case "stack":
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StackLayout, { node, renderNode });
+    case "sidebar":
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, SidebarLayout, { node, renderNode });
+    case "tabs":
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabsLayout, { node, renderNode });
+    default:
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "space-y-4", children: children.map((child) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: renderNode(child) }, child.id)) });
+  }
+}
+function PageLayout({ node, renderNode }) {
+  const { title, padding = "md", maxWidth = "xl" } = node.props || {};
+  const children = node.children || [];
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("w-full mx-auto", paddingClasses[padding], maxWidthClasses[maxWidth]), children: [
+    title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h1", { className: "!text-2xl font-bold !text-neutral-900 dark:!text-white mb-6", children: title }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "space-y-6", children: children.map((child) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: cn("grid", gapClasses[gap], alignClasses[align]),
+      style: { gridTemplateColumns: templateColumns },
+      children: children.map((child) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: cn("grid", gapClasses[gap]),
+      style: { gridTemplateColumns: `repeat(${colCount}, 1fr)` },
+      children: children.map((child) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("flex flex-col", gapClasses[gap], alignClasses[align]), children: children.map((child) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: "flex-shrink-0 overflow-y-auto border-neutral-200 dark:border-neutral-700",
+      style: { width },
+      children: renderNode(sidebarChild)
+    }
+  );
+  const main = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 overflow-y-auto min-w-0", children: mainChildren.map((child) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: renderNode(child) }, child.id)) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex h-full gap-4", children: side === "left" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    sidebar,
+    main
+  ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    main,
+    sidebar
+  ] }) });
+}
+function TabsLayout({ node, renderNode }) {
+  const { labels = [], defaultTab = 0 } = node.props || {};
+  const children = node.children || [];
+  const [activeTab, setActiveTab] = _react.useState.call(void 0, defaultTab);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex border-b border-neutral-200 dark:border-neutral-700 mb-4", children: labels.map((label, idx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "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
+
+var STRUCTURAL_KEYS = /* @__PURE__ */ new Set(["type", "id", "layout", "props", "children", "actions", "metadata", "isStreaming"]);
+function normalizeNode(n) {
+  let node = { ...n };
+  if (node.type === "widget" && _optionalChain([node, 'access', _150 => _150.props, 'optionalAccess', _151 => _151.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__ */ _jsxruntime.jsx.call(void 0, 
+        LayoutRenderer,
+        {
+          node: n,
+          onAction,
+          renderNode
+        },
+        n.id
+      );
+    }
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      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__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: renderNode(node) });
+}
+
+// src/components/AutoInterface/InterfaceSkeleton.tsx
+
+function InterfaceSkeleton({ className }) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("animate-pulse space-y-6 p-6", className), children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-7 bg-neutral-200 dark:bg-neutral-700 rounded w-1/3" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "grid grid-cols-4 gap-4", children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "border border-neutral-200 dark:border-neutral-700 rounded-xl p-5 space-y-2", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-2/3" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-8 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2" })
+    ] }, i)) }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid grid-cols-3 gap-4", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "col-span-2 border border-neutral-200 dark:border-neutral-700 rounded-xl p-5 space-y-3", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/4" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-40 bg-neutral-200 dark:bg-neutral-700 rounded" })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "border border-neutral-200 dark:border-neutral-700 rounded-xl p-5 space-y-3", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2" }),
+        [1, 2, 3].map((i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-10 bg-neutral-200 dark:bg-neutral-700 rounded" }, i))
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/AutoInterface/AutoInterface.tsx
+
+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] = _react.useState.call(void 0, initialInterface || null);
+  const [isGenerating, setIsGenerating] = _react.useState.call(void 0, false);
+  const [chatCollapsed, setChatCollapsed] = _react.useState.call(void 0, false);
+  const chatRef = _react.useRef.call(void 0, null);
+  const systemContext = [
+    generateInterfaceContext(),
+    context || ""
+  ].filter(Boolean).join("\n\n");
+  const updateInterface = _react.useCallback.call(void 0, (newSpec) => {
+    setInterfaceSpec(newSpec);
+    _optionalChain([onInterfaceChange, 'optionalCall', _152 => _152(newSpec)]);
+  }, [onInterfaceChange]);
+  const handleAction = _react.useCallback.call(void 0, (action) => {
+    _optionalChain([onAction, 'optionalCall', _153 => _153(action)]);
+    if (chatRef.current) {
+      chatRef.current.sendMessage(
+        `[Action: ${action.type} on widget ${action.widgetId || "unknown"}. Payload: ${JSON.stringify(action.payload)}]`
+      );
+    }
+  }, [onAction]);
+  const handleMessageComplete = _react.useCallback.call(void 0, (result) => {
+    if (!_optionalChain([result, 'optionalAccess', _154 => _154.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]);
+  _react.useEffect.call(void 0, () => {
+    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);
+      _optionalChain([onError, 'optionalCall', _155 => _155(err instanceof Error ? err : new Error(String(err)))]);
+      setIsGenerating(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [initialPrompt]);
+  const hasInterface = interfaceSpec !== null;
+  const showSkeleton = isGenerating && !hasInterface;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn(
+    "flex h-full bg-neutral-50 dark:bg-black",
+    chatPosition === "bottom" ? "flex-col" : "flex-row",
+    className
+  ), children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn(
+      "flex-1 overflow-y-auto min-w-0",
+      hasInterface || showSkeleton ? "" : "hidden"
+    ), children: [
+      showSkeleton && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, InterfaceSkeleton, {}),
+      hasInterface && interfaceSpec && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "p-4", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        InterfaceRenderer,
+        {
+          node: interfaceSpec.root,
+          onAction: handleAction
+        }
+      ) })
+    ] }),
+    chatCollapsible && hasInterface && chatPosition === "right" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "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__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-xs !text-neutral-500 dark:!text-neutral-400", children: chatCollapsed ? "\u25C0" : "\u25B6" })
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "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__ */ _jsxruntime.jsx.call(void 0, 
+          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() {
@@ -5076,6 +5947,139 @@ function getThemeScript() {
   return themeScript;
 }
 
+// src/hooks/useInterfaceState.ts
+
+function useInterfaceState(initialSpec) {
+  const [spec, setSpec] = _react.useState.call(void 0, initialSpec || null);
+  const [isStreaming, setIsStreaming] = _react.useState.call(void 0, false);
+  const setInterface = _react.useCallback.call(void 0, (newSpec) => {
+    setSpec(newSpec);
+  }, []);
+  const clearInterface = _react.useCallback.call(void 0, () => {
+    setSpec(null);
+  }, []);
+  const applyInterfaceUpdate = _react.useCallback.call(void 0, (update) => {
+    setSpec((prev) => {
+      if (!prev) return prev;
+      return applyUpdate(prev, update);
+    });
+  }, []);
+  const applyInterfaceUpdates = _react.useCallback.call(void 0, (updates) => {
+    setSpec((prev) => {
+      if (!prev) return prev;
+      return applyUpdates(prev, updates);
+    });
+  }, []);
+  const getNode = _react.useCallback.call(void 0, (id) => {
+    if (!spec) return null;
+    return findNode(spec.root, id);
+  }, [spec]);
+  return {
+    spec,
+    isStreaming,
+    setInterface,
+    clearInterface,
+    applyInterfaceUpdate,
+    applyInterfaceUpdates,
+    setIsStreaming,
+    getNode
+  };
+}
+
+// src/hooks/useInterfaceAI.ts
+
+function useInterfaceAI({
+  agentId,
+  apiUrl,
+  apiKey,
+  context,
+  onInterface,
+  onUpdates,
+  onError,
+  onStreamStart,
+  onStreamEnd
+}) {
+  const threadIdRef = _react.useRef.call(void 0, null);
+  const accumulatedTextRef = _react.useRef.call(void 0, "");
+  if (apiUrl || apiKey) {
+    aptevaClient.configure({
+      ...apiUrl && { apiUrl },
+      ...apiKey && { apiKey }
+    });
+  }
+  const sendMessage = _react.useCallback.call(void 0, async (message) => {
+    accumulatedTextRef.current = "";
+    _optionalChain([onStreamStart, 'optionalCall', _156 => _156()]);
+    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) {
+              _optionalChain([onInterface, 'optionalCall', _157 => _157(parsed)]);
+            }
+            const updates = parseUpdatesFromText(accumulatedTextRef.current);
+            if (updates.length > 0) {
+              _optionalChain([onUpdates, 'optionalCall', _158 => _158(updates)]);
+            }
+          }
+        },
+        // onComplete
+        () => {
+          _optionalChain([onStreamEnd, 'optionalCall', _159 => _159()]);
+        },
+        // onError
+        (error) => {
+          _optionalChain([onError, 'optionalCall', _160 => _160(error)]);
+          _optionalChain([onStreamEnd, 'optionalCall', _161 => _161()]);
+        }
+      );
+    } catch (error) {
+      _optionalChain([onError, 'optionalCall', _162 => _162(error instanceof Error ? error : new Error("Unknown error"))]);
+      _optionalChain([onStreamEnd, 'optionalCall', _163 => _163()]);
+    }
+  }, [agentId, context, onInterface, onUpdates, onError, onStreamStart, onStreamEnd]);
+  return {
+    sendMessage,
+    threadId: threadIdRef.current
+  };
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -5092,5 +6096,5 @@ function getThemeScript() {
 
 
 
-exports.AptevaClient = AptevaClient; exports.Button = Button; exports.Card = Card; exports.Chat = Chat; exports.Command = Command; exports.List = List; exports.Prompt = Prompt; exports.Stream = Stream; exports.Threads = Threads; exports.Widgets = Widgets; exports.aptevaClient = aptevaClient; exports.cn = cn; exports.getThemeScript = getThemeScript; exports.mockMessages = mockMessages; exports.mockThreads = mockThreads; exports.mockWidgets = mockWidgets;
+exports.AptevaClient = AptevaClient; exports.AutoInterface = AutoInterface; exports.Button = Button; exports.Card = Card; exports.Chat = Chat; exports.Command = Command; exports.InterfaceRenderer = InterfaceRenderer; exports.InterfaceSkeleton = InterfaceSkeleton; exports.Kpi = Kpi; exports.LayoutRenderer = LayoutRenderer; exports.List = List; exports.Prompt = Prompt; exports.Spacer = Spacer; exports.Stream = Stream; exports.TextBlock = TextBlock; exports.Threads = Threads; exports.Widgets = Widgets; exports.applyUpdate = applyUpdate; exports.applyUpdates = applyUpdates; exports.aptevaClient = aptevaClient; exports.cn = cn; exports.containsInterface = containsInterface; exports.convertApiMessages = convertApiMessages; exports.findNode = findNode; exports.generateCompactInterfaceContext = generateCompactInterfaceContext; exports.generateInterfaceContext = generateInterfaceContext; exports.getThemeScript = getThemeScript; exports.mockMessages = mockMessages; exports.mockThreads = mockThreads; exports.mockWidgets = mockWidgets; exports.parseInterfaceFromText = parseInterfaceFromText; exports.parseUpdatesFromText = parseUpdatesFromText; exports.stripInterface = stripInterface; exports.useInterfaceAI = useInterfaceAI; exports.useInterfaceState = useInterfaceState;
 //# sourceMappingURL=index.js.map