@tanstack/ai-devtools-core 0.5.8 → 0.5.10

package/dist/{production/Shell/WD22ACIB.js → Shell/BJP2PZMD.js}

@@ -1999,7 +1999,6 @@ var stylesFactory = (theme) => {
         border: 1px solid ${t(colors.gray[200], colors.darkGray[600])};
         border-radius: ${border.radius.sm};
         background: ${t(colors.white, colors.darkGray[900])};
-        min-height: 260px;
         max-height: 420px;
         overflow: auto;
         padding: ${size[2]} ${size[2]} ${size[2]} ${size[5]};
@@ -2874,7 +2873,7 @@ var stylesFactory = (theme) => {
         gap: ${size[3]};
         align-items: start;
         & > * {
-          min-height: 280px;
+          max-height: 420px;
           border: 1px solid oklch(0.28 0.03 260);
           border-radius: 6px;
           background: oklch(0.18 0.02 260);
@@ -3935,7 +3934,6 @@ var stylesFactory = (theme) => {
       `,
       stepJsonPanel: css2`
         margin: ${size[1.5]} ${size[3]};
-        min-height: 280px;
         max-height: 520px;
         overflow: auto;
         padding: ${size[2]} ${size[2]} ${size[2]} ${size[5]};
@@ -4775,6 +4773,24 @@ function clearMemoryRegistry(state) {
   state.scopes = {};
 }
 
+// src/store/skills-registry.ts
+function createSkillsRegistryState() {
+  return { snapshots: {} };
+}
+function clearSkillsRegistry(state) {
+  state.snapshots = {};
+}
+function applySkillsSnapshot(state, payload) {
+  const key = payload.hookId && payload.hookId.length > 0 ? payload.hookId : "_default";
+  const catalog = Array.isArray(payload.catalog) ? payload.catalog : [];
+  const activated = Array.isArray(payload.activated) ? payload.activated : [];
+  state.snapshots[key] = {
+    catalog,
+    activated,
+    updatedAt: payload.timestamp ?? Date.now()
+  };
+}
+
 // src/store/ai-context.tsx
 var AIContext = createContext();
 function useAIStore() {
@@ -4789,7 +4805,8 @@ var AIProvider = (props) => {
     conversations: {},
     activeConversationId: null,
     hooks: createHookRegistryState(),
-    memory: createMemoryRegistryState()
+    memory: createMemoryRegistryState(),
+    skills: createSkillsRegistryState()
   });
   const streamToConversation = /* @__PURE__ */ new Map();
   const requestToConversation = /* @__PURE__ */ new Map();
@@ -5046,6 +5063,11 @@ var AIProvider = (props) => {
       clearMemoryRegistry(memory);
     }));
   }
+  function clearSkills() {
+    setState("skills", produce((skills) => {
+      clearSkillsRegistry(skills);
+    }));
+  }
   function selectHook(id) {
     setState("hooks", produce((hooks) => {
       setActiveHook(hooks, id);
@@ -5376,6 +5398,10 @@ var AIProvider = (props) => {
       setState("memory", produce((memory) => {
         applyMemorySnapshot(memory, e.payload);
       }));
+    }), aiEventClient.on("skills:snapshot", (e) => {
+      setState("skills", produce((skills) => {
+        applySkillsSnapshot(skills, e.payload);
+      }));
     }));
     const recordRunEvent = (eventName, payload) => {
       setState("hooks", produce((hooks) => {
@@ -6952,6 +6978,7 @@ var AIProvider = (props) => {
     selectConversation,
     clearHooks,
     clearMemory,
+    clearSkills,
     selectHook,
     saveToolFixture,
     deleteToolFixture,
@@ -10935,15 +10962,161 @@ var MemoryPanel = () => {
   })();
 };
 delegateEvents(["click"]);
+var _tmpl$40 = /* @__PURE__ */ template(`<ul>`);
+var _tmpl$214 = /* @__PURE__ */ template(`<div><div>Catalog`);
+var _tmpl$310 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-skills-panel>`);
+var _tmpl$47 = /* @__PURE__ */ template(`<div>No skills on this run. Add \`withSkills(...)\` to \`chat()\` and the catalog will appear here. A skill lights up when the model calls \`load_skill\`.`);
+var _tmpl$57 = /* @__PURE__ */ template(`<div>Loaded via \`load_skill\`, but the catalog snapshot has not arrived yet.`);
+var _tmpl$67 = /* @__PURE__ */ template(`<span>loaded`);
+var _tmpl$77 = /* @__PURE__ */ template(`<li><span></span><span>`);
+function parseSkillName(argumentsJson) {
+  if (!argumentsJson) return void 0;
+  try {
+    const parsed = JSON.parse(argumentsJson);
+    if (parsed && typeof parsed === "object" && "name" in parsed && typeof parsed.name === "string") {
+      return parsed.name;
+    }
+  } catch {
+    return void 0;
+  }
+  return void 0;
+}
+function loadedFromMessages(messages) {
+  const names = /* @__PURE__ */ new Set();
+  for (const message of messages) {
+    for (const toolCall of message.toolCalls ?? []) {
+      if (toolCall.name === "load_skill") {
+        const name = parseSkillName(toolCall.arguments);
+        if (name) names.add(name);
+      }
+    }
+    for (const part of message.parts ?? []) {
+      if (part.type === "tool-call" && part.toolName === "load_skill") {
+        const name = parseSkillName(part.arguments);
+        if (name) names.add(name);
+      }
+    }
+  }
+  return [...names];
+}
+var SkillsPanel = () => {
+  const {
+    state
+  } = useAIStore();
+  const styles = useStyles();
+  const snapshot = createMemo(() => {
+    const hookId = state.hooks.activeHookId;
+    if (hookId && state.skills.snapshots[hookId]) {
+      return state.skills.snapshots[hookId];
+    }
+    const first = Object.values(state.skills.snapshots)[0];
+    return first;
+  });
+  const conversation = createMemo(() => {
+    const hookId = state.hooks.activeHookId;
+    if (!hookId) return void 0;
+    return state.conversations[hookId];
+  });
+  const loaded = createMemo(() => {
+    const fromSnap = new Set(snapshot()?.activated ?? []);
+    for (const name of loadedFromMessages(conversation()?.messages ?? [])) {
+      fromSnap.add(name);
+    }
+    return fromSnap;
+  });
+  const catalog = createMemo(() => snapshot()?.catalog ?? []);
+  return (() => {
+    var _el$ = _tmpl$310();
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return catalog().length > 0 || loaded().size > 0;
+      },
+      get fallback() {
+        return (() => {
+          var _el$5 = _tmpl$47();
+          effect(() => className(_el$5, styles().memoryPanel.empty));
+          return _el$5;
+        })();
+      },
+      get children() {
+        var _el$2 = _tmpl$214(), _el$3 = _el$2.firstChild;
+        insert(_el$2, createComponent(Show, {
+          get when() {
+            return catalog().length > 0;
+          },
+          get fallback() {
+            return (() => {
+              var _el$6 = _tmpl$57();
+              effect(() => className(_el$6, styles().memoryPanel.sectionEmpty));
+              return _el$6;
+            })();
+          },
+          get children() {
+            var _el$4 = _tmpl$40();
+            insert(_el$4, createComponent(For, {
+              get each() {
+                return catalog();
+              },
+              children: (skill) => {
+                const isLoaded = () => loaded().has(skill.name);
+                return (() => {
+                  var _el$7 = _tmpl$77(), _el$8 = _el$7.firstChild, _el$0 = _el$8.nextSibling;
+                  insert(_el$8, () => skill.name);
+                  insert(_el$7, createComponent(Show, {
+                    get when() {
+                      return isLoaded();
+                    },
+                    get children() {
+                      var _el$9 = _tmpl$67();
+                      effect(() => className(_el$9, styles().memoryPanel.badge));
+                      return _el$9;
+                    }
+                  }), _el$0);
+                  insert(_el$0, () => skill.description);
+                  effect((_p$) => {
+                    var _v$3 = styles().memoryPanel.row, _v$4 = styles().memoryPanel.badge, _v$5 = styles().memoryPanel.sectionEmpty;
+                    _v$3 !== _p$.e && className(_el$7, _p$.e = _v$3);
+                    _v$4 !== _p$.t && className(_el$8, _p$.t = _v$4);
+                    _v$5 !== _p$.a && className(_el$0, _p$.a = _v$5);
+                    return _p$;
+                  }, {
+                    e: void 0,
+                    t: void 0,
+                    a: void 0
+                  });
+                  return _el$7;
+                })();
+              }
+            }));
+            effect(() => className(_el$4, styles().memoryPanel.list));
+            return _el$4;
+          }
+        }), null);
+        effect((_p$) => {
+          var _v$ = styles().memoryPanel.section, _v$2 = styles().memoryPanel.sectionTitle;
+          _v$ !== _p$.e && className(_el$2, _p$.e = _v$);
+          _v$2 !== _p$.t && className(_el$3, _p$.t = _v$2);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0
+        });
+        return _el$2;
+      }
+    }));
+    effect(() => className(_el$, styles().memoryPanel.container));
+    return _el$;
+  })();
+};
 
 // src/components/hooks/HookDetails.tsx
-var _tmpl$40 = /* @__PURE__ */ template(`<aside data-testid=ai-devtools-preview-pane><div>`);
-var _tmpl$214 = /* @__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$310 = /* @__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$47 = /* @__PURE__ */ template(`<div>Open a page with TanStack AI hooks to inspect live state.`);
-var _tmpl$57 = /* @__PURE__ */ template(`<section data-testid=ai-devtools-overview-category><div><span></span><span>`);
-var _tmpl$67 = /* @__PURE__ */ template(`<span>running`);
-var _tmpl$77 = /* @__PURE__ */ template(`<span> new`);
+var _tmpl$41 = /* @__PURE__ */ template(`<aside data-testid=ai-devtools-preview-pane><div>`);
+var _tmpl$215 = /* @__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$311 = /* @__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$48 = /* @__PURE__ */ template(`<div>Open a page with TanStack AI hooks to inspect live state.`);
+var _tmpl$58 = /* @__PURE__ */ template(`<section data-testid=ai-devtools-overview-category><div><span></span><span>`);
+var _tmpl$68 = /* @__PURE__ */ template(`<span>running`);
+var _tmpl$78 = /* @__PURE__ */ template(`<span> new`);
 var _tmpl$87 = /* @__PURE__ */ template(`<button type=button data-testid=ai-devtools-overview-hook><div><span></span><span></span></div><div><span>`);
 var _tmpl$97 = /* @__PURE__ */ template(`<div><span></span><span>`);
 var _tmpl$06 = /* @__PURE__ */ template(`<span>`);
@@ -10959,7 +11132,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$215 = /* @__PURE__ */ template(`<div data-testid=ai-devtools-tools><div></div><div>`);
+var _tmpl$216 = /* @__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>`);
@@ -10981,7 +11154,8 @@ var HookDetails = () => {
   let previewPane;
   const hook = createMemo(() => {
     const id = state.hooks.activeHookId;
-    return id ? state.hooks.hooks[id] : void 0;
+    if (id === null) return void 0;
+    return state.hooks.hooks[id];
   });
   const conversation = createMemo(() => {
     const activeHook = hook();
@@ -10998,7 +11172,7 @@ var HookDetails = () => {
     return Boolean(outputKind && outputKind !== "chat" && outputKind !== "structured");
   });
   createEffect(() => {
-    if (isGenerationHook() && (activeTab() === "tools" || activeTab() === "memory")) {
+    if (isGenerationHook() && (activeTab() === "tools" || activeTab() === "memory" || activeTab() === "skills")) {
       setActiveTab("conversation");
     }
   });
@@ -11014,7 +11188,7 @@ var HookDetails = () => {
     return [];
   });
   const showSecondaryPane = createMemo(() => {
-    if (activeTab() === "tools" && !isGenerationHook()) return false;
+    if ((activeTab() === "tools" || activeTab() === "skills") && !isGenerationHook()) return false;
     return isGenerationHook() || !hasStructuredOutputPreview(previewMessages());
   });
   createEffect(() => {
@@ -11043,7 +11217,7 @@ var HookDetails = () => {
       });
     },
     children: (activeHook) => (() => {
-      var _el$ = _tmpl$214(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
+      var _el$ = _tmpl$215(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling, _el$4 = _el$3.firstChild;
       insert(_el$, createComponent(HookHeader, {
         get hook() {
           return activeHook();
@@ -11099,14 +11273,21 @@ var HookDetails = () => {
           return !isGenerationHook();
         },
         get children() {
-          return createComponent(TabButton, {
+          return [createComponent(TabButton, {
             label: "Memory",
             tab: "memory",
             get activeTab() {
               return activeTab();
             },
             onSelect: setActiveTab
-          });
+          }), createComponent(TabButton, {
+            label: "Skills",
+            tab: "skills",
+            get activeTab() {
+              return activeTab();
+            },
+            onSelect: setActiveTab
+          })];
         }
       }), null);
       _el$4.addEventListener("mouseleave", () => setHoverTarget(null));
@@ -11185,12 +11366,20 @@ var HookDetails = () => {
           return createComponent(MemoryPanel, {});
         }
       }), null);
+      insert(_el$4, createComponent(Show, {
+        get when() {
+          return activeTab() === "skills";
+        },
+        get children() {
+          return createComponent(SkillsPanel, {});
+        }
+      }), null);
       insert(_el$3, createComponent(Show, {
         get when() {
           return showSecondaryPane();
         },
         get children() {
-          var _el$5 = _tmpl$40(), _el$6 = _el$5.firstChild;
+          var _el$5 = _tmpl$41(), _el$6 = _el$5.firstChild;
           _el$5.addEventListener("mouseleave", () => setHoverTarget(null));
           _el$5.$$mouseover = (event) => setHoverTargetFromEvent(event, "preview", setHoverTarget);
           use((el) => {
@@ -11271,13 +11460,13 @@ var HookOverview = (props) => {
     },
     get fallback() {
       return (() => {
-        var _el$12 = _tmpl$47();
+        var _el$12 = _tmpl$48();
         effect(() => className(_el$12, styles().hookDetails.empty));
         return _el$12;
       })();
     },
     get children() {
-      var _el$7 = _tmpl$310(), _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$311(), _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() {
@@ -11331,7 +11520,7 @@ var HookOverview = (props) => {
           return groups();
         },
         children: (group) => (() => {
-          var _el$13 = _tmpl$57(), _el$14 = _el$13.firstChild, _el$15 = _el$14.firstChild, _el$16 = _el$15.nextSibling;
+          var _el$13 = _tmpl$58(), _el$14 = _el$13.firstChild, _el$15 = _el$14.firstChild, _el$16 = _el$15.nextSibling;
           insert(_el$15, () => group.label);
           insert(_el$16, () => group.hooks.length);
           insert(_el$13, createComponent(For, {
@@ -11352,7 +11541,7 @@ var HookOverview = (props) => {
                     return running();
                   },
                   get children() {
-                    var _el$23 = _tmpl$67();
+                    var _el$23 = _tmpl$68();
                     effect(() => className(_el$23, styles().hookDetails.lifecycle));
                     return _el$23;
                   }
@@ -11362,7 +11551,7 @@ var HookOverview = (props) => {
                     return unseenCount() > 0;
                   },
                   get children() {
-                    var _el$24 = _tmpl$77(), _el$25 = _el$24.firstChild;
+                    var _el$24 = _tmpl$78(), _el$25 = _el$24.firstChild;
                     insert(_el$24, unseenCount, _el$25);
                     effect(() => className(_el$24, styles().hookDetails.kind));
                     return _el$24;
@@ -12055,7 +12244,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$215(), _el$77 = _el$76.firstChild, _el$78 = _el$77.nextSibling;
+    var _el$76 = _tmpl$216(), _el$77 = _el$76.firstChild, _el$78 = _el$77.nextSibling;
     insert(_el$77, createComponent(Show, {
       get when() {
         return props.hook.tools.length > 0;
@@ -12652,7 +12841,7 @@ function formatTime3(timestamp) {
 delegateEvents(["mouseover", "click"]);
 
 // src/components/Shell.tsx
-var _tmpl$41 = /* @__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$49 = /* @__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() {
@@ -12734,7 +12923,7 @@ function DevtoolsContent() {
   });
   return createComponent(MainPanel, {
     get children() {
-      var _el$ = _tmpl$41(), _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$49(), _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, {