@tanstack/ai-devtools-core 0.4.24 → 0.5.0

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-devtools-core",
-  "version": "0.4.24",
+  "version": "0.5.0",
   "description": "Core TanStack AI Devtools plugin for inspecting chat messages, tool calls, streams, and errors.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -84,23 +84,23 @@
     "@tanstack/devtools-utils": "^0.4.0",
     "goober": "^2.1.18",
     "solid-js": "^1.9.10",
-    "@tanstack/ai": "0.42.0",
-    "@tanstack/ai-event-client": "0.6.8"
+    "@tanstack/ai": "0.43.0",
+    "@tanstack/ai-event-client": "0.7.0"
   },
   "devDependencies": {
     "@vitest/coverage-v8": "4.0.14",
     "jsdom": "^27.2.0",
     "tsup": "^8.5.1",
     "tsup-preset-solid": "^2.2.0",
-    "vite": "^7.3.3",
+    "vite": "^8.1.4",
     "vite-plugin-solid": "^2.11.10"
   },
   "scripts": {
     "build": "tsup",
     "clean": "premove ./build ./dist",
-    "lint:fix": "eslint ./src --fix",
+    "lint:fix": "oxlint src --type-aware --fix",
     "test:build": "publint --strict",
-    "test:eslint": "eslint ./src",
+    "test:oxlint": "oxlint src --type-aware",
     "test:lib": "vitest --passWithNoTests",
     "test:lib:dev": "pnpm test:lib --watch",
     "test:types": "tsc"

package/src/components/hooks/HookDashboard.tsx

@@ -4,6 +4,7 @@ import { useStyles } from '../../styles/use-styles'
 import { getHookUnseenEventCount } from '../../store/hook-registry'
 import {
   getHookDisplayName,
+  getHookIdentitySubtitle,
   groupHooksByCategory,
   isHookRunning,
   visibleHooks,
@@ -244,9 +245,7 @@ export const HookDashboard: Component = () => {
                               </Show>
                             </div>
                             <span class={styles().hookDashboard.rowId}>
-                              <Show when={hook.displayName} fallback={hook.id}>
-                                {hook.hookName} - {hook.id}
-                              </Show>
+                              {getHookIdentitySubtitle(hook)}
                             </span>
                           </div>
                           <div class={styles().hookDashboard.rowMeta}>

package/src/components/hooks/HookDetails.tsx

@@ -12,6 +12,8 @@ import { ToolFixtureForm } from './ToolFixtureForm'
 import {
   createHookDashboardSummary,
   getHookDisplayName,
+  getHookIdentityLabel,
+  getHookIdentitySubtitle,
   groupHooksByCategory,
   isHookRunning,
   visibleHooks,
@@ -36,6 +38,7 @@ import {
   visiblePreviewPartsForMessage,
 } from './preview-messages'
 import { GenerationPanel, GenerationPreview } from './GenerationPanel'
+import { MemoryPanel } from './MemoryPanel'
 import type { HoverOrigin, HoverTarget, PreviewJsonItem } from './preview-model'
 import type {
   HookRecord,
@@ -46,7 +49,7 @@ import type {
 import type { Conversation, Message, ToolCall } from '../../store/ai-store'
 import type { Component, Setter } from 'solid-js'
 
-type DetailTab = 'conversation' | 'tools' | 'state'
+type DetailTab = 'conversation' | 'tools' | 'state' | 'memory'
 type MessagePart = NonNullable<Message['parts']>[number]
 const scrollAnimations = new WeakMap<HTMLElement, number>()
 
@@ -144,7 +147,12 @@ export const HookDetails: Component = () => {
   })
 
   createEffect(() => {
-    if (isGenerationHook() && activeTab() === 'tools') {
+    // Tools and Memory are chat-only tabs; if a generation hook becomes active
+    // while one of them is selected, fall back to the conversation view.
+    if (
+      isGenerationHook() &&
+      (activeTab() === 'tools' || activeTab() === 'memory')
+    ) {
       setActiveTab('conversation')
     }
   })
@@ -240,6 +248,14 @@ export const HookDetails: Component = () => {
               activeTab={activeTab()}
               onSelect={setActiveTab}
             />
+            <Show when={!isGenerationHook()}>
+              <TabButton
+                label="Memory"
+                tab="memory"
+                activeTab={activeTab()}
+                onSelect={setActiveTab}
+              />
+            </Show>
           </nav>
 
           <div
@@ -283,6 +299,9 @@ export const HookDetails: Component = () => {
               <Show when={activeTab() === 'state'}>
                 <JsonPanel value={activeHook().state} />
               </Show>
+              <Show when={activeTab() === 'memory'}>
+                <MemoryPanel />
+              </Show>
             </main>
 
             <Show when={showSecondaryPane()}>
@@ -429,9 +448,7 @@ const HookOverview: Component<{
                             {getHookDisplayName(hook)}
                           </span>
                           <span class={styles().hookDetails.overviewHookId}>
-                            <Show when={hook.displayName} fallback={hook.id}>
-                              {hook.hookName} - {hook.id}
-                            </Show>
+                            {getHookIdentitySubtitle(hook)}
                           </span>
                         </div>
                         <div class={styles().hookDetails.overviewHookMeta}>
@@ -513,9 +530,21 @@ const HookHeader: Component<{
               {props.hook.hookName}
             </span>
           </Show>
-          <span>{props.hook.id}</span>
-          <Show when={props.hook.threadId}>
-            <span>thread {props.hook.threadId}</span>
+          {/* Prefer threadId as the user-facing identity (generation scope /
+              chat thread). Only show the raw registry id when it differs —
+              after the client prefers threadId over deprecated `id`, the two
+              often match and duplicating them is noise. */}
+          <span data-testid="ai-devtools-hook-identity">
+            {props.hook.threadId
+              ? `thread ${props.hook.threadId}`
+              : getHookIdentityLabel(props.hook)}
+          </span>
+          <Show
+            when={props.hook.threadId && props.hook.threadId !== props.hook.id}
+          >
+            <span data-testid="ai-devtools-hook-registry-id">
+              id {props.hook.id}
+            </span>
           </Show>
           <Show when={props.hook.framework}>
             <span>{props.hook.framework}</span>

package/src/components/hooks/MemoryPanel.tsx

@@ -0,0 +1,296 @@
+import { For, Show, createMemo, createSignal } from 'solid-js'
+import { useAIStore } from '../../store/ai-context'
+import { useStyles } from '../../styles/use-styles'
+import type { Component } from 'solid-js'
+import { memoryScopeLabel } from '../../store/memory-registry'
+import type {
+  MemoryEventRecord,
+  MemoryScopeState,
+} from '../../store/memory-registry'
+
+/**
+ * DevTools "Memory" tab. Memory is per composite scope (tenant/user/thread),
+ * not per-hook, so this panel reads the whole `state.memory` registry and lets
+ * the user pick a scope (defaulting to the most recently active). It renders
+ * two things:
+ *   1. Live contents — the latest `inspect()` records + `listFacts()` facts,
+ *      pushed via `memory:snapshot` (only for adapters that support inspection).
+ *   2. Operations timeline — the `memory:*` recall/save/error events (always
+ *      available, even when the adapter has no introspection).
+ */
+
+/** Shape of a record inside the built-in adapters' `inspect()` payload. */
+interface MemoryRecordRow {
+  id: string
+  text: string
+  kind: string
+  role?: string
+  createdAt?: number
+  importance?: number
+}
+
+/** Best-effort extraction of `{ records: [...] }` from the opaque snapshot data. */
+function extractRecords(data: unknown): Array<MemoryRecordRow> {
+  if (!data || typeof data !== 'object') return []
+  const records = (data as { records?: unknown }).records
+  if (!Array.isArray(records)) return []
+  return records.filter(
+    (r): r is MemoryRecordRow =>
+      Boolean(r) &&
+      typeof r === 'object' &&
+      typeof (r as MemoryRecordRow).id === 'string' &&
+      typeof (r as MemoryRecordRow).text === 'string',
+  )
+}
+
+function formatTime(value: number | string | undefined): string {
+  if (value === undefined) return ''
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return ''
+  return date.toLocaleTimeString()
+}
+
+function eventSummary(event: MemoryEventRecord): string {
+  switch (event.type) {
+    case 'retrieve:started':
+      return `recall "${event.query ?? ''}"`
+    case 'retrieve:completed':
+      return `recalled ${event.fragmentCount ?? 0} fragment(s), ${
+        event.systemPromptChars ?? 0
+      } prompt chars${event.hasTools ? ', +tools' : ''} (${event.durationMs ?? 0}ms)`
+    case 'persist:started':
+      return 'save started'
+    case 'persist:completed':
+      return `saved ${event.okCount ?? 0}/${event.receiptCount ?? 0} receipt(s) (${
+        event.durationMs ?? 0
+      }ms)`
+    case 'error':
+      return `${event.phase ?? ''} error: ${event.error?.message ?? 'unknown'}`
+    default:
+      return event.type
+  }
+}
+
+export const MemoryPanel: Component = () => {
+  const { state, clearMemory } = useAIStore()
+  const styles = useStyles()
+  const [override, setOverride] = createSignal<string | null>(null)
+
+  // Scope keys sorted most-recently-active first.
+  const scopeKeys = createMemo(() =>
+    Object.values(state.memory.scopes)
+      .slice()
+      .sort((a, b) => b.lastActivity - a.lastActivity)
+      .map((s) => s.key),
+  )
+
+  const selectedKey = createMemo(() => {
+    const chosen = override()
+    if (chosen && state.memory.scopes[chosen]) return chosen
+    return scopeKeys()[0] ?? null
+  })
+
+  const scope = createMemo((): MemoryScopeState | undefined => {
+    const key = selectedKey()
+    return key ? state.memory.scopes[key] : undefined
+  })
+
+  const records = createMemo(() => extractRecords(scope()?.snapshot?.data))
+  const facts = createMemo(() => scope()?.snapshot?.facts ?? [])
+  // Timeline newest-first.
+  const events = createMemo(() =>
+    (scope()?.events ?? []).slice().sort((a, b) => b.timestamp - a.timestamp),
+  )
+
+  return (
+    <div
+      class={styles().memoryPanel.container}
+      data-testid="ai-devtools-memory-panel"
+    >
+      <Show
+        when={scope()}
+        fallback={
+          <div class={styles().memoryPanel.empty}>
+            No memory activity yet. Send a message through a chat wired with
+            <code> memoryMiddleware</code> and recall/save events will appear
+            here.
+          </div>
+        }
+      >
+        {(activeScope) => (
+          <>
+            <div class={styles().memoryPanel.toolbar}>
+              <div class={styles().memoryPanel.scopeControls}>
+                <Show
+                  when={scopeKeys().length > 1}
+                  fallback={
+                    <span class={styles().memoryPanel.badge}>
+                      {activeScope().adapter ?? 'memory'}
+                    </span>
+                  }
+                >
+                  <select
+                    class={styles().memoryPanel.scopeSelect}
+                    value={selectedKey() ?? ''}
+                    onChange={(e) => setOverride(e.currentTarget.value)}
+                    data-testid="ai-devtools-memory-scope-select"
+                  >
+                    <For each={scopeKeys()}>
+                      {(key) => {
+                        const entry = state.memory.scopes[key]
+                        const label = entry ? memoryScopeLabel(entry) : key
+                        return (
+                          <option value={key}>
+                            {entry?.adapter ? `${entry.adapter} · ` : ''}
+                            {label.length > 40
+                              ? `${label.slice(0, 40)}…`
+                              : label}
+                          </option>
+                        )
+                      }}
+                    </For>
+                  </select>
+                </Show>
+              </div>
+              <button
+                type="button"
+                class={styles().memoryPanel.clearButton}
+                onClick={() => {
+                  setOverride(null)
+                  clearMemory()
+                }}
+              >
+                Clear
+              </button>
+            </div>
+
+            {/* Live contents (inspect + listFacts) */}
+            <section class={styles().memoryPanel.section}>
+              <div class={styles().memoryPanel.sectionTitle}>
+                Stored records ({records().length})
+                <Show when={activeScope().snapshot}>
+                  {(snap) => (
+                    <span class={styles().memoryPanel.time}>
+                      snapshot {formatTime(snap().takenAt)}
+                    </span>
+                  )}
+                </Show>
+              </div>
+              <Show
+                when={records().length > 0}
+                fallback={
+                  <div class={styles().memoryPanel.sectionEmpty}>
+                    {activeScope().snapshot
+                      ? 'Snapshot is empty.'
+                      : 'This adapter does not expose inspect() — see the timeline below for activity.'}
+                  </div>
+                }
+              >
+                <div class={styles().memoryPanel.list}>
+                  <For each={records()}>
+                    {(rec) => (
+                      <div
+                        class={styles().memoryPanel.row}
+                        data-testid="ai-devtools-memory-record"
+                      >
+                        <div class={styles().memoryPanel.rowHeader}>
+                          <span class={styles().memoryPanel.badge}>
+                            {rec.kind}
+                          </span>
+                          <Show when={rec.role}>
+                            <span>{rec.role}</span>
+                          </Show>
+                          <Show when={rec.importance !== undefined}>
+                            <span>importance {rec.importance?.toFixed(2)}</span>
+                          </Show>
+                          <span class={styles().memoryPanel.time}>
+                            {formatTime(rec.createdAt)}
+                          </span>
+                        </div>
+                        <div class={styles().memoryPanel.rowText}>
+                          {rec.text}
+                        </div>
+                      </div>
+                    )}
+                  </For>
+                </div>
+              </Show>
+            </section>
+
+            {/* Facts */}
+            <section class={styles().memoryPanel.section}>
+              <div class={styles().memoryPanel.sectionTitle}>
+                listFacts() ({facts().length})
+              </div>
+              <Show
+                when={facts().length > 0}
+                fallback={
+                  <div class={styles().memoryPanel.sectionEmpty}>No facts.</div>
+                }
+              >
+                <div class={styles().memoryPanel.list}>
+                  <For each={facts()}>
+                    {(fact) => (
+                      <div class={styles().memoryPanel.row}>
+                        <div class={styles().memoryPanel.rowText}>
+                          <Show when={fact.source}>
+                            <span class={styles().memoryPanel.rowHeader}>
+                              {fact.source}:{' '}
+                            </span>
+                          </Show>
+                          {fact.text}
+                        </div>
+                      </div>
+                    )}
+                  </For>
+                </div>
+              </Show>
+            </section>
+
+            {/* Operations timeline */}
+            <section class={styles().memoryPanel.section}>
+              <div class={styles().memoryPanel.sectionTitle}>
+                Operations ({events().length})
+              </div>
+              <Show
+                when={events().length > 0}
+                fallback={
+                  <div class={styles().memoryPanel.sectionEmpty}>
+                    No operations recorded.
+                  </div>
+                }
+              >
+                <div class={styles().memoryPanel.list}>
+                  <For each={events()}>
+                    {(event) => (
+                      <div
+                        class={`${styles().memoryPanel.row} ${
+                          event.type === 'error'
+                            ? styles().memoryPanel.rowError
+                            : ''
+                        }`}
+                        data-testid="ai-devtools-memory-event"
+                      >
+                        <div class={styles().memoryPanel.rowHeader}>
+                          <span class={styles().memoryPanel.badge}>
+                            {event.type}
+                          </span>
+                          <span class={styles().memoryPanel.time}>
+                            {formatTime(event.timestamp)}
+                          </span>
+                        </div>
+                        <div class={styles().memoryPanel.rowText}>
+                          {eventSummary(event)}
+                        </div>
+                      </div>
+                    )}
+                  </For>
+                </div>
+              </Show>
+            </section>
+          </>
+        )}
+      </Show>
+    </div>
+  )
+}

package/src/components/hooks/hook-dashboard-model.ts

@@ -61,6 +61,32 @@ export function getHookDisplayName(hook: HookRecord): string {
   return hook.displayName ?? hook.hookName
 }
 
+/**
+ * Stable identity string shown under the hook title.
+ *
+ * Prefer `threadId` when present — for generation hooks that is the single
+ * app-chosen scope (and, after the client prefers `threadId` over deprecated
+ * `id`, often equals the registry key too). Fall back to the registry `id`
+ * (devtools hook id / legacy client id) for ephemeral hooks that never named
+ * a thread.
+ */
+export function getHookIdentityLabel(hook: HookRecord): string {
+  return hook.threadId ?? hook.id
+}
+
+/**
+ * Secondary subtitle under the title: either just the identity, or
+ * `hookName - identity` when a custom display name is set so the technical
+ * name stays visible.
+ */
+export function getHookIdentitySubtitle(hook: HookRecord): string {
+  const identity = getHookIdentityLabel(hook)
+  if (hook.displayName) {
+    return `${hook.hookName} - ${identity}`
+  }
+  return identity
+}
+
 export function groupHooksByCategory(
   hooks: Array<HookRecord>,
 ): Array<HookCategoryGroup> {

package/src/components/hooks/index.ts

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

package/src/store/ai-context.tsx

@@ -14,12 +14,19 @@ import {
   createClientToolCallMessage,
   shouldSkipClientAssistantPlaceholder,
 } from './message-event-utils'
+import {
+  applyMemoryEvent,
+  applyMemorySnapshot,
+  clearMemoryRegistry,
+  createMemoryRegistryState,
+} from './memory-registry'
 import type { ContentPartSource, TokenUsage } from '@tanstack/ai'
 import type {
   DevtoolsToolFixtureApplyEvent,
   RunLifecycleEvent,
 } from '@tanstack/ai-event-client'
 import type { HookRegistryState, ToolFixtureRecord } from './hook-registry'
+import type { MemoryRegistryState } from './memory-registry'
 import type { ParentComponent } from 'solid-js'
 
 interface MessagePart {
@@ -227,6 +234,7 @@ interface AIStoreState {
   conversations: Record<string, Conversation>
   activeConversationId: string | null
   hooks: HookRegistryState
+  memory: MemoryRegistryState
 }
 
 interface AIContextValue {
@@ -234,6 +242,7 @@ interface AIContextValue {
   clearAllConversations: () => void
   selectConversation: (id: string) => void
   clearHooks: () => void
+  clearMemory: () => void
   selectHook: (id: string | null) => void
   saveToolFixture: (fixture: ToolFixtureRecord) => void
   deleteToolFixture: (fixtureId: string) => void
@@ -255,6 +264,7 @@ export const AIProvider: ParentComponent = (props) => {
     conversations: {},
     activeConversationId: null,
     hooks: createHookRegistryState(),
+    memory: createMemoryRegistryState(),
   })
 
   const streamToConversation = new Map<string, string>()
@@ -641,6 +651,15 @@ export const AIProvider: ParentComponent = (props) => {
     )
   }
 
+  function clearMemory() {
+    setState(
+      'memory',
+      produce((memory: MemoryRegistryState) => {
+        clearMemoryRegistry(memory)
+      }),
+    )
+  }
+
   function selectHook(id: string | null) {
     setState(
       'hooks',
@@ -1188,6 +1207,48 @@ export const AIProvider: ParentComponent = (props) => {
       }),
     )
 
+    // Memory: the 5 `memory:*` operation events feed the timeline; `memory:snapshot`
+    // replaces the per-scope stored-state view. Keyed by composite scope
+    // (tenantId/userId/threadId).
+    type MemoryEventInput = Parameters<typeof applyMemoryEvent>[1]
+    const recordMemoryEvent = (
+      type: MemoryEventInput['type'],
+      payload: object,
+    ) => {
+      setState(
+        'memory',
+        produce((memory: MemoryRegistryState) => {
+          applyMemoryEvent(memory, { ...payload, type } as MemoryEventInput)
+        }),
+      )
+    }
+
+    cleanupFns.push(
+      aiEventClient.on('memory:retrieve:started', (e) => {
+        recordMemoryEvent('retrieve:started', e.payload)
+      }),
+      aiEventClient.on('memory:retrieve:completed', (e) => {
+        recordMemoryEvent('retrieve:completed', e.payload)
+      }),
+      aiEventClient.on('memory:persist:started', (e) => {
+        recordMemoryEvent('persist:started', e.payload)
+      }),
+      aiEventClient.on('memory:persist:completed', (e) => {
+        recordMemoryEvent('persist:completed', e.payload)
+      }),
+      aiEventClient.on('memory:error', (e) => {
+        recordMemoryEvent('error', e.payload)
+      }),
+      aiEventClient.on('memory:snapshot', (e) => {
+        setState(
+          'memory',
+          produce((memory: MemoryRegistryState) => {
+            applyMemorySnapshot(memory, e.payload)
+          }),
+        )
+      }),
+    )
+
     const recordRunEvent = (
       eventName:
         | 'run:created'
@@ -3402,6 +3463,7 @@ export const AIProvider: ParentComponent = (props) => {
     clearAllConversations,
     selectConversation,
     clearHooks,
+    clearMemory,
     selectHook,
     saveToolFixture,
     deleteToolFixture,