@tanstack/ai-devtools-core 0.3.9 → 0.3.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/GHXECDJV.js')
+  () => import('./Shell/TWTNN4SQ.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/GHXECDJV.js')
+  () => import('./Shell/TWTNN4SQ.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/MUFU35SY.js')
+  () => import('./Shell/SHJAKIOY.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/MUFU35SY.js')
+  () => import('./Shell/SHJAKIOY.js')
 );
 
 // src/index.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/ai-devtools-core",
-  "version": "0.3.9",
+  "version": "0.3.12",
   "description": "Core TanStack AI Devtools",
   "author": "",
   "license": "MIT",
@@ -72,7 +72,8 @@
     "@tanstack/devtools-utils": "0.3.2",
     "goober": "^2.1.18",
     "solid-js": "^1.9.10",
-    "@tanstack/ai": "0.6.3"
+    "@tanstack/ai": "0.8.1",
+    "@tanstack/ai-event-client": "0.1.1"
   },
   "devDependencies": {
     "@vitest/coverage-v8": "4.0.14",

package/src/components/ConversationDetails.tsx

@@ -6,6 +6,7 @@ import {
   ChunksTab,
   ConversationHeader,
   ConversationTabs,
+  IterationTimeline,
   MessagesTab,
   SummariesTab,
 } from './conversation'
@@ -23,69 +24,83 @@ export const ConversationDetails: Component = () => {
     return state.conversations[state.activeConversationId]
   }
 
-  // Update active tab when conversation changes
+  const hasIterations = () => {
+    const conv = activeConversation()
+    return conv && conv.iterations.length > 0
+  }
+
+  const hasActivityTabs = () => {
+    const conv = activeConversation()
+    if (!conv) return false
+    return (
+      conv.hasSummarize ||
+      conv.hasImage ||
+      conv.hasSpeech ||
+      conv.hasTranscription ||
+      conv.hasVideo
+    )
+  }
+
+  // Update active tab when conversation changes (only for non-iteration views)
   createEffect(() => {
     const conv = activeConversation()
-    if (conv) {
-      // For server conversations, always use chunks (messages tab is hidden)
-      if (conv.type === 'server') {
-        if (conv.chunks.length > 0) {
-          setActiveTab('chunks')
-        } else if (
-          conv.hasSummarize ||
-          (conv.summaries && conv.summaries.length > 0)
-        ) {
-          setActiveTab('summaries')
-        } else if (
-          conv.hasImage ||
-          (conv.imageEvents && conv.imageEvents.length > 0)
-        ) {
-          setActiveTab('image')
-        } else if (
-          conv.hasSpeech ||
-          (conv.speechEvents && conv.speechEvents.length > 0)
-        ) {
-          setActiveTab('speech')
-        } else if (
-          conv.hasTranscription ||
-          (conv.transcriptionEvents && conv.transcriptionEvents.length > 0)
-        ) {
-          setActiveTab('transcription')
-        } else if (
-          conv.hasVideo ||
-          (conv.videoEvents && conv.videoEvents.length > 0)
-        ) {
-          setActiveTab('video')
-        } else {
-          setActiveTab('chunks')
-        }
+    if (!conv) return
+
+    // If iterations exist, the timeline is the primary view — only set tab for activity
+    if (conv.iterations.length > 0) {
+      if (conv.hasSummarize || (conv.summaries && conv.summaries.length > 0)) {
+        setActiveTab('summaries')
+      } else if (
+        conv.hasImage ||
+        (conv.imageEvents && conv.imageEvents.length > 0)
+      ) {
+        setActiveTab('image')
+      }
+      return
+    }
+
+    // No iterations — use flat message/chunk view
+    if (conv.type === 'server') {
+      if (conv.chunks.length > 0) {
+        setActiveTab('chunks')
+      } else if (
+        conv.hasSummarize ||
+        (conv.summaries && conv.summaries.length > 0)
+      ) {
+        setActiveTab('summaries')
+      } else if (
+        conv.hasImage ||
+        (conv.imageEvents && conv.imageEvents.length > 0)
+      ) {
+        setActiveTab('image')
+      } else if (
+        conv.hasSpeech ||
+        (conv.speechEvents && conv.speechEvents.length > 0)
+      ) {
+        setActiveTab('speech')
+      } else if (
+        conv.hasTranscription ||
+        (conv.transcriptionEvents && conv.transcriptionEvents.length > 0)
+      ) {
+        setActiveTab('transcription')
+      } else if (
+        conv.hasVideo ||
+        (conv.videoEvents && conv.videoEvents.length > 0)
+      ) {
+        setActiveTab('video')
+      } else {
+        setActiveTab('chunks')
+      }
+    } else {
+      if (conv.messages.length > 0) {
+        setActiveTab('messages')
+      } else if (
+        conv.hasImage ||
+        (conv.imageEvents && conv.imageEvents.length > 0)
+      ) {
+        setActiveTab('image')
       } else {
-        // For client conversations, default to messages tab
-        if (conv.messages.length > 0) {
-          setActiveTab('messages')
-        } else if (
-          conv.hasImage ||
-          (conv.imageEvents && conv.imageEvents.length > 0)
-        ) {
-          setActiveTab('image')
-        } else if (
-          conv.hasSpeech ||
-          (conv.speechEvents && conv.speechEvents.length > 0)
-        ) {
-          setActiveTab('speech')
-        } else if (
-          conv.hasTranscription ||
-          (conv.transcriptionEvents && conv.transcriptionEvents.length > 0)
-        ) {
-          setActiveTab('transcription')
-        } else if (
-          conv.hasVideo ||
-          (conv.videoEvents && conv.videoEvents.length > 0)
-        ) {
-          setActiveTab('video')
-        } else {
-          setActiveTab('messages')
-        }
+        setActiveTab('messages')
       }
     }
   })
@@ -102,46 +117,98 @@ export const ConversationDetails: Component = () => {
       {(conv) => (
         <div class={styles().conversationDetails.container}>
           <ConversationHeader conversation={conv()} />
-          <ConversationTabs
-            conversation={conv()}
-            activeTab={activeTab()}
-            onTabChange={setActiveTab}
-          />
-          <div class={styles().conversationDetails.contentArea}>
-            <Show when={activeTab() === 'messages'}>
-              <MessagesTab messages={conv().messages} />
-            </Show>
-            <Show when={activeTab() === 'chunks'}>
-              <ChunksTab chunks={conv().chunks} messages={conv().messages} />
-            </Show>
-            <Show when={activeTab() === 'summaries'}>
-              <SummariesTab summaries={conv().summaries ?? []} />
-            </Show>
-            <Show when={activeTab() === 'image'}>
-              <ActivityEventsTab
-                title="Image Activity"
-                events={conv().imageEvents ?? []}
-              />
-            </Show>
-            <Show when={activeTab() === 'speech'}>
-              <ActivityEventsTab
-                title="Speech Activity"
-                events={conv().speechEvents ?? []}
-              />
-            </Show>
-            <Show when={activeTab() === 'transcription'}>
-              <ActivityEventsTab
-                title="Transcription Activity"
-                events={conv().transcriptionEvents ?? []}
-              />
-            </Show>
-            <Show when={activeTab() === 'video'}>
-              <ActivityEventsTab
-                title="Video Activity"
-                events={conv().videoEvents ?? []}
+
+          {/* Primary view: iteration timeline when iterations exist */}
+          <Show when={hasIterations()}>
+            <div class={styles().conversationDetails.contentArea}>
+              <IterationTimeline
+                iterations={conv().iterations}
+                messages={conv().messages}
               />
-            </Show>
-          </div>
+            </div>
+          </Show>
+
+          {/* Fallback: flat message/chunk view when no iterations */}
+          <Show when={!hasIterations()}>
+            <ConversationTabs
+              conversation={conv()}
+              activeTab={activeTab()}
+              onTabChange={setActiveTab}
+            />
+            <div class={styles().conversationDetails.contentArea}>
+              <Show when={activeTab() === 'messages'}>
+                <MessagesTab messages={conv().messages} />
+              </Show>
+              <Show when={activeTab() === 'chunks'}>
+                <ChunksTab chunks={conv().chunks} messages={conv().messages} />
+              </Show>
+              <Show when={activeTab() === 'summaries'}>
+                <SummariesTab summaries={conv().summaries ?? []} />
+              </Show>
+              <Show when={activeTab() === 'image'}>
+                <ActivityEventsTab
+                  title="Image Activity"
+                  events={conv().imageEvents ?? []}
+                />
+              </Show>
+              <Show when={activeTab() === 'speech'}>
+                <ActivityEventsTab
+                  title="Speech Activity"
+                  events={conv().speechEvents ?? []}
+                />
+              </Show>
+              <Show when={activeTab() === 'transcription'}>
+                <ActivityEventsTab
+                  title="Transcription Activity"
+                  events={conv().transcriptionEvents ?? []}
+                />
+              </Show>
+              <Show when={activeTab() === 'video'}>
+                <ActivityEventsTab
+                  title="Video Activity"
+                  events={conv().videoEvents ?? []}
+                />
+              </Show>
+            </div>
+          </Show>
+
+          {/* Activity tabs shown below iterations when relevant */}
+          <Show when={hasIterations() && hasActivityTabs()}>
+            <ConversationTabs
+              conversation={conv()}
+              activeTab={activeTab()}
+              onTabChange={setActiveTab}
+            />
+            <div class={styles().conversationDetails.contentArea}>
+              <Show when={activeTab() === 'summaries'}>
+                <SummariesTab summaries={conv().summaries ?? []} />
+              </Show>
+              <Show when={activeTab() === 'image'}>
+                <ActivityEventsTab
+                  title="Image Activity"
+                  events={conv().imageEvents ?? []}
+                />
+              </Show>
+              <Show when={activeTab() === 'speech'}>
+                <ActivityEventsTab
+                  title="Speech Activity"
+                  events={conv().speechEvents ?? []}
+                />
+              </Show>
+              <Show when={activeTab() === 'transcription'}>
+                <ActivityEventsTab
+                  title="Transcription Activity"
+                  events={conv().transcriptionEvents ?? []}
+                />
+              </Show>
+              <Show when={activeTab() === 'video'}>
+                <ActivityEventsTab
+                  title="Video Activity"
+                  events={conv().videoEvents ?? []}
+                />
+              </Show>
+            </div>
+          </Show>
         </div>
       )}
     </Show>

package/src/components/conversation/ConversationHeader.tsx

@@ -1,5 +1,4 @@
-import { For, Show } from 'solid-js'
-import { JsonTree } from '@tanstack/devtools-ui'
+import { Show } from 'solid-js'
 import { useStyles } from '../../styles/use-styles'
 import { formatDuration } from '../utils'
 import type { Component } from 'solid-js'
@@ -15,11 +14,41 @@ export const ConversationHeader: Component<ConversationHeaderProps> = (
   const styles = useStyles()
   const conv = () => props.conversation
 
-  const toolNames = () => conv().toolNames ?? []
-  const options = () => conv().options
-  const modelOptions = () => conv().modelOptions
-  const iterationCount = () => conv().iterationCount
-  const systemPrompts = () => conv().systemPrompts ?? []
+  const iterationCount = () => conv().iterationCount ?? conv().iterations.length
+  const totalDuration = () => {
+    if (!conv().completedAt) return undefined
+    return conv().completedAt! - conv().startedAt
+  }
+
+  const totalMessages = () => conv().messages.length
+
+  const totalToolCalls = () => {
+    let count = 0
+    for (const iter of conv().iterations) {
+      if (iter.finishReason === 'tool_calls') count++
+    }
+    return count
+  }
+
+  // Sum usage across all iterations
+  const totalUsage = () => {
+    if (conv().usage) return conv().usage
+    if (conv().iterations.length === 0) return undefined
+    let promptTokens = 0
+    let completionTokens = 0
+    for (const iter of conv().iterations) {
+      if (iter.usage) {
+        promptTokens += iter.usage.promptTokens
+        completionTokens += iter.usage.completionTokens
+      }
+    }
+    if (promptTokens === 0 && completionTokens === 0) return undefined
+    return {
+      promptTokens,
+      completionTokens,
+      totalTokens: promptTokens + completionTokens,
+    }
+  }
 
   return (
     <div class={styles().panelHeader}>
@@ -39,107 +68,37 @@ export const ConversationHeader: Component<ConversationHeaderProps> = (
           >
             {conv().status}
           </div>
-          <Show when={iterationCount() !== undefined && iterationCount()! > 1}>
-            <div class={styles().conversationDetails.iterationBadge}>
-              🔄 {iterationCount()} iterations
-            </div>
-          </Show>
         </div>
         <div class={styles().conversationDetails.metaInfo}>
-          {conv().model && `Model: ${conv().model}`}
-          {conv().provider && ` • Provider: ${conv().provider}`}
-          {conv().completedAt &&
-            ` • Duration: ${formatDuration(conv().completedAt! - conv().startedAt)}`}
+          {totalDuration() !== undefined && formatDuration(totalDuration())}
+          <Show when={iterationCount() > 0}>
+            {totalDuration() !== undefined && ' · '}
+            {iterationCount()}{' '}
+            {iterationCount() === 1 ? 'iteration' : 'iterations'}
+          </Show>
+          <Show when={totalMessages() > 0}>
+            {(totalDuration() !== undefined || iterationCount() > 0) && ' · '}
+            {totalMessages()} {totalMessages() === 1 ? 'message' : 'messages'}
+          </Show>
+          <Show when={totalToolCalls() > 0}>
+            {' · '}
+            {totalToolCalls()} tool {totalToolCalls() === 1 ? 'call' : 'calls'}
+          </Show>
         </div>
-        {/* Tools list - always visible */}
-        <Show when={toolNames().length > 0}>
-          <div class={styles().conversationDetails.toolsRow}>
-            <span class={styles().conversationDetails.toolsLabel}>🔧</span>
-            <div class={styles().conversationDetails.toolsList}>
-              <For each={toolNames()}>
-                {(toolName) => (
-                  <span class={styles().conversationDetails.toolBadge}>
-                    {toolName}
-                  </span>
-                )}
-              </For>
-            </div>
-          </div>
-        </Show>
-        {/* Options - always visible in compact form */}
-        <Show when={options() && Object.keys(options()!).length > 0}>
-          <div class={styles().conversationDetails.optionsRow}>
-            <span class={styles().conversationDetails.optionsLabel}>
-              ⚙️ Options:
-            </span>
-            <div class={styles().conversationDetails.optionsCompact}>
-              <For each={Object.entries(options()!)}>
-                {([key, value]) => (
-                  <span class={styles().conversationDetails.optionBadge}>
-                    {key}:{' '}
-                    {typeof value === 'object'
-                      ? JSON.stringify(value)
-                      : String(value)}
-                  </span>
-                )}
-              </For>
-            </div>
-          </div>
-        </Show>
-        <Show when={conv().usage}>
+        <Show when={totalUsage()}>
           <div class={styles().conversationDetails.usageInfo}>
-            <span class={styles().conversationDetails.usageLabel}>
-              🎯 Tokens:
-            </span>
+            <span class={styles().conversationDetails.usageLabel}>Tokens:</span>
+            <span>{totalUsage()?.promptTokens.toLocaleString() || 0} in</span>
+            <span>·</span>
             <span>
-              Prompt: {conv().usage?.promptTokens.toLocaleString() || 0}
+              {totalUsage()?.completionTokens.toLocaleString() || 0} out
             </span>
-            <span>•</span>
-            <span>
-              Completion: {conv().usage?.completionTokens.toLocaleString() || 0}
-            </span>
-            <span>•</span>
+            <span>·</span>
             <span class={styles().conversationDetails.usageBold}>
-              Total: {conv().usage?.totalTokens.toLocaleString() || 0}
+              {totalUsage()?.totalTokens.toLocaleString() || 0} total
             </span>
           </div>
         </Show>
-        {/* Model options - collapsible */}
-        <Show when={modelOptions() && Object.keys(modelOptions()!).length > 0}>
-          <details class={styles().conversationDetails.collapsibleSection}>
-            <summary class={styles().conversationDetails.collapsibleSummary}>
-              🧪 Model options
-            </summary>
-            <div class={styles().conversationDetails.collapsibleContent}>
-              <JsonTree
-                value={modelOptions() as Record<string, unknown>}
-                defaultExpansionDepth={2}
-              />
-            </div>
-          </details>
-        </Show>
-        {/* System prompts - collapsible */}
-        <Show when={systemPrompts().length > 0}>
-          <details class={styles().conversationDetails.collapsibleSection}>
-            <summary class={styles().conversationDetails.collapsibleSummary}>
-              🧩 System prompts ({systemPrompts().length})
-            </summary>
-            <div class={styles().conversationDetails.collapsibleContent}>
-              <For each={systemPrompts()}>
-                {(prompt, index) => (
-                  <div class={styles().conversationDetails.systemPromptItem}>
-                    <div class={styles().conversationDetails.systemPromptIndex}>
-                      #{index() + 1}
-                    </div>
-                    <div class={styles().conversationDetails.systemPromptText}>
-                      {prompt}
-                    </div>
-                  </div>
-                )}
-              </For>
-            </div>
-          </details>
-        </Show>
       </div>
     </div>
   )

package/src/components/conversation/ConversationTabs.tsx

@@ -21,6 +21,7 @@ interface ConversationTabsProps {
 export const ConversationTabs: Component<ConversationTabsProps> = (props) => {
   const styles = useStyles()
   const conv = () => props.conversation
+  const hasIterations = () => conv().iterations.length > 0
 
   // Total raw chunks = sum of all chunkCounts
   const totalRawChunks = () =>
@@ -79,11 +80,11 @@ export const ConversationTabs: Component<ConversationTabsProps> = (props) => {
     previousVideoCount = count
   })
 
-  // Determine if we should show any chat-related tabs
-  // For server conversations, don't show messages tab - only chunks
+  // When iterations exist, only show activity tabs (no messages/chunks)
   const hasMessages = () =>
-    conv().type === 'client' && conv().messages.length > 0
-  const hasChunks = () => conv().chunks.length > 0 || conv().type === 'server'
+    !hasIterations() && conv().type === 'client' && conv().messages.length > 0
+  const hasChunks = () =>
+    !hasIterations() && (conv().chunks.length > 0 || conv().type === 'server')
   const hasSummaries = () => conv().hasSummarize || summariesCount() > 0
   const hasImage = () => conv().hasImage || imageCount() > 0
   const hasSpeech = () => conv().hasSpeech || speechCount() > 0
@@ -111,7 +112,6 @@ export const ConversationTabs: Component<ConversationTabsProps> = (props) => {
 
   return (
     <div class={styles().conversationDetails.tabsContainer}>
-      {/* Show messages tab for client conversations or when there are messages */}
       <Show when={hasMessages()}>
         <button
           class={`${styles().actionButton} ${
@@ -121,10 +121,9 @@ export const ConversationTabs: Component<ConversationTabsProps> = (props) => {
           }`}
           onClick={() => props.onTabChange('messages')}
         >
-          💬 Messages ({conv().messages.length})
+          Messages ({conv().messages.length})
         </button>
       </Show>
-      {/* Show chunks tab for server conversations or when there are chunks */}
       <Show when={hasChunks() && conv().type === 'server'}>
         <button
           class={`${styles().actionButton} ${
@@ -134,10 +133,9 @@ export const ConversationTabs: Component<ConversationTabsProps> = (props) => {
           }`}
           onClick={() => props.onTabChange('chunks')}
         >
-          📦 Chunks ({totalRawChunks()})
+          Chunks ({totalRawChunks()})
         </button>
       </Show>
-      {/* Show summaries tab if there are summarize operations */}
       <Show when={hasSummaries()}>
         <button
           class={`${styles().actionButton} ${
@@ -147,7 +145,7 @@ export const ConversationTabs: Component<ConversationTabsProps> = (props) => {
           }`}
           onClick={() => props.onTabChange('summaries')}
         >
-          📝 Summaries ({summariesCount()})
+          Summaries ({summariesCount()})
         </button>
       </Show>
       <Show when={hasImage()}>
@@ -159,7 +157,7 @@ export const ConversationTabs: Component<ConversationTabsProps> = (props) => {
           } ${imagePulse() ? styles().conversationDetails.tabButtonPulse : ''}`}
           onClick={() => props.onTabChange('image')}
         >
-          🖼️ Image ({imageCount()})
+          Image ({imageCount()})
         </button>
       </Show>
       <Show when={hasSpeech()}>
@@ -171,7 +169,7 @@ export const ConversationTabs: Component<ConversationTabsProps> = (props) => {
           } ${speechPulse() ? styles().conversationDetails.tabButtonPulse : ''}`}
           onClick={() => props.onTabChange('speech')}
         >
-          🔊 Speech ({speechCount()})
+          Speech ({speechCount()})
         </button>
       </Show>
       <Show when={hasTranscription()}>
@@ -187,7 +185,7 @@ export const ConversationTabs: Component<ConversationTabsProps> = (props) => {
           }`}
           onClick={() => props.onTabChange('transcription')}
         >
-          📝 Transcription ({transcriptionCount()})
+          Transcription ({transcriptionCount()})
         </button>
       </Show>
       <Show when={hasVideo()}>
@@ -199,7 +197,7 @@ export const ConversationTabs: Component<ConversationTabsProps> = (props) => {
           } ${videoPulse() ? styles().conversationDetails.tabButtonPulse : ''}`}
           onClick={() => props.onTabChange('video')}
         >
-          🎬 Video ({videoCount()})
+          Video ({videoCount()})
         </button>
       </Show>
     </div>