@tanstack/ai-devtools-core 0.5.9 → 0.5.10

package/dist/Shell/{G2SFOZV2.js → 2X67PB7B.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]};
@@ -4743,6 +4741,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() {
@@ -4757,7 +4773,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();
@@ -5014,6 +5031,11 @@ var AIProvider = (props) => {
       clearMemoryRegistry(memory);
     }));
   }
+  function clearSkills() {
+    setState("skills", produce((skills) => {
+      clearSkillsRegistry(skills);
+    }));
+  }
   function selectHook(id) {
     setState("hooks", produce((hooks) => {
       setActiveHook(hooks, id);
@@ -5338,6 +5360,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) => {
@@ -6914,6 +6940,7 @@ var AIProvider = (props) => {
     selectConversation,
     clearHooks,
     clearMemory,
+    clearSkills,
     selectHook,
     saveToolFixture,
     deleteToolFixture,
@@ -9391,15 +9418,115 @@ var MemoryPanel = () => {
     })))]
   })));
 };
+var _tmpl$41 = ["<ul", ">", "</ul>"];
+var _tmpl$214 = ["<div", "><div", ">Catalog</div>", "</div>"];
+var _tmpl$312 = ["<div", ' data-testid="ai-devtools-skills-panel">', "</div>"];
+var _tmpl$47 = ["<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`.</div>"];
+var _tmpl$57 = ["<div", ">Loaded via `load_skill`, but the catalog snapshot has not arrived yet.</div>"];
+var _tmpl$67 = ["<span", ">loaded</span>"];
+var _tmpl$77 = ["<li", "><span", ">", "</span>", "<span", ">", "</span></li>"];
+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 ssr(_tmpl$312, ssrAttribute("class", escape(styles().memoryPanel.container, true), false), escape(createComponent(Show, {
+    get when() {
+      return catalog().length > 0 || loaded().size > 0;
+    },
+    get fallback() {
+      return ssr(_tmpl$47, ssrAttribute("class", escape(styles().memoryPanel.empty, true), false));
+    },
+    get children() {
+      return ssr(_tmpl$214, ssrAttribute("class", escape(styles().memoryPanel.section, true), false), ssrAttribute("class", escape(styles().memoryPanel.sectionTitle, true), false), escape(createComponent(Show, {
+        get when() {
+          return catalog().length > 0;
+        },
+        get fallback() {
+          return ssr(_tmpl$57, ssrAttribute("class", escape(styles().memoryPanel.sectionEmpty, true), false));
+        },
+        get children() {
+          return ssr(_tmpl$41, ssrAttribute("class", escape(styles().memoryPanel.list, true), false), escape(createComponent(For, {
+            get each() {
+              return catalog();
+            },
+            children: (skill) => {
+              const isLoaded = () => loaded().has(skill.name);
+              return ssr(_tmpl$77, ssrAttribute("class", escape(styles().memoryPanel.row, true), false), ssrAttribute("class", escape(styles().memoryPanel.badge, true), false), escape(skill.name), escape(createComponent(Show, {
+                get when() {
+                  return isLoaded();
+                },
+                get children() {
+                  return ssr(_tmpl$67, ssrAttribute("class", escape(styles().memoryPanel.badge, true), false));
+                }
+              })), ssrAttribute("class", escape(styles().memoryPanel.sectionEmpty, true), false), escape(skill.description));
+            }
+          })));
+        }
+      })));
+    }
+  })));
+};
 
 // src/components/hooks/HookDetails.tsx
-var _tmpl$41 = ["<aside", ' data-testid="ai-devtools-preview-pane"><div', ">", "</div>", "</aside>"];
-var _tmpl$214 = ["<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$312 = ["<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$47 = ["<div", ">Open a page with TanStack AI hooks to inspect live state.</div>"];
-var _tmpl$57 = ["<section", ' data-testid="ai-devtools-overview-category"', "><div", "><span>", "</span><span>", "</span></div>", "</section>"];
-var _tmpl$67 = ["<span", ">running</span>"];
-var _tmpl$77 = ["<span", ">", " new</span>"];
+var _tmpl$48 = ["<aside", ' data-testid="ai-devtools-preview-pane"><div', ">", "</div>", "</aside>"];
+var _tmpl$215 = ["<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$313 = ["<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$49 = ["<div", ">Open a page with TanStack AI hooks to inspect live state.</div>"];
+var _tmpl$58 = ["<section", ' data-testid="ai-devtools-overview-category"', "><div", "><span>", "</span><span>", "</span></div>", "</section>"];
+var _tmpl$68 = ["<span", ">running</span>"];
+var _tmpl$78 = ["<span", ">", " new</span>"];
 var _tmpl$87 = ['<button type="button" data-testid="ai-devtools-overview-hook"', "><div", "><span", ">", "</span><span", ">", "</span></div><div", "><span", ">", "</span>", "", "</div></button>"];
 var _tmpl$97 = ["<div", "><span", ">", "</span><span", ">", "</span></div>"];
 var _tmpl$06 = ["<span", ">", "</span>"];
@@ -9415,7 +9542,7 @@ var _tmpl$174 = ["<div", ">", "</div>"];
 var _tmpl$183 = ["<div", '><button type="button"', ' data-testid="ai-devtools-preview-save-tool-call">Save</button><button type="button"', ' data-testid="ai-devtools-preview-replay-tool-call">Replay</button></div>'];
 var _tmpl$193 = ['<div class="', '">', "</div>"];
 var _tmpl$202 = ["<div", "><span", ">", "</span><div", ">", "</div></div>"];
-var _tmpl$215 = ["<div", ">No messages yet. Start a conversation to see messages here.</div>"];
+var _tmpl$216 = ["<div", ">No messages yet. Start a conversation to see messages here.</div>"];
 var _tmpl$223 = ["<div", ' data-testid="ai-devtools-tools"><div', ">", "</div><div", ">", "</div></div>"];
 var _tmpl$232 = ["<div", ">No tools.</div>"];
 var _tmpl$242 = ["<span", ">approval</span>"];
@@ -9437,7 +9564,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();
@@ -9454,7 +9582,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");
     }
   });
@@ -9470,7 +9598,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(() => {
@@ -9493,7 +9621,7 @@ var HookDetails = () => {
         }
       });
     },
-    children: (activeHook) => ssr(_tmpl$214, ssrAttribute("class", escape(styles().hookDetails.container, true), false), escape(createComponent(HookHeader, {
+    children: (activeHook) => ssr(_tmpl$215, ssrAttribute("class", escape(styles().hookDetails.container, true), false), escape(createComponent(HookHeader, {
       get hook() {
         return activeHook();
       },
@@ -9544,14 +9672,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
+        })];
       }
     })), `${escape(styles().hookDetails.body, true)} ${showSecondaryPane() ? "" : escape(styles().hookDetails.bodySinglePane, true)}`, ssrAttribute("class", escape(styles().hookDetails.primary, true), false), escape(createComponent(Show, {
       get when() {
@@ -9620,12 +9755,19 @@ var HookDetails = () => {
       get children() {
         return createComponent(MemoryPanel, {});
       }
+    })), escape(createComponent(Show, {
+      get when() {
+        return activeTab() === "skills";
+      },
+      get children() {
+        return createComponent(SkillsPanel, {});
+      }
     })), escape(createComponent(Show, {
       get when() {
         return showSecondaryPane();
       },
       get children() {
-        return ssr(_tmpl$41, ssrAttribute("class", escape(styles().hookDetails.previewPane, true), false), ssrAttribute("class", escape(styles().hookDetails.previewHeader, true), false), isGenerationHook() ? "Generated Output" : "User View", escape(createComponent(Show, {
+        return ssr(_tmpl$48, ssrAttribute("class", escape(styles().hookDetails.previewPane, true), false), ssrAttribute("class", escape(styles().hookDetails.previewHeader, true), false), isGenerationHook() ? "Generated Output" : "User View", escape(createComponent(Show, {
           get when() {
             return isGenerationHook();
           },
@@ -9673,10 +9815,10 @@ var HookOverview = (props) => {
       return hooks().length > 0;
     },
     get fallback() {
-      return ssr(_tmpl$47, ssrAttribute("class", escape(styles().hookDetails.empty, true), false));
+      return ssr(_tmpl$49, ssrAttribute("class", escape(styles().hookDetails.empty, true), false));
     },
     get children() {
-      return ssr(_tmpl$312, 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$313, 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;
@@ -9720,7 +9862,7 @@ var HookOverview = (props) => {
         get each() {
           return groups();
         },
-        children: (group) => ssr(_tmpl$57, ssrAttribute("class", escape(styles().hookDetails.overviewGroupCard, true), false), ssrAttribute("data-category", escape(group.id, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewGroupHeader, true), false), escape(group.label), escape(group.hooks.length), escape(createComponent(For, {
+        children: (group) => ssr(_tmpl$58, ssrAttribute("class", escape(styles().hookDetails.overviewGroupCard, true), false), ssrAttribute("data-category", escape(group.id, true), false), ssrAttribute("class", escape(styles().hookDetails.overviewGroupHeader, true), false), escape(group.label), escape(group.hooks.length), escape(createComponent(For, {
           get each() {
             return group.hooks;
           },
@@ -9732,14 +9874,14 @@ var HookOverview = (props) => {
                 return running();
               },
               get children() {
-                return ssr(_tmpl$67, ssrAttribute("class", escape(styles().hookDetails.lifecycle, true), false));
+                return ssr(_tmpl$68, ssrAttribute("class", escape(styles().hookDetails.lifecycle, true), false));
               }
             })), escape(createComponent(Show, {
               get when() {
                 return unseenCount() > 0;
               },
               get children() {
-                return ssr(_tmpl$77, ssrAttribute("class", escape(styles().hookDetails.kind, true), false), escape(unseenCount()));
+                return ssr(_tmpl$78, ssrAttribute("class", escape(styles().hookDetails.kind, true), false), escape(unseenCount()));
               }
             })));
           }
@@ -10029,7 +10171,7 @@ var HookMessageTimeline = (props) => {
       return props.messages.length > 0;
     },
     get fallback() {
-      return ssr(_tmpl$215, ssrAttribute("class", escape(styles().hookDetails.emptySmall, true), false));
+      return ssr(_tmpl$216, ssrAttribute("class", escape(styles().hookDetails.emptySmall, true), false));
     },
     get children() {
       return ssr(_tmpl$174, ssrAttribute("class", escape(styles().hookDetails.messageTimeline, true), false), escape(createComponent(For, {
@@ -10512,7 +10654,7 @@ function formatTime3(timestamp) {
 }
 
 // src/components/Shell.tsx
-var _tmpl$48 = ["<div", ' data-testid="ai-devtools-panel">', "<div", "><div", ' data-testid="ai-devtools-left-panel" style="', '"><div', ">AI Hooks</div>", '</div><div class="', '"></div><div', ' data-testid="ai-devtools-right-panel" style="', '">', "</div></div></div>"];
+var _tmpl$50 = ["<div", ' data-testid="ai-devtools-panel">', "<div", "><div", ' data-testid="ai-devtools-left-panel" style="', '"><div', ">AI Hooks</div>", '</div><div class="', '"></div><div', ' data-testid="ai-devtools-right-panel" style="', '">', "</div></div></div>"];
 function Devtools(props) {
   return createComponent(ThemeContextProvider, {
     get theme() {
@@ -10585,7 +10727,7 @@ function DevtoolsContent() {
   });
   return createComponent(MainPanel, {
     get children() {
-      return ssr(_tmpl$48, ssrAttribute("class", escape(styles().shellRoot, true), false), escape(createComponent(Header, {
+      return ssr(_tmpl$50, ssrAttribute("class", escape(styles().shellRoot, true), false), escape(createComponent(Header, {
         get children() {
           return createComponent(HeaderLogo, {
             flavor: {