@tanstack/ai-devtools-core 0.5.10 → 0.5.12

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/BJP2PZMD.js')
+  () => import('./Shell/JT2B6WKX.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/YJTEAPIF.js')
+  () => import('./Shell/YBXRSRRK.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/2X67PB7B.js')
+  () => import('./Shell/DCUFLPG6.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/2X67PB7B.js')
+  () => import('./Shell/DCUFLPG6.js')
 );
 
 // src/index.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-devtools-core",
-  "version": "0.5.10",
+  "version": "0.5.12",
   "description": "Core TanStack AI Devtools plugin for inspecting chat messages, tool calls, streams, and errors.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -84,8 +84,8 @@
     "@tanstack/devtools-utils": "^0.7.0",
     "goober": "^2.1.18",
     "solid-js": "^1.9.10",
-    "@tanstack/ai": "^0.51.0",
-    "@tanstack/ai-event-client": "^0.11.1"
+    "@tanstack/ai": "^0.53.0",
+    "@tanstack/ai-event-client": "^0.11.2"
   },
   "devDependencies": {
     "@vitest/coverage-v8": "4.1.10",

package/src/components/conversation/IterationCard.tsx

@@ -169,6 +169,9 @@ const MiddlewareStep: Component<{
     if (ev().wasDropped) return 'DROP'
     if (ev().hookName === 'onChunk' && ev().hasTransform) return 'TRANSFORM'
     if (ev().hookName === 'onConfig' && ev().hasTransform) return 'TRANSFORM'
+    if (ev().hookName === 'onCompactStart') return 'START'
+    if (ev().hookName === 'onCompact') return 'COMPACT'
+    if (ev().hookName === 'onCompactEnd') return 'END'
     if (ev().hookName === 'onBeforeToolCall' && ev().hasTransform)
       return 'DECISION'
     return null
@@ -181,7 +184,13 @@ const MiddlewareStep: Component<{
 
   return (
     <>
-      <div class={s().step}>
+      <div
+        class={s().step}
+        style={hasChanges() ? { cursor: 'pointer' } : undefined}
+        onClick={() => {
+          if (hasChanges()) setExpanded(!expanded())
+        }}
+      >
         <span class={`${s().stepPrefix} ${s().stepPrefixMiddleware}`}>
           Middleware
         </span>
@@ -196,10 +205,7 @@ const MiddlewareStep: Component<{
           <span class={s().mwSuffix}>{suffix()}</span>
         </Show>
         <Show when={hasChanges()}>
-          <span
-            class={s().stepExpandToggle}
-            onClick={() => setExpanded(!expanded())}
-          >
+          <span class={s().stepExpandToggle}>
             {expanded() ? 'hide changes' : 'show changes'}
           </span>
         </Show>

package/src/components/hooks/CompactionPanel.tsx

@@ -0,0 +1,223 @@
+import { For, Show, createMemo, createSignal } from 'solid-js'
+import { JsonTree } from '@tanstack/devtools-ui'
+import { useAIStore } from '../../store/ai-context'
+import { useStyles } from '../../styles/use-styles'
+import { compactionEventsForHook } from '../../store/compaction-registry'
+import type { Component } from 'solid-js'
+import type {
+  CompactionEventRecord,
+  CompactionMessagePreview,
+} from '../../store/compaction-registry'
+import type { HookRecord } from '../../store/hook-registry'
+
+function formatTime(value: number): string {
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+  return date.toLocaleTimeString()
+}
+
+function shortStrategy(event: CompactionEventRecord): string {
+  const key = event.strategyKey
+  if (!key) return event.reusedCheckpoint ? 'checkpoint' : 'compaction'
+  const cut = key.indexOf(':maxTokens=')
+  return cut === -1 ? key : key.slice(0, cut)
+}
+
+const PreviewMessage: Component<{
+  preview: CompactionMessagePreview
+}> = (props) => {
+  const styles = useStyles()
+  return (
+    <div class={styles().hookDetails.message}>
+      <div class={styles().hookDetails.messageRole}>
+        {props.preview.role}
+        <Show when={props.preview.tokens > 0}>
+          {` · ${props.preview.tokens} tok`}
+        </Show>
+      </div>
+      <div class={styles().hookDetails.messageContent}>
+        {props.preview.text}
+      </div>
+    </div>
+  )
+}
+
+const PreviewColumn: Component<{
+  title: string
+  previews: Array<CompactionMessagePreview>
+  empty: string
+}> = (props) => {
+  const styles = useStyles()
+  const s = () => styles().iterationTimeline
+  return (
+    <div class={s().stepJsonItem}>
+      <div class={s().stepJsonItemLabel}>
+        {props.title} ({props.previews.length})
+      </div>
+      <Show
+        when={props.previews.length > 0}
+        fallback={
+          <div class={styles().hookDetails.emptySmall}>{props.empty}</div>
+        }
+      >
+        <div class={styles().memoryPanel.list}>
+          <For each={props.previews}>
+            {(preview) => <PreviewMessage preview={preview} />}
+          </For>
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+function kindLabel(kind: CompactionEventRecord['kind']): string {
+  if (kind === 'started') return 'Started'
+  if (kind === 'ended') return 'Ended'
+  return 'State'
+}
+
+const CompactEvent: Component<{
+  event: CompactionEventRecord
+  defaultOpen?: boolean
+}> = (props) => {
+  const styles = useStyles()
+  const s = () => styles().iterationTimeline
+  const [expanded, setExpanded] = createSignal(props.defaultOpen === true)
+  const event = () => props.event
+  const isState = () => event().kind === 'state'
+
+  const stats = () => ({
+    kind: event().kind,
+    before: event().before,
+    after: event().after,
+    messagesBefore: event().messagesBefore,
+    messagesAfter: event().messagesAfter,
+    maxTokens: event().maxTokens,
+    strategyKey: event().strategyKey,
+    reusedCheckpoint: event().reusedCheckpoint,
+    durationMs: event().durationMs,
+  })
+
+  const countLabel = () => {
+    if (event().kind === 'started') {
+      return `${event().messagesBefore ?? 0} msgs · ${event().before ?? 0} tok`
+    }
+    if (event().kind === 'ended') {
+      return `${event().messagesAfter ?? 0} msgs · ${event().after ?? 0} tok`
+    }
+    return `${event().messagesBefore ?? 0} → ${event().messagesAfter ?? 0} msgs`
+  }
+
+  return (
+    <>
+      <div
+        class={s().step}
+        data-testid="ai-devtools-compaction-event"
+        data-kind={event().kind}
+        style={{ cursor: 'pointer' }}
+        onClick={() => setExpanded(!expanded())}
+      >
+        <span class={`${s().stepPrefix} ${s().stepPrefixMiddleware}`}>
+          {kindLabel(event().kind)}
+        </span>
+        <span class={`${s().mwBadge} ${s().mwBadgeTransform}`}>
+          {shortStrategy(event())}
+        </span>
+        <span class={s().mwHook}>{countLabel()}</span>
+        <Show when={event().kind === 'state'}>
+          <span class={s().stepDuration}>
+            {event().before} → {event().after} tok
+          </span>
+        </Show>
+        <Show when={event().durationMs !== undefined}>
+          <span class={s().stepDuration}>{event().durationMs}ms</span>
+        </Show>
+        <Show when={event().reusedCheckpoint}>
+          <span class={s().mwSuffix}>checkpoint</span>
+        </Show>
+        <span class={s().stepDuration}>{formatTime(event().timestamp)}</span>
+        <span class={`${s().chevron} ${expanded() ? s().chevronOpen : ''}`}>
+          {'\u25B6'}
+        </span>
+      </div>
+      <Show when={expanded()}>
+        <div class={s().mwChangesContainer}>
+          <JsonTree value={stats()} defaultExpansionDepth={1} copyable />
+        </div>
+        <Show when={isState()}>
+          <div class={s().stepJsonItemsCompare}>
+            <PreviewColumn
+              title="Dropped"
+              previews={event().dropped ?? []}
+              empty="Nothing was dropped."
+            />
+            <PreviewColumn
+              title="Sent to model"
+              previews={event().result ?? []}
+              empty="No compacted transcript on this event."
+            />
+          </div>
+        </Show>
+      </Show>
+    </>
+  )
+}
+
+export const CompactionPanel: Component<{ hook: HookRecord }> = (props) => {
+  const { state, clearCompaction } = useAIStore()
+  const styles = useStyles()
+  const s = () => styles().iterationTimeline
+
+  const events = createMemo(() =>
+    compactionEventsForHook(state.compaction, props.hook),
+  )
+  const lastStateIndex = createMemo(() => {
+    const list = events()
+    for (let i = list.length - 1; i >= 0; i--) {
+      if (list[i]?.kind === 'state') return i
+    }
+    return -1
+  })
+
+  return (
+    <div
+      class={styles().memoryPanel.container}
+      data-testid="ai-devtools-compaction-panel"
+    >
+      <Show
+        when={events().length > 0}
+        fallback={
+          <div class={styles().hookDetails.emptySmall}>
+            No compaction yet. When the transcript passes maxTokens, each
+            compact appears here.
+          </div>
+        }
+      >
+        <div class={styles().memoryPanel.toolbar}>
+          <span class={styles().memoryPanel.badge}>
+            {events().length} event{events().length === 1 ? '' : 's'}
+          </span>
+          <button
+            type="button"
+            class={styles().memoryPanel.clearButton}
+            onClick={() => clearCompaction()}
+          >
+            Clear
+          </button>
+        </div>
+        <div class={s().iterCard}>
+          <For each={events()}>
+            {(event, index) => (
+              <CompactEvent
+                event={event}
+                defaultOpen={
+                  event.kind === 'state' && index() === lastStateIndex()
+                }
+              />
+            )}
+          </For>
+        </div>
+      </Show>
+    </div>
+  )
+}

package/src/components/hooks/HookDashboard.tsx

@@ -55,8 +55,9 @@ export const HookDashboard: Component = () => {
 
   const handleSelect = (hook: HookRecord) => {
     selectHook(hook.id)
-    if (state.conversations[hook.id]) {
-      selectConversation(hook.id)
+    const conversationId = hook.id || hook.clientId || hook.threadId
+    if (conversationId && state.conversations[conversationId]) {
+      selectConversation(conversationId)
     }
   }
 

package/src/components/hooks/HookDetails.tsx

@@ -39,6 +39,7 @@ import {
 } from './preview-messages'
 import { GenerationPanel, GenerationPreview } from './GenerationPanel'
 import { MemoryPanel } from './MemoryPanel'
+import { CompactionPanel } from './CompactionPanel'
 import { SkillsPanel } from './SkillsPanel'
 import type { HoverOrigin, HoverTarget, PreviewJsonItem } from './preview-model'
 import type {
@@ -50,7 +51,13 @@ import type {
 import type { Conversation, Message, ToolCall } from '../../store/ai-store'
 import type { Component, Setter } from 'solid-js'
 
-type DetailTab = 'conversation' | 'tools' | 'state' | 'memory' | 'skills'
+type DetailTab =
+  | 'conversation'
+  | 'tools'
+  | 'state'
+  | 'memory'
+  | 'compaction'
+  | 'skills'
 type MessagePart = NonNullable<Message['parts']>[number]
 const scrollAnimations = new WeakMap<HTMLElement, number>()
 
@@ -157,6 +164,7 @@ export const HookDetails: Component = () => {
       isGenerationHook() &&
       (activeTab() === 'tools' ||
         activeTab() === 'memory' ||
+        activeTab() === 'compaction' ||
         activeTab() === 'skills')
     ) {
       setActiveTab('conversation')
@@ -214,8 +222,10 @@ export const HookDetails: Component = () => {
         <HookOverview
           onSelectHook={(selectedHook) => {
             selectHook(selectedHook.id)
-            if (state.conversations[selectedHook.id]) {
-              selectConversation(selectedHook.id)
+            const conversationId =
+              selectedHook.id || selectedHook.clientId || selectedHook.threadId
+            if (conversationId && state.conversations[conversationId]) {
+              selectConversation(conversationId)
             }
           }}
         />
@@ -265,6 +275,12 @@ export const HookDetails: Component = () => {
                 activeTab={activeTab()}
                 onSelect={setActiveTab}
               />
+              <TabButton
+                label="Compaction"
+                tab="compaction"
+                activeTab={activeTab()}
+                onSelect={setActiveTab}
+              />
               <TabButton
                 label="Skills"
                 tab="skills"
@@ -318,6 +334,9 @@ export const HookDetails: Component = () => {
               <Show when={activeTab() === 'memory'}>
                 <MemoryPanel />
               </Show>
+              <Show when={activeTab() === 'compaction'}>
+                <CompactionPanel hook={activeHook()} />
+              </Show>
               <Show when={activeTab() === 'skills'}>
                 <SkillsPanel />
               </Show>

package/src/components/hooks/index.ts

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

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,11 @@ import {
   clearMemoryRegistry,
   createMemoryRegistryState,
 } from './memory-registry'
+import {
+  applyCompactionEvent,
+  clearCompactionRegistry,
+  createCompactionRegistryState,
+} from './compaction-registry'
 import {
   applySkillsSnapshot,
   clearSkillsRegistry,
@@ -33,6 +38,7 @@ 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'
 
@@ -242,6 +248,7 @@ interface AIStoreState {
   activeConversationId: string | null
   hooks: HookRegistryState
   memory: MemoryRegistryState
+  compaction: CompactionRegistryState
   skills: SkillsRegistryState
 }
 
@@ -251,6 +258,7 @@ interface AIContextValue {
   selectConversation: (id: string) => void
   clearHooks: () => void
   clearMemory: () => void
+  clearCompaction: () => void
   clearSkills: () => void
   selectHook: (id: string | null) => void
   saveToolFixture: (fixture: ToolFixtureRecord) => void
@@ -274,6 +282,7 @@ export const AIProvider: ParentComponent = (props) => {
     activeConversationId: null,
     hooks: createHookRegistryState(),
     memory: createMemoryRegistryState(),
+    compaction: createCompactionRegistryState(),
     skills: createSkillsRegistryState(),
   })
 
@@ -670,6 +679,15 @@ export const AIProvider: ParentComponent = (props) => {
     )
   }
 
+  function clearCompaction() {
+    setState(
+      'compaction',
+      produce((compaction: CompactionRegistryState) => {
+        clearCompactionRegistry(compaction)
+      }),
+    )
+  }
+
   function clearSkills() {
     setState(
       'skills',
@@ -680,12 +698,15 @@ export const AIProvider: ParentComponent = (props) => {
   }
 
   function selectHook(id: string | null) {
-    setState(
-      'hooks',
-      produce((hooks: HookRegistryState) => {
-        setActiveHook(hooks, id)
-      }),
-    )
+    setState('hooks', 'activeHookId', id)
+    if (id) {
+      setState(
+        'hooks',
+        produce((hooks: HookRegistryState) => {
+          markHookViewed(hooks, id)
+        }),
+      )
+    }
   }
 
   function saveToolFixture(fixture: ToolFixtureRecord) {
@@ -2984,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
@@ -3491,6 +3596,7 @@ export const AIProvider: ParentComponent = (props) => {
     selectConversation,
     clearHooks,
     clearMemory,
+    clearCompaction,
     clearSkills,
     selectHook,
     saveToolFixture,