@tanstack/ai-devtools-core 0.5.9 → 0.5.11

package/src/store/ai-context.tsx

@@ -6,9 +6,9 @@ import {
   applyHookEvent,
   clearHookRegistry,
   createHookRegistryState,
+  markHookViewed,
   removeSavedFixture,
   replaceSavedFixtures,
-  setActiveHook,
 } from './hook-registry'
 import {
   createClientToolCallMessage,
@@ -20,6 +20,16 @@ import {
   clearMemoryRegistry,
   createMemoryRegistryState,
 } from './memory-registry'
+import {
+  applyCompactionEvent,
+  clearCompactionRegistry,
+  createCompactionRegistryState,
+} from './compaction-registry'
+import {
+  applySkillsSnapshot,
+  clearSkillsRegistry,
+  createSkillsRegistryState,
+} from './skills-registry'
 import type { ContentPartSource, TokenUsage } from '@tanstack/ai'
 import type {
   ContentPart,
@@ -28,6 +38,8 @@ import type {
 } from '@tanstack/ai-event-client'
 import type { HookRegistryState, ToolFixtureRecord } from './hook-registry'
 import type { MemoryRegistryState } from './memory-registry'
+import type { CompactionRegistryState } from './compaction-registry'
+import type { SkillsRegistryState } from './skills-registry'
 import type { ParentComponent } from 'solid-js'
 
 interface MessagePart {
@@ -236,6 +248,8 @@ interface AIStoreState {
   activeConversationId: string | null
   hooks: HookRegistryState
   memory: MemoryRegistryState
+  compaction: CompactionRegistryState
+  skills: SkillsRegistryState
 }
 
 interface AIContextValue {
@@ -244,6 +258,8 @@ interface AIContextValue {
   selectConversation: (id: string) => void
   clearHooks: () => void
   clearMemory: () => void
+  clearCompaction: () => void
+  clearSkills: () => void
   selectHook: (id: string | null) => void
   saveToolFixture: (fixture: ToolFixtureRecord) => void
   deleteToolFixture: (fixtureId: string) => void
@@ -266,6 +282,8 @@ export const AIProvider: ParentComponent = (props) => {
     activeConversationId: null,
     hooks: createHookRegistryState(),
     memory: createMemoryRegistryState(),
+    compaction: createCompactionRegistryState(),
+    skills: createSkillsRegistryState(),
   })
 
   const streamToConversation = new Map<string, string>()
@@ -661,15 +679,36 @@ export const AIProvider: ParentComponent = (props) => {
     )
   }
 
-  function selectHook(id: string | null) {
+  function clearCompaction() {
     setState(
-      'hooks',
-      produce((hooks: HookRegistryState) => {
-        setActiveHook(hooks, id)
+      'compaction',
+      produce((compaction: CompactionRegistryState) => {
+        clearCompactionRegistry(compaction)
       }),
     )
   }
 
+  function clearSkills() {
+    setState(
+      'skills',
+      produce((skills: SkillsRegistryState) => {
+        clearSkillsRegistry(skills)
+      }),
+    )
+  }
+
+  function selectHook(id: string | null) {
+    setState('hooks', 'activeHookId', id)
+    if (id) {
+      setState(
+        'hooks',
+        produce((hooks: HookRegistryState) => {
+          markHookViewed(hooks, id)
+        }),
+      )
+    }
+  }
+
   function saveToolFixture(fixture: ToolFixtureRecord) {
     const fixtures = mergeFixtures(fixture, state.hooks.fixtures)
     setState(
@@ -1248,6 +1287,14 @@ export const AIProvider: ParentComponent = (props) => {
           }),
         )
       }),
+      aiEventClient.on('skills:snapshot', (e) => {
+        setState(
+          'skills',
+          produce((skills: SkillsRegistryState) => {
+            applySkillsSnapshot(skills, e.payload)
+          }),
+        )
+      }),
     )
 
     const recordRunEvent = (
@@ -2958,6 +3005,90 @@ export const AIProvider: ParentComponent = (props) => {
       }),
     )
 
+    const recordCompactionLifecycle = (
+      kind: 'started' | 'state' | 'ended',
+      hookName: 'onCompactStart' | 'onCompact' | 'onCompactEnd',
+      payload: {
+        timestamp: number
+        requestId?: string
+        streamId?: string
+        clientId?: string
+        hookId?: string
+        threadId?: string
+        runId?: string
+        eventId?: string
+        before?: number
+        after?: number
+        messagesBefore?: number
+        messagesAfter?: number
+        reusedCheckpoint?: boolean
+        maxTokens?: number
+        strategyKey?: string
+        durationMs?: number
+        dropped?: CompactionRegistryState['events'][number]['dropped']
+        result?: CompactionRegistryState['events'][number]['result']
+      },
+    ) => {
+      setState(
+        'compaction',
+        produce((compaction: CompactionRegistryState) => {
+          applyCompactionEvent(compaction, kind, payload)
+        }),
+      )
+
+      const { requestId, streamId, clientId } = payload
+      const conversationId =
+        (clientId && state.conversations[clientId] ? clientId : undefined) ||
+        (streamId ? streamToConversation.get(streamId) : undefined) ||
+        (requestId ? requestToConversation.get(requestId) : undefined)
+      if (!conversationId || !state.conversations[conversationId]) return
+
+      const conv = state.conversations[conversationId]
+      const iterIndex = findLatestIterationIndex(conv, requestId)
+      if (iterIndex < 0) return
+
+      const mwEvent: MiddlewareEvent = {
+        id: `mw-cmp-${kind}-${Date.now()}-${Math.random()}`,
+        middlewareName: 'compaction',
+        hookName,
+        timestamp: payload.timestamp,
+        hasTransform: kind === 'state',
+        configChanges: {
+          before: payload.before,
+          after: payload.after,
+          messagesBefore: payload.messagesBefore,
+          messagesAfter: payload.messagesAfter,
+          reusedCheckpoint: payload.reusedCheckpoint,
+          maxTokens: payload.maxTokens,
+          strategyKey: payload.strategyKey,
+          durationMs: payload.durationMs,
+        },
+      }
+
+      setState(
+        'conversations',
+        conversationId,
+        'iterations',
+        iterIndex,
+        'middlewareEvents',
+        produce((arr: Array<MiddlewareEvent>) => {
+          arr.push(mwEvent)
+        }),
+      )
+    }
+
+    cleanupFns.push(
+      aiEventClient.on('compaction:started', (e) => {
+        recordCompactionLifecycle('started', 'onCompactStart', e.payload)
+      }),
+      aiEventClient.on('compaction:state', (e) => {
+        recordCompactionLifecycle('state', 'onCompact', e.payload)
+      }),
+      aiEventClient.on('compaction:ended', (e) => {
+        recordCompactionLifecycle('ended', 'onCompactEnd', e.payload)
+      }),
+    )
+
     cleanupFns.push(
       aiEventClient.on('summarize:request:started', (e) => {
         const { requestId, model, inputLength, timestamp, clientId } = e.payload
@@ -3465,6 +3596,8 @@ export const AIProvider: ParentComponent = (props) => {
     selectConversation,
     clearHooks,
     clearMemory,
+    clearCompaction,
+    clearSkills,
     selectHook,
     saveToolFixture,
     deleteToolFixture,

package/src/store/compaction-registry.ts

@@ -0,0 +1,121 @@
+const MAX_EVENTS = 50
+
+export type CompactionEventKind = 'started' | 'state' | 'ended'
+
+export interface CompactionMessagePreview {
+  role: string
+  tokens: number
+  text: string
+}
+
+export interface CompactionEventRecord {
+  id: string
+  kind: CompactionEventKind
+  timestamp: number
+  hookId?: string
+  clientId?: string
+  threadId?: string
+  runId?: string
+  before?: number
+  after?: number
+  messagesBefore?: number
+  messagesAfter?: number
+  reusedCheckpoint?: boolean
+  maxTokens?: number
+  strategyKey?: string
+  durationMs?: number
+  dropped?: Array<CompactionMessagePreview>
+  result?: Array<CompactionMessagePreview>
+}
+
+export interface CompactionRegistryState {
+  events: Array<CompactionEventRecord>
+}
+
+export function createCompactionRegistryState(): CompactionRegistryState {
+  return { events: [] }
+}
+
+export interface CompactionLifecycleInput {
+  timestamp: number
+  eventId?: string
+  hookId?: string
+  clientId?: string
+  threadId?: string
+  runId?: string
+  before?: number
+  after?: number
+  messagesBefore?: number
+  messagesAfter?: number
+  reusedCheckpoint?: boolean
+  maxTokens?: number
+  strategyKey?: string
+  durationMs?: number
+  dropped?: Array<CompactionMessagePreview>
+  result?: Array<CompactionMessagePreview>
+}
+
+function eventId(
+  kind: CompactionEventKind,
+  event: CompactionLifecycleInput,
+): string {
+  return [
+    'cmp',
+    kind,
+    String(event.timestamp),
+    event.hookId ?? event.clientId ?? event.threadId ?? 'unknown',
+    String(event.before ?? event.after ?? ''),
+  ].join('-')
+}
+
+/** Append one compaction lifecycle event. Newest stays at the end. */
+export function applyCompactionEvent(
+  state: CompactionRegistryState,
+  kind: CompactionEventKind,
+  event: CompactionLifecycleInput,
+): void {
+  state.events.push({
+    id: event.eventId ?? eventId(kind, event),
+    kind,
+    timestamp: event.timestamp,
+    hookId: event.hookId,
+    clientId: event.clientId,
+    threadId: event.threadId,
+    runId: event.runId,
+    before: event.before,
+    after: event.after,
+    messagesBefore: event.messagesBefore,
+    messagesAfter: event.messagesAfter,
+    reusedCheckpoint: event.reusedCheckpoint,
+    maxTokens: event.maxTokens,
+    strategyKey: event.strategyKey,
+    durationMs: event.durationMs,
+    dropped: event.dropped,
+    result: event.result,
+  })
+  if (state.events.length > MAX_EVENTS) {
+    state.events.splice(0, state.events.length - MAX_EVENTS)
+  }
+}
+
+export function clearCompactionRegistry(state: CompactionRegistryState): void {
+  state.events = []
+}
+
+export function compactionEventsForHook(
+  state: CompactionRegistryState,
+  hook: { id: string; clientId?: string; threadId?: string },
+): Array<CompactionEventRecord> {
+  const matched = state.events.filter((event) => {
+    if (event.hookId && event.hookId === hook.id) return true
+    if (event.clientId && hook.clientId && event.clientId === hook.clientId) {
+      return true
+    }
+    if (event.threadId && hook.threadId && event.threadId === hook.threadId) {
+      return true
+    }
+    return false
+  })
+  if (matched.length > 0) return matched
+  return state.events
+}

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]};
@@ -3652,6 +3650,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
         grid-template-columns: repeat(2, minmax(320px, 1fr));
         gap: ${size[3]};
         align-items: start;
+        padding-left: ${size[3]};
         padding-right: ${size[3]};
         @media (max-width: 760px) {
           grid-template-columns: 1fr;