@tanstack/ai-devtools-core 0.3.31 → 0.3.33

package/dist/Shell/{E5BETLAK.js → RRRNZJ5E.js}

@@ -2681,13 +2681,14 @@ var AIProvider = (props) => {
     });
   }
   function queueChunk(conversationId, chunk) {
-    if (!pendingConversationChunks.has(conversationId)) {
-      pendingConversationChunks.set(conversationId, {
+    let pending = pendingConversationChunks.get(conversationId);
+    if (!pending) {
+      pending = {
         chunks: [],
         newChunkCount: 0
-      });
+      };
+      pendingConversationChunks.set(conversationId, pending);
     }
-    const pending = pendingConversationChunks.get(conversationId);
     const lastPending = pending.chunks[pending.chunks.length - 1];
     if (lastPending && lastPending.type === chunk.type && isMergeableChunkType(chunk.type) && lastPending.messageId === chunk.messageId) {
       lastPending.content = chunk.content || lastPending.content;
@@ -2700,17 +2701,19 @@ var AIProvider = (props) => {
     scheduleBatchFlush();
   }
   function queueMessageChunk(conversationId, messageIndex, chunk) {
-    if (!pendingMessageChunks.has(conversationId)) {
-      pendingMessageChunks.set(conversationId, /* @__PURE__ */ new Map());
+    let messageMap = pendingMessageChunks.get(conversationId);
+    if (!messageMap) {
+      messageMap = /* @__PURE__ */ new Map();
+      pendingMessageChunks.set(conversationId, messageMap);
     }
-    const messageMap = pendingMessageChunks.get(conversationId);
-    if (!messageMap.has(messageIndex)) {
-      messageMap.set(messageIndex, {
+    let pending = messageMap.get(messageIndex);
+    if (!pending) {
+      pending = {
         chunks: [],
         newChunkCount: 0
-      });
+      };
+      messageMap.set(messageIndex, pending);
     }
-    const pending = messageMap.get(messageIndex);
     const lastPending = pending.chunks[pending.chunks.length - 1];
     if (lastPending && lastPending.type === chunk.type && isMergeableChunkType(chunk.type) && lastPending.messageId === chunk.messageId) {
       lastPending.content = chunk.content || lastPending.content;
@@ -2966,8 +2969,7 @@ var AIProvider = (props) => {
             content: part.content
           };
         }
-        if (part.type === "image" || part.type === "audio" || part.type === "video" || // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        part.type === "document") {
+        if (part.type === "image" || part.type === "audio" || part.type === "video") {
           return {
             type: part.type,
             source: part.source,
@@ -4104,6 +4106,9 @@ var getChunkTypeColor = (type) => {
     case "approval":
       return "#f59e0b";
     // orange/amber
+    case "thinking":
+      return "#a855f7";
+    // violet
     default:
       return "#6b7280";
   }
@@ -4278,8 +4283,9 @@ var ConversationHeader = (props) => {
   const conv = () => props.conversation;
   const iterationCount = () => conv().iterationCount ?? conv().iterations.length;
   const totalDuration = () => {
-    if (!conv().completedAt) return void 0;
-    return conv().completedAt - conv().startedAt;
+    const completedAt = conv().completedAt;
+    if (!completedAt) return void 0;
+    return completedAt - conv().startedAt;
   };
   const totalMessages = () => conv().messages.length;
   const totalToolCalls = () => {
@@ -4578,7 +4584,7 @@ var ToolCallDisplay = (props) => {
     insert(_el$5, () => tool().state);
     insert(_el$2, createComponent(Show, {
       get when() {
-        return memo(() => tool().duration !== void 0)() && tool().duration > 0;
+        return (tool().duration ?? 0) > 0;
       },
       get children() {
         var _el$6 = _tmpl$9(); _el$6.firstChild;
@@ -5157,34 +5163,34 @@ var MessageCard = (props) => {
     }), null);
     insert(_el$5, createComponent(Show, {
       get when() {
-        return memo(() => msg().role === "tool")() && parseJsonContent() !== null;
+        return memo(() => msg().role === "tool")() && parseJsonContent();
       },
       get fallback() {
         return (() => {
-          var _el$24 = _tmpl$55();
-          insert(_el$24, () => msg().content);
-          effect(() => className(_el$24, styles().conversationDetails.messageContent));
-          return _el$24;
+          var _el$23 = _tmpl$55();
+          insert(_el$23, () => msg().content);
+          effect(() => className(_el$23, styles().conversationDetails.messageContent));
+          return _el$23;
         })();
       },
-      get children() {
-        var _el$22 = _tmpl$55();
-        insert(_el$22, createComponent(JsonTree, {
+      children: (parsed) => (() => {
+        var _el$24 = _tmpl$55();
+        insert(_el$24, createComponent(JsonTree, {
           get value() {
-            return parseJsonContent();
+            return parsed();
           }
         }));
-        effect(() => className(_el$22, styles().conversationDetails.toolJsonContainer));
-        return _el$22;
-      }
+        effect(() => className(_el$24, styles().conversationDetails.toolJsonContainer));
+        return _el$24;
+      })()
     }), null);
     insert(_el$5, createComponent(Show, {
       get when() {
-        return memo(() => !!msg().toolCalls)() && msg().toolCalls.length > 0;
+        return msg().toolCalls?.length;
       },
       get children() {
-        var _el$23 = _tmpl$55();
-        insert(_el$23, createComponent(For, {
+        var _el$22 = _tmpl$55();
+        insert(_el$22, createComponent(For, {
           get each() {
             return msg().toolCalls;
           },
@@ -5192,21 +5198,19 @@ var MessageCard = (props) => {
             tool
           })
         }));
-        effect(() => className(_el$23, styles().conversationDetails.toolCallsContainer));
-        return _el$23;
+        effect(() => className(_el$22, styles().conversationDetails.toolCallsContainer));
+        return _el$22;
       }
     }), null);
     insert(_el$5, createComponent(Show, {
       get when() {
-        return memo(() => !!msg().chunks)() && msg().chunks.length > 0;
+        return memo(() => !!msg().chunks?.length)() ? msg().chunks : null;
       },
-      get children() {
-        return createComponent(ChunksCollapsible, {
-          get chunks() {
-            return msg().chunks;
-          }
-        });
-      }
+      children: (chunks) => createComponent(ChunksCollapsible, {
+        get chunks() {
+          return chunks();
+        }
+      })
     }), null);
     effect((_p$) => {
       var _v$1 = getCardClass(), _v$10 = msg().role === "user" ? "" : styles().conversationDetails.messageCardContent, _v$11 = styles().conversationDetails.messageHeader, _v$12 = msg().role === "user" ? styles().conversationDetails.avatarUser : isClientMessage() ? styles().conversationDetails.avatarClient : styles().conversationDetails.avatarServer, _v$13 = styles().conversationDetails.roleLabel, _v$14 = msg().role === "user" ? styles().conversationDetails.roleLabelUser : isClientMessage() ? styles().conversationDetails.roleLabelClient : styles().conversationDetails.roleLabelServer, _v$15 = styles().conversationDetails.timestamp;
@@ -5387,10 +5391,12 @@ var ChunksTab = (props) => {
     const groups = /* @__PURE__ */ new Map();
     props.chunks.forEach((chunk) => {
       const key = chunk.messageId || "no-message-id";
-      if (!groups.has(key)) {
-        groups.set(key, []);
+      let group = groups.get(key);
+      if (!group) {
+        group = [];
+        groups.set(key, group);
       }
-      groups.get(key).push(chunk);
+      group.push(chunk);
     });
     return Array.from(groups.entries());
   };
@@ -5637,13 +5643,13 @@ var _tmpl$122 = /* @__PURE__ */ template(`<span>config changed`);
 var _tmpl$132 = /* @__PURE__ */ template(`<span> middleware transform`);
 var _tmpl$142 = /* @__PURE__ */ template(`<span>\u{1F527} `);
 var _tmpl$152 = /* @__PURE__ */ template(`<span>\u23F1\uFE0F `);
-var _tmpl$162 = /* @__PURE__ */ template(`<span>\u{1F3AF} `);
-var _tmpl$172 = /* @__PURE__ */ template(`<span>\u27F3 streaming`);
-var _tmpl$182 = /* @__PURE__ */ template(`<div><span>Config Changes</span><div>`);
-var _tmpl$192 = /* @__PURE__ */ template(`<div><span>Tools</span><div>`);
-var _tmpl$20 = /* @__PURE__ */ template(`<div><span>System Prompts (<!>)`);
-var _tmpl$21 = /* @__PURE__ */ template(`<div><span>Model Options</span><div>`);
-var _tmpl$222 = /* @__PURE__ */ template(`<div><div><div><span></span><div></div></div><div></div><span>\u25B6</span></div><div><div><div></div></div></div><div><div>`);
+var _tmpl$162 = /* @__PURE__ */ template(`<span>\u27F3 streaming`);
+var _tmpl$172 = /* @__PURE__ */ template(`<div><span>Config Changes</span><div>`);
+var _tmpl$182 = /* @__PURE__ */ template(`<div><span>Tools</span><div>`);
+var _tmpl$192 = /* @__PURE__ */ template(`<div><span>System Prompts (<!>)`);
+var _tmpl$20 = /* @__PURE__ */ template(`<div><span>Model Options</span><div>`);
+var _tmpl$21 = /* @__PURE__ */ template(`<div><div><div><span></span><div></div></div><div></div><span>\u25B6</span></div><div><div><div></div></div></div><div><div>`);
+var _tmpl$222 = /* @__PURE__ */ template(`<span>\u{1F3AF} `);
 var _tmpl$232 = /* @__PURE__ */ template(`<div><span>:</span><span></span><span>\u2192</span><span>`);
 var _tmpl$242 = /* @__PURE__ */ template(`<span><span>`);
 function getIterationLabel(iter, displayIndex) {
@@ -5720,7 +5726,10 @@ var MiddlewareStep = (props) => {
     if (ev().hookName === "onBeforeToolCall" && ev().hasTransform) return "DECISION";
     return null;
   };
-  const hasChanges = () => ev().configChanges && Object.keys(ev().configChanges).length > 0;
+  const hasChanges = () => {
+    const changes = ev().configChanges;
+    return changes && Object.keys(changes).length > 0;
+  };
   return [(() => {
     var _el$ = _tmpl$310(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling;
     insert(_el$3, () => ev().middlewareName);
@@ -6072,8 +6081,9 @@ var IterationCard = (props) => {
   const isCompleted = () => !!iter().completedAt && iter().finishReason !== "error";
   const isError = () => iter().finishReason === "error";
   const duration = () => {
-    if (!iter().completedAt) return void 0;
-    return iter().completedAt - iter().startedAt;
+    const completedAt = iter().completedAt;
+    if (!completedAt) return void 0;
+    return completedAt - iter().startedAt;
   };
   const label = () => getIterationLabel(iter(), props.index);
   const steps = createMemo(() => buildSteps(iter(), props.messages));
@@ -6090,8 +6100,9 @@ var IterationCard = (props) => {
     };
   });
   const finishLabel = () => {
-    if (!iter().finishReason) return null;
-    switch (iter().finishReason) {
+    const reason = iter().finishReason;
+    if (!reason) return null;
+    switch (reason) {
       case "stop":
         return "completed";
       case "tool_calls":
@@ -6101,7 +6112,7 @@ var IterationCard = (props) => {
       case "length":
         return "max length";
       default:
-        return iter().finishReason;
+        return reason;
     }
   };
   const headerAccent = () => {
@@ -6111,9 +6122,13 @@ var IterationCard = (props) => {
     return "";
   };
   const configSubtitle = () => {
+    const {
+      model,
+      provider
+    } = iter();
     const parts = [];
-    if (iter().model) parts.push(iter().model);
-    if (iter().provider) parts.push(iter().provider);
+    if (model) parts.push(model);
+    if (provider) parts.push(provider);
     return parts.length > 0 ? parts.join(" \xB7 ") : null;
   };
   const toolNames = () => iter().toolNames || [];
@@ -6181,7 +6196,7 @@ var IterationCard = (props) => {
   };
   const hasExpandableConfig = () => toolNames().length > 0 || systemPrompts().length > 0 || hasModelOptions();
   return (() => {
-    var _el$42 = _tmpl$222(), _el$43 = _el$42.firstChild, _el$44 = _el$43.firstChild, _el$45 = _el$44.firstChild, _el$46 = _el$45.nextSibling, _el$57 = _el$44.nextSibling, _el$66 = _el$57.nextSibling, _el$67 = _el$43.nextSibling, _el$68 = _el$67.firstChild, _el$69 = _el$68.firstChild, _el$84 = _el$67.nextSibling, _el$85 = _el$84.firstChild;
+    var _el$42 = _tmpl$21(), _el$43 = _el$42.firstChild, _el$44 = _el$43.firstChild, _el$45 = _el$44.firstChild, _el$46 = _el$45.nextSibling, _el$57 = _el$44.nextSibling, _el$64 = _el$57.nextSibling, _el$65 = _el$43.nextSibling, _el$66 = _el$65.firstChild, _el$67 = _el$66.firstChild, _el$82 = _el$65.nextSibling, _el$83 = _el$82.firstChild;
     _el$43.$$click = () => setIsOpen(!isOpen());
     insert(_el$45, label);
     insert(_el$46, createComponent(Show, {
@@ -6319,38 +6334,38 @@ var IterationCard = (props) => {
       get when() {
         return deltaUsage();
       },
-      get children() {
-        var _el$63 = _tmpl$162(); _el$63.firstChild;
-        insert(_el$63, () => deltaUsage().totalTokens.toLocaleString(), null);
+      children: (usage) => (() => {
+        var _el$84 = _tmpl$222(); _el$84.firstChild;
+        insert(_el$84, () => usage().totalTokens.toLocaleString(), null);
         effect((_p$) => {
-          var _v$33 = `${s().badge} ${s().badgeUsage}`, _v$34 = `Prompt: ${deltaUsage().promptTokens.toLocaleString()} | Completion: ${deltaUsage().completionTokens.toLocaleString()}`;
-          _v$33 !== _p$.e && className(_el$63, _p$.e = _v$33);
-          _v$34 !== _p$.t && setAttribute(_el$63, "title", _p$.t = _v$34);
+          var _v$56 = `${s().badge} ${s().badgeUsage}`, _v$57 = `Prompt: ${usage().promptTokens.toLocaleString()} | Completion: ${usage().completionTokens.toLocaleString()}`;
+          _v$56 !== _p$.e && className(_el$84, _p$.e = _v$56);
+          _v$57 !== _p$.t && setAttribute(_el$84, "title", _p$.t = _v$57);
           return _p$;
         }, {
           e: void 0,
           t: void 0
         });
-        return _el$63;
-      }
+        return _el$84;
+      })()
     }), null);
     insert(_el$57, createComponent(Show, {
       get when() {
         return isActive();
       },
       get children() {
-        var _el$65 = _tmpl$172();
-        effect(() => className(_el$65, `${s().badge} ${s().badgeDuration}`));
-        return _el$65;
+        var _el$63 = _tmpl$162();
+        effect(() => className(_el$63, `${s().badge} ${s().badgeDuration}`));
+        return _el$63;
       }
     }), null);
-    insert(_el$69, createComponent(Show, {
+    insert(_el$67, createComponent(Show, {
       get when() {
         return hasConfigChanged();
       },
       get children() {
-        var _el$70 = _tmpl$182(), _el$71 = _el$70.firstChild, _el$72 = _el$71.nextSibling;
-        insert(_el$72, createComponent(For, {
+        var _el$68 = _tmpl$172(), _el$69 = _el$68.firstChild, _el$70 = _el$69.nextSibling;
+        insert(_el$70, createComponent(For, {
           get each() {
             return configDiffs();
           },
@@ -6378,26 +6393,26 @@ var IterationCard = (props) => {
           })()
         }));
         effect((_p$) => {
-          var _v$35 = s().configPanelSection, _v$36 = s().configPanelLabel, _v$37 = s().configDiffSection;
-          _v$35 !== _p$.e && className(_el$70, _p$.e = _v$35);
-          _v$36 !== _p$.t && className(_el$71, _p$.t = _v$36);
-          _v$37 !== _p$.a && className(_el$72, _p$.a = _v$37);
+          var _v$33 = s().configPanelSection, _v$34 = s().configPanelLabel, _v$35 = s().configDiffSection;
+          _v$33 !== _p$.e && className(_el$68, _p$.e = _v$33);
+          _v$34 !== _p$.t && className(_el$69, _p$.t = _v$34);
+          _v$35 !== _p$.a && className(_el$70, _p$.a = _v$35);
           return _p$;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
         });
-        return _el$70;
+        return _el$68;
       }
     }), null);
-    insert(_el$69, createComponent(Show, {
+    insert(_el$67, createComponent(Show, {
       get when() {
         return toolNames().length > 0;
       },
       get children() {
-        var _el$73 = _tmpl$192(), _el$74 = _el$73.firstChild, _el$75 = _el$74.nextSibling;
-        insert(_el$75, createComponent(For, {
+        var _el$71 = _tmpl$182(), _el$72 = _el$71.firstChild, _el$73 = _el$72.nextSibling;
+        insert(_el$73, createComponent(For, {
           get each() {
             return toolNames();
           },
@@ -6418,27 +6433,27 @@ var IterationCard = (props) => {
           })()
         }));
         effect((_p$) => {
-          var _v$38 = s().configPanelSection, _v$39 = s().configPanelLabel, _v$40 = s().configToolsList;
-          _v$38 !== _p$.e && className(_el$73, _p$.e = _v$38);
-          _v$39 !== _p$.t && className(_el$74, _p$.t = _v$39);
-          _v$40 !== _p$.a && className(_el$75, _p$.a = _v$40);
+          var _v$36 = s().configPanelSection, _v$37 = s().configPanelLabel, _v$38 = s().configToolsList;
+          _v$36 !== _p$.e && className(_el$71, _p$.e = _v$36);
+          _v$37 !== _p$.t && className(_el$72, _p$.t = _v$37);
+          _v$38 !== _p$.a && className(_el$73, _p$.a = _v$38);
           return _p$;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
         });
-        return _el$73;
+        return _el$71;
       }
     }), null);
-    insert(_el$69, createComponent(Show, {
+    insert(_el$67, createComponent(Show, {
       get when() {
         return systemPrompts().length > 0;
       },
       get children() {
-        var _el$76 = _tmpl$20(), _el$77 = _el$76.firstChild, _el$78 = _el$77.firstChild, _el$80 = _el$78.nextSibling; _el$80.nextSibling;
-        insert(_el$77, () => systemPrompts().length, _el$80);
-        insert(_el$76, createComponent(For, {
+        var _el$74 = _tmpl$192(), _el$75 = _el$74.firstChild, _el$76 = _el$75.firstChild, _el$78 = _el$76.nextSibling; _el$78.nextSibling;
+        insert(_el$75, () => systemPrompts().length, _el$78);
+        insert(_el$74, createComponent(For, {
           get each() {
             return systemPrompts();
           },
@@ -6450,24 +6465,24 @@ var IterationCard = (props) => {
           })
         }), null);
         effect((_p$) => {
-          var _v$41 = s().configPanelSection, _v$42 = s().configPanelLabel;
-          _v$41 !== _p$.e && className(_el$76, _p$.e = _v$41);
-          _v$42 !== _p$.t && className(_el$77, _p$.t = _v$42);
+          var _v$39 = s().configPanelSection, _v$40 = s().configPanelLabel;
+          _v$39 !== _p$.e && className(_el$74, _p$.e = _v$39);
+          _v$40 !== _p$.t && className(_el$75, _p$.t = _v$40);
           return _p$;
         }, {
           e: void 0,
           t: void 0
         });
-        return _el$76;
+        return _el$74;
       }
     }), null);
-    insert(_el$69, createComponent(Show, {
+    insert(_el$67, createComponent(Show, {
       get when() {
         return hasModelOptions();
       },
       get children() {
-        var _el$81 = _tmpl$21(), _el$82 = _el$81.firstChild, _el$83 = _el$82.nextSibling;
-        insert(_el$83, createComponent(JsonTree, {
+        var _el$79 = _tmpl$20(), _el$80 = _el$79.firstChild, _el$81 = _el$80.nextSibling;
+        insert(_el$81, createComponent(JsonTree, {
           get value() {
             return modelOptions();
           },
@@ -6475,20 +6490,20 @@ var IterationCard = (props) => {
           copyable: true
         }));
         effect((_p$) => {
-          var _v$43 = s().configPanelSection, _v$44 = s().configPanelLabel, _v$45 = s().configJsonTreeContainer;
-          _v$43 !== _p$.e && className(_el$81, _p$.e = _v$43);
-          _v$44 !== _p$.t && className(_el$82, _p$.t = _v$44);
-          _v$45 !== _p$.a && className(_el$83, _p$.a = _v$45);
+          var _v$41 = s().configPanelSection, _v$42 = s().configPanelLabel, _v$43 = s().configJsonTreeContainer;
+          _v$41 !== _p$.e && className(_el$79, _p$.e = _v$41);
+          _v$42 !== _p$.t && className(_el$80, _p$.t = _v$42);
+          _v$43 !== _p$.a && className(_el$81, _p$.a = _v$43);
           return _p$;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
         });
-        return _el$81;
+        return _el$79;
       }
     }), null);
-    insert(_el$85, createComponent(Index, {
+    insert(_el$83, createComponent(Index, {
       get each() {
         return steps();
       },
@@ -6554,19 +6569,19 @@ var IterationCard = (props) => {
       })
     }));
     effect((_p$) => {
-      var _v$46 = s().iterCard, _v$47 = `${props.index * 60}ms`, _v$48 = `${s().iterCardHeader} ${headerAccent()}`, _v$49 = s().cardHeaderContent, _v$50 = s().iterCardTitle, _v$51 = s().cardSubtitle, _v$52 = s().cardHeaderBadges, _v$53 = `${s().chevron} ${isOpen() ? s().chevronOpen : ""}`, _v$54 = `${s().configPanelWrapper} ${configExpanded() ? s().configPanelWrapperOpen : ""}`, _v$55 = s().configPanel, _v$56 = `${s().cardBody} ${isOpen() ? s().cardBodyOpen : ""}`, _v$57 = s().cardBodyInner;
-      _v$46 !== _p$.e && className(_el$42, _p$.e = _v$46);
-      _v$47 !== _p$.t && setStyleProperty(_el$42, "animation-delay", _p$.t = _v$47);
-      _v$48 !== _p$.a && className(_el$43, _p$.a = _v$48);
-      _v$49 !== _p$.o && className(_el$44, _p$.o = _v$49);
-      _v$50 !== _p$.i && className(_el$45, _p$.i = _v$50);
-      _v$51 !== _p$.n && className(_el$46, _p$.n = _v$51);
-      _v$52 !== _p$.s && className(_el$57, _p$.s = _v$52);
-      _v$53 !== _p$.h && className(_el$66, _p$.h = _v$53);
-      _v$54 !== _p$.r && className(_el$67, _p$.r = _v$54);
-      _v$55 !== _p$.d && className(_el$68, _p$.d = _v$55);
-      _v$56 !== _p$.l && className(_el$84, _p$.l = _v$56);
-      _v$57 !== _p$.u && className(_el$85, _p$.u = _v$57);
+      var _v$44 = s().iterCard, _v$45 = `${props.index * 60}ms`, _v$46 = `${s().iterCardHeader} ${headerAccent()}`, _v$47 = s().cardHeaderContent, _v$48 = s().iterCardTitle, _v$49 = s().cardSubtitle, _v$50 = s().cardHeaderBadges, _v$51 = `${s().chevron} ${isOpen() ? s().chevronOpen : ""}`, _v$52 = `${s().configPanelWrapper} ${configExpanded() ? s().configPanelWrapperOpen : ""}`, _v$53 = s().configPanel, _v$54 = `${s().cardBody} ${isOpen() ? s().cardBodyOpen : ""}`, _v$55 = s().cardBodyInner;
+      _v$44 !== _p$.e && className(_el$42, _p$.e = _v$44);
+      _v$45 !== _p$.t && setStyleProperty(_el$42, "animation-delay", _p$.t = _v$45);
+      _v$46 !== _p$.a && className(_el$43, _p$.a = _v$46);
+      _v$47 !== _p$.o && className(_el$44, _p$.o = _v$47);
+      _v$48 !== _p$.i && className(_el$45, _p$.i = _v$48);
+      _v$49 !== _p$.n && className(_el$46, _p$.n = _v$49);
+      _v$50 !== _p$.s && className(_el$57, _p$.s = _v$50);
+      _v$51 !== _p$.h && className(_el$64, _p$.h = _v$51);
+      _v$52 !== _p$.r && className(_el$65, _p$.r = _v$52);
+      _v$53 !== _p$.d && className(_el$66, _p$.d = _v$53);
+      _v$54 !== _p$.l && className(_el$82, _p$.l = _v$54);
+      _v$55 !== _p$.u && className(_el$83, _p$.u = _v$55);
       return _p$;
     }, {
       e: void 0,
@@ -6600,12 +6615,12 @@ var _tmpl$94 = /* @__PURE__ */ template(`<span> middleware transform`);
 var _tmpl$03 = /* @__PURE__ */ template(`<span>\u{1F504} `);
 var _tmpl$111 = /* @__PURE__ */ template(`<span>\u{1F527} `);
 var _tmpl$103 = /* @__PURE__ */ template(`<span>\u23F1\uFE0F `);
-var _tmpl$113 = /* @__PURE__ */ template(`<span>\u{1F3AF} `);
-var _tmpl$123 = /* @__PURE__ */ template(`<span>\u27F3 streaming`);
-var _tmpl$133 = /* @__PURE__ */ template(`<div><span>Tools</span><div>`);
-var _tmpl$143 = /* @__PURE__ */ template(`<div><span>System Prompts (<!>)`);
-var _tmpl$153 = /* @__PURE__ */ template(`<div><span>Model Options</span><div>`);
-var _tmpl$163 = /* @__PURE__ */ template(`<div><div><div>U</div><div><span></span><div></div></div><div></div><span>\u25B6</span></div><div><div><div></div></div></div><div><div><div>`);
+var _tmpl$113 = /* @__PURE__ */ template(`<span>\u27F3 streaming`);
+var _tmpl$123 = /* @__PURE__ */ template(`<div><span>Tools</span><div>`);
+var _tmpl$133 = /* @__PURE__ */ template(`<div><span>System Prompts (<!>)`);
+var _tmpl$143 = /* @__PURE__ */ template(`<div><span>Model Options</span><div>`);
+var _tmpl$153 = /* @__PURE__ */ template(`<div><div><div>U</div><div><span></span><div></div></div><div></div><span>\u25B6</span></div><div><div><div></div></div></div><div><div><div>`);
+var _tmpl$163 = /* @__PURE__ */ template(`<span>\u{1F3AF} `);
 var _tmpl$173 = /* @__PURE__ */ template(`<span><span>`);
 var IterationTimeline = (props) => {
   const styles = useStyles();
@@ -6621,8 +6636,7 @@ var IterationTimeline = (props) => {
     }
     const result = [];
     const sortedUsers = [...userMessages].sort((a, b) => a.timestamp - b.timestamp);
-    for (let u = 0; u < sortedUsers.length; u++) {
-      const currentUser = sortedUsers[u];
+    for (const [u, currentUser] of sortedUsers.entries()) {
       const nextUser = sortedUsers[u + 1];
       const groupIters = iters.filter((it) => {
         if (it.startedAt < currentUser.timestamp) return false;
@@ -6636,8 +6650,9 @@ var IterationTimeline = (props) => {
         });
       }
     }
-    if (sortedUsers[0]) {
-      const earlyIters = iters.filter((it) => it.startedAt < sortedUsers[0].timestamp);
+    const firstUser = sortedUsers[0];
+    if (firstUser) {
+      const earlyIters = iters.filter((it) => it.startedAt < firstUser.timestamp);
       if (earlyIters.length > 0) {
         result.unshift({
           userMessage: null,
@@ -6840,7 +6855,7 @@ var UserMessageGroupCard = (props) => {
   });
   const hasExpandableConfig = () => toolNames().length > 0 || systemPrompts().length > 0 || hasModelOptions();
   return (() => {
-    var _el$1 = _tmpl$163(), _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling, _el$13 = _el$12.firstChild, _el$14 = _el$13.nextSibling, _el$24 = _el$12.nextSibling, _el$34 = _el$24.nextSibling, _el$35 = _el$10.nextSibling, _el$36 = _el$35.firstChild, _el$37 = _el$36.firstChild, _el$49 = _el$35.nextSibling, _el$50 = _el$49.firstChild, _el$51 = _el$50.firstChild;
+    var _el$1 = _tmpl$153(), _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling, _el$13 = _el$12.firstChild, _el$14 = _el$13.nextSibling, _el$24 = _el$12.nextSibling, _el$32 = _el$24.nextSibling, _el$33 = _el$10.nextSibling, _el$34 = _el$33.firstChild, _el$35 = _el$34.firstChild, _el$47 = _el$33.nextSibling, _el$48 = _el$47.firstChild, _el$49 = _el$48.firstChild;
     _el$10.$$click = () => setIsOpen(!isOpen());
     insert(_el$13, userContent);
     insert(_el$14, createComponent(Show, {
@@ -6976,38 +6991,38 @@ var UserMessageGroupCard = (props) => {
       get when() {
         return totalUsage();
       },
-      get children() {
-        var _el$31 = _tmpl$113(); _el$31.firstChild;
-        insert(_el$31, () => totalUsage().totalTokens.toLocaleString(), null);
+      children: (usage) => (() => {
+        var _el$50 = _tmpl$163(); _el$50.firstChild;
+        insert(_el$50, () => usage().totalTokens.toLocaleString(), null);
         effect((_p$) => {
-          var _v$1 = `${s().badge} ${s().badgeUsage}`, _v$10 = `Prompt: ${totalUsage().promptTokens.toLocaleString()} | Completion: ${totalUsage().completionTokens.toLocaleString()}`;
-          _v$1 !== _p$.e && className(_el$31, _p$.e = _v$1);
-          _v$10 !== _p$.t && setAttribute(_el$31, "title", _p$.t = _v$10);
+          var _v$30 = `${s().badge} ${s().badgeUsage}`, _v$31 = `Prompt: ${usage().promptTokens.toLocaleString()} | Completion: ${usage().completionTokens.toLocaleString()}`;
+          _v$30 !== _p$.e && className(_el$50, _p$.e = _v$30);
+          _v$31 !== _p$.t && setAttribute(_el$50, "title", _p$.t = _v$31);
           return _p$;
         }, {
           e: void 0,
           t: void 0
         });
-        return _el$31;
-      }
+        return _el$50;
+      })()
     }), null);
     insert(_el$24, createComponent(Show, {
       get when() {
         return isActive();
       },
       get children() {
-        var _el$33 = _tmpl$123();
-        effect(() => className(_el$33, `${s().badge} ${s().badgeDuration}`));
-        return _el$33;
+        var _el$31 = _tmpl$113();
+        effect(() => className(_el$31, `${s().badge} ${s().badgeDuration}`));
+        return _el$31;
       }
     }), null);
-    insert(_el$37, createComponent(Show, {
+    insert(_el$35, createComponent(Show, {
       get when() {
         return toolNames().length > 0;
       },
       get children() {
-        var _el$38 = _tmpl$133(), _el$39 = _el$38.firstChild, _el$40 = _el$39.nextSibling;
-        insert(_el$40, createComponent(For, {
+        var _el$36 = _tmpl$123(), _el$37 = _el$36.firstChild, _el$38 = _el$37.nextSibling;
+        insert(_el$38, createComponent(For, {
           get each() {
             return toolNames();
           },
@@ -7028,27 +7043,27 @@ var UserMessageGroupCard = (props) => {
           })()
         }));
         effect((_p$) => {
-          var _v$11 = s().configPanelSection, _v$12 = s().configPanelLabel, _v$13 = s().configToolsList;
-          _v$11 !== _p$.e && className(_el$38, _p$.e = _v$11);
-          _v$12 !== _p$.t && className(_el$39, _p$.t = _v$12);
-          _v$13 !== _p$.a && className(_el$40, _p$.a = _v$13);
+          var _v$1 = s().configPanelSection, _v$10 = s().configPanelLabel, _v$11 = s().configToolsList;
+          _v$1 !== _p$.e && className(_el$36, _p$.e = _v$1);
+          _v$10 !== _p$.t && className(_el$37, _p$.t = _v$10);
+          _v$11 !== _p$.a && className(_el$38, _p$.a = _v$11);
           return _p$;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
         });
-        return _el$38;
+        return _el$36;
       }
     }), null);
-    insert(_el$37, createComponent(Show, {
+    insert(_el$35, createComponent(Show, {
       get when() {
         return systemPrompts().length > 0;
       },
       get children() {
-        var _el$41 = _tmpl$143(), _el$42 = _el$41.firstChild, _el$43 = _el$42.firstChild, _el$45 = _el$43.nextSibling; _el$45.nextSibling;
-        insert(_el$42, () => systemPrompts().length, _el$45);
-        insert(_el$41, createComponent(For, {
+        var _el$39 = _tmpl$133(), _el$40 = _el$39.firstChild, _el$41 = _el$40.firstChild, _el$43 = _el$41.nextSibling; _el$43.nextSibling;
+        insert(_el$40, () => systemPrompts().length, _el$43);
+        insert(_el$39, createComponent(For, {
           get each() {
             return systemPrompts();
           },
@@ -7060,24 +7075,24 @@ var UserMessageGroupCard = (props) => {
           })
         }), null);
         effect((_p$) => {
-          var _v$14 = s().configPanelSection, _v$15 = s().configPanelLabel;
-          _v$14 !== _p$.e && className(_el$41, _p$.e = _v$14);
-          _v$15 !== _p$.t && className(_el$42, _p$.t = _v$15);
+          var _v$12 = s().configPanelSection, _v$13 = s().configPanelLabel;
+          _v$12 !== _p$.e && className(_el$39, _p$.e = _v$12);
+          _v$13 !== _p$.t && className(_el$40, _p$.t = _v$13);
           return _p$;
         }, {
           e: void 0,
           t: void 0
         });
-        return _el$41;
+        return _el$39;
       }
     }), null);
-    insert(_el$37, createComponent(Show, {
+    insert(_el$35, createComponent(Show, {
       get when() {
         return hasModelOptions();
       },
       get children() {
-        var _el$46 = _tmpl$153(), _el$47 = _el$46.firstChild, _el$48 = _el$47.nextSibling;
-        insert(_el$48, createComponent(JsonTree, {
+        var _el$44 = _tmpl$143(), _el$45 = _el$44.firstChild, _el$46 = _el$45.nextSibling;
+        insert(_el$46, createComponent(JsonTree, {
           get value() {
             return modelOptions();
           },
@@ -7085,20 +7100,20 @@ var UserMessageGroupCard = (props) => {
           copyable: true
         }));
         effect((_p$) => {
-          var _v$16 = s().configPanelSection, _v$17 = s().configPanelLabel, _v$18 = s().configJsonTreeContainer;
-          _v$16 !== _p$.e && className(_el$46, _p$.e = _v$16);
-          _v$17 !== _p$.t && className(_el$47, _p$.t = _v$17);
-          _v$18 !== _p$.a && className(_el$48, _p$.a = _v$18);
+          var _v$14 = s().configPanelSection, _v$15 = s().configPanelLabel, _v$16 = s().configJsonTreeContainer;
+          _v$14 !== _p$.e && className(_el$44, _p$.e = _v$14);
+          _v$15 !== _p$.t && className(_el$45, _p$.t = _v$15);
+          _v$16 !== _p$.a && className(_el$46, _p$.a = _v$16);
           return _p$;
         }, {
           e: void 0,
           t: void 0,
           a: void 0
         });
-        return _el$46;
+        return _el$44;
       }
     }), null);
-    insert(_el$51, createComponent(For, {
+    insert(_el$49, createComponent(For, {
       get each() {
         return iters();
       },
@@ -7119,20 +7134,20 @@ var UserMessageGroupCard = (props) => {
       })
     }));
     effect((_p$) => {
-      var _v$19 = `${s().card} ${groupAccentClass()}`, _v$20 = s().cardHeader, _v$21 = s().userBubble, _v$22 = s().cardHeaderContent, _v$23 = s().cardHeaderLabel, _v$24 = s().cardSubtitle, _v$25 = s().cardHeaderBadges, _v$26 = `${s().chevron} ${isOpen() ? s().chevronOpen : ""}`, _v$27 = `${s().configPanelWrapper} ${configExpanded() ? s().configPanelWrapperOpen : ""}`, _v$28 = s().configPanel, _v$29 = `${s().cardBody} ${isOpen() ? s().cardBodyOpen : ""}`, _v$30 = s().cardBodyInner, _v$31 = s().iterList;
-      _v$19 !== _p$.e && className(_el$1, _p$.e = _v$19);
-      _v$20 !== _p$.t && className(_el$10, _p$.t = _v$20);
-      _v$21 !== _p$.a && className(_el$11, _p$.a = _v$21);
-      _v$22 !== _p$.o && className(_el$12, _p$.o = _v$22);
-      _v$23 !== _p$.i && className(_el$13, _p$.i = _v$23);
-      _v$24 !== _p$.n && className(_el$14, _p$.n = _v$24);
-      _v$25 !== _p$.s && className(_el$24, _p$.s = _v$25);
-      _v$26 !== _p$.h && className(_el$34, _p$.h = _v$26);
-      _v$27 !== _p$.r && className(_el$35, _p$.r = _v$27);
-      _v$28 !== _p$.d && className(_el$36, _p$.d = _v$28);
-      _v$29 !== _p$.l && className(_el$49, _p$.l = _v$29);
-      _v$30 !== _p$.u && className(_el$50, _p$.u = _v$30);
-      _v$31 !== _p$.c && className(_el$51, _p$.c = _v$31);
+      var _v$17 = `${s().card} ${groupAccentClass()}`, _v$18 = s().cardHeader, _v$19 = s().userBubble, _v$20 = s().cardHeaderContent, _v$21 = s().cardHeaderLabel, _v$22 = s().cardSubtitle, _v$23 = s().cardHeaderBadges, _v$24 = `${s().chevron} ${isOpen() ? s().chevronOpen : ""}`, _v$25 = `${s().configPanelWrapper} ${configExpanded() ? s().configPanelWrapperOpen : ""}`, _v$26 = s().configPanel, _v$27 = `${s().cardBody} ${isOpen() ? s().cardBodyOpen : ""}`, _v$28 = s().cardBodyInner, _v$29 = s().iterList;
+      _v$17 !== _p$.e && className(_el$1, _p$.e = _v$17);
+      _v$18 !== _p$.t && className(_el$10, _p$.t = _v$18);
+      _v$19 !== _p$.a && className(_el$11, _p$.a = _v$19);
+      _v$20 !== _p$.o && className(_el$12, _p$.o = _v$20);
+      _v$21 !== _p$.i && className(_el$13, _p$.i = _v$21);
+      _v$22 !== _p$.n && className(_el$14, _p$.n = _v$22);
+      _v$23 !== _p$.s && className(_el$24, _p$.s = _v$23);
+      _v$24 !== _p$.h && className(_el$32, _p$.h = _v$24);
+      _v$25 !== _p$.r && className(_el$33, _p$.r = _v$25);
+      _v$26 !== _p$.d && className(_el$34, _p$.d = _v$26);
+      _v$27 !== _p$.l && className(_el$47, _p$.l = _v$27);
+      _v$28 !== _p$.u && className(_el$48, _p$.u = _v$28);
+      _v$29 !== _p$.c && className(_el$49, _p$.c = _v$29);
       return _p$;
     }, {
       e: void 0,