@makemore/agent-frontend 2.8.1 → 2.9.0

package/dist/react.esm.js

@@ -1,9 +1,9 @@
-var st=Object.defineProperty;var at=(e,t,n)=>t in e?st(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;var Je=(e,t,n)=>(at(e,typeof t!="symbol"?t+"":t,n),n);import{html as J}from"htm/preact";import{useState as U,useEffect as ce,useCallback as te,useMemo as et}from"preact/compat";import{html as q}from"htm/preact";function ze(e){return e.replace(/_([a-z])/g,(t,n)=>n.toUpperCase())}function me(e){return e.replace(/[A-Z]/g,t=>`_${t.toLowerCase()}`)}function ne(e){return Array.isArray(e)?e.map(ne):e!==null&&typeof e=="object"?Object.fromEntries(Object.entries(e).map(([t,n])=>[ze(t),ne(n)])):e}function se(e){return Array.isArray(e)?e.map(se):e!==null&&typeof e=="object"?Object.fromEntries(Object.entries(e).map(([t,n])=>[me(t),se(n)])):e}function ae(){return"msg-"+Date.now()+"-"+Math.random().toString(36).substr(2,9)}function O(e){let t=document.createElement("div");return t.textContent=e,t.innerHTML}function ke(e){if(!e)return"";try{let t=new Date(e),o=new Date-t,i=Math.floor(o/6e4),c=Math.floor(o/36e5),w=Math.floor(o/864e5);return i<1?"Just now":i<60?`${i}m ago`:c<24?`${c}h ago`:w<7?`${w}d ago`:t.toLocaleDateString()}catch{return""}}function be(e,t=null){if(t)return t(e);let n=O(e);return n=n.replace(/\*\*(.+?)\*\*/g,"<strong>$1</strong>"),n=n.replace(/__(.+?)__/g,"<strong>$1</strong>"),n=n.replace(/\*(.+?)\*/g,"<em>$1</em>"),n=n.replace(/_(.+?)_/g,"<em>$1</em>"),n=n.replace(/`(.+?)`/g,"<code>$1</code>"),n=n.replace(/\[(.+?)\]\((.+?)\)/g,'<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'),n=n.replace(/\n/g,"<br>"),n}function Ce(e=""){let t=n=>e?`${n}_${e}`:n;return{get(n){try{return localStorage.getItem(t(n))}catch{return null}},set(n,o){try{let i=t(n);o===null?localStorage.removeItem(i):localStorage.setItem(i,o)}catch{}}}}function Se(e="csrftoken"){let t=document.cookie.split(";");for(let o of t){let[i,c]=o.trim().split("=");if(i===e)return decodeURIComponent(c)}let n=document.querySelector('meta[name="csrf-token"]');return n?n.getAttribute("content"):null}function oe(e){if(e===0)return"0 B";let t=1024,n=["B","KB","MB","GB"],o=Math.floor(Math.log(e)/Math.log(t));return parseFloat((e/Math.pow(t,o)).toFixed(1))+" "+n[o]}function re(e){return e?e.startsWith("image/")?"\u{1F5BC}\uFE0F":e.startsWith("video/")?"\u{1F3AC}":e.startsWith("audio/")?"\u{1F3B5}":e.includes("pdf")?"\u{1F4D5}":e.includes("spreadsheet")||e.includes("excel")?"\u{1F4CA}":e.includes("document")||e.includes("word")?"\u{1F4DD}":e.includes("presentation")||e.includes("powerpoint")?"\u{1F4FD}\uFE0F":e.includes("zip")||e.includes("compressed")?"\u{1F5DC}\uFE0F":(e.includes("text/"),"\u{1F4C4}"):"\u{1F4C4}"}function Te({config:e,debugMode:t,isExpanded:n,isSpeaking:o,messagesCount:i,isLoading:c,currentAgent:w,onClose:$,onToggleExpand:m,onToggleDebug:f,onToggleTTS:l,onClear:k,onToggleSidebar:p}){let{title:y,primaryColor:g,embedded:u,showConversationSidebar:h,showClearButton:v,showDebugButton:T,enableDebugMode:A,showTTSButton:D,showExpandButton:j,enableTTS:B,elevenLabsApiKey:N,ttsProxyUrl:P}=e,L=N||P;return q`
-    <div class="cw-header" style=${{backgroundColor:g}}>
-      ${h&&q`
+var ft=Object.defineProperty;var $t=(e,t,s)=>t in e?ft(e,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[t]=s;var Qe=(e,t,s)=>($t(e,typeof t!="symbol"?t+"":t,s),s);import{html as G}from"htm/preact";import{useState as q,useEffect as $e,useCallback as le,useMemo as ze}from"preact/compat";import{html as ee}from"htm/preact";function et(e){return e.replace(/_([a-z])/g,(t,s)=>s.toUpperCase())}function ve(e){return e.replace(/[A-Z]/g,t=>`_${t.toLowerCase()}`)}function ie(e){return Array.isArray(e)?e.map(ie):e!==null&&typeof e=="object"?Object.fromEntries(Object.entries(e).map(([t,s])=>[et(t),ie(s)])):e}function ce(e){return Array.isArray(e)?e.map(ce):e!==null&&typeof e=="object"?Object.fromEntries(Object.entries(e).map(([t,s])=>[ve(t),ce(s)])):e}function de(){return"msg-"+Date.now()+"-"+Math.random().toString(36).substr(2,9)}function H(e){let t=document.createElement("div");return t.textContent=e,t.innerHTML}function Me(e){if(!e)return"";try{let t=new Date(e),n=new Date-t,l=Math.floor(n/6e4),r=Math.floor(n/36e5),$=Math.floor(n/864e5);return l<1?"Just now":l<60?`${l}m ago`:r<24?`${r}h ago`:$<7?`${$}d ago`:t.toLocaleDateString()}catch{return""}}function xe(e,t=null){if(t)return t(e);let s=H(e);return s=s.replace(/\*\*(.+?)\*\*/g,"<strong>$1</strong>"),s=s.replace(/__(.+?)__/g,"<strong>$1</strong>"),s=s.replace(/\*(.+?)\*/g,"<em>$1</em>"),s=s.replace(/_(.+?)_/g,"<em>$1</em>"),s=s.replace(/`(.+?)`/g,"<code>$1</code>"),s=s.replace(/\[(.+?)\]\((.+?)\)/g,'<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'),s=s.replace(/\n/g,"<br>"),s}function Ee(e=""){let t=s=>e?`${s}_${e}`:s;return{get(s){try{return localStorage.getItem(t(s))}catch{return null}},set(s,n){try{let l=t(s);n===null?localStorage.removeItem(l):localStorage.setItem(l,n)}catch{}}}}function Ie(e="csrftoken"){let t=document.cookie.split(";");for(let n of t){let[l,r]=n.trim().split("=");if(l===e)return decodeURIComponent(r)}let s=document.querySelector('meta[name="csrf-token"]');return s?s.getAttribute("content"):null}function ue(e){if(e===0)return"0 B";let t=1024,s=["B","KB","MB","GB"],n=Math.floor(Math.log(e)/Math.log(t));return parseFloat((e/Math.pow(t,n)).toFixed(1))+" "+s[n]}function pe(e){return e?e.startsWith("image/")?"\u{1F5BC}\uFE0F":e.startsWith("video/")?"\u{1F3AC}":e.startsWith("audio/")?"\u{1F3B5}":e.includes("pdf")?"\u{1F4D5}":e.includes("spreadsheet")||e.includes("excel")?"\u{1F4CA}":e.includes("document")||e.includes("word")?"\u{1F4DD}":e.includes("presentation")||e.includes("powerpoint")?"\u{1F4FD}\uFE0F":e.includes("zip")||e.includes("compressed")?"\u{1F5DC}\uFE0F":(e.includes("text/"),"\u{1F4C4}"):"\u{1F4C4}"}function yt(e){if(!e||typeof e!="string")return 0;let t=e.replace("#","");if(t.length!==6&&t.length!==3)return 0;let s=t.length===3?t.split("").map(i=>i+i).join(""):t,n=parseInt(s.substr(0,2),16)/255,l=parseInt(s.substr(2,2),16)/255,r=parseInt(s.substr(4,2),16)/255,$=i=>i<=.03928?i/12.92:Math.pow((i+.055)/1.055,2.4);return .2126*$(n)+.7152*$(l)+.0722*$(r)}function tt(e){return yt(e)>.179?"#000000":"#ffffff"}function Ae({config:e,debugMode:t,isExpanded:s,isSpeaking:n,messagesCount:l,isLoading:r,currentAgent:$,onClose:i,onToggleExpand:f,onToggleDebug:y,onToggleTTS:u,onClear:k,onToggleSidebar:c}){let{title:C,primaryColor:a,embedded:g,showConversationSidebar:w,showClearButton:v,showDebugButton:T,enableDebugMode:m,showTTSButton:W,showExpandButton:U,enableTTS:I,elevenLabsApiKey:R,ttsProxyUrl:D}=e,P=R||D;return ee`
+    <div class="cw-header" style=${{backgroundColor:a}}>
+      ${w&&ee`
         <button
           class="cw-header-btn cw-hamburger"
-          onClick=${p}
+          onClick=${c}
           title="Conversations"
         >
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
@@ -15,72 +15,72 @@ var st=Object.defineProperty;var at=(e,t,n)=>t in e?st(e,t,{enumerable:!0,config
       `}
 
       <div class="cw-title-container">
-        <span class="cw-title">${O(y)}</span>
-        ${w&&q`
+        <span class="cw-title">${H(C)}</span>
+        ${$&&ee`
           <span class="cw-current-agent" title="Currently active agent">
             <span class="cw-agent-indicator">🤖</span>
-            <span class="cw-agent-name">${O(w.name||w.key)}</span>
+            <span class="cw-agent-name">${H($.name||$.key)}</span>
           </span>
         `}
       </div>
       
       <div class="cw-header-actions">
-        ${v&&q`
+        ${v&&ee`
           <button 
             class="cw-header-btn" 
             onClick=${k}
             title="Clear"
-            disabled=${c||i===0}
+            disabled=${r||l===0}
           >🗑️</button>
         `}
         
-        ${T&&A&&q`
+        ${T&&m&&ee`
           <button 
             class="cw-header-btn ${t?"cw-btn-active":""}" 
-            onClick=${f}
+            onClick=${y}
             title="Debug"
           >🐛</button>
         `}
         
-        ${D&&L&&q`
+        ${W&&P&&ee`
           <button 
-            class="cw-header-btn ${B?"cw-btn-active":""}" 
-            onClick=${l}
+            class="cw-header-btn ${I?"cw-btn-active":""}" 
+            onClick=${u}
             title="TTS"
-          >${B?"\u{1F50A}":"\u{1F507}"}</button>
+          >${I?"\u{1F50A}":"\u{1F507}"}</button>
         `}
         
-        ${j&&!u&&q`
+        ${U&&!g&&ee`
           <button 
             class="cw-header-btn" 
-            onClick=${m}
-            title=${n?"Minimize":"Expand"}
-          >${n?"\u2296":"\u2295"}</button>
+            onClick=${f}
+            title=${s?"Minimize":"Expand"}
+          >${s?"\u2296":"\u2295"}</button>
         `}
         
-        ${!u&&q`
+        ${!g&&ee`
           <button 
             class="cw-header-btn" 
-            onClick=${$}
+            onClick=${i}
             title="Close"
           >✕</button>
         `}
       </div>
     </div>
-  `}import{html as Q}from"htm/preact";import{useRef as Ge,useEffect as qe}from"preact/compat";import{html as F}from"htm/preact";import{useState as fe,useRef as ot,useEffect as rt}from"preact/compat";function Me({msg:e,show:t,onToggle:n}){return t?F`
+  `}import{html as se}from"htm/preact";import{useRef as nt,useEffect as at}from"preact/compat";import{html as K}from"htm/preact";import{useState as ke,useRef as wt,useEffect as vt}from"preact/compat";function Re({msg:e,show:t,onToggle:s}){return t?K`
     <div class="cw-debug-payload">
-      <button class="cw-debug-payload-close" onClick=${n}>×</button>
+      <button class="cw-debug-payload-close" onClick=${s}>×</button>
       <pre class="cw-debug-payload-content">${JSON.stringify(e,null,2)}</pre>
     </div>
-  `:F`
+  `:K`
       <button
         class="cw-debug-payload-btn"
-        onClick=${n}
+        onClick=${s}
         title="Show message payload"
       >{ }</button>
-    `}function Ve({onEdit:e,onRetry:t,isLoading:n,position:o,showEdit:i=!0}){return n?null:F`
-    <div class="cw-message-actions cw-message-actions-${o||"left"}">
-      ${i&&F`
+    `}function st({onEdit:e,onRetry:t,isLoading:s,position:n,showEdit:l=!0}){return s?null:K`
+    <div class="cw-message-actions cw-message-actions-${n||"left"}">
+      ${l&&K`
         <button
           class="cw-message-action-btn"
           onClick=${e}
@@ -104,135 +104,135 @@ var st=Object.defineProperty;var at=(e,t,n)=>t in e?st(e,t,{enumerable:!0,config
         </svg>
       </button>
     </div>
-  `}function it({initialContent:e,onSave:t,onCancel:n}){let[o,i]=fe(e),c=ot(null);return rt(()=>{c.current&&(c.current.focus(),c.current.setSelectionRange(o.length,o.length),c.current.style.height="auto",c.current.style.height=c.current.scrollHeight+"px")},[]),F`
+  `}function kt({initialContent:e,onSave:t,onCancel:s}){let[n,l]=ke(e),r=wt(null);return vt(()=>{r.current&&(r.current.focus(),r.current.setSelectionRange(n.length,n.length),r.current.style.height="auto",r.current.style.height=r.current.scrollHeight+"px")},[]),K`
     <div class="cw-inline-edit">
       <textarea
-        ref=${c}
+        ref=${r}
         class="cw-inline-edit-input"
-        value=${o}
-        onInput=${m=>{i(m.target.value),m.target.style.height="auto",m.target.style.height=m.target.scrollHeight+"px"}}
-        onKeyDown=${m=>{m.key==="Enter"&&!m.shiftKey?(m.preventDefault(),o.trim()&&t(o.trim())):m.key==="Escape"&&n()}}
+        value=${n}
+        onInput=${f=>{l(f.target.value),f.target.style.height="auto",f.target.style.height=f.target.scrollHeight+"px"}}
+        onKeyDown=${f=>{f.key==="Enter"&&!f.shiftKey?(f.preventDefault(),n.trim()&&t(n.trim())):f.key==="Escape"&&s()}}
         rows="1"
       />
       <div class="cw-inline-edit-actions">
         <button
           class="cw-inline-edit-btn cw-inline-edit-cancel"
-          onClick=${n}
+          onClick=${s}
           title="Cancel (Esc)"
         >Cancel</button>
         <button
           class="cw-inline-edit-btn cw-inline-edit-save"
-          onClick=${()=>o.trim()&&t(o.trim())}
-          disabled=${!o.trim()}
+          onClick=${()=>n.trim()&&t(n.trim())}
+          disabled=${!n.trim()}
           title="Save & Resend (Enter)"
         >Save & Send</button>
       </div>
     </div>
-  `}function _e({msg:e,debugMode:t,markdownParser:n,onEdit:o,onRetry:i,isLoading:c,messageIndex:w}){let[$,m]=fe(!1),[f,l]=fe(!1),[k,p]=fe(!1),y=e.role==="user",g=e.role==="system",u=e.type==="tool_call",h=e.type==="tool_result",v=e.type==="error",T=e.type==="sub_agent_start",A=e.type==="sub_agent_end",D=e.type==="agent_context";if(g&&!t)return null;if(T||A||D)return F`
-      <div class="cw-agent-context ${T?"cw-agent-delegating":""} ${A?"cw-agent-returned":""}" style="position: relative;">
-        <span class="cw-agent-context-icon">${T?"\u{1F517}":A?"\u2713":"\u{1F916}"}</span>
+  `}function De({msg:e,debugMode:t,markdownParser:s,onEdit:n,onRetry:l,isLoading:r,messageIndex:$}){let[i,f]=ke(!1),[y,u]=ke(!1),[k,c]=ke(!1),C=e.role==="user",a=e.role==="system",g=e.type==="tool_call",w=e.type==="tool_result",v=e.type==="error",T=e.type==="sub_agent_start",m=e.type==="sub_agent_end",W=e.type==="agent_context";if(a&&!t)return null;if(T||m||W)return K`
+      <div class="cw-agent-context ${T?"cw-agent-delegating":""} ${m?"cw-agent-returned":""}" style="position: relative;">
+        <span class="cw-agent-context-icon">${T?"\u{1F517}":m?"\u2713":"\u{1F916}"}</span>
         <span class="cw-agent-context-text">${e.content}</span>
-        ${e.metadata?.agentName&&F`
+        ${e.metadata?.agentName&&K`
           <span class="cw-agent-context-name">${e.metadata.agentName}</span>
         `}
-        ${t&&F`<${Me} msg=${e} show=${f} onToggle=${()=>l(!f)} />`}
+        ${t&&K`<${Re} msg=${e} show=${y} onToggle=${()=>u(!y)} />`}
       </div>
-    `;if(u||h){let b=e.metadata?.arguments||e.metadata?.result,_=r=>{if(typeof r=="string")try{return JSON.stringify(JSON.parse(r),null,2)}catch{return r}return JSON.stringify(r,null,2)};return F`
-      <div class="cw-tool-message ${h?"cw-tool-result":"cw-tool-call"}" style="position: relative;">
-        <span class="cw-tool-label" onClick=${()=>b&&m(!$)}>
+    `;if(g||w){let b=e.metadata?.arguments||e.metadata?.result,x=d=>{if(typeof d=="string")try{return JSON.stringify(JSON.parse(d),null,2)}catch{return d}return JSON.stringify(d,null,2)};return K`
+      <div class="cw-tool-message ${w?"cw-tool-result":"cw-tool-call"}" style="position: relative;">
+        <span class="cw-tool-label" onClick=${()=>b&&f(!i)}>
           ${e.content}
-          ${b&&F`<span class="cw-tool-expand">${$?"\u25BC":"\u25B6"}</span>`}
+          ${b&&K`<span class="cw-tool-expand">${i?"\u25BC":"\u25B6"}</span>`}
         </span>
-        ${$&&b&&F`
-          <pre class="cw-tool-details">${O(_(u?e.metadata.arguments:e.metadata.result))}</pre>
+        ${i&&b&&K`
+          <pre class="cw-tool-details">${H(x(g?e.metadata.arguments:e.metadata.result))}</pre>
         `}
-        ${t&&F`<${Me} msg=${e} show=${f} onToggle=${()=>l(!f)} />`}
+        ${t&&K`<${Re} msg=${e} show=${y} onToggle=${()=>u(!y)} />`}
       </div>
-    `}let j=["cw-message",y&&"cw-message-user",v&&"cw-message-error"].filter(Boolean).join(" "),B=`cw-message-row ${y?"cw-message-row-user":""}`,N=e.role==="assistant"?be(e.content,n):O(e.content),P=e.files&&e.files.length>0,L=()=>P?F`
+    `}let U=["cw-message",C&&"cw-message-user",v&&"cw-message-error"].filter(Boolean).join(" "),I=`cw-message-row ${C?"cw-message-row-user":""}`,R=e.role==="assistant"?xe(e.content,s):H(e.content),D=e.files&&e.files.length>0,P=()=>D?K`
       <div class="cw-message-attachments">
-        ${e.files.map(b=>b.type&&b.type.startsWith("image/")?F`
+        ${e.files.map(b=>b.type&&b.type.startsWith("image/")?K`
               <a class="cw-attachment-thumbnail" href=${b.url} target="_blank" title=${b.name}>
                 <img src=${b.url} alt=${b.name} />
               </a>
-            `:F`
+            `:K`
             <a class="cw-attachment-file" href=${b.url} target="_blank" title=${b.name}>
-              <span class="cw-attachment-icon">${re(b.type)}</span>
+              <span class="cw-attachment-icon">${pe(b.type)}</span>
               <span class="cw-attachment-info">
                 <span class="cw-attachment-name">${b.name}</span>
-                <span class="cw-attachment-size">${oe(b.size)}</span>
+                <span class="cw-attachment-size">${ue(b.size)}</span>
               </span>
             </a>
           `)}
       </div>
-    `:null,z=b=>{p(!1),o&&o(w,b)},H=()=>{i&&i(w)};if(y&&k)return F`
-      <div class=${B} style="position: relative;">
-        ${L()}
-        <${it}
+    `:null,B=b=>{c(!1),n&&n($,b)},N=()=>{l&&l($)};if(C&&k)return K`
+      <div class=${I} style="position: relative;">
+        ${P()}
+        <${kt}
           initialContent=${e.content}
-          onSave=${z}
-          onCancel=${()=>p(!1)}
+          onSave=${B}
+          onCancel=${()=>c(!1)}
         />
       </div>
-    `;let s=y&&o&&i,C=e.role==="assistant"&&i&&!c;return F`
-    <div class="${B} ${s||C?"cw-message-row-with-actions":""}">
-      ${L()}
-      ${s&&F`
+    `;let h=C&&n&&l,p=e.role==="assistant"&&l&&!r;return K`
+    <div class="${I} ${h||p?"cw-message-row-with-actions":""}">
+      ${P()}
+      ${h&&K`
         <div class="cw-user-actions-wrapper">
-          <${Ve}
-            onEdit=${()=>p(!0)}
-            onRetry=${H}
-            isLoading=${c}
+          <${st}
+            onEdit=${()=>c(!0)}
+            onRetry=${N}
+            isLoading=${r}
             position="left"
             showEdit=${!0}
           />
-          <div class=${j} dangerouslySetInnerHTML=${{__html:N}} />
+          <div class=${U} dangerouslySetInnerHTML=${{__html:R}} />
         </div>
       `}
-      ${!s&&F`
-        <div class=${j} dangerouslySetInnerHTML=${{__html:N}} />
+      ${!h&&K`
+        <div class=${U} dangerouslySetInnerHTML=${{__html:R}} />
       `}
-      ${C&&F`
-        <${Ve}
-          onRetry=${H}
-          isLoading=${c}
+      ${p&&K`
+        <${st}
+          onRetry=${N}
+          isLoading=${r}
           position="right"
           showEdit=${!1}
         />
       `}
-      ${t&&F`<${Me} msg=${e} show=${f} onToggle=${()=>l(!f)} />`}
+      ${t&&K`<${Re} msg=${e} show=${y} onToggle=${()=>u(!y)} />`}
     </div>
-  `}function xe({messages:e,isLoading:t,hasMoreMessages:n,loadingMoreMessages:o,onLoadMore:i,onEditMessage:c,onRetryMessage:w,debugMode:$,markdownParser:m,emptyStateTitle:f,emptyStateMessage:l}){let k=Ge(null),p=Ge(!0),y=u=>{let h=u.target,v=h.scrollHeight-h.scrollTop-h.clientHeight<100;if(p.current=v,h.scrollTop<50&&n&&!o){let T=h.scrollHeight;i().then(()=>{let A=h.scrollHeight;h.scrollTop=A-T+h.scrollTop})}};qe(()=>{let u=k.current;u&&p.current&&requestAnimationFrame(()=>{u.scrollTop=u.scrollHeight})},[e,t]),qe(()=>{let u=k.current;u&&e.length<=2&&(p.current=!0,requestAnimationFrame(()=>{u.scrollTop=u.scrollHeight}))},[e.length]);let g=e.length===0;return Q`
-    <div class="cw-messages" ref=${k} onScroll=${y}>
-      ${g&&Q`
+  `}function Fe({messages:e,isLoading:t,hasMoreMessages:s,loadingMoreMessages:n,onLoadMore:l,onEditMessage:r,onRetryMessage:$,debugMode:i,markdownParser:f,emptyStateTitle:y,emptyStateMessage:u}){let k=nt(null),c=nt(!0),C=g=>{let w=g.target,v=w.scrollHeight-w.scrollTop-w.clientHeight<100;if(c.current=v,w.scrollTop<50&&s&&!n){let T=w.scrollHeight;l().then(()=>{let m=w.scrollHeight;w.scrollTop=m-T+w.scrollTop})}};at(()=>{let g=k.current;g&&c.current&&requestAnimationFrame(()=>{g.scrollTop=g.scrollHeight})},[e,t]),at(()=>{let g=k.current;g&&e.length<=2&&(c.current=!0,requestAnimationFrame(()=>{g.scrollTop=g.scrollHeight}))},[e.length]);let a=e.length===0;return se`
+    <div class="cw-messages" ref=${k} onScroll=${C}>
+      ${a&&se`
         <div class="cw-empty-state">
           <svg class="cw-empty-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
             <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
           </svg>
-          <h3>${O(f)}</h3>
-          <p>${O(l)}</p>
+          <h3>${H(y)}</h3>
+          <p>${H(u)}</p>
         </div>
       `}
       
-      ${!g&&n&&Q`
-        <div class="cw-load-more" onClick=${i}>
-          ${o?Q`<span class="cw-spinner"></span><span>Loading...</span>`:Q`<span>↑ Scroll up or click to load older messages</span>`}
+      ${!a&&s&&se`
+        <div class="cw-load-more" onClick=${l}>
+          ${n?se`<span class="cw-spinner"></span><span>Loading...</span>`:se`<span>↑ Scroll up or click to load older messages</span>`}
         </div>
       `}
       
-      ${e.map((u,h)=>Q`
-        <${_e}
-          key=${u.id}
-          msg=${u}
-          messageIndex=${h}
-          debugMode=${$}
-          markdownParser=${m}
-          onEdit=${c}
-          onRetry=${w}
+      ${e.map((g,w)=>se`
+        <${De}
+          key=${g.id}
+          msg=${g}
+          messageIndex=${w}
+          debugMode=${i}
+          markdownParser=${f}
+          onEdit=${r}
+          onRetry=${$}
           isLoading=${t}
         />
       `)}
       
-      ${t&&Q`
+      ${t&&se`
         <div class="cw-message-row">
           <div class="cw-typing">
             <span class="cw-spinner"></span>
@@ -241,41 +241,41 @@ var st=Object.defineProperty;var at=(e,t,n)=>t in e?st(e,t,{enumerable:!0,config
         </div>
       `}
     </div>
-  `}import{html as V}from"htm/preact";import{useState as ie,useRef as ge,useEffect as Ie}from"preact/compat";var Ee=typeof window<"u"?window.SpeechRecognition||window.webkitSpeechRecognition:null;function Re({onSend:e,onCancel:t,isLoading:n,placeholder:o,primaryColor:i,enableVoice:c=!0,enableFiles:w=!0}){let[$,m]=ie(""),[f,l]=ie([]),[k,p]=ie(!1),[y,g]=ie(!1),[u]=ie(()=>!!Ee),h=ge(null),v=ge(null),T=ge(null),A=ge(!1);Ie(()=>{!n&&h.current&&h.current.focus()},[n]),Ie(()=>{h.current&&(h.current.style.height="auto",h.current.style.height=Math.min(h.current.scrollHeight,150)+"px")},[$]),Ie(()=>()=>{A.current=!1,T.current&&T.current.abort()},[]);let D=r=>{r.preventDefault(),($.trim()||f.length>0)&&!n&&(e($,f),m(""),l([]),h.current&&(h.current.style.height="auto"),v.current&&(v.current.value=""))},j=r=>{let x=Array.from(r.target.files||[]);x.length>0&&l(R=>[...R,...x])},B=r=>{l(x=>x.filter((R,a)=>a!==r))},N=r=>{r.preventDefault(),v.current&&!n&&v.current.click()},P=r=>{r.key==="Enter"&&!r.shiftKey&&(r.preventDefault(),D(r))},L=r=>{n&&t&&(r.preventDefault(),t())},z=()=>{if(!Ee||n)return;A.current=!0;let r=new Ee;r.continuous=!0,r.interimResults=!0,r.lang=navigator.language||"en-US";let x=$,R="";r.onstart=()=>{g(!0)},r.onresult=a=>{R="";for(let d=a.resultIndex;d<a.results.length;d++){let I=a.results[d][0].transcript;a.results[d].isFinal?x+=(x?" ":"")+I:R+=I}m(x+(R?" "+R:""))},r.onerror=a=>{if(a.error==="no-speech"||a.error==="aborted"){console.log("[ChatWidget] Speech recognition:",a.error,"- continuing...");return}console.warn("[ChatWidget] Speech recognition error:",a.error),A.current=!1,g(!1),m(x||$)},r.onend=()=>{if(A.current){console.log("[ChatWidget] Recognition paused, restarting...");try{r.start();return}catch(a){console.warn("[ChatWidget] Could not restart recognition:",a)}}g(!1),x&&m(x),T.current=null},T.current=r,r.start()},H=()=>{A.current=!1,T.current&&T.current.stop()},s=r=>{r.preventDefault(),y?H():z()},M=V`
+  `}import{html as X}from"htm/preact";import{useState as he,useRef as be,useEffect as Oe}from"preact/compat";var Pe=typeof window<"u"?window.SpeechRecognition||window.webkitSpeechRecognition:null;function Le({onSend:e,onCancel:t,isLoading:s,placeholder:n,primaryColor:l,enableVoice:r=!0,enableFiles:$=!0}){let[i,f]=he(""),[y,u]=he([]),[k,c]=he(!1),[C,a]=he(!1),[g]=he(()=>!!Pe),w=be(null),v=be(null),T=be(null),m=be(!1);Oe(()=>{!s&&w.current&&w.current.focus()},[s]),Oe(()=>{w.current&&(w.current.style.height="auto",w.current.style.height=Math.min(w.current.scrollHeight,150)+"px")},[i]),Oe(()=>()=>{m.current=!1,T.current&&T.current.abort()},[]);let W=d=>{d.preventDefault(),(i.trim()||y.length>0)&&!s&&(e(i,y),f(""),u([]),w.current&&(w.current.style.height="auto"),v.current&&(v.current.value=""))},U=d=>{let A=Array.from(d.target.files||[]);A.length>0&&u(O=>[...O,...A])},I=d=>{u(A=>A.filter((O,o)=>o!==d))},R=d=>{d.preventDefault(),v.current&&!s&&v.current.click()},D=d=>{d.key==="Enter"&&!d.shiftKey&&(d.preventDefault(),W(d))},P=d=>{s&&t&&(d.preventDefault(),t())},B=()=>{if(!Pe||s)return;m.current=!0;let d=new Pe;d.continuous=!0,d.interimResults=!0,d.lang=navigator.language||"en-US";let A=i,O="";d.onstart=()=>{a(!0)},d.onresult=o=>{O="";for(let E=o.resultIndex;E<o.results.length;E++){let L=o.results[E][0].transcript;o.results[E].isFinal?A+=(A?" ":"")+L:O+=L}f(A+(O?" "+O:""))},d.onerror=o=>{if(o.error==="no-speech"||o.error==="aborted"){console.log("[ChatWidget] Speech recognition:",o.error,"- continuing...");return}console.warn("[ChatWidget] Speech recognition error:",o.error),m.current=!1,a(!1),f(A||i)},d.onend=()=>{if(m.current){console.log("[ChatWidget] Recognition paused, restarting...");try{d.start();return}catch(o){console.warn("[ChatWidget] Could not restart recognition:",o)}}a(!1),A&&f(A),T.current=null},T.current=d,d.start()},N=()=>{m.current=!1,T.current&&T.current.stop()},h=d=>{d.preventDefault(),C?N():B()},M=X`
     <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
       <rect x="2" y="2" width="10" height="10" rx="1" />
     </svg>
-  `,C=V`
+  `,p=X`
     <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
       <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
       <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
       <line x1="12" y1="19" x2="12" y2="23"></line>
       <line x1="8" y1="23" x2="16" y2="23"></line>
     </svg>
-  `,S=V`
+  `,S=X`
     <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
       <path d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"></path>
     </svg>
-  `,b=c&&u,_=w;return V`
-    <form class="cw-input-form" onSubmit=${D}>
+  `,b=r&&g,x=$;return X`
+    <form class="cw-input-form" onSubmit=${W}>
       <input
         type="file"
         ref=${v}
         style="display: none"
         multiple
-        onChange=${j}
+        onChange=${U}
       />
-      ${f.length>0&&V`
+      ${y.length>0&&X`
         <div class="cw-file-chips">
-          ${f.map((r,x)=>V`
-            <div class="cw-file-chip" key=${x}>
-              <span class="cw-file-chip-icon">${re(r.type)}</span>
-              <span class="cw-file-chip-name" title=${r.name}>${r.name.length>20?r.name.substring(0,17)+"...":r.name}</span>
-              <span class="cw-file-chip-size">(${oe(r.size)})</span>
+          ${y.map((d,A)=>X`
+            <div class="cw-file-chip" key=${A}>
+              <span class="cw-file-chip-icon">${pe(d.type)}</span>
+              <span class="cw-file-chip-name" title=${d.name}>${d.name.length>20?d.name.substring(0,17)+"...":d.name}</span>
+              <span class="cw-file-chip-size">(${ue(d.size)})</span>
               <button
                 type="button"
                 class="cw-file-chip-remove"
-                onClick=${()=>B(x)}
+                onClick=${()=>I(A)}
                 title="Remove file"
               >×</button>
             </div>
@@ -283,79 +283,79 @@ var st=Object.defineProperty;var at=(e,t,n)=>t in e?st(e,t,{enumerable:!0,config
         </div>
       `}
       <textarea
-        ref=${h}
+        ref=${w}
         class="cw-input"
-        placeholder=${O(o)}
-        value=${$}
-        onInput=${r=>m(r.target.value)}
-        onKeyDown=${P}
-        disabled=${n}
+        placeholder=${H(n)}
+        value=${i}
+        onInput=${d=>f(d.target.value)}
+        onKeyDown=${D}
+        disabled=${s}
         rows="1"
       />
-      ${_&&V`
+      ${x&&X`
         <button
           type="button"
           class="cw-attach-btn"
-          onClick=${N}
-          disabled=${n}
+          onClick=${R}
+          disabled=${s}
           title="Attach files"
         >
           ${S}
         </button>
       `}
-      ${b&&V`
+      ${b&&X`
         <button
           type="button"
-          class=${`cw-voice-btn ${y?"cw-voice-btn-recording":""}`}
-          onClick=${s}
-          disabled=${n}
-          title=${y?"Stop recording":"Voice input"}
+          class=${`cw-voice-btn ${C?"cw-voice-btn-recording":""}`}
+          onClick=${h}
+          disabled=${s}
+          title=${C?"Stop recording":"Voice input"}
         >
-          ${C}
+          ${p}
         </button>
       `}
       <button
-        type=${n?"button":"submit"}
-        class=${`cw-send-btn ${n?"cw-send-btn-loading":""} ${n&&k?"cw-send-btn-stop":""}`}
-        style=${{backgroundColor:n&&k?"#dc2626":i}}
-        onClick=${L}
-        onMouseEnter=${()=>p(!0)}
-        onMouseLeave=${()=>p(!1)}
-        title=${n?"Stop":"Send"}
+        type=${s?"button":"submit"}
+        class=${`cw-send-btn ${s?"cw-send-btn-loading":""} ${s&&k?"cw-send-btn-stop":""}`}
+        style=${{backgroundColor:s&&k?"#dc2626":l}}
+        onClick=${P}
+        onMouseEnter=${()=>c(!0)}
+        onMouseLeave=${()=>c(!1)}
+        title=${s?"Stop":"Send"}
       >
-        ${n?k?M:V`<span class="cw-spinner"></span>`:"\u27A4"}
+        ${s?k?M:X`<span class="cw-spinner"></span>`:"\u27A4"}
       </button>
     </form>
-  `}import{html as $e}from"htm/preact";function Ae({isOpen:e,conversations:t,conversationsLoading:n,currentConversationId:o,onClose:i,onNewConversation:c,onSwitchConversation:w}){return $e`
+  `}import{html as Ce}from"htm/preact";function Ke({isOpen:e,conversations:t,conversationsLoading:s,currentConversationId:n,onClose:l,onNewConversation:r,onSwitchConversation:$}){return Ce`
     <div class="cw-sidebar ${e?"cw-sidebar-open":""}">
       <div class="cw-sidebar-header">
         <span>Conversations</span>
-        <button class="cw-sidebar-close" onClick=${i}>✕</button>
+        <button class="cw-sidebar-close" onClick=${l}>✕</button>
       </div>
       
-      <button class="cw-new-conversation" onClick=${c}>
+      <button class="cw-new-conversation" onClick=${r}>
         <span>+ New Conversation</span>
       </button>
       
       <div class="cw-conversation-list">
-        ${n&&$e`
+        ${s&&Ce`
           <div class="cw-sidebar-loading">
             <span class="cw-spinner"></span>
           </div>
         `}
         
-        ${!n&&t.length===0&&$e`
+        ${!s&&t.length===0&&Ce`
           <div class="cw-sidebar-empty">No conversations yet</div>
         `}
         
-        ${t.map($=>$e`
+        ${t.map(i=>Ce`
           <div 
-            key=${$.id}
-            class="cw-conversation-item ${$.id===o?"cw-conversation-active":""}"
-            onClick=${()=>w($.id)}
+            key=${i.id}
+            class="cw-conversation-item ${i.id===n?"cw-conversation-active":""}"
+            onClick=${()=>$(i.id)}
           >
-            <div class="cw-conversation-title">${O($.title||"Untitled")}</div>
-            <div class="cw-conversation-date">${ke($.updatedAt||$.createdAt)}</div>
+            <div class="cw-conversation-title">${H(i.title||"Untitled")}</div>
+            <div class="cw-conversation-date">${Me(i.updatedAt||i.createdAt)}</div>
           </div>
         `)}
       </div>
@@ -363,63 +363,77 @@ var st=Object.defineProperty;var at=(e,t,n)=>t in e?st(e,t,{enumerable:!0,config
     
     <div 
       class="cw-sidebar-overlay ${e?"cw-sidebar-overlay-visible":""}" 
-      onClick=${i}
+      onClick=${l}
     />
-  `}import{html as ye}from"htm/preact";import{useState as lt}from"preact/compat";function Fe({availableModels:e,selectedModel:t,onSelectModel:n,disabled:o}){let[i,c]=lt(!1);if(!e||e.length===0)return null;let $=e.find(l=>l.id===t)?.name||"Select Model",m=()=>{o||c(!i)},f=l=>{n(l),c(!1)};return ye`
+  `}import{html as oe}from"htm/preact";import{useState as bt}from"preact/compat";function We({availableModels:e,selectedModel:t,onSelectModel:s,thinkingEnabled:n,onToggleThinking:l,disabled:r}){let[$,i]=bt(!1);if(!e||e.length===0)return null;let f=e.find(a=>a.id===t),y=f?.name||"Select Model",u=f?.supports_thinking||!1,k=()=>{r||i(!$)},c=a=>{s(a),i(!1)},C=a=>{a.stopPropagation(),l&&u&&l(!n)};return oe`
     <div class="cw-model-selector">
-      <button 
-        class="cw-model-btn" 
-        onClick=${m}
-        disabled=${o}
+      <button
+        class="cw-model-btn"
+        onClick=${k}
+        disabled=${r}
         title="Select Model"
       >
         <span class="cw-model-icon">🤖</span>
-        <span class="cw-model-name">${O($)}</span>
-        <span class="cw-model-chevron">${i?"\u25B2":"\u25BC"}</span>
+        <span class="cw-model-name">${H(y)}</span>
+        <span class="cw-model-chevron">${$?"\u25B2":"\u25BC"}</span>
       </button>
-      
-      ${i&&ye`
+
+      ${u&&l&&oe`
+        <button
+          class="cw-thinking-toggle ${n?"cw-thinking-enabled":""}"
+          onClick=${C}
+          disabled=${r}
+          title=${n?"Thinking enabled - click to disable":"Enable extended thinking"}
+        >
+          <span class="cw-thinking-icon">🧠</span>
+        </button>
+      `}
+
+      ${$&&oe`
         <div class="cw-model-dropdown">
-          ${e.map(l=>ye`
-            <button 
-              key=${l.id}
-              class="cw-model-option ${l.id===t?"cw-model-option-selected":""}"
-              onClick=${()=>f(l.id)}
+          ${e.map(a=>oe`
+            <button
+              key=${a.id}
+              class="cw-model-option ${a.id===t?"cw-model-option-selected":""}"
+              onClick=${()=>c(a.id)}
             >
-              <span class="cw-model-option-name">${O(l.name)}</span>
-              <span class="cw-model-option-provider">${O(l.provider)}</span>
-              ${l.description&&ye`
-                <span class="cw-model-option-desc">${O(l.description)}</span>
+              <span class="cw-model-option-name">
+                ${H(a.name)}
+                ${a.supports_thinking&&oe`<span class="cw-thinking-badge" title="Supports extended thinking">🧠</span>`}
+              </span>
+              <span class="cw-model-option-provider">${H(a.provider)}</span>
+              ${a.description&&oe`
+                <span class="cw-model-option-desc">${H(a.description)}</span>
               `}
             </button>
           `)}
         </div>
       `}
     </div>
-  `}import{html as G}from"htm/preact";import{useState as Xe,useCallback as le}from"preact/compat";var ct={not_started:"\u25CB",in_progress:"\u25D0",complete:"\u25CF",cancelled:"\u2298"},dt={not_started:"Not Started",in_progress:"In Progress",complete:"Complete",cancelled:"Cancelled"};function ut({task:e,onUpdate:t,onRemove:n,depth:o=0}){let[i,c]=Xe(!1),[w,$]=Xe(e.name),m=le(()=>{let p={not_started:"in_progress",in_progress:"complete",complete:"not_started",cancelled:"not_started"};t(e.id,{state:p[e.state]||"not_started"})},[e,t]),f=le(()=>{w.trim()&&w!==e.name&&t(e.id,{name:w.trim()}),c(!1)},[e,w,t]),l=le(p=>{p.key==="Enter"&&f(),p.key==="Escape"&&($(e.name),c(!1))},[f,e.name]),k=`cw-task-state-${e.state.replace("_","-")}`;return G`
-    <div class="cw-task-item ${k}" style=${{paddingLeft:`${o*16+8}px`}}>
+  `}import{html as Z}from"htm/preact";import{useState as ot,useCallback as me}from"preact/compat";var Ct={not_started:"\u25CB",in_progress:"\u25D0",complete:"\u25CF",cancelled:"\u2298"},St={not_started:"Not Started",in_progress:"In Progress",complete:"Complete",cancelled:"Cancelled"};function Tt({task:e,onUpdate:t,onRemove:s,depth:n=0}){let[l,r]=ot(!1),[$,i]=ot(e.name),f=me(()=>{let c={not_started:"in_progress",in_progress:"complete",complete:"not_started",cancelled:"not_started"};t(e.id,{state:c[e.state]||"not_started"})},[e,t]),y=me(()=>{$.trim()&&$!==e.name&&t(e.id,{name:$.trim()}),r(!1)},[e,$,t]),u=me(c=>{c.key==="Enter"&&y(),c.key==="Escape"&&(i(e.name),r(!1))},[y,e.name]),k=`cw-task-state-${e.state.replace("_","-")}`;return Z`
+    <div class="cw-task-item ${k}" style=${{paddingLeft:`${n*16+8}px`}}>
       <button 
         class="cw-task-state-btn" 
-        onClick=${m}
-        title=${dt[e.state]}
+        onClick=${f}
+        title=${St[e.state]}
       >
-        ${ct[e.state]}
+        ${Ct[e.state]}
       </button>
       
-      ${i?G`
+      ${l?Z`
         <input
           type="text"
           class="cw-task-edit-input"
-          value=${w}
-          onInput=${p=>$(p.target.value)}
-          onBlur=${f}
-          onKeyDown=${l}
+          value=${$}
+          onInput=${c=>i(c.target.value)}
+          onBlur=${y}
+          onKeyDown=${u}
           autoFocus
         />
-      `:G`
+      `:Z`
         <span 
           class="cw-task-name" 
-          onClick=${()=>c(!0)}
+          onClick=${()=>r(!0)}
           title="Click to edit"
         >
           ${e.name}
@@ -428,22 +442,22 @@ var st=Object.defineProperty;var at=(e,t,n)=>t in e?st(e,t,{enumerable:!0,config
       
       <button 
         class="cw-task-remove-btn" 
-        onClick=${()=>n(e.id)}
+        onClick=${()=>s(e.id)}
         title="Remove task"
       >
         ×
       </button>
     </div>
-  `}function Oe({tasks:e,progress:t,isLoading:n,error:o,onUpdate:i,onRemove:c,onClear:w,onRefresh:$}){let m=le(k=>{let p=new Map,y=[];return k.forEach(g=>{p.set(g.id,{...g,children:[]})}),k.forEach(g=>{let u=p.get(g.id);g.parent_id&&p.has(g.parent_id)?p.get(g.parent_id).children.push(u):y.push(u)}),y},[]),f=le((k,p=0)=>G`
-      <${ut}
+  `}function Ne({tasks:e,progress:t,isLoading:s,error:n,onUpdate:l,onRemove:r,onClear:$,onRefresh:i}){let f=me(k=>{let c=new Map,C=[];return k.forEach(a=>{c.set(a.id,{...a,children:[]})}),k.forEach(a=>{let g=c.get(a.id);a.parent_id&&c.has(a.parent_id)?c.get(a.parent_id).children.push(g):C.push(g)}),C},[]),y=me((k,c=0)=>Z`
+      <${Tt}
         key=${k.id}
         task=${k}
-        depth=${p}
-        onUpdate=${i}
-        onRemove=${c}
+        depth=${c}
+        onUpdate=${l}
+        onRemove=${r}
       />
-      ${k.children?.map(y=>f(y,p+1))}
-    `,[i,c]),l=m(e);return n&&e.length===0?G`<div class="cw-tasks-loading">Loading tasks...</div>`:G`
+      ${k.children?.map(C=>y(C,c+1))}
+    `,[l,r]),u=f(e);return s&&e.length===0?Z`<div class="cw-tasks-loading">Loading tasks...</div>`:Z`
     <div class="cw-tasks-container">
       <div class="cw-tasks-header">
         <div class="cw-tasks-progress">
@@ -458,133 +472,244 @@ var st=Object.defineProperty;var at=(e,t,n)=>t in e?st(e,t,{enumerable:!0,config
           </div>
         </div>
         <div class="cw-tasks-actions">
-          <button class="cw-tasks-action-btn" onClick=${$} title="Refresh">↻</button>
-          ${e.length>0&&G`
-            <button class="cw-tasks-action-btn" onClick=${w} title="Clear all">🗑</button>
+          <button class="cw-tasks-action-btn" onClick=${i} title="Refresh">↻</button>
+          ${e.length>0&&Z`
+            <button class="cw-tasks-action-btn" onClick=${$} title="Clear all">🗑</button>
           `}
         </div>
       </div>
       
-      ${o&&G`<div class="cw-tasks-error">${o}</div>`}
+      ${n&&Z`<div class="cw-tasks-error">${n}</div>`}
       
       <div class="cw-tasks-list">
-        ${l.length===0?G`
+        ${u.length===0?Z`
           <div class="cw-tasks-empty">
             <p>No tasks yet</p>
             <p class="cw-tasks-empty-hint">Tasks will appear here when the agent creates them</p>
           </div>
-        `:l.map(k=>f(k))}
+        `:u.map(k=>y(k))}
+      </div>
+    </div>
+  `}import{html as J}from"htm/preact";function rt({systems:e,agents:t,selectedSystem:s,selectedAgent:n,selectedSystemVersion:l,selectedAgentVersion:r,onSelectSystem:$,onSelectAgent:i,onSelectSystemVersion:f,onSelectAgentVersion:y,disabled:u}){let k=e.find(m=>m.slug===s),c=t.find(m=>m.slug===n),C=k?.versions||[],a=c?.versions||[];if(e.length===0&&t.length===0)return null;let g=e.length>1,w=t.length>1,v=C.length>1,T=a.length>1;return J`
+    <div class="cw-dev-toolbar">
+      <div class="cw-dev-toolbar-label">
+        <span class="cw-dev-toolbar-icon">🛠️</span>
+        <span>Dev</span>
+      </div>
+
+      <div class="cw-dev-toolbar-selectors">
+        <!-- System -->
+        <div class="cw-dev-select-group">
+          <label class="cw-dev-label">System</label>
+          ${g?J`
+            <select
+              class="cw-dev-select"
+              value=${s||""}
+              onChange=${m=>$(m.target.value)}
+              disabled=${u}
+            >
+              ${e.map(m=>J`
+                <option key=${m.slug} value=${m.slug}>
+                  ${m.name}
+                </option>
+              `)}
+            </select>
+          `:J`
+            <span class="cw-dev-badge">${k?.name||"\u2014"}</span>
+          `}
+        </div>
+
+        <!-- System Version -->
+        <div class="cw-dev-select-group">
+          <label class="cw-dev-label">Sys Ver</label>
+          ${v?J`
+            <select
+              class="cw-dev-select"
+              value=${l||""}
+              onChange=${m=>f(m.target.value||null)}
+              disabled=${u}
+            >
+              ${C.map(m=>J`
+                <option key=${m.version} value=${m.version}>
+                  ${m.version}${m.is_active?" \u2713":""}${m.is_draft?" (draft)":""}
+                </option>
+              `)}
+            </select>
+          `:J`
+            <span class="cw-dev-badge">${C.length===1?C[0].version:"none"}</span>
+          `}
+        </div>
+
+        <!-- Agent -->
+        <div class="cw-dev-select-group">
+          <label class="cw-dev-label">Agent</label>
+          ${w?J`
+            <select
+              class="cw-dev-select"
+              value=${n||""}
+              onChange=${m=>i(m.target.value)}
+              disabled=${u}
+            >
+              ${t.map(m=>J`
+                <option key=${m.slug} value=${m.slug}>
+                  ${m.name}${k?.entry_agent?.slug===m.slug?" \u2605":""}
+                </option>
+              `)}
+            </select>
+          `:J`
+            <span class="cw-dev-badge">${c?.name||t[0]?.name||"\u2014"}${k?.entry_agent?.slug===(c?.slug||t[0]?.slug)?" \u2605":""}</span>
+          `}
+        </div>
+
+        <!-- Agent Version -->
+        <div class="cw-dev-select-group">
+          <label class="cw-dev-label">Agent Ver</label>
+          ${T?J`
+            <select
+              class="cw-dev-select"
+              value=${r||""}
+              onChange=${m=>y(m.target.value||null)}
+              disabled=${u}
+            >
+              ${a.map(m=>J`
+                <option key=${m.version} value=${m.version}>
+                  ${m.version}${m.is_active?" \u2713":""}${m.is_draft?" (draft)":""}
+                </option>
+              `)}
+            </select>
+          `:J`
+            <span class="cw-dev-badge">${a.length===1?a[0].version:c?.active_version||"\u2014"}</span>
+          `}
+        </div>
       </div>
     </div>
-  `}import{useState as Y,useCallback as X,useRef as Ze,useEffect as Qe}from"preact/compat";function De(e,t,n){let[o,i]=Y([]),[c,w]=Y(!1),[$,m]=Y(null),[f,l]=Y(()=>n?.get(e.conversationIdKey)||null),[k,p]=Y(!1),[y,g]=Y(!1),[u,h]=Y(0),v=Ze(null),T=Ze(null);Qe(()=>{f&&n?.set(e.conversationIdKey,f)},[f,e.conversationIdKey,n]);let A=X(async(s,M,C)=>{v.current&&v.current.close();let S=e.apiPaths.runEvents.replace("{runId}",s),b=`${e.backendUrl}${S}`;M&&(b+=`?anonymous_token=${encodeURIComponent(M)}`);let _=new EventSource(b);v.current=_;let r="";_.addEventListener("assistant.message",R=>{try{let a=JSON.parse(R.data);e.onEvent&&e.onEvent("assistant.message",a.payload);let d=a.payload.content;d&&(r+=d,i(I=>{let K=I[I.length-1];return K?.role==="assistant"&&K.id.startsWith("assistant-stream-")?[...I.slice(0,-1),{...K,content:r}]:[...I,{id:"assistant-stream-"+Date.now(),role:"assistant",content:r,timestamp:new Date,type:"message"}]}))}catch(a){console.error("[ChatWidget] Parse error:",a)}}),_.addEventListener("tool.call",R=>{try{let a=JSON.parse(R.data);e.onEvent&&e.onEvent("tool.call",a.payload),i(d=>[...d,{id:"tool-call-"+Date.now(),role:"assistant",content:`\u{1F527} ${a.payload.name}`,timestamp:new Date,type:"tool_call",metadata:{toolName:a.payload.name,arguments:a.payload.arguments,toolCallId:a.payload.id}}])}catch(a){console.error("[ChatWidget] Parse error:",a)}}),_.addEventListener("tool.result",R=>{try{let a=JSON.parse(R.data);e.onEvent&&e.onEvent("tool.result",a.payload);let d=a.payload.result,I=d?.error;i(K=>[...K,{id:"tool-result-"+Date.now(),role:"system",content:I?`\u274C ${d.error}`:"\u2713 Done",timestamp:new Date,type:"tool_result",metadata:{toolName:a.payload.name,result:d,toolCallId:a.payload.tool_call_id}}])}catch(a){console.error("[ChatWidget] Parse error:",a)}}),_.addEventListener("custom",R=>{try{let a=JSON.parse(R.data);e.onEvent&&e.onEvent("custom",a.payload),a.payload?.type==="ui_control"&&e.onUIControl&&e.onUIControl(a.payload),a.payload?.type==="agent_context"&&i(d=>[...d,{id:"agent-context-"+Date.now(),role:"system",content:`\u{1F517} ${a.payload.agent_name||"Sub-agent"} is now handling this request`,timestamp:new Date,type:"agent_context",metadata:{agentKey:a.payload.agent_key,agentName:a.payload.agent_name,action:a.payload.action}}])}catch(a){console.error("[ChatWidget] Parse error:",a)}}),_.addEventListener("sub_agent.start",R=>{try{let a=JSON.parse(R.data);e.onEvent&&e.onEvent("sub_agent.start",a.payload),i(d=>[...d,{id:"sub-agent-start-"+Date.now(),role:"system",content:`\u{1F517} Delegating to ${a.payload.agent_name||a.payload.sub_agent_key||"sub-agent"}...`,timestamp:new Date,type:"sub_agent_start",metadata:{subAgentKey:a.payload.sub_agent_key,agentName:a.payload.agent_name,invocationMode:a.payload.invocation_mode}}])}catch(a){console.error("[ChatWidget] Parse error:",a)}}),_.addEventListener("sub_agent.end",R=>{try{let a=JSON.parse(R.data);e.onEvent&&e.onEvent("sub_agent.end",a.payload),i(d=>[...d,{id:"sub-agent-end-"+Date.now(),role:"system",content:`\u2713 ${a.payload.agent_name||"Sub-agent"} completed`,timestamp:new Date,type:"sub_agent_end",metadata:{subAgentKey:a.payload.sub_agent_key,agentName:a.payload.agent_name}}])}catch(a){console.error("[ChatWidget] Parse error:",a)}});let x=R=>{try{let a=JSON.parse(R.data);if(e.onEvent&&e.onEvent(a.type,a.payload),a.type==="run.failed"){let d=a.payload.error||"Agent run failed";m(d),i(I=>[...I,{id:"error-"+Date.now(),role:"system",content:`\u274C Error: ${d}`,timestamp:new Date,type:"error"}])}}catch(a){console.error("[ChatWidget] Parse error:",a)}w(!1),_.close(),v.current=null,r&&C&&C(r)};_.addEventListener("run.succeeded",x),_.addEventListener("run.failed",x),_.addEventListener("run.cancelled",x),_.addEventListener("run.timed_out",x),_.onerror=()=>{w(!1),_.close(),v.current=null}},[e]),D=X(async(s,M={},C={})=>{if(!s.trim()||c)return;let S=[],b={};typeof M=="function"?b={onAssistantMessage:M}:Array.isArray(M)?(S=M,b=C):b=M||{};let{model:_,onAssistantMessage:r,supersedeFromMessageIndex:x}=b;w(!0),m(null);let R={id:ae(),role:"user",content:s.trim(),timestamp:new Date,type:"message",files:S.length>0?S.map(a=>({name:a.name,size:a.size,type:a.type})):void 0};i(a=>[...a,R]);try{let a=await t.getOrCreateSession(),d;if(S.length>0){let W=e.apiCaseStyle!=="camel",je=he=>W?me(he):he,Z=new FormData;Z.append(je("agentKey"),e.agentKey),f&&Z.append(je("conversationId"),f),Z.append("messages",JSON.stringify([{role:"user",content:s.trim()}])),Z.append("metadata",JSON.stringify(W?{...e.metadata,journey_type:e.defaultJourneyType}:{...e.metadata,journeyType:e.defaultJourneyType})),_&&Z.append("model",_),S.forEach(he=>{Z.append("files",he)}),d=t.getFetchOptions({method:"POST",body:Z},a)}else{let W=t.transformRequest({agentKey:e.agentKey,conversationId:f,messages:[{role:"user",content:s.trim()}],metadata:{...e.metadata,journeyType:e.defaultJourneyType},..._&&{model:_},...x!==void 0&&{supersedeFromMessageIndex:x}});d=t.getFetchOptions({method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(W)},a)}let I=await fetch(`${e.backendUrl}${e.apiPaths.runs}`,d),K=a;if(I.status===401){t.clearSession();let W=await t.getOrCreateSession(!0);W&&(K=W,S.length>0?d=t.getFetchOptions({method:"POST",body:d.body},W):d=t.getFetchOptions({method:"POST",headers:{"Content-Type":"application/json"},body:d.body},W),I=await fetch(`${e.backendUrl}${e.apiPaths.runs}`,d))}if(!I.ok){let W=await I.json().catch(()=>({}));throw new Error(W.error||W.detail||`HTTP ${I.status}`)}let ue=await I.json(),pe=t.transformResponse(ue);T.current=pe.id,!f&&pe.conversationId&&l(pe.conversationId),await A(pe.id,K,r)}catch(a){m(a.message||"Failed to send message"),w(!1)}finally{T.current=null}},[e,t,f,c,A]),j=X(async()=>{let s=T.current;if(!(!s||!c))try{let M=e.apiPaths.cancelRun?e.apiPaths.cancelRun.replace("{runId}",s):`${e.apiPaths.runs}${s}/cancel/`;(await fetch(`${e.backendUrl}${M}`,t.getFetchOptions({method:"POST",headers:{"Content-Type":"application/json"}}))).ok&&(v.current&&(v.current.close(),v.current=null),w(!1),T.current=null,i(S=>[...S,{id:"cancelled-"+Date.now(),role:"system",content:"\u23F9 Run cancelled",timestamp:new Date,type:"cancelled"}]))}catch(M){console.error("[ChatWidget] Failed to cancel run:",M)}},[e,t,c]),B=X(()=>{i([]),l(null),m(null),p(!1),h(0),n?.set(e.conversationIdKey,null)},[e.conversationIdKey,n]),N=s=>{let M={id:ae(),role:s.role,timestamp:s.timestamp?new Date(s.timestamp):new Date};if(s.role==="tool")return{...M,role:"system",content:"\u2713 Done",type:"tool_result",metadata:{result:s.content,toolCallId:s.toolCallId}};if(s.role==="assistant"&&s.toolCalls&&s.toolCalls.length>0)return s.toolCalls.map(S=>({id:ae(),role:"assistant",content:`\u{1F527} ${S.function?.name||S.name||"tool"}`,timestamp:M.timestamp,type:"tool_call",metadata:{toolName:S.function?.name||S.name,arguments:S.function?.arguments||S.arguments,toolCallId:S.id}}));let C=typeof s.content=="string"?s.content:JSON.stringify(s.content);return s.role==="assistant"&&!C?.trim()?null:{...M,content:C,type:"message"}},P=X(async s=>{w(!0),i([]),l(s);try{let M=await t.getOrCreateSession(),S=`${e.backendUrl}${e.apiPaths.conversations}${s}/?limit=10&offset=0`,b=await fetch(S,t.getFetchOptions({method:"GET"},M));if(b.ok){let _=await b.json(),r=t.transformResponse(_);r.messages&&i(r.messages.flatMap(N).filter(Boolean)),p(r.hasMore||!1),h(r.messages?.length||0)}else b.status===404&&(l(null),n?.set(e.conversationIdKey,null))}catch(M){console.error("[ChatWidget] Failed to load conversation:",M)}finally{w(!1)}},[e,t,n]),L=X(async()=>{if(!(!f||y||!k)){g(!0);try{let s=await t.getOrCreateSession(),C=`${e.backendUrl}${e.apiPaths.conversations}${f}/?limit=10&offset=${u}`,S=await fetch(C,t.getFetchOptions({method:"GET"},s));if(S.ok){let b=await S.json(),_=t.transformResponse(b);if(_.messages?.length>0){let r=_.messages.flatMap(N).filter(Boolean);i(x=>[...r,...x]),h(x=>x+_.messages.length),p(_.hasMore||!1)}else p(!1)}}catch(s){console.error("[ChatWidget] Failed to load more messages:",s)}finally{g(!1)}}},[e,t,f,u,y,k]),z=X(async(s,M,C={})=>{if(c)return;let S=o[s];if(!S||S.role!=="user")return;let b=o.slice(0,s);i(b),await D(M,{...C,supersedeFromMessageIndex:s})},[o,c,D]),H=X(async(s,M={})=>{if(c)return;let C=o[s];if(!C)return;let S=s,b=C;if(C.role==="assistant"){for(let r=s-1;r>=0;r--)if(o[r].role==="user"){S=r,b=o[r];break}if(b.role!=="user")return}else if(C.role!=="user")return;let _=o.slice(0,S);i(_),await D(b.content,{...M,supersedeFromMessageIndex:S})},[o,c,D]);return Qe(()=>()=>{v.current&&v.current.close()},[]),{messages:o,isLoading:c,error:$,conversationId:f,hasMoreMessages:k,loadingMoreMessages:y,sendMessage:D,cancelRun:j,clearMessages:B,loadConversation:P,loadMoreMessages:L,setConversationId:l,editMessage:z,retryMessage:H}}import{useState as we,useEffect as pt,useCallback as Ye}from"preact/compat";function Pe(e,t,n){let[o,i]=we([]),[c,w]=we(null),[$,m]=we(null),[f,l]=we(!1);pt(()=>{(async()=>{if(e.showModelSelector){l(!0);try{let g=await fetch(`${e.backendUrl}${e.apiPaths.models}`,t.getFetchOptions({method:"GET"}));if(g.ok){let u=await g.json(),h=u.models||[];i(h),m(u.default);let v=n?.get(e.modelKey);v&&h.some(T=>T.id===v)?w(v):w(u.default)}}catch(g){console.warn("[ChatWidget] Failed to load models:",g)}finally{l(!1)}}})()},[e.backendUrl,e.apiPaths.models,e.showModelSelector,e.modelKey,t,n]);let k=Ye(y=>{w(y),n?.set(e.modelKey,y)},[e.modelKey,n]),p=Ye(()=>o.find(y=>y.id===c)||null,[o,c]);return{availableModels:o,selectedModel:c,defaultModel:$,isLoading:f,selectModel:k,getSelectedModelInfo:p}}import{useState as Le,useCallback as ee}from"preact/compat";function Ke(e,t){let[n,o]=Le(null),[i,c]=Le(!1),[w,$]=Le(null),m=e.apiPaths?.tasks||"/api/agent/tasks/",f=ee(async()=>{c(!0),$(null);try{let u=`${e.backendUrl}${m}`,h=await fetch(u,t.getFetchOptions({method:"GET"}));if(h.ok){let v=await h.json();o(v)}else{let v=await h.json().catch(()=>({}));$(v.error||"Failed to load tasks")}}catch(u){console.error("[useTasks] Failed to load task list:",u),$("Failed to load tasks")}finally{c(!1)}},[e.backendUrl,m,t]),l=ee(async u=>{if(!n)return null;try{let h=`${e.backendUrl}${m}${n.id}/add_task/`,v=await fetch(h,t.getFetchOptions({method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(u)}));if(v.ok){let T=await v.json();return await f(),T}else{let T=await v.json().catch(()=>({}));return $(T.error||"Failed to add task"),null}}catch(h){return console.error("[useTasks] Failed to add task:",h),$("Failed to add task"),null}},[e.backendUrl,m,n,t,f]),k=ee(async(u,h)=>{if(!n)return null;try{let v=`${e.backendUrl}${m}${n.id}/update_task/${u}/`,T=await fetch(v,t.getFetchOptions({method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify(h)}));if(T.ok){let A=await T.json();return await f(),A}else{let A=await T.json().catch(()=>({}));return $(A.error||"Failed to update task"),null}}catch(v){return console.error("[useTasks] Failed to update task:",v),$("Failed to update task"),null}},[e.backendUrl,m,n,t,f]),p=ee(async u=>{if(!n)return!1;try{let h=`${e.backendUrl}${m}${n.id}/remove_task/${u}/`,v=await fetch(h,t.getFetchOptions({method:"DELETE"}));if(v.ok)return await f(),!0;{let T=await v.json().catch(()=>({}));return $(T.error||"Failed to remove task"),!1}}catch(h){return console.error("[useTasks] Failed to remove task:",h),$("Failed to remove task"),!1}},[e.backendUrl,m,n,t,f]),y=ee(async()=>{if(!n)return!1;try{let u=`${e.backendUrl}${m}${n.id}/clear/`,h=await fetch(u,t.getFetchOptions({method:"POST"}));if(h.ok)return await f(),!0;{let v=await h.json().catch(()=>({}));return $(v.error||"Failed to clear tasks"),!1}}catch(u){return console.error("[useTasks] Failed to clear tasks:",u),$("Failed to clear tasks"),!1}},[e.backendUrl,m,n,t,f]),g=ee(()=>$(null),[]);return{taskList:n,tasks:n?.tasks||[],progress:n?.progress||{total:0,completed:0,percent_complete:0},isLoading:i,error:w,loadTaskList:f,addTask:l,updateTask:k,removeTask:p,clearTasks:y,clearError:g}}function Ne(e,t,n){let o=l=>!l||typeof l!="object"||e.apiCaseStyle==="camel"?l:se(l),i=l=>!l||typeof l!="object"||e.apiCaseStyle==="snake"?l:ne(l),c=()=>e.authStrategy?e.authStrategy:e.authToken?"token":e.apiPaths.anonymousSession||e.anonymousSessionEndpoint?"anonymous":"none",w=(l=null)=>{let k=c(),p={},y=l||e.authToken||t().authToken;if(k==="token"&&y){let g=e.authHeader||"Authorization",u=e.authTokenPrefix!==void 0?e.authTokenPrefix:"Token";p[g]=u?`${u} ${y}`:y}else if(k==="jwt"&&y){let g=e.authHeader||"Authorization",u=e.authTokenPrefix!==void 0?e.authTokenPrefix:"Bearer";p[g]=u?`${u} ${y}`:y}else if(k==="anonymous"&&y){let g=e.authHeader||e.anonymousTokenHeader||"X-Anonymous-Token";p[g]=y}if(k==="session"){let g=Se(e.csrfCookieName);g&&(p["X-CSRFToken"]=g)}return p};return{getAuthStrategy:c,getAuthHeaders:w,getFetchOptions:(l={},k=null)=>{let p=c(),y={...l},g=w(k);return console.log("[ChatWidget] getFetchOptions - strategy:",p,"overrideToken:",k,"authHeaders:",g),y.headers={...y.headers,...g},p==="session"&&(y.credentials="include"),y},getOrCreateSession:async(l=!1)=>{let k=c(),p=t(),y=e.anonymousTokenKey||e.sessionTokenKey;if(k!=="anonymous")return e.authToken||p.authToken;if(!l){if(p.authToken)return p.authToken;let g=p.storage?.get(y);if(g)return n(u=>({...u,authToken:g})),g}try{let g=e.anonymousSessionEndpoint||e.apiPaths.anonymousSession,u=await fetch(`${e.backendUrl}${g}`,{method:"POST",headers:{"Content-Type":"application/json"}});if(u.ok){let h=await u.json();return n(v=>({...v,authToken:h.token})),p.storage?.set(y,h.token),h.token}}catch(g){console.warn("[ChatWidget] Failed to create session:",g)}return null},clearSession:()=>{let l=e.anonymousTokenKey||e.sessionTokenKey,k=t();n(p=>({...p,authToken:null})),k.storage?.set(l,null)},transformRequest:o,transformResponse:i}}function de({config:e,onStateChange:t,markdownParser:n,apiRef:o}){let[i,c]=U(e.embedded||e.forceOpen===!0),[w,$]=U(!1),[m,f]=U(!1),[l,k]=U(!1),[p,y]=U([]),[g,u]=U("chat"),[h,v]=U(!1),[T,A]=U(e.enableTTS),[D,j]=U(!1),[B,N]=U(null);ce(()=>{e.forceOpen!==void 0&&c(e.forceOpen)},[e.forceOpen]);let P=et(()=>Ce(e.containerId),[e.containerId]),[L,z]=U(e.authToken||null),H=et(()=>Ne(e,()=>({authToken:L,storage:P}),K=>{let ue=K({authToken:L,storage:P});ue.authToken!==L&&z(ue.authToken)}),[e,L,P]),s=De(e,H,P),M=Pe(e,H,P),C=Ke(e,H);ce(()=>{for(let d=s.messages.length-1;d>=0;d--){let I=s.messages[d];if(I.type==="sub_agent_start"){N({key:I.metadata?.subAgentKey,name:I.metadata?.agentName});return}if(I.type==="sub_agent_end"){N(null);return}}},[s.messages]),ce(()=>{let d=P.get(e.conversationIdKey);d&&s.loadConversation(d)},[]),ce(()=>{t&&t({isOpen:i,isExpanded:w,debugMode:m,messages:s.messages,conversationId:s.conversationId,isLoading:s.isLoading,error:s.error})},[i,w,m,s.messages,s.conversationId,s.isLoading,s.error]);let S=te(async()=>{if(e.showConversationSidebar){v(!0);try{let d=`${e.backendUrl}${e.apiPaths.conversations}?agent_key=${encodeURIComponent(e.agentKey)}`,I=await fetch(d,H.getFetchOptions({method:"GET"}));if(I.ok){let K=await I.json();y(K.results||K)}}catch(d){console.error("[ChatWidget] Failed to load conversations:",d),y([])}finally{v(!1)}}},[e,H]),b=te(()=>{let d=!l;k(d),d&&S()},[l,S]),_=te(d=>{d!==s.conversationId&&s.loadConversation(d),k(!1)},[s]),r=te(()=>{s.clearMessages(),k(!1)},[s]),x=te(d=>{s.sendMessage(d,{model:M.selectedModel,onAssistantMessage:I=>{}})},[s,T,M.selectedModel]),R=te(d=>{u(d),d==="tasks"&&C.loadTaskList()},[C]);if(ce(()=>{o&&(o.current={open:()=>c(!0),close:()=>c(!1),send:d=>x(d),clearMessages:()=>s.clearMessages(),toggleTTS:()=>A(d=>!d),stopSpeech:()=>j(!1),setAuth:d=>{d.token!==void 0&&z(d.token)},clearAuth:()=>z(null)})},[s,o,x]),!e.embedded&&!i)return J`
+  `}import{useState as ne,useCallback as te,useRef as lt,useEffect as it}from"preact/compat";function He(e,t,s){let[n,l]=ne([]),[r,$]=ne(!1),[i,f]=ne(null),[y,u]=ne(()=>s?.get(e.conversationIdKey)||null),[k,c]=ne(!1),[C,a]=ne(!1),[g,w]=ne(0),v=lt(null),T=lt(null);it(()=>{y&&s?.set(e.conversationIdKey,y)},[y,e.conversationIdKey,s]);let m=te(async(h,M,p)=>{v.current&&v.current.close();let S=e.apiPaths.runEvents.replace("{runId}",h),b=`${e.backendUrl}${S}`;M&&(b+=`?anonymous_token=${encodeURIComponent(M)}`);let x=new EventSource(b);v.current=x;let d="";x.addEventListener("assistant.message",O=>{try{let o=JSON.parse(O.data);e.onEvent&&e.onEvent("assistant.message",o.payload);let E=o.payload.content;E&&(d+=E,l(L=>{let j=L[L.length-1];return j?.role==="assistant"&&j.id.startsWith("assistant-stream-")?[...L.slice(0,-1),{...j,content:d}]:[...L,{id:"assistant-stream-"+Date.now(),role:"assistant",content:d,timestamp:new Date,type:"message"}]}))}catch(o){console.error("[ChatWidget] Parse error:",o)}}),x.addEventListener("tool.call",O=>{try{let o=JSON.parse(O.data);e.onEvent&&e.onEvent("tool.call",o.payload),l(E=>[...E,{id:"tool-call-"+Date.now(),role:"assistant",content:`\u{1F527} ${o.payload.name}`,timestamp:new Date,type:"tool_call",metadata:{toolName:o.payload.name,arguments:o.payload.arguments,toolCallId:o.payload.id}}])}catch(o){console.error("[ChatWidget] Parse error:",o)}}),x.addEventListener("tool.result",O=>{try{let o=JSON.parse(O.data);e.onEvent&&e.onEvent("tool.result",o.payload);let E=o.payload.result,L=E?.error;l(j=>[...j,{id:"tool-result-"+Date.now(),role:"system",content:L?`\u274C ${E.error}`:"\u2713 Done",timestamp:new Date,type:"tool_result",metadata:{toolName:o.payload.name,result:E,toolCallId:o.payload.tool_call_id}}])}catch(o){console.error("[ChatWidget] Parse error:",o)}}),x.addEventListener("custom",O=>{try{let o=JSON.parse(O.data);e.onEvent&&e.onEvent("custom",o.payload),o.payload?.type==="ui_control"&&e.onUIControl&&e.onUIControl(o.payload),o.payload?.type==="agent_context"&&l(E=>[...E,{id:"agent-context-"+Date.now(),role:"system",content:`\u{1F517} ${o.payload.agent_name||"Sub-agent"} is now handling this request`,timestamp:new Date,type:"agent_context",metadata:{agentKey:o.payload.agent_key,agentName:o.payload.agent_name,action:o.payload.action}}])}catch(o){console.error("[ChatWidget] Parse error:",o)}}),x.addEventListener("sub_agent.start",O=>{try{let o=JSON.parse(O.data);e.onEvent&&e.onEvent("sub_agent.start",o.payload),l(E=>[...E,{id:"sub-agent-start-"+Date.now(),role:"system",content:`\u{1F517} Delegating to ${o.payload.agent_name||o.payload.sub_agent_key||"sub-agent"}...`,timestamp:new Date,type:"sub_agent_start",metadata:{subAgentKey:o.payload.sub_agent_key,agentName:o.payload.agent_name,invocationMode:o.payload.invocation_mode}}])}catch(o){console.error("[ChatWidget] Parse error:",o)}}),x.addEventListener("sub_agent.end",O=>{try{let o=JSON.parse(O.data);e.onEvent&&e.onEvent("sub_agent.end",o.payload),l(E=>[...E,{id:"sub-agent-end-"+Date.now(),role:"system",content:`\u2713 ${o.payload.agent_name||"Sub-agent"} completed`,timestamp:new Date,type:"sub_agent_end",metadata:{subAgentKey:o.payload.sub_agent_key,agentName:o.payload.agent_name}}])}catch(o){console.error("[ChatWidget] Parse error:",o)}});let A=O=>{try{let o=JSON.parse(O.data);if(e.onEvent&&e.onEvent(o.type,o.payload),o.type==="run.failed"){let E=o.payload.error||"Agent run failed";f(E),l(L=>[...L,{id:"error-"+Date.now(),role:"system",content:`\u274C Error: ${E}`,timestamp:new Date,type:"error"}])}}catch(o){console.error("[ChatWidget] Parse error:",o)}$(!1),x.close(),v.current=null,d&&p&&p(d)};x.addEventListener("run.succeeded",A),x.addEventListener("run.failed",A),x.addEventListener("run.cancelled",A),x.addEventListener("run.timed_out",A),x.onerror=()=>{$(!1),x.close(),v.current=null}},[e]),W=te(async(h,M={},p={})=>{if(!h.trim()||r)return;let S=[],b={};typeof M=="function"?b={onAssistantMessage:M}:Array.isArray(M)?(S=M,b=p):b=M||{};let{model:x,thinking:d,onAssistantMessage:A,supersedeFromMessageIndex:O}=b;$(!0),f(null);let o={id:de(),role:"user",content:h.trim(),timestamp:new Date,type:"message",files:S.length>0?S.map(E=>({name:E.name,size:E.size,type:E.type})):void 0};l(E=>[...E,o]);try{let E=await t.getOrCreateSession(),L;if(S.length>0){let V=e.apiCaseStyle!=="camel",Ze=we=>V?ve(we):we,Q=new FormData;Q.append(Ze("agentKey"),e.agentKey),y&&Q.append(Ze("conversationId"),y),Q.append("messages",JSON.stringify([{role:"user",content:h.trim()}])),Q.append("metadata",JSON.stringify(V?{...e.metadata,journey_type:e.defaultJourneyType}:{...e.metadata,journeyType:e.defaultJourneyType})),x&&Q.append("model",x),d&&Q.append("thinking","true"),S.forEach(we=>{Q.append("files",we)}),L=t.getFetchOptions({method:"POST",body:Q},E)}else{let V=t.transformRequest({agentKey:e.agentKey,conversationId:y,messages:[{role:"user",content:h.trim()}],metadata:{...e.metadata,journeyType:e.defaultJourneyType},...x&&{model:x},...d&&{thinking:!0},...O!==void 0&&{supersedeFromMessageIndex:O}});L=t.getFetchOptions({method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(V)},E)}let j=await fetch(`${e.backendUrl}${e.apiPaths.runs}`,L),_=E;if(j.status===401){t.clearSession();let V=await t.getOrCreateSession(!0);V&&(_=V,S.length>0?L=t.getFetchOptions({method:"POST",body:L.body},V):L=t.getFetchOptions({method:"POST",headers:{"Content-Type":"application/json"},body:L.body},V),j=await fetch(`${e.backendUrl}${e.apiPaths.runs}`,L))}if(!j.ok){let V=await j.json().catch(()=>({}));throw new Error(V.error||V.detail||`HTTP ${j.status}`)}let z=await j.json(),Y=t.transformResponse(z);T.current=Y.id,!y&&Y.conversationId&&u(Y.conversationId),await m(Y.id,_,A)}catch(E){f(E.message||"Failed to send message"),$(!1)}finally{T.current=null}},[e,t,y,r,m]),U=te(async()=>{let h=T.current;if(!(!h||!r))try{let M=e.apiPaths.cancelRun?e.apiPaths.cancelRun.replace("{runId}",h):`${e.apiPaths.runs}${h}/cancel/`;(await fetch(`${e.backendUrl}${M}`,t.getFetchOptions({method:"POST",headers:{"Content-Type":"application/json"}}))).ok&&(v.current&&(v.current.close(),v.current=null),$(!1),T.current=null,l(S=>[...S,{id:"cancelled-"+Date.now(),role:"system",content:"\u23F9 Run cancelled",timestamp:new Date,type:"cancelled"}]))}catch(M){console.error("[ChatWidget] Failed to cancel run:",M)}},[e,t,r]),I=te(()=>{l([]),u(null),f(null),c(!1),w(0),s?.set(e.conversationIdKey,null)},[e.conversationIdKey,s]),R=h=>{let M={id:de(),role:h.role,timestamp:h.timestamp?new Date(h.timestamp):new Date};if(h.role==="tool")return{...M,role:"system",content:"\u2713 Done",type:"tool_result",metadata:{result:h.content,toolCallId:h.toolCallId}};if(h.role==="assistant"&&h.toolCalls&&h.toolCalls.length>0)return h.toolCalls.map(S=>({id:de(),role:"assistant",content:`\u{1F527} ${S.function?.name||S.name||"tool"}`,timestamp:M.timestamp,type:"tool_call",metadata:{toolName:S.function?.name||S.name,arguments:S.function?.arguments||S.arguments,toolCallId:S.id}}));let p=typeof h.content=="string"?h.content:JSON.stringify(h.content);return h.role==="assistant"&&!p?.trim()?null:{...M,content:p,type:"message"}},D=te(async h=>{console.log("[ChatWidget] loadConversation called with:",h),$(!0),l([]),u(h);try{let M=await t.getOrCreateSession(),S=`${e.backendUrl}${e.apiPaths.conversations}${h}/?limit=10&offset=0`;console.log("[ChatWidget] Fetching conversation from:",S);let b=await fetch(S,t.getFetchOptions({method:"GET"},M));if(console.log("[ChatWidget] Response status:",b.status),b.ok){let x=await b.json();console.log("[ChatWidget] Raw conversation:",x);let d=t.transformResponse(x);if(console.log("[ChatWidget] Transformed conversation:",d),d.messages){let A=d.messages.flatMap(R).filter(Boolean);console.log("[ChatWidget] Mapped messages:",A),l(A)}c(d.hasMore||!1),w(d.messages?.length||0)}else b.status===404?(console.log("[ChatWidget] Conversation not found, clearing"),u(null),s?.set(e.conversationIdKey,null)):console.error("[ChatWidget] Unexpected response status:",b.status)}catch(M){console.error("[ChatWidget] Failed to load conversation:",M)}finally{$(!1)}},[e,t,s]),P=te(async()=>{if(!(!y||C||!k)){a(!0);try{let h=await t.getOrCreateSession(),p=`${e.backendUrl}${e.apiPaths.conversations}${y}/?limit=10&offset=${g}`,S=await fetch(p,t.getFetchOptions({method:"GET"},h));if(S.ok){let b=await S.json(),x=t.transformResponse(b);if(x.messages?.length>0){let d=x.messages.flatMap(R).filter(Boolean);l(A=>[...d,...A]),w(A=>A+x.messages.length),c(x.hasMore||!1)}else c(!1)}}catch(h){console.error("[ChatWidget] Failed to load more messages:",h)}finally{a(!1)}}},[e,t,y,g,C,k]),B=te(async(h,M,p={})=>{if(r)return;let S=n[h];if(!S||S.role!=="user")return;let b=n.slice(0,h);l(b),await W(M,{...p,supersedeFromMessageIndex:h})},[n,r,W]),N=te(async(h,M={})=>{if(r)return;let p=n[h];if(!p)return;let S=h,b=p;if(p.role==="assistant"){for(let d=h-1;d>=0;d--)if(n[d].role==="user"){S=d,b=n[d];break}if(b.role!=="user")return}else if(p.role!=="user")return;let x=n.slice(0,S);l(x),await W(b.content,{...M,supersedeFromMessageIndex:S})},[n,r,W]);return it(()=>()=>{v.current&&v.current.close()},[]),{messages:n,isLoading:r,error:i,conversationId:y,hasMoreMessages:k,loadingMoreMessages:C,sendMessage:W,cancelRun:U,clearMessages:I,loadConversation:D,loadMoreMessages:P,setConversationId:u,editMessage:B,retryMessage:N}}import{useState as ge,useEffect as _t,useCallback as Se}from"preact/compat";var ct="cw_thinking_enabled";function Ve(e,t,s){let[n,l]=ge([]),[r,$]=ge(null),[i,f]=ge(null),[y,u]=ge(!1),[k,c]=ge(!1);_t(()=>{(async()=>{if(e.showModelSelector){u(!0);try{let T=await fetch(`${e.backendUrl}${e.apiPaths.models}`,t.getFetchOptions({method:"GET"}));if(T.ok){let m=await T.json(),W=m.models||[];l(W),f(m.default);let U=s?.get(e.modelKey);U&&W.some(R=>R.id===U)?$(U):$(m.default),s?.get(ct)==="true"&&c(!0)}}catch(T){console.warn("[ChatWidget] Failed to load models:",T)}finally{u(!1)}}})()},[e.backendUrl,e.apiPaths.models,e.showModelSelector,e.modelKey,t,s]);let C=Se(v=>{$(v),s?.set(e.modelKey,v)},[e.modelKey,s]),a=Se(v=>{c(v),s?.set(ct,v?"true":"false")},[s]),g=Se(()=>n.find(v=>v.id===r)||null,[n,r]),w=Se(()=>g()?.supports_thinking||!1,[g]);return{availableModels:n,selectedModel:r,defaultModel:i,isLoading:y,selectModel:C,getSelectedModelInfo:g,thinkingEnabled:k,toggleThinking:a,supportsThinking:w}}import{useState as Ue,useCallback as re}from"preact/compat";function Be(e,t){let[s,n]=Ue(null),[l,r]=Ue(!1),[$,i]=Ue(null),f=e.apiPaths?.tasks||"/api/agent/tasks/",y=re(async()=>{r(!0),i(null);try{let g=`${e.backendUrl}${f}`,w=await fetch(g,t.getFetchOptions({method:"GET"}));if(w.ok){let v=await w.json();n(v)}else{let v=await w.json().catch(()=>({}));i(v.error||"Failed to load tasks")}}catch(g){console.error("[useTasks] Failed to load task list:",g),i("Failed to load tasks")}finally{r(!1)}},[e.backendUrl,f,t]),u=re(async g=>{if(!s)return null;try{let w=`${e.backendUrl}${f}${s.id}/add_task/`,v=await fetch(w,t.getFetchOptions({method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(g)}));if(v.ok){let T=await v.json();return await y(),T}else{let T=await v.json().catch(()=>({}));return i(T.error||"Failed to add task"),null}}catch(w){return console.error("[useTasks] Failed to add task:",w),i("Failed to add task"),null}},[e.backendUrl,f,s,t,y]),k=re(async(g,w)=>{if(!s)return null;try{let v=`${e.backendUrl}${f}${s.id}/update_task/${g}/`,T=await fetch(v,t.getFetchOptions({method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify(w)}));if(T.ok){let m=await T.json();return await y(),m}else{let m=await T.json().catch(()=>({}));return i(m.error||"Failed to update task"),null}}catch(v){return console.error("[useTasks] Failed to update task:",v),i("Failed to update task"),null}},[e.backendUrl,f,s,t,y]),c=re(async g=>{if(!s)return!1;try{let w=`${e.backendUrl}${f}${s.id}/remove_task/${g}/`,v=await fetch(w,t.getFetchOptions({method:"DELETE"}));if(v.ok)return await y(),!0;{let T=await v.json().catch(()=>({}));return i(T.error||"Failed to remove task"),!1}}catch(w){return console.error("[useTasks] Failed to remove task:",w),i("Failed to remove task"),!1}},[e.backendUrl,f,s,t,y]),C=re(async()=>{if(!s)return!1;try{let g=`${e.backendUrl}${f}${s.id}/clear/`,w=await fetch(g,t.getFetchOptions({method:"POST"}));if(w.ok)return await y(),!0;{let v=await w.json().catch(()=>({}));return i(v.error||"Failed to clear tasks"),!1}}catch(g){return console.error("[useTasks] Failed to clear tasks:",g),i("Failed to clear tasks"),!1}},[e.backendUrl,f,s,t,y]),a=re(()=>i(null),[]);return{taskList:s,tasks:s?.tasks||[],progress:s?.progress||{total:0,completed:0,percent_complete:0},isLoading:l,error:$,loadTaskList:y,addTask:u,updateTask:k,removeTask:c,clearTasks:C,clearError:a}}import{useState as ae,useEffect as dt,useCallback as fe}from"preact/compat";var ut="cw_selected_system",je="cw_selected_agent",pt="cw_selected_system_version",Te="cw_selected_agent_version";function ht(e,t,s){let[n,l]=ae([]),[r,$]=ae([]),[i,f]=ae(null),[y,u]=ae(null),[k,c]=ae(null),[C,a]=ae(null),[g,w]=ae(!1),v=fe(()=>{if(y)return y;if(i){let I=n.find(R=>R.slug===i);if(I?.entry_agent)return I.entry_agent.slug}return e.agentKey},[y,i,n,e.agentKey]);dt(()=>{if(!e.showDevTools)return;(async()=>{w(!0);try{let R=await fetch(`${e.backendUrl}${e.apiPaths.systems}`,t.getFetchOptions({method:"GET"}));if(R.ok){let D=await R.json(),P=D.results||D;l(P);let B=s?.get(ut);B&&P.some(N=>N.slug===B)?f(B):P.length===1&&f(P[0].slug)}}catch(R){console.warn("[ChatWidget] Failed to load systems:",R)}finally{w(!1)}})()},[e.backendUrl,e.apiPaths.systems,e.showDevTools,t,s]),dt(()=>{if(!e.showDevTools)return;(async()=>{try{let R=i?`?system=${encodeURIComponent(i)}`:"",D=await fetch(`${e.backendUrl}${e.apiPaths.agents}${R}`,t.getFetchOptions({method:"GET"}));if(D.ok){let P=await D.json(),B=P.results||P;$(B);let N=s?.get(je);if(N&&B.some(M=>M.slug===N))u(N);else if(i){let M=n.find(p=>p.slug===i);M?.entry_agent&&u(M.entry_agent.slug)}let h=s?.get(Te);h&&a(h)}}catch(R){console.warn("[ChatWidget] Failed to load agents:",R)}})()},[e.backendUrl,e.apiPaths.agents,e.showDevTools,i,t,s,n]);let T=fe(I=>{f(I),s?.set(ut,I),u(null),a(null),s?.set(je,null),s?.set(Te,null);let D=n.find(P=>P.slug===I)?.active_version||null;c(D),s?.set(pt,D)},[s,n]),m=fe(I=>{u(I),s?.set(je,I);let D=r.find(P=>P.slug===I)?.active_version||null;a(D),s?.set(Te,D)},[s,r]),W=fe(I=>{c(I),s?.set(pt,I)},[s]),U=fe(I=>{a(I),s?.set(Te,I)},[s]);return{systems:n,agents:r,selectedSystem:i,selectedAgent:y,selectedSystemVersion:k,selectedAgentVersion:C,isLoading:g,selectSystem:T,selectAgent:m,selectSystemVersion:W,selectAgentVersion:U,getEffectiveAgentKey:v}}function Je(e,t,s){let n=u=>!u||typeof u!="object"||e.apiCaseStyle==="camel"?u:ce(u),l=u=>!u||typeof u!="object"||e.apiCaseStyle==="snake"?u:ie(u),r=()=>e.authStrategy?e.authStrategy:e.authToken?"token":e.apiPaths.anonymousSession||e.anonymousSessionEndpoint?"anonymous":"none",$=(u=null)=>{let k=r(),c={},C=u||e.authToken||t().authToken;if(k==="token"&&C){let a=e.authHeader||"Authorization",g=e.authTokenPrefix!==void 0?e.authTokenPrefix:"Token";c[a]=g?`${g} ${C}`:C}else if(k==="jwt"&&C){let a=e.authHeader||"Authorization",g=e.authTokenPrefix!==void 0?e.authTokenPrefix:"Bearer";c[a]=g?`${g} ${C}`:C}else if(k==="anonymous"&&C){let a=e.authHeader||e.anonymousTokenHeader||"X-Anonymous-Token";c[a]=C}if(k==="session"){let a=Ie(e.csrfCookieName);a&&(c["X-CSRFToken"]=a)}return c};return{getAuthStrategy:r,getAuthHeaders:$,getFetchOptions:(u={},k=null)=>{let c=r(),C={...u},a=$(k);return console.log("[ChatWidget] getFetchOptions - strategy:",c,"overrideToken:",k,"authHeaders:",a),C.headers={...C.headers,...a},c==="session"&&(C.credentials="include"),C},getOrCreateSession:async(u=!1)=>{let k=r(),c=t(),C=e.anonymousTokenKey||e.sessionTokenKey;if(k!=="anonymous")return e.authToken||c.authToken;if(!u){if(c.authToken)return c.authToken;let a=c.storage?.get(C);if(a)return s(g=>({...g,authToken:a})),a}try{let a=e.anonymousSessionEndpoint||e.apiPaths.anonymousSession,g=await fetch(`${e.backendUrl}${a}`,{method:"POST",headers:{"Content-Type":"application/json"}});if(g.ok){let w=await g.json();return s(v=>({...v,authToken:w.token})),c.storage?.set(C,w.token),w.token}}catch(a){console.warn("[ChatWidget] Failed to create session:",a)}return null},clearSession:()=>{let u=e.anonymousTokenKey||e.sessionTokenKey,k=t();s(c=>({...c,authToken:null})),k.storage?.set(u,null)},transformRequest:n,transformResponse:l}}function ye({config:e,onStateChange:t,markdownParser:s,apiRef:n}){console.log("[ChatWidget] Config:",{showConversationSidebar:e.showConversationSidebar,apiPaths:e.apiPaths});let[l,r]=q(e.embedded||e.forceOpen===!0),[$,i]=q(!1),[f,y]=q(!1),[u,k]=q(!1),[c,C]=q([]),[a,g]=q("chat"),[w,v]=q(!1),[T,m]=q(e.enableTTS),[W,U]=q(!1),[I,R]=q(null);$e(()=>{e.forceOpen!==void 0&&r(e.forceOpen)},[e.forceOpen]);let D=ze(()=>Ee(e.containerId),[e.containerId]),[P,B]=q(e.authToken||null),N=ze(()=>Je(e,()=>({authToken:P,storage:D}),Y=>{let V=Y({authToken:P,storage:D});V.authToken!==P&&B(V.authToken)}),[e,P,D]),h=ht(e,N,D),M=ze(()=>{if(!e.showDevTools)return e;let _=h.getEffectiveAgentKey();return _&&_!==e.agentKey?{...e,agentKey:_}:e},[e,h.getEffectiveAgentKey]),p=He(M,N,D),S=Ve(e,N,D),b=Be(e,N);$e(()=>{for(let _=p.messages.length-1;_>=0;_--){let z=p.messages[_];if(z.type==="sub_agent_start"){R({key:z.metadata?.subAgentKey,name:z.metadata?.agentName});return}if(z.type==="sub_agent_end"){R(null);return}}},[p.messages]),$e(()=>{let _=D.get(e.conversationIdKey);console.log("[ChatWidget] Initial load - storedConvId:",_,"key:",e.conversationIdKey),console.log("[ChatWidget] apiPaths.conversations:",e.apiPaths.conversations),_&&(console.log("[ChatWidget] Loading conversation:",_),p.loadConversation(_))},[]),$e(()=>{t&&t({isOpen:l,isExpanded:$,debugMode:f,messages:p.messages,conversationId:p.conversationId,isLoading:p.isLoading,error:p.error})},[l,$,f,p.messages,p.conversationId,p.isLoading,p.error]);let x=le(async()=>{if(e.showConversationSidebar){v(!0);try{let _=M.agentKey,z=`${e.backendUrl}${e.apiPaths.conversations}?agent_key=${encodeURIComponent(_)}`,Y=await fetch(z,N.getFetchOptions({method:"GET"}));if(Y.ok){let V=await Y.json();C(V.results||V)}}catch(_){console.error("[ChatWidget] Failed to load conversations:",_),C([])}finally{v(!1)}}},[e,M,N]),d=le(()=>{let _=!u;k(_),_&&x()},[u,x]),A=le(_=>{_!==p.conversationId&&p.loadConversation(_),k(!1)},[p]),O=le(()=>{p.clearMessages(),k(!1)},[p]),o=le(_=>{p.sendMessage(_,{model:S.selectedModel,thinking:S.thinkingEnabled&&S.supportsThinking(),onAssistantMessage:z=>{}})},[p,T,S.selectedModel,S.thinkingEnabled,S.supportsThinking]),E=le(_=>{g(_),_==="tasks"&&b.loadTaskList()},[b]);if($e(()=>{n&&(n.current={open:()=>r(!0),close:()=>r(!1),send:_=>o(_),clearMessages:()=>p.clearMessages(),toggleTTS:()=>m(_=>!_),stopSpeech:()=>U(!1),setAuth:_=>{_.token!==void 0&&B(_.token)},clearAuth:()=>B(null)})},[p,n,o]),!e.embedded&&!l)return G`
       <button 
         class="cw-fab" 
         style=${{backgroundColor:e.primaryColor}}
-        onClick=${()=>c(!0)}
+        onClick=${()=>r(!0)}
       >
         <svg class="cw-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
         </svg>
       </button>
-    `;let a=["cw-widget",w&&"cw-widget-expanded",e.embedded&&"cw-widget-embedded"].filter(Boolean).join(" ");return J`
-    <div class=${a} style=${{"--cw-primary":e.primaryColor}}>
-      ${e.showConversationSidebar&&J`
-        <${Ae}
-          isOpen=${l}
-          conversations=${p}
-          conversationsLoading=${h}
-          currentConversationId=${s.conversationId}
+    `;let L=["cw-widget",$&&"cw-widget-expanded",e.embedded&&"cw-widget-embedded"].filter(Boolean).join(" "),j=e.headerTextColor||tt(e.primaryColor);return G`
+    <div class=${L} style=${{"--cw-primary":e.primaryColor,"--cw-header-text":j}}>
+      ${e.showConversationSidebar&&G`
+        <${Ke}
+          isOpen=${u}
+          conversations=${c}
+          conversationsLoading=${w}
+          currentConversationId=${p.conversationId}
           onClose=${()=>k(!1)}
-          onNewConversation=${r}
-          onSwitchConversation=${_}
+          onNewConversation=${O}
+          onSwitchConversation=${A}
         />
       `}
       
-      <${Te}
+      <${Ae}
         config=${e}
-        debugMode=${m}
-        isExpanded=${w}
-        isSpeaking=${D}
-        messagesCount=${s.messages.length}
-        isLoading=${s.isLoading}
-        currentAgent=${B}
-        onClose=${()=>c(!1)}
-        onToggleExpand=${()=>$(!w)}
-        onToggleDebug=${()=>f(!m)}
-        onToggleTTS=${()=>A(!T)}
-        onClear=${s.clearMessages}
-        onToggleSidebar=${b}
+        debugMode=${f}
+        isExpanded=${$}
+        isSpeaking=${W}
+        messagesCount=${p.messages.length}
+        isLoading=${p.isLoading}
+        currentAgent=${I}
+        onClose=${()=>r(!1)}
+        onToggleExpand=${()=>i(!$)}
+        onToggleDebug=${()=>y(!f)}
+        onToggleTTS=${()=>m(!T)}
+        onClear=${p.clearMessages}
+        onToggleSidebar=${d}
       />
 
-      ${e.showTasksTab!==!1&&J`
+      ${e.showDevTools&&G`
+        <${rt}
+          systems=${h.systems}
+          agents=${h.agents}
+          selectedSystem=${h.selectedSystem}
+          selectedAgent=${h.selectedAgent}
+          selectedSystemVersion=${h.selectedSystemVersion}
+          selectedAgentVersion=${h.selectedAgentVersion}
+          onSelectSystem=${h.selectSystem}
+          onSelectAgent=${h.selectAgent}
+          onSelectSystemVersion=${h.selectSystemVersion}
+          onSelectAgentVersion=${h.selectAgentVersion}
+          disabled=${p.isLoading}
+        />
+      `}
+
+      ${e.showTasksTab!==!1&&G`
         <div class="cw-tabs">
           <button
-            class=${`cw-tab ${g==="chat"?"cw-tab-active":""}`}
-            onClick=${()=>R("chat")}
+            class=${`cw-tab ${a==="chat"?"cw-tab-active":""}`}
+            onClick=${()=>E("chat")}
           >
             Chat
           </button>
           <button
-            class=${`cw-tab ${g==="tasks"?"cw-tab-active":""}`}
-            onClick=${()=>R("tasks")}
+            class=${`cw-tab ${a==="tasks"?"cw-tab-active":""}`}
+            onClick=${()=>E("tasks")}
           >
-            Tasks ${C.progress.total>0?J`<span class="cw-tab-badge">${C.progress.completed}/${C.progress.total}</span>`:""}
+            Tasks ${b.progress.total>0?G`<span class="cw-tab-badge">${b.progress.completed}/${b.progress.total}</span>`:""}
           </button>
         </div>
       `}
 
-      ${m&&J`<div class="cw-status-bar"><span>🐛 Debug</span></div>`}
+      ${f&&G`<div class="cw-status-bar"><span>🐛 Debug</span></div>`}
 
-      ${g==="chat"?J`
-        <${xe}
-          messages=${s.messages}
-          isLoading=${s.isLoading}
-          hasMoreMessages=${s.hasMoreMessages}
-          loadingMoreMessages=${s.loadingMoreMessages}
-          onLoadMore=${s.loadMoreMessages}
-          onEditMessage=${s.editMessage}
-          onRetryMessage=${s.retryMessage}
-          debugMode=${m}
-          markdownParser=${n}
+      ${a==="chat"?G`
+        <${Fe}
+          messages=${p.messages}
+          isLoading=${p.isLoading}
+          hasMoreMessages=${p.hasMoreMessages}
+          loadingMoreMessages=${p.loadingMoreMessages}
+          onLoadMore=${p.loadMoreMessages}
+          onEditMessage=${p.editMessage}
+          onRetryMessage=${p.retryMessage}
+          debugMode=${f}
+          markdownParser=${s}
           emptyStateTitle=${e.emptyStateTitle}
           emptyStateMessage=${e.emptyStateMessage}
         />
 
-        ${s.error&&J`<div class="cw-error-bar">${s.error}</div>`}
+        ${p.error&&G`<div class="cw-error-bar">${p.error}</div>`}
 
-        ${e.showModelSelector&&M.availableModels.length>0&&J`
-          <${Fe}
-            availableModels=${M.availableModels}
-            selectedModel=${M.selectedModel}
-            onSelectModel=${M.selectModel}
-            disabled=${s.isLoading}
+        ${e.showModelSelector&&S.availableModels.length>0&&G`
+          <${We}
+            availableModels=${S.availableModels}
+            selectedModel=${S.selectedModel}
+            onSelectModel=${S.selectModel}
+            thinkingEnabled=${S.thinkingEnabled}
+            onToggleThinking=${S.toggleThinking}
+            disabled=${p.isLoading}
           />
         `}
 
-        <${Re}
-          onSend=${x}
-          onCancel=${s.cancelRun}
-          isLoading=${s.isLoading}
+        <${Le}
+          onSend=${o}
+          onCancel=${p.cancelRun}
+          isLoading=${p.isLoading}
           placeholder=${e.placeholder}
           primaryColor=${e.primaryColor}
           enableVoice=${e.enableVoice}
         />
-      `:J`
-        <${Oe}
-          tasks=${C.tasks}
-          progress=${C.progress}
-          isLoading=${C.isLoading}
-          error=${C.error}
-          onUpdate=${C.updateTask}
-          onRemove=${C.removeTask}
-          onClear=${C.clearTasks}
-          onRefresh=${C.loadTaskList}
+      `:G`
+        <${Ne}
+          tasks=${b.tasks}
+          progress=${b.progress}
+          isLoading=${b.isLoading}
+          error=${b.error}
+          onUpdate=${b.updateTask}
+          onRemove=${b.removeTask}
+          onClear=${b.clearTasks}
+          onRefresh=${b.loadTaskList}
         />
       `}
     </div>
-  `}var He={backendUrl:"http://localhost:8000",agentKey:"default-agent",title:"Chat Assistant",subtitle:"How can we help you today?",primaryColor:"#0066cc",position:"bottom-right",defaultJourneyType:"general",enableDebugMode:!0,enableAutoRun:!0,journeyTypes:{},customerPrompts:{},placeholder:"Type your message...",emptyStateTitle:"Start a Conversation",emptyStateMessage:"Send a message to get started.",authStrategy:null,authToken:null,authHeader:null,authTokenPrefix:null,anonymousSessionEndpoint:null,anonymousTokenKey:"chat_widget_anonymous_token",onAuthError:null,anonymousTokenHeader:"X-Anonymous-Token",conversationIdKey:"chat_widget_conversation_id",sessionTokenKey:"chat_widget_session_token",apiPaths:{anonymousSession:"/api/accounts/anonymous-session/",conversations:"/api/agent-runtime/conversations/",runs:"/api/agent-runtime/runs/",runEvents:"/api/agent-runtime/runs/{runId}/events/",simulateCustomer:"/api/agent-runtime/simulate-customer/",ttsVoices:"/api/tts/voices/",ttsSetVoice:"/api/tts/set-voice/",models:"/api/agent-runtime/models/"},apiCaseStyle:"auto",showConversationSidebar:!0,showClearButton:!0,showDebugButton:!0,showTTSButton:!0,showVoiceSettings:!0,showExpandButton:!0,showModelSelector:!1,enableVoice:!0,modelKey:"chat_widget_selected_model",autoRunDelay:1e3,autoRunMode:"automatic",enableTTS:!1,ttsProxyUrl:null,elevenLabsApiKey:null,ttsVoices:{assistant:null,user:null},ttsModel:"eleven_turbo_v2_5",ttsSettings:{stability:.5,similarity_boost:.75,style:0,use_speaker_boost:!0},availableVoices:[],onEvent:null,containerId:null,embedded:!1,metadata:{}};function We(e){let t={...He.apiPaths,...e.apiPaths||{}};return{...He,...e,apiPaths:t}}import{render as tt}from"preact/compat";import{html as ht}from"htm/preact";var ve=new Map,mt=0,E=null,Be=class{constructor(t={}){Je(this,"_handleStateChange",t=>{this._state=t});this.instanceId=`cw-${++mt}`,this.config=We(t),this.container=null,this._state={},this._apiRef={current:null},ve.set(this.instanceId,this)}init(){if(this.config.containerId){if(this.container=document.getElementById(this.config.containerId),!this.container)return console.error(`[ChatWidget] Container not found: ${this.config.containerId}`),this;this.container.classList.add("cw-container-embedded")}else this.container=document.createElement("div"),this.container.id=this.instanceId,this.container.className=`cw-container cw-position-${this.config.position}`,document.body.appendChild(this.container);return this._render(),console.log(`[ChatWidget] Instance ${this.instanceId} initialized`),this}_render(t={}){this.container&&tt(ht`<${de}
+  `}var Ge={backendUrl:"http://localhost:8000",agentKey:"default-agent",title:"Chat Assistant",subtitle:"How can we help you today?",primaryColor:"#0066cc",headerTextColor:null,position:"bottom-right",defaultJourneyType:"general",enableDebugMode:!0,enableAutoRun:!0,journeyTypes:{},customerPrompts:{},placeholder:"Type your message...",emptyStateTitle:"Start a Conversation",emptyStateMessage:"Send a message to get started.",authStrategy:null,authToken:null,authHeader:null,authTokenPrefix:null,anonymousSessionEndpoint:null,anonymousTokenKey:"chat_widget_anonymous_token",onAuthError:null,anonymousTokenHeader:"X-Anonymous-Token",conversationIdKey:"chat_widget_conversation_id",sessionTokenKey:"chat_widget_session_token",apiPaths:{anonymousSession:"/api/accounts/anonymous-session/",conversations:"/api/agent-runtime/conversations/",runs:"/api/agent-runtime/runs/",runEvents:"/api/agent-runtime/runs/{runId}/events/",simulateCustomer:"/api/agent-runtime/simulate-customer/",ttsVoices:"/api/tts/voices/",ttsSetVoice:"/api/tts/set-voice/",models:"/api/agent-runtime/models/",systems:"/api/agent-runtime/systems/",agents:"/api/agent-runtime/agents/"},apiCaseStyle:"auto",theme:"light",showConversationSidebar:!0,showClearButton:!0,showDebugButton:!0,showTTSButton:!0,showVoiceSettings:!0,showExpandButton:!0,showModelSelector:!1,showDevTools:!1,enableVoice:!0,modelKey:"chat_widget_selected_model",autoRunDelay:1e3,autoRunMode:"automatic",enableTTS:!1,ttsProxyUrl:null,elevenLabsApiKey:null,ttsVoices:{assistant:null,user:null},ttsModel:"eleven_turbo_v2_5",ttsSettings:{stability:.5,similarity_boost:.75,style:0,use_speaker_boost:!0},availableVoices:[],onEvent:null,containerId:null,embedded:!1,metadata:{}};function qe(e){let t={...Ge.apiPaths,...e.apiPaths||{}};return{...Ge,...e,apiPaths:t}}import{render as mt}from"preact/compat";import{html as Mt}from"htm/preact";var _e=new Map,xt=0,F=null,Ye=class{constructor(t={}){Qe(this,"_handleStateChange",t=>{this._state=t});this.instanceId=`cw-${++xt}`,this.config=qe(t),this.container=null,this._state={},this._apiRef={current:null},_e.set(this.instanceId,this)}init(){if(this.config.containerId){if(this.container=document.getElementById(this.config.containerId),!this.container)return console.error(`[ChatWidget] Container not found: ${this.config.containerId}`),this;this.container.classList.add("cw-container-embedded")}else this.container=document.createElement("div"),this.container.id=this.instanceId,this.container.className=`cw-container cw-position-${this.config.position}`,document.body.appendChild(this.container);return this._applyTheme(),this._render(),console.log(`[ChatWidget] Instance ${this.instanceId} initialized`),this}_applyTheme(){this.container&&(this.container.classList.remove("cw-dark","cw-auto"),this.config.theme==="dark"?this.container.classList.add("cw-dark"):this.config.theme==="auto"&&this.container.classList.add("cw-auto"))}_render(t={}){this.container&&mt(Mt`<${ye}
         config=${{...this.config,...t}}
         onStateChange=${this._handleStateChange}
-        markdownParser=${Ue._enhancedMarkdownParser}
+        markdownParser=${Xe._enhancedMarkdownParser}
         apiRef=${this._apiRef}
-      />`,this.container)}destroy(){this.container&&(tt(null,this.container),this.config.containerId?this.container.classList.remove("cw-container-embedded"):this.container.remove(),this.container=null),ve.delete(this.instanceId),console.log(`[ChatWidget] Instance ${this.instanceId} destroyed`)}open(){this._apiRef.current?this._apiRef.current.open():this._render({forceOpen:!0})}close(){this._apiRef.current?this._apiRef.current.close():this._render({forceOpen:!1})}send(t){this._apiRef.current&&this._apiRef.current.send(t)}clearMessages(){this._apiRef.current&&this._apiRef.current.clearMessages()}toggleTTS(){this._apiRef.current&&this._apiRef.current.toggleTTS()}stopSpeech(){this._apiRef.current&&this._apiRef.current.stopSpeech()}setAuth(t){this._apiRef.current&&this._apiRef.current.setAuth(t)}clearAuth(){this._apiRef.current&&this._apiRef.current.clearAuth()}getState(){return{...this._state}}getConfig(){return{...this.config}}updateMetadata(t){this.config.metadata={...this.config.metadata,...t},this._render(),console.log(`[ChatWidget] Instance ${this.instanceId} metadata updated:`,t)}updateConfig(t){this.config={...this.config,...t},this._render(),console.log(`[ChatWidget] Instance ${this.instanceId} config updated`)}};function nt(e={}){return new Be(e).init()}function ft(e={}){return E&&E.destroy(),E=nt(e),E}function gt(){E&&(E.destroy(),E=null)}function $t(){E&&E.open()}function yt(){E&&E.close()}function wt(e){E&&E.send(e)}function vt(){E&&E.clearMessages()}function kt(){E&&E.toggleTTS()}function bt(){E&&E.stopSpeech()}function Ct(e){E&&E.setAuth(e)}function St(){E&&E.clearAuth()}function Tt(){return E?E.getState():null}function Mt(){return E?E.getConfig():null}var Ue={createInstance:nt,getInstance:e=>ve.get(e),getAllInstances:()=>Array.from(ve.values()),init:ft,destroy:gt,open:$t,close:yt,send:wt,clearMessages:vt,toggleTTS:kt,stopSpeech:bt,setAuth:Ct,clearAuth:St,getState:Tt,getConfig:Mt,_enhancedMarkdownParser:null};typeof window<"u"&&(window.ChatWidget=Ue);var Dn=de;export{de as ChatWidget,Ue as ChatWidgetAPI,He as DEFAULT_CONFIG,Te as Header,Re as InputForm,_e as Message,xe as MessageList,Fe as ModelSelector,Ae as Sidebar,Oe as TaskList,me as camelToSnake,Ne as createApiClient,Ce as createStorage,Dn as default,ke as formatDate,oe as formatFileSize,ae as generateId,Se as getCSRFToken,re as getFileTypeIcon,ne as keysToCamel,se as keysToSnake,We as mergeConfig,be as parseMarkdown,ze as snakeToCamel,De as useChat,Pe as useModels,Ke as useTasks};
+      />`,this.container)}destroy(){this.container&&(mt(null,this.container),this.config.containerId?this.container.classList.remove("cw-container-embedded"):this.container.remove(),this.container=null),_e.delete(this.instanceId),console.log(`[ChatWidget] Instance ${this.instanceId} destroyed`)}open(){this._apiRef.current?this._apiRef.current.open():this._render({forceOpen:!0})}close(){this._apiRef.current?this._apiRef.current.close():this._render({forceOpen:!1})}send(t){this._apiRef.current&&this._apiRef.current.send(t)}clearMessages(){this._apiRef.current&&this._apiRef.current.clearMessages()}toggleTTS(){this._apiRef.current&&this._apiRef.current.toggleTTS()}stopSpeech(){this._apiRef.current&&this._apiRef.current.stopSpeech()}setAuth(t){this._apiRef.current&&this._apiRef.current.setAuth(t)}clearAuth(){this._apiRef.current&&this._apiRef.current.clearAuth()}getState(){return{...this._state}}getConfig(){return{...this.config}}updateMetadata(t){this.config.metadata={...this.config.metadata,...t},this._render(),console.log(`[ChatWidget] Instance ${this.instanceId} metadata updated:`,t)}updateConfig(t){this.config={...this.config,...t},"theme"in t&&this._applyTheme(),this._render(),console.log(`[ChatWidget] Instance ${this.instanceId} config updated`)}};function gt(e={}){return new Ye(e).init()}function Et(e={}){return F&&F.destroy(),F=gt(e),F}function It(){F&&(F.destroy(),F=null)}function At(){F&&F.open()}function Rt(){F&&F.close()}function Dt(e){F&&F.send(e)}function Ft(){F&&F.clearMessages()}function Ot(){F&&F.toggleTTS()}function Pt(){F&&F.stopSpeech()}function Lt(e){F&&F.setAuth(e)}function Kt(){F&&F.clearAuth()}function Wt(){return F?F.getState():null}function Nt(){return F?F.getConfig():null}var Xe={createInstance:gt,getInstance:e=>_e.get(e),getAllInstances:()=>Array.from(_e.values()),init:Et,destroy:It,open:At,close:Rt,send:Dt,clearMessages:Ft,toggleTTS:Ot,stopSpeech:Pt,setAuth:Lt,clearAuth:Kt,getState:Wt,getConfig:Nt,_enhancedMarkdownParser:null};typeof window<"u"&&(window.ChatWidget=Xe);var sn=ye;export{ye as ChatWidget,Xe as ChatWidgetAPI,Ge as DEFAULT_CONFIG,Ae as Header,Le as InputForm,De as Message,Fe as MessageList,We as ModelSelector,Ke as Sidebar,Ne as TaskList,ve as camelToSnake,Je as createApiClient,Ee as createStorage,sn as default,Me as formatDate,ue as formatFileSize,de as generateId,Ie as getCSRFToken,pe as getFileTypeIcon,ie as keysToCamel,ce as keysToSnake,qe as mergeConfig,xe as parseMarkdown,et as snakeToCamel,He as useChat,Ve as useModels,Be as useTasks};