@tanstack/ai-devtools-core 0.5.9 → 0.5.11

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/WD22ACIB.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/DRZSZBFE.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/G2SFOZV2.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/G2SFOZV2.js')
+  () => import('./Shell/DCUFLPG6.js')
 );
 
 // src/index.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-devtools-core",
-  "version": "0.5.9",
+  "version": "0.5.11",
   "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.50.0",
-    "@tanstack/ai-event-client": "^0.11.0"
+    "@tanstack/ai": "^0.52.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,8 @@ 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 {
   HookRecord,
@@ -49,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'
+type DetailTab =
+  | 'conversation'
+  | 'tools'
+  | 'state'
+  | 'memory'
+  | 'compaction'
+  | 'skills'
 type MessagePart = NonNullable<Message['parts']>[number]
 const scrollAnimations = new WeakMap<HTMLElement, number>()
 
@@ -119,7 +127,10 @@ export const HookDetails: Component = () => {
 
   const hook = createMemo((): HookRecord | undefined => {
     const id = state.hooks.activeHookId
-    return id ? state.hooks.hooks[id] : undefined
+    // `''` is a legal registry key (a hook that mounted before it minted a
+    // thread id). Only `null` means "no selection".
+    if (id === null) return undefined
+    return state.hooks.hooks[id]
   })
 
   const conversation = createMemo(() => {
@@ -151,7 +162,10 @@ export const HookDetails: Component = () => {
     // while one of them is selected, fall back to the conversation view.
     if (
       isGenerationHook() &&
-      (activeTab() === 'tools' || activeTab() === 'memory')
+      (activeTab() === 'tools' ||
+        activeTab() === 'memory' ||
+        activeTab() === 'compaction' ||
+        activeTab() === 'skills')
     ) {
       setActiveTab('conversation')
     }
@@ -175,7 +189,11 @@ export const HookDetails: Component = () => {
     // Tools tab owns its own form/saved-fixtures layout that fills the
     // primary pane; the secondary "User View" preview squeezes the tool
     // detail column to zero width on narrower hookDetails widths.
-    if (activeTab() === 'tools' && !isGenerationHook()) return false
+    if (
+      (activeTab() === 'tools' || activeTab() === 'skills') &&
+      !isGenerationHook()
+    )
+      return false
     return isGenerationHook() || !hasStructuredOutputPreview(previewMessages())
   })
 
@@ -204,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)
             }
           }}
         />
@@ -255,6 +275,18 @@ export const HookDetails: Component = () => {
                 activeTab={activeTab()}
                 onSelect={setActiveTab}
               />
+              <TabButton
+                label="Compaction"
+                tab="compaction"
+                activeTab={activeTab()}
+                onSelect={setActiveTab}
+              />
+              <TabButton
+                label="Skills"
+                tab="skills"
+                activeTab={activeTab()}
+                onSelect={setActiveTab}
+              />
             </Show>
           </nav>
 
@@ -302,6 +334,12 @@ export const HookDetails: Component = () => {
               <Show when={activeTab() === 'memory'}>
                 <MemoryPanel />
               </Show>
+              <Show when={activeTab() === 'compaction'}>
+                <CompactionPanel hook={activeHook()} />
+              </Show>
+              <Show when={activeTab() === 'skills'}>
+                <SkillsPanel />
+              </Show>
             </main>
 
             <Show when={showSecondaryPane()}>

package/src/components/hooks/SkillsPanel.tsx

@@ -0,0 +1,125 @@
+import { For, Show, createMemo } from 'solid-js'
+import { useAIStore } from '../../store/ai-context'
+import { useStyles } from '../../styles/use-styles'
+import type { SkillsSnapshot } from '../../store/skills-registry'
+import type { Message } from '../../store/ai-store'
+import type { Component } from 'solid-js'
+
+function parseSkillName(argumentsJson: string | undefined): string | undefined {
+  if (!argumentsJson) return undefined
+  try {
+    const parsed: unknown = JSON.parse(argumentsJson)
+    if (
+      parsed &&
+      typeof parsed === 'object' &&
+      'name' in parsed &&
+      typeof parsed.name === 'string'
+    ) {
+      return parsed.name
+    }
+  } catch {
+    return undefined
+  }
+  return undefined
+}
+
+function loadedFromMessages(messages: Array<Message>): Array<string> {
+  const names = new Set<string>()
+  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]
+}
+
+export const SkillsPanel: Component = () => {
+  const { state } = useAIStore()
+  const styles = useStyles()
+
+  const snapshot = createMemo((): SkillsSnapshot | undefined => {
+    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 undefined
+    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 (
+    <div
+      class={styles().memoryPanel.container}
+      data-testid="ai-devtools-skills-panel"
+    >
+      <Show
+        when={catalog().length > 0 || loaded().size > 0}
+        fallback={
+          <div class={styles().memoryPanel.empty}>
+            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>
+        }
+      >
+        <div class={styles().memoryPanel.section}>
+          <div class={styles().memoryPanel.sectionTitle}>Catalog</div>
+          <Show
+            when={catalog().length > 0}
+            fallback={
+              <div class={styles().memoryPanel.sectionEmpty}>
+                Loaded via `load_skill`, but the catalog snapshot has not
+                arrived yet.
+              </div>
+            }
+          >
+            <ul class={styles().memoryPanel.list}>
+              <For each={catalog()}>
+                {(skill) => {
+                  const isLoaded = () => loaded().has(skill.name)
+                  return (
+                    <li class={styles().memoryPanel.row}>
+                      <span class={styles().memoryPanel.badge}>
+                        {skill.name}
+                      </span>
+                      <Show when={isLoaded()}>
+                        <span class={styles().memoryPanel.badge}>loaded</span>
+                      </Show>
+                      <span class={styles().memoryPanel.sectionEmpty}>
+                        {skill.description}
+                      </span>
+                    </li>
+                  )
+                }}
+              </For>
+            </ul>
+          </Show>
+        </div>
+      </Show>
+    </div>
+  )
+}

package/src/components/hooks/index.ts

@@ -2,4 +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'