@tanstack/ai-devtools-core 0.3.31 → 0.3.33

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/E5BETLAK.js')
+  () => import('./Shell/RRRNZJ5E.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/E5BETLAK.js')
+  () => import('./Shell/RRRNZJ5E.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/KINKIMWF.js')
+  () => import('./Shell/MRWZEHAJ.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/KINKIMWF.js')
+  () => import('./Shell/MRWZEHAJ.js')
 );
 
 // src/index.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-devtools-core",
-  "version": "0.3.31",
+  "version": "0.3.33",
   "description": "Core TanStack AI Devtools",
   "author": "",
   "license": "MIT",
@@ -72,8 +72,8 @@
     "@tanstack/devtools-utils": "^0.4.0",
     "goober": "^2.1.18",
     "solid-js": "^1.9.10",
-    "@tanstack/ai": "0.19.1",
-    "@tanstack/ai-event-client": "0.3.4"
+    "@tanstack/ai": "0.20.1",
+    "@tanstack/ai-event-client": "0.3.6"
   },
   "devDependencies": {
     "@vitest/coverage-v8": "4.0.14",

package/src/components/conversation/ChunksTab.tsx

@@ -28,10 +28,12 @@ export const ChunksTab: Component<ChunksTabProps> = (props) => {
 
     props.chunks.forEach((chunk) => {
       const key = chunk.messageId || 'no-message-id'
-      if (!groups.has(key)) {
-        groups.set(key, [])
+      let group = groups.get(key)
+      if (!group) {
+        group = []
+        groups.set(key, group)
       }
-      groups.get(key)!.push(chunk)
+      group.push(chunk)
     })
 
     return Array.from(groups.entries())

package/src/components/conversation/ConversationHeader.tsx

@@ -16,8 +16,9 @@ export const ConversationHeader: Component<ConversationHeaderProps> = (
 
   const iterationCount = () => conv().iterationCount ?? conv().iterations.length
   const totalDuration = () => {
-    if (!conv().completedAt) return undefined
-    return conv().completedAt! - conv().startedAt
+    const completedAt = conv().completedAt
+    if (!completedAt) return undefined
+    return completedAt - conv().startedAt
   }
 
   const totalMessages = () => conv().messages.length

package/src/components/conversation/IterationCard.tsx

@@ -124,8 +124,10 @@ const MiddlewareStep: Component<{
     return null
   }
 
-  const hasChanges = () =>
-    ev().configChanges && Object.keys(ev().configChanges!).length > 0
+  const hasChanges = () => {
+    const changes = ev().configChanges
+    return changes && Object.keys(changes).length > 0
+  }
 
   return (
     <>
@@ -386,8 +388,9 @@ export const IterationCard: Component<IterationCardProps> = (props) => {
   const isError = () => iter().finishReason === 'error'
 
   const duration = () => {
-    if (!iter().completedAt) return undefined
-    return iter().completedAt! - iter().startedAt
+    const completedAt = iter().completedAt
+    if (!completedAt) return undefined
+    return completedAt - iter().startedAt
   }
 
   const label = () => getIterationLabel(iter(), props.index)
@@ -417,8 +420,9 @@ export const IterationCard: Component<IterationCardProps> = (props) => {
   })
 
   const finishLabel = () => {
-    if (!iter().finishReason) return null
-    switch (iter().finishReason) {
+    const reason = iter().finishReason
+    if (!reason) return null
+    switch (reason) {
       case 'stop':
         return 'completed'
       case 'tool_calls':
@@ -428,7 +432,7 @@ export const IterationCard: Component<IterationCardProps> = (props) => {
       case 'length':
         return 'max length'
       default:
-        return iter().finishReason
+        return reason
     }
   }
 
@@ -441,9 +445,10 @@ export const IterationCard: Component<IterationCardProps> = (props) => {
 
   // Config data from this iteration
   const configSubtitle = () => {
+    const { model, provider } = iter()
     const parts: Array<string> = []
-    if (iter().model) parts.push(iter().model!)
-    if (iter().provider) parts.push(iter().provider!)
+    if (model) parts.push(model)
+    if (provider) parts.push(provider)
     return parts.length > 0 ? parts.join(' \u00B7 ') : null
   }
 
@@ -610,12 +615,14 @@ export const IterationCard: Component<IterationCardProps> = (props) => {
             </span>
           </Show>
           <Show when={deltaUsage()}>
-            <span
-              class={`${s().badge} ${s().badgeUsage}`}
-              title={`Prompt: ${deltaUsage()!.promptTokens.toLocaleString()} | Completion: ${deltaUsage()!.completionTokens.toLocaleString()}`}
-            >
-              🎯 {deltaUsage()!.totalTokens.toLocaleString()}
-            </span>
+            {(usage) => (
+              <span
+                class={`${s().badge} ${s().badgeUsage}`}
+                title={`Prompt: ${usage().promptTokens.toLocaleString()} | Completion: ${usage().completionTokens.toLocaleString()}`}
+              >
+                🎯 {usage().totalTokens.toLocaleString()}
+              </span>
+            )}
           </Show>
           <Show when={isActive()}>
             <span class={`${s().badge} ${s().badgeDuration}`}>⟳ streaming</span>

package/src/components/conversation/IterationTimeline.tsx

@@ -39,8 +39,7 @@ export const IterationTimeline: Component<IterationTimelineProps> = (props) => {
       (a, b) => a.timestamp - b.timestamp,
     )
 
-    for (let u = 0; u < sortedUsers.length; u++) {
-      const currentUser = sortedUsers[u]!
+    for (const [u, currentUser] of sortedUsers.entries()) {
       const nextUser = sortedUsers[u + 1]
 
       const groupIters = iters.filter((it) => {
@@ -55,9 +54,10 @@ export const IterationTimeline: Component<IterationTimelineProps> = (props) => {
     }
 
     // Catch any iterations before the first user message
-    if (sortedUsers[0]) {
+    const firstUser = sortedUsers[0]
+    if (firstUser) {
       const earlyIters = iters.filter(
-        (it) => it.startedAt < sortedUsers[0]!.timestamp,
+        (it) => it.startedAt < firstUser.timestamp,
       )
       if (earlyIters.length > 0) {
         result.unshift({ userMessage: null, iterations: earlyIters })
@@ -332,12 +332,14 @@ const UserMessageGroupCard: Component<{
             </span>
           </Show>
           <Show when={totalUsage()}>
-            <span
-              class={`${s().badge} ${s().badgeUsage}`}
-              title={`Prompt: ${totalUsage()!.promptTokens.toLocaleString()} | Completion: ${totalUsage()!.completionTokens.toLocaleString()}`}
-            >
-              🎯 {totalUsage()!.totalTokens.toLocaleString()}
-            </span>
+            {(usage) => (
+              <span
+                class={`${s().badge} ${s().badgeUsage}`}
+                title={`Prompt: ${usage().promptTokens.toLocaleString()} | Completion: ${usage().completionTokens.toLocaleString()}`}
+              >
+                🎯 {usage().totalTokens.toLocaleString()}
+              </span>
+            )}
           </Show>
           <Show when={isActive()}>
             <span class={`${s().badge} ${s().badgeDuration}`}>⟳ streaming</span>

package/src/components/conversation/MessageCard.tsx

@@ -141,20 +141,22 @@ export const MessageCard: Component<MessageCardProps> = (props) => {
         </Show>
 
         <Show
-          when={msg().role === 'tool' && parseJsonContent() !== null}
+          when={msg().role === 'tool' && parseJsonContent()}
           fallback={
             <div class={styles().conversationDetails.messageContent}>
               {msg().content}
             </div>
           }
         >
-          <div class={styles().conversationDetails.toolJsonContainer}>
-            <JsonTree value={parseJsonContent()!} />
-          </div>
+          {(parsed) => (
+            <div class={styles().conversationDetails.toolJsonContainer}>
+              <JsonTree value={parsed()} />
+            </div>
+          )}
         </Show>
 
         {/* Tool Calls Display */}
-        <Show when={msg().toolCalls && msg().toolCalls!.length > 0}>
+        <Show when={msg().toolCalls?.length}>
           <div class={styles().conversationDetails.toolCallsContainer}>
             <For each={msg().toolCalls}>
               {(tool) => <ToolCallDisplay tool={tool} />}
@@ -163,8 +165,8 @@ export const MessageCard: Component<MessageCardProps> = (props) => {
         </Show>
 
         {/* Chunks Display (for client conversations with server chunks) */}
-        <Show when={msg().chunks && msg().chunks!.length > 0}>
-          <ChunksCollapsible chunks={msg().chunks!} />
+        <Show when={msg().chunks?.length ? msg().chunks : null}>
+          {(chunks) => <ChunksCollapsible chunks={chunks()} />}
         </Show>
       </div>
     </div>

package/src/components/conversation/ToolCallDisplay.tsx

@@ -53,7 +53,7 @@ export const ToolCallDisplay: Component<ToolCallDisplayProps> = (props) => {
         >
           {tool().state}
         </div>
-        <Show when={tool().duration !== undefined && tool().duration! > 0}>
+        <Show when={(tool().duration ?? 0) > 0}>
           <div class={styles().conversationDetails.durationBadge}>
             ⏱️ {formatDuration(tool().duration)}
           </div>

package/src/components/utils/format.ts

@@ -29,6 +29,8 @@ export const getChunkTypeColor = (type: Chunk['type']): string => {
       return '#ef4444' // red
     case 'approval':
       return '#f59e0b' // orange/amber
+    case 'thinking':
+      return '#a855f7' // violet
     default:
       return '#6b7280' // gray
   }

package/src/store/ai-context.tsx

@@ -126,8 +126,8 @@ export interface Iteration {
   provider?: string
   systemPrompts?: Array<string>
   toolNames?: Array<string>
-  options?: Record<string, unknown>
-  modelOptions?: Record<string, unknown>
+  options?: Record<string, unknown> | undefined
+  modelOptions?: Record<string, unknown> | undefined
   finishReason?: string
   usage?: TokenUsage
   middlewareEvents: Array<MiddlewareEvent>
@@ -166,8 +166,8 @@ export interface Conversation {
   iterations: Array<Iteration>
   iterationCount?: number
   toolNames?: Array<string>
-  options?: Record<string, unknown>
-  modelOptions?: Record<string, unknown>
+  options?: Record<string, unknown> | undefined
+  modelOptions?: Record<string, unknown> | undefined
   systemPrompts?: Array<string>
   /** Flags for which operation types this conversation has */
   hasChat?: boolean
@@ -328,13 +328,11 @@ export const AIProvider: ParentComponent = (props) => {
   }
 
   function queueChunk(conversationId: string, chunk: Chunk): void {
-    if (!pendingConversationChunks.has(conversationId)) {
-      pendingConversationChunks.set(conversationId, {
-        chunks: [],
-        newChunkCount: 0,
-      })
+    let pending = pendingConversationChunks.get(conversationId)
+    if (!pending) {
+      pending = { chunks: [], newChunkCount: 0 }
+      pendingConversationChunks.set(conversationId, pending)
     }
-    const pending = pendingConversationChunks.get(conversationId)!
 
     // Pre-merge in pending buffer to reduce array operations during flush
     const lastPending = pending.chunks[pending.chunks.length - 1]
@@ -361,14 +359,16 @@ export const AIProvider: ParentComponent = (props) => {
     messageIndex: number,
     chunk: Chunk,
   ): void {
-    if (!pendingMessageChunks.has(conversationId)) {
-      pendingMessageChunks.set(conversationId, new Map())
+    let messageMap = pendingMessageChunks.get(conversationId)
+    if (!messageMap) {
+      messageMap = new Map()
+      pendingMessageChunks.set(conversationId, messageMap)
     }
-    const messageMap = pendingMessageChunks.get(conversationId)!
-    if (!messageMap.has(messageIndex)) {
-      messageMap.set(messageIndex, { chunks: [], newChunkCount: 0 })
+    let pending = messageMap.get(messageIndex)
+    if (!pending) {
+      pending = { chunks: [], newChunkCount: 0 }
+      messageMap.set(messageIndex, pending)
     }
-    const pending = messageMap.get(messageIndex)!
 
     // Pre-merge in pending buffer
     const lastPending = pending.chunks[pending.chunks.length - 1]
@@ -605,7 +605,7 @@ export const AIProvider: ParentComponent = (props) => {
         'conversations',
         conversationId,
         key as keyof Conversation,
-        value as Conversation[keyof Conversation],
+        value,
       )
     }
   }
@@ -624,7 +624,7 @@ export const AIProvider: ParentComponent = (props) => {
         'messages',
         messageIndex,
         key as keyof Message,
-        value as Message[keyof Message],
+        value,
       )
     }
   }
@@ -816,14 +816,12 @@ export const AIProvider: ParentComponent = (props) => {
                 content: part.content,
               }
             }
-            // Handle multimodal parts (image, audio, video, document)
+            // Handle multimodal parts (image, audio, video)
             // These have a source property instead of content
             if (
               part.type === 'image' ||
               part.type === 'audio' ||
-              part.type === 'video' ||
-              // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-              part.type === 'document'
+              part.type === 'video'
             ) {
               return {
                 type: part.type,