@tanstack/ai-devtools-core 0.2.1 → 0.2.3

package/src/components/conversation/ConversationTabs.tsx

@@ -1,9 +1,16 @@
-import { Show } from 'solid-js'
+import { Show, createEffect, createSignal } from 'solid-js'
 import { useStyles } from '../../styles/use-styles'
 import type { Component } from 'solid-js'
 import type { Conversation } from '../../store/ai-context'
 
-export type TabType = 'messages' | 'chunks' | 'summaries'
+export type TabType =
+  | 'messages'
+  | 'chunks'
+  | 'summaries'
+  | 'image'
+  | 'speech'
+  | 'transcription'
+  | 'video'
 
 interface ConversationTabsProps {
   conversation: Conversation
@@ -20,6 +27,57 @@ export const ConversationTabs: Component<ConversationTabsProps> = (props) => {
     conv().chunks.reduce((sum, c) => sum + (c.chunkCount || 1), 0)
 
   const summariesCount = () => conv().summaries?.length ?? 0
+  const imageCount = () => conv().imageEvents?.length ?? 0
+  const speechCount = () => conv().speechEvents?.length ?? 0
+  const transcriptionCount = () => conv().transcriptionEvents?.length ?? 0
+  const videoCount = () => conv().videoEvents?.length ?? 0
+
+  const [imagePulse, setImagePulse] = createSignal(false)
+  const [speechPulse, setSpeechPulse] = createSignal(false)
+  const [transcriptionPulse, setTranscriptionPulse] = createSignal(false)
+  const [videoPulse, setVideoPulse] = createSignal(false)
+
+  const triggerPulse = (setter: (value: boolean) => void) => {
+    setter(true)
+    setTimeout(() => setter(false), 2000)
+  }
+
+  let previousImageCount = 0
+  let previousSpeechCount = 0
+  let previousTranscriptionCount = 0
+  let previousVideoCount = 0
+
+  createEffect(() => {
+    const count = imageCount()
+    if (count > 0 && previousImageCount === 0) {
+      triggerPulse(setImagePulse)
+    }
+    previousImageCount = count
+  })
+
+  createEffect(() => {
+    const count = speechCount()
+    if (count > 0 && previousSpeechCount === 0) {
+      triggerPulse(setSpeechPulse)
+    }
+    previousSpeechCount = count
+  })
+
+  createEffect(() => {
+    const count = transcriptionCount()
+    if (count > 0 && previousTranscriptionCount === 0) {
+      triggerPulse(setTranscriptionPulse)
+    }
+    previousTranscriptionCount = count
+  })
+
+  createEffect(() => {
+    const count = videoCount()
+    if (count > 0 && previousVideoCount === 0) {
+      triggerPulse(setVideoPulse)
+    }
+    previousVideoCount = count
+  })
 
   // Determine if we should show any chat-related tabs
   // For server conversations, don't show messages tab - only chunks
@@ -27,6 +85,11 @@ export const ConversationTabs: Component<ConversationTabsProps> = (props) => {
     conv().type === 'client' && conv().messages.length > 0
   const hasChunks = () => 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
+  const hasTranscription = () =>
+    conv().hasTranscription || transcriptionCount() > 0
+  const hasVideo = () => conv().hasVideo || videoCount() > 0
 
   // Count how many tabs would be visible
   const visibleTabCount = () => {
@@ -34,6 +97,10 @@ export const ConversationTabs: Component<ConversationTabsProps> = (props) => {
     if (hasMessages()) count++
     if (hasChunks() && conv().type === 'server') count++
     if (hasSummaries()) count++
+    if (hasImage()) count++
+    if (hasSpeech()) count++
+    if (hasTranscription()) count++
+    if (hasVideo()) count++
     return count
   }
 
@@ -83,6 +150,58 @@ export const ConversationTabs: Component<ConversationTabsProps> = (props) => {
           📝 Summaries ({summariesCount()})
         </button>
       </Show>
+      <Show when={hasImage()}>
+        <button
+          class={`${styles().actionButton} ${
+            props.activeTab === 'image'
+              ? styles().conversationDetails.tabButtonActive
+              : ''
+          } ${imagePulse() ? styles().conversationDetails.tabButtonPulse : ''}`}
+          onClick={() => props.onTabChange('image')}
+        >
+          🖼️ Image ({imageCount()})
+        </button>
+      </Show>
+      <Show when={hasSpeech()}>
+        <button
+          class={`${styles().actionButton} ${
+            props.activeTab === 'speech'
+              ? styles().conversationDetails.tabButtonActive
+              : ''
+          } ${speechPulse() ? styles().conversationDetails.tabButtonPulse : ''}`}
+          onClick={() => props.onTabChange('speech')}
+        >
+          🔊 Speech ({speechCount()})
+        </button>
+      </Show>
+      <Show when={hasTranscription()}>
+        <button
+          class={`${styles().actionButton} ${
+            props.activeTab === 'transcription'
+              ? styles().conversationDetails.tabButtonActive
+              : ''
+          } ${
+            transcriptionPulse()
+              ? styles().conversationDetails.tabButtonPulse
+              : ''
+          }`}
+          onClick={() => props.onTabChange('transcription')}
+        >
+          📝 Transcription ({transcriptionCount()})
+        </button>
+      </Show>
+      <Show when={hasVideo()}>
+        <button
+          class={`${styles().actionButton} ${
+            props.activeTab === 'video'
+              ? styles().conversationDetails.tabButtonActive
+              : ''
+          } ${videoPulse() ? styles().conversationDetails.tabButtonPulse : ''}`}
+          onClick={() => props.onTabChange('video')}
+        >
+          🎬 Video ({videoCount()})
+        </button>
+      </Show>
     </div>
   )
 }

package/src/components/conversation/MessageCard.tsx

@@ -1,6 +1,7 @@
 import { For, Show } from 'solid-js'
+import { JsonTree } from '@tanstack/devtools-ui'
 import { useStyles } from '../../styles/use-styles'
-import { formatTimestamp } from '../utils'
+import { formatDuration, formatTimestamp } from '../utils'
 import { ToolCallDisplay } from './ToolCallDisplay'
 import { ChunksCollapsible } from './ChunksCollapsible'
 import type { Message } from '../../store/ai-store'
@@ -31,13 +32,30 @@ export const MessageCard: Component<MessageCardProps> = (props) => {
     return `${base} ${styles().conversationDetails.messageCardServer}`
   }
 
-  // Check if this is a non-user message (needs source banner and content wrapper)
-  const isSourcedMessage = () => msg().role !== 'user'
+  const parseJsonContent = () => {
+    const content = msg().content
+    if (typeof content !== 'string') return null
+    const trimmed = content.trim()
+    if (!trimmed.startsWith('{') && !trimmed.startsWith('[')) return null
+    try {
+      return JSON.parse(trimmed) as Record<string, unknown> | Array<unknown>
+    } catch {
+      return null
+    }
+  }
+
+  const toolDuration = () => {
+    const durations = msg()
+      .toolCalls?.map((tool) => tool.duration || 0)
+      .filter((duration) => duration > 0)
+    if (!durations || durations.length === 0) return 0
+    return durations.reduce((total, duration) => total + duration, 0)
+  }
 
   return (
     <div class={getCardClass()}>
       {/* Source indicator banner at top of card */}
-      <Show when={isSourcedMessage()}>
+      <Show when={msg().role === 'assistant'}>
         <div
           class={`${styles().conversationDetails.sourceBanner} ${
             isClientMessage()
@@ -56,9 +74,9 @@ export const MessageCard: Component<MessageCardProps> = (props) => {
       {/* Content wrapper with padding */}
       <div
         class={
-          isSourcedMessage()
-            ? styles().conversationDetails.messageCardContent
-            : ''
+          msg().role === 'user'
+            ? ''
+            : styles().conversationDetails.messageCardContent
         }
       >
         <div class={styles().conversationDetails.messageHeader}>
@@ -100,6 +118,14 @@ export const MessageCard: Component<MessageCardProps> = (props) => {
               <span>{msg().usage?.completionTokens.toLocaleString()} out</span>
             </div>
           </Show>
+          <Show when={toolDuration() > 0}>
+            <div class={styles().conversationDetails.messageUsage}>
+              <span class={styles().conversationDetails.messageUsageIcon}>
+                ⏱️
+              </span>
+              <span>{formatDuration(toolDuration())}</span>
+            </div>
+          </Show>
         </div>
 
         {/* Thinking content (for extended thinking models) */}
@@ -114,9 +140,18 @@ export const MessageCard: Component<MessageCardProps> = (props) => {
           </details>
         </Show>
 
-        <div class={styles().conversationDetails.messageContent}>
-          {msg().content}
-        </div>
+        <Show
+          when={msg().role === 'tool' && parseJsonContent() !== null}
+          fallback={
+            <div class={styles().conversationDetails.messageContent}>
+              {msg().content}
+            </div>
+          }
+        >
+          <div class={styles().conversationDetails.toolJsonContainer}>
+            <JsonTree value={parseJsonContent()!} />
+          </div>
+        </Show>
 
         {/* Tool Calls Display */}
         <Show when={msg().toolCalls && msg().toolCalls!.length > 0}>

package/src/components/conversation/index.ts

@@ -5,3 +5,4 @@ export type { TabType } from './ConversationTabs'
 export { MessagesTab } from './MessagesTab'
 export { ChunksTab } from './ChunksTab'
 export { SummariesTab } from './SummariesTab'
+export { ActivityEventsTab } from './ActivityEventsTab'