@tanstack/ai-devtools-core 0.4.3 → 0.4.5

package/dist/Shell/{SLOX2TPU.js → 3ITTEC6O.js}

@@ -7204,8 +7204,10 @@ var _tmpl$222 = /* @__PURE__ */ template(`<div><span>System Prompts (<!>)`);
 var _tmpl$23 = /* @__PURE__ */ template(`<div><span>Model Options</span><div>`);
 var _tmpl$24 = /* @__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$25 = /* @__PURE__ */ template(`<span>\u{1F3AF} `);
-var _tmpl$26 = /* @__PURE__ */ template(`<div><span>:</span><span></span><span>\u2192</span><span>`);
-var _tmpl$27 = /* @__PURE__ */ template(`<span><span>`);
+var _tmpl$26 = /* @__PURE__ */ template(`<span title="Cached prompt tokens">\u{1F4BE} `);
+var _tmpl$27 = /* @__PURE__ */ template(`<span title="Reasoning tokens">\u{1F9E0} `);
+var _tmpl$28 = /* @__PURE__ */ template(`<div><span>:</span><span></span><span>\u2192</span><span>`);
+var _tmpl$29 = /* @__PURE__ */ template(`<span><span>`);
 function getApprovalStatus(toolCall) {
   if (toolCall.approvalApproved === true || toolCall.state === "approved") {
     return "approved";
@@ -8133,6 +8135,28 @@ var IterationCard = (props) => {
         return _el$94;
       })()
     }), null);
+    insert(_el$67, createComponent(Show, {
+      get when() {
+        return iter().usage?.promptTokensDetails?.cachedTokens;
+      },
+      children: (cached) => (() => {
+        var _el$96 = _tmpl$26(); _el$96.firstChild;
+        insert(_el$96, () => cached().toLocaleString(), null);
+        effect(() => className(_el$96, `${s().badge} ${s().badgeUsage}`));
+        return _el$96;
+      })()
+    }), null);
+    insert(_el$67, createComponent(Show, {
+      get when() {
+        return iter().usage?.completionTokensDetails?.reasoningTokens;
+      },
+      children: (reasoning) => (() => {
+        var _el$98 = _tmpl$27(); _el$98.firstChild;
+        insert(_el$98, () => reasoning().toLocaleString(), null);
+        effect(() => className(_el$98, `${s().badge} ${s().badgeUsage}`));
+        return _el$98;
+      })()
+    }), null);
     insert(_el$67, createComponent(Show, {
       get when() {
         return isActive();
@@ -8154,17 +8178,17 @@ var IterationCard = (props) => {
             return configDiffs();
           },
           children: (diff) => (() => {
-            var _el$96 = _tmpl$26(), _el$97 = _el$96.firstChild, _el$98 = _el$97.firstChild, _el$99 = _el$97.nextSibling, _el$100 = _el$99.nextSibling, _el$101 = _el$100.nextSibling;
-            insert(_el$97, () => diff.key, _el$98);
-            insert(_el$99, () => diff.from);
-            insert(_el$101, () => diff.to);
+            var _el$100 = _tmpl$28(), _el$101 = _el$100.firstChild, _el$102 = _el$101.firstChild, _el$103 = _el$101.nextSibling, _el$104 = _el$103.nextSibling, _el$105 = _el$104.nextSibling;
+            insert(_el$101, () => diff.key, _el$102);
+            insert(_el$103, () => diff.from);
+            insert(_el$105, () => diff.to);
             effect((_p$) => {
               var _v$58 = s().configDiffRow, _v$59 = s().configDiffKey, _v$60 = s().configDiffFrom, _v$61 = s().configDiffArrow, _v$62 = s().configDiffTo;
-              _v$58 !== _p$.e && className(_el$96, _p$.e = _v$58);
-              _v$59 !== _p$.t && className(_el$97, _p$.t = _v$59);
-              _v$60 !== _p$.a && className(_el$99, _p$.a = _v$60);
-              _v$61 !== _p$.o && className(_el$100, _p$.o = _v$61);
-              _v$62 !== _p$.i && className(_el$101, _p$.i = _v$62);
+              _v$58 !== _p$.e && className(_el$100, _p$.e = _v$58);
+              _v$59 !== _p$.t && className(_el$101, _p$.t = _v$59);
+              _v$60 !== _p$.a && className(_el$103, _p$.a = _v$60);
+              _v$61 !== _p$.o && className(_el$104, _p$.o = _v$61);
+              _v$62 !== _p$.i && className(_el$105, _p$.i = _v$62);
               return _p$;
             }, {
               e: void 0,
@@ -8173,7 +8197,7 @@ var IterationCard = (props) => {
               o: void 0,
               i: void 0
             });
-            return _el$96;
+            return _el$100;
           })()
         }));
         effect((_p$) => {
@@ -8201,19 +8225,19 @@ var IterationCard = (props) => {
             return toolNames();
           },
           children: (name) => (() => {
-            var _el$102 = _tmpl$27(), _el$103 = _el$102.firstChild;
-            insert(_el$102, name, _el$103);
-            insert(_el$103, () => toolInvocationCounts().get(name) || 0);
+            var _el$106 = _tmpl$29(), _el$107 = _el$106.firstChild;
+            insert(_el$106, name, _el$107);
+            insert(_el$107, () => toolInvocationCounts().get(name) || 0);
             effect((_p$) => {
               var _v$63 = s().configToolChip, _v$64 = s().configToolChipCount;
-              _v$63 !== _p$.e && className(_el$102, _p$.e = _v$63);
-              _v$64 !== _p$.t && className(_el$103, _p$.t = _v$64);
+              _v$63 !== _p$.e && className(_el$106, _p$.e = _v$63);
+              _v$64 !== _p$.t && className(_el$107, _p$.t = _v$64);
               return _p$;
             }, {
               e: void 0,
               t: void 0
             });
-            return _el$102;
+            return _el$106;
           })()
         }));
         effect((_p$) => {
@@ -8407,8 +8431,8 @@ var IterationCard = (props) => {
 delegateEvents(["click"]);
 
 // src/components/conversation/IterationTimeline.tsx
-var _tmpl$28 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$29 = /* @__PURE__ */ template(`<div>No iterations recorded`);
+var _tmpl$30 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$210 = /* @__PURE__ */ template(`<div>No iterations recorded`);
 var _tmpl$33 = /* @__PURE__ */ template(`<span>`);
 var _tmpl$43 = /* @__PURE__ */ template(`<pre>`);
 var _tmpl$53 = /* @__PURE__ */ template(`<div><div><span>#</span><span>`);
@@ -8467,20 +8491,20 @@ var IterationTimeline = (props) => {
     return result;
   });
   return (() => {
-    var _el$ = _tmpl$28();
+    var _el$ = _tmpl$30();
     insert(_el$, createComponent(Show, {
       get when() {
         return props.iterations.length > 0;
       },
       get fallback() {
         return (() => {
-          var _el$3 = _tmpl$29();
+          var _el$3 = _tmpl$210();
           effect(() => className(_el$3, s().noIterations));
           return _el$3;
         })();
       },
       get children() {
-        var _el$2 = _tmpl$28();
+        var _el$2 = _tmpl$30();
         insert(_el$2, createComponent(Index, {
           get each() {
             return groups();
@@ -9011,7 +9035,7 @@ var UserMessageGroupCard = (props) => {
   })();
 };
 delegateEvents(["click"]);
-var _tmpl$30 = /* @__PURE__ */ template(`<form data-testid=ai-devtools-fixture-save-popover><label><span>Fixture name</span><input data-testid=ai-devtools-fixture-name-input></label><div><button data-testid=ai-devtools-fixture-save-confirm type=submit>Save</button><button data-testid=ai-devtools-fixture-save-cancel type=button>Cancel`);
+var _tmpl$31 = /* @__PURE__ */ template(`<form data-testid=ai-devtools-fixture-save-popover><label><span>Fixture name</span><input data-testid=ai-devtools-fixture-name-input></label><div><button data-testid=ai-devtools-fixture-save-confirm type=submit>Save</button><button data-testid=ai-devtools-fixture-save-cancel type=button>Cancel`);
 var FixtureNamePopover = (props) => {
   const styles = useStyles();
   const [name, setName] = createSignal(props.defaultName);
@@ -9026,7 +9050,7 @@ var FixtureNamePopover = (props) => {
     props.onSave(trimmedName);
   };
   return (() => {
-    var _el$ = _tmpl$30(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
+    var _el$ = _tmpl$31(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$2.nextSibling, _el$6 = _el$5.firstChild, _el$7 = _el$6.nextSibling;
     _el$.addEventListener("submit", (event) => {
       event.preventDefault();
       handleSave();
@@ -9060,9 +9084,9 @@ var FixtureNamePopover = (props) => {
   })();
 };
 delegateEvents(["input", "click"]);
-var _tmpl$31 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-tool-fixture-form><div>Tool Fixture</div><div></div><label><span>Output JSON</span><textarea></textarea></label><div><button data-testid=ai-devtools-tool-fire type=button>Fire</button><button data-testid=ai-devtools-tool-save type=button>Save`);
-var _tmpl$210 = /* @__PURE__ */ template(`<label><span>Input JSON</span><textarea>`);
-var _tmpl$34 = /* @__PURE__ */ template(`<span>*`);
+var _tmpl$34 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-tool-fixture-form><div>Tool Fixture</div><div></div><label><span>Output JSON</span><textarea></textarea></label><div><button data-testid=ai-devtools-tool-fire type=button>Fire</button><button data-testid=ai-devtools-tool-save type=button>Save`);
+var _tmpl$211 = /* @__PURE__ */ template(`<label><span>Input JSON</span><textarea>`);
+var _tmpl$35 = /* @__PURE__ */ template(`<span>*`);
 var _tmpl$44 = /* @__PURE__ */ template(`<span>`);
 var _tmpl$54 = /* @__PURE__ */ template(`<label><span>`);
 var _tmpl$64 = /* @__PURE__ */ template(`<div>`);
@@ -9135,7 +9159,7 @@ var ToolFixtureForm = (props) => {
     setPendingSaveName(null);
   };
   return (() => {
-    var _el$ = _tmpl$31(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$4.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
+    var _el$ = _tmpl$34(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$4.nextSibling, _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
     insert(_el$3, () => props.tool.description || props.tool.name);
     insert(_el$, createComponent(Show, {
       get when() {
@@ -9143,7 +9167,7 @@ var ToolFixtureForm = (props) => {
       },
       get fallback() {
         return (() => {
-          var _el$0 = _tmpl$210(), _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling;
+          var _el$0 = _tmpl$211(), _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling;
           _el$10.$$input = (event) => setRawInput(event.currentTarget.value);
           setAttribute(_el$10, "spellcheck", false);
           effect((_p$) => {
@@ -9174,7 +9198,7 @@ var ToolFixtureForm = (props) => {
                 return field.required;
               },
               get children() {
-                var _el$13 = _tmpl$34();
+                var _el$13 = _tmpl$35();
                 effect(() => className(_el$13, styles().hookDetails.requiredMark));
                 return _el$13;
               }
@@ -9466,9 +9490,9 @@ function isRecord2(value) {
 function normalizeText(value) {
   return value?.trim() ?? "";
 }
-var _tmpl$35 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$211 = /* @__PURE__ */ template(`<section><div>Runs</div><div>No generation runs yet.`);
-var _tmpl$36 = /* @__PURE__ */ template(`<div>No output yet.`);
+var _tmpl$36 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$212 = /* @__PURE__ */ template(`<section><div>Runs</div><div>No generation runs yet.`);
+var _tmpl$37 = /* @__PURE__ */ template(`<div>No output yet.`);
 var _tmpl$45 = /* @__PURE__ */ template(`<article><header><div><div></div><div></div></div><div><span></span><span></span></div></header><div><div></div><div>`);
 var _tmpl$55 = /* @__PURE__ */ template(`<div role=button tabindex=0 data-testid=ai-devtools-generation-output><div></div><div><span></span><span>`);
 var _tmpl$65 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-output-modal-backdrop role=presentation><section data-testid=ai-devtools-output-modal role=dialog aria-modal=true><header><div><div></div><div></div></div><button type=button data-testid=ai-devtools-output-modal-close aria-label="Close output preview">x</button></header><div>`);
@@ -9497,7 +9521,7 @@ var GenerationPanel = (props) => {
     },
     get fallback() {
       return (() => {
-        var _el$2 = _tmpl$211(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
+        var _el$2 = _tmpl$212(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling;
         effect((_p$) => {
           var _v$ = styles().hookDetails.section, _v$2 = styles().hookDetails.sectionTitle, _v$3 = styles().hookDetails.emptySmall;
           _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
@@ -9513,7 +9537,7 @@ var GenerationPanel = (props) => {
       })();
     },
     get children() {
-      var _el$ = _tmpl$35();
+      var _el$ = _tmpl$36();
       use((element) => {
         runsContainer = element;
       }, _el$);
@@ -9563,13 +9587,13 @@ var GenerationPreview = (props) => {
     },
     get fallback() {
       return (() => {
-        var _el$6 = _tmpl$36();
+        var _el$6 = _tmpl$37();
         effect(() => className(_el$6, styles().hookDetails.emptySmall));
         return _el$6;
       })();
     },
     get children() {
-      var _el$5 = _tmpl$35();
+      var _el$5 = _tmpl$36();
       insert(_el$5, createComponent(For, {
         get each() {
           return outputs();
@@ -9691,7 +9715,7 @@ var GenerationRunCard = (props) => {
         return props.run.error;
       },
       children: (message) => (() => {
-        var _el$16 = _tmpl$35();
+        var _el$16 = _tmpl$36();
         insert(_el$16, message);
         effect(() => className(_el$16, styles().hookDetails.errorText));
         return _el$16;
@@ -9868,7 +9892,7 @@ var OutputContent = (props) => {
         },
         get fallback() {
           return (() => {
-            var _el$31 = _tmpl$35();
+            var _el$31 = _tmpl$36();
             insert(_el$31, createComponent(JsonTree, {
               get value() {
                 return props.output.value;
@@ -9885,7 +9909,7 @@ var OutputContent = (props) => {
           })();
         },
         get children() {
-          var _el$30 = _tmpl$35();
+          var _el$30 = _tmpl$36();
           insert(_el$30, () => props.output.text);
           effect(() => className(_el$30, props.compact ? styles().hookDetails.outputTileText : styles().hookDetails.outputModalText));
           return _el$30;
@@ -10021,7 +10045,7 @@ var ProgressMeter = (props) => {
 var JsonBlock = (props) => {
   const styles = useStyles();
   return (() => {
-    var _el$48 = _tmpl$35();
+    var _el$48 = _tmpl$36();
     insert(_el$48, createComponent(JsonTree, {
       get value() {
         return props.value;
@@ -10301,9 +10325,9 @@ function isRecord3(value) {
 delegateEvents(["click"]);
 
 // src/components/hooks/HookDetails.tsx
-var _tmpl$37 = /* @__PURE__ */ template(`<aside data-testid=ai-devtools-preview-pane><div>`);
-var _tmpl$212 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-hook-detail><nav data-testid=ai-devtools-hook-tabs></nav><div><main data-testid=ai-devtools-primary-pane>`);
-var _tmpl$38 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-dashboard-overview><header><div><div>Hooks Dashboard</div><div>Select a hook from the left or open one of the active hooks below.</div></div></header><div></div><div>`);
+var _tmpl$38 = /* @__PURE__ */ template(`<aside data-testid=ai-devtools-preview-pane><div>`);
+var _tmpl$213 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-hook-detail><nav data-testid=ai-devtools-hook-tabs></nav><div><main data-testid=ai-devtools-primary-pane>`);
+var _tmpl$39 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-dashboard-overview><header><div><div>Hooks Dashboard</div><div>Select a hook from the left or open one of the active hooks below.</div></div></header><div></div><div>`);
 var _tmpl$46 = /* @__PURE__ */ template(`<div>Open a page with TanStack AI hooks to inspect live state.`);
 var _tmpl$56 = /* @__PURE__ */ template(`<section data-testid=ai-devtools-overview-category><div><span></span><span>`);
 var _tmpl$66 = /* @__PURE__ */ template(`<span>running`);
@@ -10323,7 +10347,7 @@ var _tmpl$173 = /* @__PURE__ */ template(`<div><button type=button data-testid=a
 var _tmpl$182 = /* @__PURE__ */ template(`<div><span>`);
 var _tmpl$192 = /* @__PURE__ */ template(`<div><span></span><div>`);
 var _tmpl$202 = /* @__PURE__ */ template(`<div>No messages yet. Start a conversation to see messages here.`);
-var _tmpl$213 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-tools><div></div><div>`);
+var _tmpl$214 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-tools><div></div><div>`);
 var _tmpl$223 = /* @__PURE__ */ template(`<div>No tools.`);
 var _tmpl$232 = /* @__PURE__ */ template(`<span>approval`);
 var _tmpl$242 = /* @__PURE__ */ template(`<button type=button data-testid=ai-devtools-tool-row><span>`);
@@ -10407,7 +10431,7 @@ var HookDetails = () => {
       });
     },
     children: (activeHook) => (() => {
-      var _el$ = _tmpl$212(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
+      var _el$ = _tmpl$213(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
       insert(_el$, createComponent(HookHeader, {
         get hook() {
           return activeHook();
@@ -10531,7 +10555,7 @@ var HookDetails = () => {
           return showSecondaryPane();
         },
         get children() {
-          var _el$5 = _tmpl$37(), _el$6 = _el$5.firstChild;
+          var _el$5 = _tmpl$38(), _el$6 = _el$5.firstChild;
           _el$5.addEventListener("mouseleave", () => setHoverTarget(null));
           _el$5.$$mouseover = (event) => setHoverTargetFromEvent(event, "preview", setHoverTarget);
           use((el) => {
@@ -10618,7 +10642,7 @@ var HookOverview = (props) => {
       })();
     },
     get children() {
-      var _el$7 = _tmpl$38(), _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling, _el$10 = _el$8.nextSibling, _el$11 = _el$10.nextSibling;
+      var _el$7 = _tmpl$39(), _el$8 = _el$7.firstChild, _el$9 = _el$8.firstChild, _el$0 = _el$9.firstChild, _el$1 = _el$0.nextSibling, _el$10 = _el$8.nextSibling, _el$11 = _el$10.nextSibling;
       insert(_el$10, createComponent(OverviewMetric, {
         label: "active hooks",
         get value() {
@@ -11403,7 +11427,7 @@ var ToolsView = (props) => {
   const selectedTool = createMemo(() => props.hook.tools.find((tool) => tool.name === selectedToolName()));
   const savedFixtures = createMemo(() => state.hooks.fixtures.filter((fixture) => fixture.hookId === props.hook.id || !!props.hook.threadId && fixture.threadId === props.hook.threadId).sort((a, b) => b.createdAt - a.createdAt));
   return (() => {
-    var _el$76 = _tmpl$213(), _el$77 = _el$76.firstChild, _el$78 = _el$77.nextSibling;
+    var _el$76 = _tmpl$214(), _el$77 = _el$76.firstChild, _el$78 = _el$77.nextSibling;
     insert(_el$77, createComponent(Show, {
       get when() {
         return props.hook.tools.length > 0;
@@ -11994,7 +12018,7 @@ function formatTime2(timestamp) {
 delegateEvents(["mouseover", "click"]);
 
 // src/components/Shell.tsx
-var _tmpl$39 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-panel><div><div data-testid=ai-devtools-left-panel style=min-width:150px;max-width:800px><div>AI Hooks</div></div><div></div><div data-testid=ai-devtools-right-panel style=flex:1>`);
+var _tmpl$40 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-panel><div><div data-testid=ai-devtools-left-panel style=min-width:150px;max-width:800px><div>AI Hooks</div></div><div></div><div data-testid=ai-devtools-right-panel style=flex:1>`);
 function Devtools(props) {
   return createComponent(ThemeContextProvider, {
     get theme() {
@@ -12076,7 +12100,7 @@ function DevtoolsContent() {
   });
   return createComponent(MainPanel, {
     get children() {
-      var _el$ = _tmpl$39(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.nextSibling;
+      var _el$ = _tmpl$40(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$3.nextSibling, _el$6 = _el$5.nextSibling;
       insert(_el$, createComponent(Header, {
         get children() {
           return createComponent(HeaderLogo, {

package/dist/Shell/{Z6HLJOVZ.js → 54VAGOHT.js}

@@ -6960,7 +6960,7 @@ var _tmpl$18 = ["<div", "><span", ">", "</span><div", ">", "", "", "", "", "", "
 var _tmpl$19 = ['<span class="', '" title="', '">\u{1F527} ', "</span>"];
 var _tmpl$20 = ['<span class="', '"', ">\u23F1\uFE0F ", "</span>"];
 var _tmpl$21 = ['<span class="', '">\u27F3 streaming</span>'];
-var _tmpl$222 = ["<div", ">", "", "", "", "", "</div>"];
+var _tmpl$222 = ["<div", ">", "", "", "", "", "", "", "</div>"];
 var _tmpl$23 = ["<div", "><span", ">Config Changes</span><div", ">", "</div></div>"];
 var _tmpl$24 = ["<div", "><span", ">Tools</span><div", ">", "</div></div>"];
 var _tmpl$25 = ["<div", "><span", ">System Prompts (", ")</span>", "</div>"];
@@ -6968,8 +6968,10 @@ var _tmpl$26 = ["<div", "><span", ">Model Options</span><div", ">", "</div></div
 var _tmpl$27 = ['<div class="', '"><div', "><div>", "", "", "", "</div></div></div>"];
 var _tmpl$28 = ['<div class="', '"><div', ">", "</div></div>"];
 var _tmpl$29 = ['<span class="', '" title="', '">\u{1F3AF} ', "</span>"];
-var _tmpl$30 = ["<div", "><span", ">", ":</span><span", ">", "</span><span", ">\u2192</span><span", ">", "</span></div>"];
-var _tmpl$31 = ["<span", ">", "<span", ">", "</span></span>"];
+var _tmpl$30 = ['<span class="', '" title="Cached prompt tokens">\u{1F4BE} ', "</span>"];
+var _tmpl$31 = ['<span class="', '" title="Reasoning tokens">\u{1F9E0} ', "</span>"];
+var _tmpl$322 = ["<div", "><span", ">", ":</span><span", ">", "</span><span", ">\u2192</span><span", ">", "</span></div>"];
+var _tmpl$33 = ["<span", ">", "<span", ">", "</span></span>"];
 function getApprovalStatus(toolCall) {
   if (toolCall.approvalApproved === true || toolCall.state === "approved") {
     return "approved";
@@ -7547,6 +7549,16 @@ var IterationCard = (props) => {
       return deltaUsage();
     },
     children: (usage) => ssr(_tmpl$29, `${escape(s().badge, true)} ${escape(s().badgeUsage, true)}`, `Prompt: ${escape(usage().promptTokens.toLocaleString(), true)} | Completion: ${escape(usage().completionTokens.toLocaleString(), true)}`, escape(usage().totalTokens.toLocaleString()))
+  })), escape(createComponent(Show, {
+    get when() {
+      return iter().usage?.promptTokensDetails?.cachedTokens;
+    },
+    children: (cached) => ssr(_tmpl$30, `${escape(s().badge, true)} ${escape(s().badgeUsage, true)}`, escape(cached().toLocaleString()))
+  })), escape(createComponent(Show, {
+    get when() {
+      return iter().usage?.completionTokensDetails?.reasoningTokens;
+    },
+    children: (reasoning) => ssr(_tmpl$31, `${escape(s().badge, true)} ${escape(s().badgeUsage, true)}`, escape(reasoning().toLocaleString()))
   })), escape(createComponent(Show, {
     get when() {
       return isActive();
@@ -7563,7 +7575,7 @@ var IterationCard = (props) => {
         get each() {
           return configDiffs();
         },
-        children: (diff) => ssr(_tmpl$30, ssrAttribute("class", escape(s().configDiffRow, true), false), ssrAttribute("class", escape(s().configDiffKey, true), false), escape(diff.key), ssrAttribute("class", escape(s().configDiffFrom, true), false), escape(diff.from), ssrAttribute("class", escape(s().configDiffArrow, true), false), ssrAttribute("class", escape(s().configDiffTo, true), false), escape(diff.to))
+        children: (diff) => ssr(_tmpl$322, ssrAttribute("class", escape(s().configDiffRow, true), false), ssrAttribute("class", escape(s().configDiffKey, true), false), escape(diff.key), ssrAttribute("class", escape(s().configDiffFrom, true), false), escape(diff.from), ssrAttribute("class", escape(s().configDiffArrow, true), false), ssrAttribute("class", escape(s().configDiffTo, true), false), escape(diff.to))
       })));
     }
   })), escape(createComponent(Show, {
@@ -7575,7 +7587,7 @@ var IterationCard = (props) => {
         get each() {
           return toolNames();
         },
-        children: (name) => ssr(_tmpl$31, ssrAttribute("class", escape(s().configToolChip, true), false), escape(name), ssrAttribute("class", escape(s().configToolChipCount, true), false), escape(toolInvocationCounts().get(name)) || 0)
+        children: (name) => ssr(_tmpl$33, ssrAttribute("class", escape(s().configToolChip, true), false), escape(name), ssrAttribute("class", escape(s().configToolChipCount, true), false), escape(toolInvocationCounts().get(name)) || 0)
       })));
     }
   })), escape(createComponent(Show, {
@@ -7702,9 +7714,9 @@ var IterationCard = (props) => {
 };
 
 // src/components/conversation/IterationTimeline.tsx
-var _tmpl$33 = ["<div", ">", "</div>"];
+var _tmpl$34 = ["<div", ">", "</div>"];
 var _tmpl$210 = ["<div", ">No iterations recorded</div>"];
-var _tmpl$34 = ["<span", ">", "</span>"];
+var _tmpl$35 = ["<span", ">", "</span>"];
 var _tmpl$43 = ["<pre", ">", "</pre>"];
 var _tmpl$53 = ["<div", "><div", "><span", ">#", "</span><span", ">", "</span>", "</div>", "</div>"];
 var _tmpl$63 = ["<span", ">", " tool", "</span>"];
@@ -7763,7 +7775,7 @@ var IterationTimeline = (props) => {
     }
     return result;
   });
-  return ssr(_tmpl$33, ssrAttribute("class", escape(s().container, true), false), escape(createComponent(Show, {
+  return ssr(_tmpl$34, ssrAttribute("class", escape(s().container, true), false), escape(createComponent(Show, {
     get when() {
       return props.iterations.length > 0;
     },
@@ -7771,7 +7783,7 @@ var IterationTimeline = (props) => {
       return ssr(_tmpl$210, ssrAttribute("class", escape(s().noIterations, true), false));
     },
     get children() {
-      return ssr(_tmpl$33, ssrAttribute("class", escape(s().pipeline, true), false), escape(createComponent(Index, {
+      return ssr(_tmpl$34, ssrAttribute("class", escape(s().pipeline, true), false), escape(createComponent(Index, {
         get each() {
           return groups();
         },
@@ -7804,7 +7816,7 @@ var SystemPromptItem = (props) => {
       return isLong();
     },
     get children() {
-      return ssr(_tmpl$34, ssrAttribute("class", escape(s().stepExpandToggle, true), false), expanded() ? "collapse" : "expand");
+      return ssr(_tmpl$35, ssrAttribute("class", escape(s().stepExpandToggle, true), false), expanded() ? "collapse" : "expand");
     }
   })), escape(createComponent(Show, {
     get when() {
@@ -7938,7 +7950,7 @@ var UserMessageGroupCard = (props) => {
       return configSubtitle();
     },
     get children() {
-      return ssr(_tmpl$34, ssrAttribute("class", escape(s().subtitleText, true), false), escape(configSubtitle()));
+      return ssr(_tmpl$35, ssrAttribute("class", escape(s().subtitleText, true), false), escape(configSubtitle()));
     }
   })), escape(createComponent(Show, {
     get when() {
@@ -7973,7 +7985,7 @@ var UserMessageGroupCard = (props) => {
       return hasExpandableConfig();
     },
     get children() {
-      return ssr(_tmpl$34, ssrAttribute("class", escape(s().subtitleExpandToggle, true), false), configExpanded() ? "hide config" : "show config");
+      return ssr(_tmpl$35, ssrAttribute("class", escape(s().subtitleExpandToggle, true), false), configExpanded() ? "hide config" : "show config");
     }
   })), ssrAttribute("class", escape(s().cardHeaderBadges, true), false), escape(createComponent(Show, {
     get when() {
@@ -8077,7 +8089,7 @@ var UserMessageGroupCard = (props) => {
     })
   })))], false);
 };
-var _tmpl$35 = ["<form", ' data-testid="ai-devtools-fixture-save-popover"><label', "><span", ">Fixture name</span><input", ' data-testid="ai-devtools-fixture-name-input"', "></label><div", "><button", ' data-testid="ai-devtools-fixture-save-confirm" type="submit">Save</button><button class="', '" data-testid="ai-devtools-fixture-save-cancel" type="button">Cancel</button></div></form>'];
+var _tmpl$36 = ["<form", ' data-testid="ai-devtools-fixture-save-popover"><label', "><span", ">Fixture name</span><input", ' data-testid="ai-devtools-fixture-name-input"', "></label><div", "><button", ' data-testid="ai-devtools-fixture-save-confirm" type="submit">Save</button><button class="', '" data-testid="ai-devtools-fixture-save-cancel" type="button">Cancel</button></div></form>'];
 var FixtureNamePopover = (props) => {
   const styles = useStyles();
   const [name, setName] = createSignal(props.defaultName);
@@ -8086,11 +8098,11 @@ var FixtureNamePopover = (props) => {
     setName(props.defaultName);
     queueMicrotask(() => input?.focus());
   });
-  return ssr(_tmpl$35, ssrAttribute("class", escape(styles().hookDetails.fixturePopover, true), false), ssrAttribute("class", escape(styles().hookDetails.fixtureField, true), false), ssrAttribute("class", escape(styles().hookDetails.fixtureLabel, true), false), ssrAttribute("class", escape(styles().hookDetails.fixtureInput, true), false), ssrAttribute("value", escape(name(), true), false), ssrAttribute("class", escape(styles().hookDetails.fixtureActions, true), false), ssrAttribute("class", escape(styles().hookDetails.fixtureButton, true), false), `${escape(styles().hookDetails.fixtureButton, true)} ${escape(styles().hookDetails.fixtureButtonSecondary, true)}`);
+  return ssr(_tmpl$36, ssrAttribute("class", escape(styles().hookDetails.fixturePopover, true), false), ssrAttribute("class", escape(styles().hookDetails.fixtureField, true), false), ssrAttribute("class", escape(styles().hookDetails.fixtureLabel, true), false), ssrAttribute("class", escape(styles().hookDetails.fixtureInput, true), false), ssrAttribute("value", escape(name(), true), false), ssrAttribute("class", escape(styles().hookDetails.fixtureActions, true), false), ssrAttribute("class", escape(styles().hookDetails.fixtureButton, true), false), `${escape(styles().hookDetails.fixtureButton, true)} ${escape(styles().hookDetails.fixtureButtonSecondary, true)}`);
 };
-var _tmpl$36 = ["<div", ' data-testid="ai-devtools-tool-fixture-form"', "><div", ">Tool Fixture</div><div", ">", "</div>", "<label", "><span", ">Output JSON</span><textarea", ' spellcheck="false"></textarea></label>', "<div", "><button", ' data-testid="ai-devtools-tool-fire" type="button">Fire</button><button class="', '" data-testid="ai-devtools-tool-save" type="button">Save</button></div>', "</div>"];
+var _tmpl$37 = ["<div", ' data-testid="ai-devtools-tool-fixture-form"', "><div", ">Tool Fixture</div><div", ">", "</div>", "<label", "><span", ">Output JSON</span><textarea", ' spellcheck="false"></textarea></label>', "<div", "><button", ' data-testid="ai-devtools-tool-fire" type="button">Fire</button><button class="', '" data-testid="ai-devtools-tool-save" type="button">Save</button></div>', "</div>"];
 var _tmpl$211 = ["<label", "><span", ">Input JSON</span><textarea", ' spellcheck="false"></textarea></label>'];
-var _tmpl$37 = ["<span", ">*</span>"];
+var _tmpl$38 = ["<span", ">*</span>"];
 var _tmpl$44 = ["<span", ">", "</span>"];
 var _tmpl$54 = ["<label", "><span", ">", "", "</span>", "", "</label>"];
 var _tmpl$64 = ["<div", ">", "</div>"];
@@ -8154,7 +8166,7 @@ var ToolFixtureForm = (props) => {
     saveToolFixture(fixture);
     setPendingSaveName(null);
   };
-  return ssr(_tmpl$36, ssrAttribute("class", escape(styles().hookDetails.fixtureForm, true), false), ssrAttribute("data-tool-name", escape(props.tool.name, true), false), ssrAttribute("class", escape(styles().hookDetails.sectionTitle, true), false), ssrAttribute("class", escape(styles().hookDetails.fixtureHelp, true), false), escape(props.tool.description) || escape(props.tool.name), escape(createComponent(Show, {
+  return ssr(_tmpl$37, ssrAttribute("class", escape(styles().hookDetails.fixtureForm, true), false), ssrAttribute("data-tool-name", escape(props.tool.name, true), false), ssrAttribute("class", escape(styles().hookDetails.sectionTitle, true), false), ssrAttribute("class", escape(styles().hookDetails.fixtureHelp, true), false), escape(props.tool.description) || escape(props.tool.name), escape(createComponent(Show, {
     get when() {
       return fields().length > 0;
     },
@@ -8171,7 +8183,7 @@ var ToolFixtureForm = (props) => {
             return field.required;
           },
           get children() {
-            return ssr(_tmpl$37, ssrAttribute("class", escape(styles().hookDetails.requiredMark, true), false));
+            return ssr(_tmpl$38, ssrAttribute("class", escape(styles().hookDetails.requiredMark, true), false));
           }
         })), escape(createComponent(Show, {
           get when() {
@@ -8378,9 +8390,9 @@ function isRecord2(value) {
 function normalizeText(value) {
   return value?.trim() ?? "";
 }
-var _tmpl$38 = ["<div", ">", "</div>"];
+var _tmpl$39 = ["<div", ">", "</div>"];
 var _tmpl$212 = ["<section", "><div", ">Runs</div><div", ">No generation runs yet.</div></section>"];
-var _tmpl$39 = ["<div", ">No output yet.</div>"];
+var _tmpl$310 = ["<div", ">No output yet.</div>"];
 var _tmpl$45 = ["<header", "><div", "><div", ">", "</div><div", ">", "</div></div><div", "><span", ">", "</span><span", ">", "</span></div></header>"];
 var _tmpl$55 = ["<div", "><div", ">", "", "", "", "", "", "</div>", "", "<div", ">", "", "</div></div>"];
 var _tmpl$65 = ["<div", "><span>", "</span><span>", "</span></div>"];
@@ -8409,7 +8421,7 @@ var GenerationPanel = (props) => {
       return ssr(_tmpl$212, ssrAttribute("class", escape(styles().hookDetails.section, true), false), ssrAttribute("class", escape(styles().hookDetails.sectionTitle, true), false), ssrAttribute("class", escape(styles().hookDetails.emptySmall, true), false));
     },
     get children() {
-      return ssr(_tmpl$38, ssrAttribute("class", escape(styles().hookDetails.generationRuns, true), false), escape(createComponent(For, {
+      return ssr(_tmpl$39, ssrAttribute("class", escape(styles().hookDetails.generationRuns, true), false), escape(createComponent(For, {
         get each() {
           return generationRuns();
         },
@@ -8452,10 +8464,10 @@ var GenerationPreview = (props) => {
       return outputs().length > 0;
     },
     get fallback() {
-      return ssr(_tmpl$39, ssrAttribute("class", escape(styles().hookDetails.emptySmall, true), false));
+      return ssr(_tmpl$310, ssrAttribute("class", escape(styles().hookDetails.emptySmall, true), false));
     },
     get children() {
-      return ssr(_tmpl$38, ssrAttribute("class", escape(styles().hookDetails.generationOutputGrid, true), false), escape(createComponent(For, {
+      return ssr(_tmpl$39, ssrAttribute("class", escape(styles().hookDetails.generationOutputGrid, true), false), escape(createComponent(For, {
         get each() {
           return outputs();
         },
@@ -8556,7 +8568,7 @@ var GenerationRunCard = (props) => {
     get when() {
       return props.run.error;
     },
-    children: (message) => ssr(_tmpl$38, ssrAttribute("class", escape(styles().hookDetails.errorText, true), false), escape(message()))
+    children: (message) => ssr(_tmpl$39, ssrAttribute("class", escape(styles().hookDetails.errorText, true), false), escape(message()))
   })), ssrAttribute("class", escape(styles().hookDetails.runDetailsGrid, true), false), escape(createComponent(RunField, {
     label: "Input",
     get children() {
@@ -8608,7 +8620,7 @@ var GenerationOutputTile = (props) => {
     get ["class"]() {
       return `${styles().hookDetails.outputTile} ${props.highlighted ? styles().hookDetails.outputTileHighlighted : ""}`;
     }
-  }), [ssr(_tmpl$38, ssrAttribute("class", escape(styles().hookDetails.outputTileBody, true), false), escape(createComponent(OutputContent, {
+  }), [ssr(_tmpl$39, ssrAttribute("class", escape(styles().hookDetails.outputTileBody, true), false), escape(createComponent(OutputContent, {
     get output() {
       return props.output;
     },
@@ -8636,7 +8648,7 @@ var OutputContent = (props) => {
           return props.output.kind === "text";
         },
         get fallback() {
-          return ssr(_tmpl$38, ssrAttribute("class", props.compact ? escape(styles().hookDetails.outputTileText, true) : escape(styles().hookDetails.outputModalText, true), false), escape(createComponent(JsonTree, {
+          return ssr(_tmpl$39, ssrAttribute("class", props.compact ? escape(styles().hookDetails.outputTileText, true) : escape(styles().hookDetails.outputModalText, true), false), escape(createComponent(JsonTree, {
             get value() {
               return props.output.value;
             },
@@ -8649,7 +8661,7 @@ var OutputContent = (props) => {
           })));
         },
         get children() {
-          return ssr(_tmpl$38, ssrAttribute("class", props.compact ? escape(styles().hookDetails.outputTileText, true) : escape(styles().hookDetails.outputModalText, true), false), escape(props.output.text));
+          return ssr(_tmpl$39, ssrAttribute("class", props.compact ? escape(styles().hookDetails.outputTileText, true) : escape(styles().hookDetails.outputModalText, true), false), escape(props.output.text));
         }
       });
     },
@@ -8973,7 +8985,7 @@ function isRecord3(value) {
 // src/components/hooks/HookDetails.tsx
 var _tmpl$40 = ["<aside", ' data-testid="ai-devtools-preview-pane"><div', ">", "</div>", "</aside>"];
 var _tmpl$213 = ["<div", ' data-testid="ai-devtools-hook-detail">', "<nav", ' data-testid="ai-devtools-hook-tabs">', "", "", '</nav><div class="', '"><main', ' data-testid="ai-devtools-primary-pane">', "", "", "</main>", "</div></div>"];
-var _tmpl$310 = ["<div", ' data-testid="ai-devtools-dashboard-overview"><header', "><div><div", ">Hooks Dashboard</div><div", ">Select a hook from the left or open one of the active hooks below.</div></div></header><div", ">", "", "", "", "", "", "", "", "</div><div", ">", "</div></div>"];
+var _tmpl$311 = ["<div", ' data-testid="ai-devtools-dashboard-overview"><header', "><div><div", ">Hooks Dashboard</div><div", ">Select a hook from the left or open one of the active hooks below.</div></div></header><div", ">", "", "", "", "", "", "", "", "</div><div", ">", "</div></div>"];
 var _tmpl$46 = ["<div", ">Open a page with TanStack AI hooks to inspect live state.</div>"];
 var _tmpl$56 = ["<section", ' data-testid="ai-devtools-overview-category"', "><div", "><span>", "</span><span>", "</span></div>", "</section>"];
 var _tmpl$66 = ["<span", ">running</span>"];
@@ -9233,7 +9245,7 @@ var HookOverview = (props) => {
       return ssr(_tmpl$46, ssrAttribute("class", escape(styles().hookDetails.empty, true), false));
     },
     get children() {
-      return ssr(_tmpl$310, ssrAttribute("class", escape(styles().hookDetails.overview, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewHeader, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewTitle, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewSubtitle, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewMetricGrid, true), false), escape(createComponent(OverviewMetric, {
+      return ssr(_tmpl$311, ssrAttribute("class", escape(styles().hookDetails.overview, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewHeader, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewTitle, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewSubtitle, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewMetricGrid, true), false), escape(createComponent(OverviewMetric, {
         label: "active hooks",
         get value() {
           return summary().active;