@tanstack/ai-devtools-core 0.4.3 → 0.4.5

package/dist/production/Shell/{DKCFIT6H.js → SPYBPW3X.js}

@@ -7221,8 +7221,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";
@@ -8150,6 +8152,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();
@@ -8171,17 +8195,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,
@@ -8190,7 +8214,7 @@ var IterationCard = (props) => {
               o: void 0,
               i: void 0
             });
-            return _el$96;
+            return _el$100;
           })()
         }));
         effect((_p$) => {
@@ -8218,19 +8242,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$) => {
@@ -8424,8 +8448,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>`);
@@ -8484,20 +8508,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();
@@ -9028,7 +9052,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);
@@ -9043,7 +9067,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();
@@ -9077,9 +9101,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>`);
@@ -9152,7 +9176,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() {
@@ -9160,7 +9184,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$) => {
@@ -9191,7 +9215,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;
               }
@@ -9483,9 +9507,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>`);
@@ -9514,7 +9538,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$);
@@ -9530,7 +9554,7 @@ var GenerationPanel = (props) => {
       })();
     },
     get children() {
-      var _el$ = _tmpl$35();
+      var _el$ = _tmpl$36();
       use((element) => {
         runsContainer = element;
       }, _el$);
@@ -9580,13 +9604,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();
@@ -9708,7 +9732,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;
@@ -9885,7 +9909,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;
@@ -9902,7 +9926,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;
@@ -10038,7 +10062,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;
@@ -10318,9 +10342,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`);
@@ -10340,7 +10364,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>`);
@@ -10424,7 +10448,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();
@@ -10548,7 +10572,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) => {
@@ -10635,7 +10659,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() {
@@ -11420,7 +11444,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;
@@ -12017,7 +12041,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() {
@@ -12099,7 +12123,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/production/dev.js

@@ -2,7 +2,7 @@ import { constructCoreClass } from '@tanstack/devtools-utils/solid/class';
 
 // src/core.ts
 var [AiDevtoolsCore, AiDevtoolsCoreNoOp] = constructCoreClass(
-  () => import('./Shell/DKCFIT6H.js')
+  () => import('./Shell/SPYBPW3X.js')
 );
 
 export { AiDevtoolsCore };

package/dist/production/index.js

@@ -2,7 +2,7 @@ import { constructCoreClass } from '@tanstack/devtools-utils/solid/class';
 
 // src/core.ts
 var [AiDevtoolsCore, AiDevtoolsCoreNoOp] = constructCoreClass(
-  () => import('./Shell/SLOX2TPU.js')
+  () => import('./Shell/3ITTEC6O.js')
 );
 
 export { AiDevtoolsCore };

package/dist/production/server.js

@@ -2,7 +2,7 @@ import { constructCoreClass } from '@tanstack/devtools-utils/solid/class';
 
 // src/core.ts
 var [AiDevtoolsCore, AiDevtoolsCoreNoOp] = constructCoreClass(
-  () => import('./Shell/Z6HLJOVZ.js')
+  () => import('./Shell/54VAGOHT.js')
 );
 
 export { AiDevtoolsCore };

package/dist/server.js

@@ -2,7 +2,7 @@ import { constructCoreClass } from '@tanstack/devtools-utils/solid/class';
 
 // src/core.ts
 var [AiDevtoolsCore, AiDevtoolsCoreNoOp] = constructCoreClass(
-  () => import('./Shell/Z6HLJOVZ.js')
+  () => import('./Shell/54VAGOHT.js')
 );
 
 // src/index.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-devtools-core",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "description": "Core TanStack AI Devtools plugin for inspecting chat messages, tool calls, streams, and errors.",
   "author": "",
   "license": "MIT",
@@ -76,8 +76,8 @@
     "@tanstack/devtools-utils": "^0.4.0",
     "goober": "^2.1.18",
     "solid-js": "^1.9.10",
-    "@tanstack/ai": "0.24.0",
-    "@tanstack/ai-event-client": "0.4.3"
+    "@tanstack/ai": "0.26.0",
+    "@tanstack/ai-event-client": "0.5.1"
   },
   "devDependencies": {
     "@vitest/coverage-v8": "4.0.14",

package/src/components/conversation/IterationCard.tsx

@@ -858,6 +858,26 @@ export const IterationCard: Component<IterationCardProps> = (props) => {
               </span>
             )}
           </Show>
+          <Show when={iter().usage?.promptTokensDetails?.cachedTokens}>
+            {(cached) => (
+              <span
+                class={`${s().badge} ${s().badgeUsage}`}
+                title="Cached prompt tokens"
+              >
+                💾 {cached().toLocaleString()}
+              </span>
+            )}
+          </Show>
+          <Show when={iter().usage?.completionTokensDetails?.reasoningTokens}>
+            {(reasoning) => (
+              <span
+                class={`${s().badge} ${s().badgeUsage}`}
+                title="Reasoning tokens"
+              >
+                🧠 {reasoning().toLocaleString()}
+              </span>
+            )}
+          </Show>
           <Show when={isActive()}>
             <span class={`${s().badge} ${s().badgeDuration}`}>⟳ streaming</span>
           </Show>

package/src/store/ai-context.tsx

@@ -14,7 +14,7 @@ import {
   createClientToolCallMessage,
   shouldSkipClientAssistantPlaceholder,
 } from './message-event-utils'
-import type { ContentPartSource } from '@tanstack/ai'
+import type { ContentPartSource, TokenUsage } from '@tanstack/ai'
 import type {
   DevtoolsToolFixtureApplyEvent,
   RunLifecycleEvent,
@@ -69,11 +69,8 @@ export interface ToolCall {
   duration?: number
 }
 
-interface TokenUsage {
-  promptTokens: number
-  completionTokens: number
-  totalTokens: number
-}
+// Re-export TokenUsage from @tanstack/ai for external consumers
+export type { TokenUsage }
 
 export interface Message {
   id: string

package/src/store/ai-store.ts

@@ -5,4 +5,5 @@ export type {
   Conversation,
   Iteration,
   MiddlewareEvent,
+  TokenUsage,
 } from './ai-context'