@tanstack/ai-devtools-core 0.5.9 → 0.5.10

package/src/components/hooks/index.ts

@@ -2,4 +2,5 @@ export { HookDashboard } from './HookDashboard'
 export { HookDetails } from './HookDetails'
 export { GenerationPanel, GenerationPreview } from './GenerationPanel'
 export { MemoryPanel } from './MemoryPanel'
+export { SkillsPanel } from './SkillsPanel'
 export { ToolFixtureForm } from './ToolFixtureForm'

package/src/store/ai-context.tsx

@@ -20,6 +20,11 @@ import {
   clearMemoryRegistry,
   createMemoryRegistryState,
 } from './memory-registry'
+import {
+  applySkillsSnapshot,
+  clearSkillsRegistry,
+  createSkillsRegistryState,
+} from './skills-registry'
 import type { ContentPartSource, TokenUsage } from '@tanstack/ai'
 import type {
   ContentPart,
@@ -28,6 +33,7 @@ import type {
 } from '@tanstack/ai-event-client'
 import type { HookRegistryState, ToolFixtureRecord } from './hook-registry'
 import type { MemoryRegistryState } from './memory-registry'
+import type { SkillsRegistryState } from './skills-registry'
 import type { ParentComponent } from 'solid-js'
 
 interface MessagePart {
@@ -236,6 +242,7 @@ interface AIStoreState {
   activeConversationId: string | null
   hooks: HookRegistryState
   memory: MemoryRegistryState
+  skills: SkillsRegistryState
 }
 
 interface AIContextValue {
@@ -244,6 +251,7 @@ interface AIContextValue {
   selectConversation: (id: string) => void
   clearHooks: () => void
   clearMemory: () => void
+  clearSkills: () => void
   selectHook: (id: string | null) => void
   saveToolFixture: (fixture: ToolFixtureRecord) => void
   deleteToolFixture: (fixtureId: string) => void
@@ -266,6 +274,7 @@ export const AIProvider: ParentComponent = (props) => {
     activeConversationId: null,
     hooks: createHookRegistryState(),
     memory: createMemoryRegistryState(),
+    skills: createSkillsRegistryState(),
   })
 
   const streamToConversation = new Map<string, string>()
@@ -661,6 +670,15 @@ export const AIProvider: ParentComponent = (props) => {
     )
   }
 
+  function clearSkills() {
+    setState(
+      'skills',
+      produce((skills: SkillsRegistryState) => {
+        clearSkillsRegistry(skills)
+      }),
+    )
+  }
+
   function selectHook(id: string | null) {
     setState(
       'hooks',
@@ -1248,6 +1266,14 @@ export const AIProvider: ParentComponent = (props) => {
           }),
         )
       }),
+      aiEventClient.on('skills:snapshot', (e) => {
+        setState(
+          'skills',
+          produce((skills: SkillsRegistryState) => {
+            applySkillsSnapshot(skills, e.payload)
+          }),
+        )
+      }),
     )
 
     const recordRunEvent = (
@@ -3465,6 +3491,7 @@ export const AIProvider: ParentComponent = (props) => {
     selectConversation,
     clearHooks,
     clearMemory,
+    clearSkills,
     selectHook,
     saveToolFixture,
     deleteToolFixture,

package/src/store/skills-registry.ts

@@ -0,0 +1,50 @@
+/**
+ * DevTools accumulator for the `skills:snapshot` event. Pure reducers so the
+ * mapping is unit-testable without a Solid store.
+ *
+ * Keyed by hookId (the chat client that received the CUSTOM chunk). The Skills
+ * tab resolves the active hook and reads that snapshot.
+ */
+
+export interface SkillCatalogEntry {
+  name: string
+  description: string
+}
+
+export interface SkillsSnapshot {
+  catalog: Array<SkillCatalogEntry>
+  activated: Array<string>
+  updatedAt: number
+}
+
+export interface SkillsRegistryState {
+  snapshots: Record<string, SkillsSnapshot>
+}
+
+export function createSkillsRegistryState(): SkillsRegistryState {
+  return { snapshots: {} }
+}
+
+export function clearSkillsRegistry(state: SkillsRegistryState): void {
+  state.snapshots = {}
+}
+
+export function applySkillsSnapshot(
+  state: SkillsRegistryState,
+  payload: {
+    hookId?: string
+    catalog?: Array<SkillCatalogEntry>
+    activated?: Array<string>
+    timestamp?: number
+  },
+): void {
+  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(),
+  }
+}

package/src/styles/use-styles.ts

@@ -1695,7 +1695,6 @@ const stylesFactory = (theme: 'light' | 'dark') => {
         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]};
@@ -2570,7 +2569,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
         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);
@@ -3634,7 +3633,6 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       `,
       stepJsonPanel: css`
         margin: ${size[1.5]} ${size[3]};
-        min-height: 280px;
         max-height: 520px;
         overflow: auto;
         padding: ${size[2]} ${size[2]} ${size[2]} ${size[5]};