@tanstack/ai-devtools-core 0.3.38 → 0.4.1

package/src/components/conversation/ChunksTab.tsx

@@ -1,87 +0,0 @@
-import { For, Show } from 'solid-js'
-import { useStyles } from '../../styles/use-styles'
-import { MessageGroup } from './MessageGroup'
-import type { Component } from 'solid-js'
-import type { Chunk, Message } from '../../store/ai-store'
-
-interface ChunksTabProps {
-  chunks: Array<Chunk>
-  messages?: Array<Message>
-}
-
-export const ChunksTab: Component<ChunksTabProps> = (props) => {
-  const styles = useStyles()
-
-  // Create a map of messageId to usage for quick lookup
-  const usageByMessageId = () => {
-    const map = new Map<string, Message['usage']>()
-    props.messages?.forEach((msg) => {
-      if (msg.usage) {
-        map.set(msg.id, msg.usage)
-      }
-    })
-    return map
-  }
-
-  const groupedChunks = () => {
-    const groups = new Map<string, Array<Chunk>>()
-
-    props.chunks.forEach((chunk) => {
-      const key = chunk.messageId || 'no-message-id'
-      let group = groups.get(key)
-      if (!group) {
-        group = []
-        groups.set(key, group)
-      }
-      group.push(chunk)
-    })
-
-    return Array.from(groups.entries())
-  }
-
-  // Calculate total raw chunks (sum of all chunkCounts)
-  const totalRawChunks = () =>
-    props.chunks.reduce((sum, c) => sum + (c.chunkCount || 1), 0)
-
-  return (
-    <Show
-      when={props.chunks.length > 0}
-      fallback={
-        <div class={styles().conversationDetails.noChunks}>No chunks yet</div>
-      }
-    >
-      <div class={styles().conversationDetails.streamContainer}>
-        {/* Stream Header */}
-        <div class={styles().conversationDetails.streamHeader}>
-          <div class={styles().conversationDetails.streamHeaderRow}>
-            <div class={styles().conversationDetails.streamTitle}>
-              Stream Responses
-            </div>
-            <div
-              class={`${styles().conversationDetails.chunkBadge} ${styles().conversationDetails.chunkBadgeCount}`}
-            >
-              {totalRawChunks()} chunks · {groupedChunks().length} messages
-            </div>
-          </div>
-          <div class={styles().conversationDetails.streamSubtitle}>
-            Grouped by message ID
-          </div>
-        </div>
-
-        {/* Message Groups */}
-        <div class={styles().conversationDetails.messageGroups}>
-          <For each={groupedChunks()}>
-            {([messageId, chunks], groupIndex) => (
-              <MessageGroup
-                messageId={messageId}
-                chunks={chunks}
-                groupIndex={groupIndex()}
-                usage={usageByMessageId().get(messageId)}
-              />
-            )}
-          </For>
-        </div>
-      </div>
-    </Show>
-  )
-}

package/src/components/conversation/ConversationHeader.tsx

@@ -1,106 +0,0 @@
-import { Show } from 'solid-js'
-import { useStyles } from '../../styles/use-styles'
-import { formatDuration } from '../utils'
-import type { Component } from 'solid-js'
-import type { Conversation } from '../../store/ai-context'
-
-interface ConversationHeaderProps {
-  conversation: Conversation
-}
-
-export const ConversationHeader: Component<ConversationHeaderProps> = (
-  props,
-) => {
-  const styles = useStyles()
-  const conv = () => props.conversation
-
-  const iterationCount = () => conv().iterationCount ?? conv().iterations.length
-  const totalDuration = () => {
-    const completedAt = conv().completedAt
-    if (!completedAt) return undefined
-    return 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}>
-      <div class={styles().conversationDetails.headerContent}>
-        <div class={styles().conversationDetails.headerRow}>
-          <div class={styles().conversationDetails.headerLabel}>
-            {conv().label}
-          </div>
-          <div
-            class={`${styles().conversationDetails.statusBadge} ${
-              conv().status === 'active'
-                ? styles().conversationDetails.statusActive
-                : conv().status === 'completed'
-                  ? styles().conversationDetails.statusCompleted
-                  : styles().conversationDetails.statusError
-            }`}
-          >
-            {conv().status}
-          </div>
-        </div>
-        <div class={styles().conversationDetails.metaInfo}>
-          {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>
-        <Show when={totalUsage()}>
-          <div class={styles().conversationDetails.usageInfo}>
-            <span class={styles().conversationDetails.usageLabel}>Tokens:</span>
-            <span>{totalUsage()?.promptTokens.toLocaleString() || 0} in</span>
-            <span>·</span>
-            <span>
-              {totalUsage()?.completionTokens.toLocaleString() || 0} out
-            </span>
-            <span>·</span>
-            <span class={styles().conversationDetails.usageBold}>
-              {totalUsage()?.totalTokens.toLocaleString() || 0} total
-            </span>
-          </div>
-        </Show>
-      </div>
-    </div>
-  )
-}

package/src/components/conversation/ConversationTabs.tsx

@@ -1,205 +0,0 @@
-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'
-  | 'image'
-  | 'speech'
-  | 'transcription'
-  | 'video'
-
-interface ConversationTabsProps {
-  conversation: Conversation
-  activeTab: TabType
-  onTabChange: (tab: TabType) => void
-}
-
-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 = () =>
-    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
-  })
-
-  // When iterations exist, only show activity tabs (no messages/chunks)
-  const hasMessages = () =>
-    !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
-  const hasTranscription = () =>
-    conv().hasTranscription || transcriptionCount() > 0
-  const hasVideo = () => conv().hasVideo || videoCount() > 0
-
-  // Count how many tabs would be visible
-  const visibleTabCount = () => {
-    let count = 0
-    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
-  }
-
-  // Don't render tabs if only one tab would be visible
-  if (visibleTabCount() <= 1) {
-    return null
-  }
-
-  return (
-    <div class={styles().conversationDetails.tabsContainer}>
-      <Show when={hasMessages()}>
-        <button
-          class={`${styles().actionButton} ${
-            props.activeTab === 'messages'
-              ? styles().conversationDetails.tabButtonActive
-              : ''
-          }`}
-          onClick={() => props.onTabChange('messages')}
-        >
-          Messages ({conv().messages.length})
-        </button>
-      </Show>
-      <Show when={hasChunks() && conv().type === 'server'}>
-        <button
-          class={`${styles().actionButton} ${
-            props.activeTab === 'chunks'
-              ? styles().conversationDetails.tabButtonActive
-              : ''
-          }`}
-          onClick={() => props.onTabChange('chunks')}
-        >
-          Chunks ({totalRawChunks()})
-        </button>
-      </Show>
-      <Show when={hasSummaries()}>
-        <button
-          class={`${styles().actionButton} ${
-            props.activeTab === 'summaries'
-              ? styles().conversationDetails.tabButtonActive
-              : ''
-          }`}
-          onClick={() => props.onTabChange('summaries')}
-        >
-          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,174 +0,0 @@
-import { For, Show } from 'solid-js'
-import { JsonTree } from '@tanstack/devtools-ui'
-import { useStyles } from '../../styles/use-styles'
-import { formatDuration, formatTimestamp } from '../utils'
-import { ToolCallDisplay } from './ToolCallDisplay'
-import { ChunksCollapsible } from './ChunksCollapsible'
-import type { Message } from '../../store/ai-store'
-import type { Component } from 'solid-js'
-
-interface MessageCardProps {
-  message: Message
-}
-
-export const MessageCard: Component<MessageCardProps> = (props) => {
-  const styles = useStyles()
-  // Access message through props directly for proper SolidJS reactivity
-  const msg = () => props.message
-
-  // Check if message is from client (explicitly marked) or server (default)
-  const isClientMessage = () => msg().source === 'client'
-
-  // Determine card class based on role and source
-  const getCardClass = () => {
-    const base = styles().conversationDetails.messageCard
-    if (msg().role === 'user') {
-      return `${base} ${styles().conversationDetails.messageCardUser}`
-    }
-    // For assistant messages: client if explicitly marked, otherwise server
-    if (isClientMessage()) {
-      return `${base} ${styles().conversationDetails.messageCardClient}`
-    }
-    return `${base} ${styles().conversationDetails.messageCardServer}`
-  }
-
-  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={msg().role === 'assistant'}>
-        <div
-          class={`${styles().conversationDetails.sourceBanner} ${
-            isClientMessage()
-              ? styles().conversationDetails.sourceBannerClient
-              : styles().conversationDetails.sourceBannerServer
-          }`}
-        >
-          <span class={styles().conversationDetails.sourceBannerIcon}>
-            {isClientMessage() ? '📱' : '☁️'}
-          </span>
-          <span class={styles().conversationDetails.sourceBannerText}>
-            {isClientMessage() ? 'Client Message' : 'Server Message'}
-          </span>
-        </div>
-      </Show>
-      {/* Content wrapper with padding */}
-      <div
-        class={
-          msg().role === 'user'
-            ? ''
-            : styles().conversationDetails.messageCardContent
-        }
-      >
-        <div class={styles().conversationDetails.messageHeader}>
-          <div
-            class={
-              msg().role === 'user'
-                ? styles().conversationDetails.avatarUser
-                : isClientMessage()
-                  ? styles().conversationDetails.avatarClient
-                  : styles().conversationDetails.avatarServer
-            }
-          >
-            {msg().role === 'user' ? 'U' : msg().role === 'tool' ? '🔧' : '🤖'}
-          </div>
-          <div class={styles().conversationDetails.roleLabel}>
-            <div
-              class={
-                msg().role === 'user'
-                  ? styles().conversationDetails.roleLabelUser
-                  : isClientMessage()
-                    ? styles().conversationDetails.roleLabelClient
-                    : styles().conversationDetails.roleLabelServer
-              }
-            >
-              {msg().role}
-            </div>
-          </div>
-          <div class={styles().conversationDetails.timestamp}>
-            {formatTimestamp(msg().timestamp)}
-          </div>
-          {/* Per-message token usage */}
-          <Show when={msg().usage}>
-            <div class={styles().conversationDetails.messageUsage}>
-              <span class={styles().conversationDetails.messageUsageIcon}>
-                🎯
-              </span>
-              <span>{msg().usage?.promptTokens.toLocaleString()} in</span>
-              <span>•</span>
-              <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) */}
-        <Show when={msg().thinkingContent}>
-          <details class={styles().conversationDetails.thinkingDetails}>
-            <summary class={styles().conversationDetails.thinkingSummary}>
-              💭 Thinking...
-            </summary>
-            <div class={styles().conversationDetails.thinkingContent}>
-              {msg().thinkingContent}
-            </div>
-          </details>
-        </Show>
-
-        <Show
-          when={msg().role === 'tool' && parseJsonContent()}
-          fallback={
-            <div class={styles().conversationDetails.messageContent}>
-              {msg().content}
-            </div>
-          }
-        >
-          {(parsed) => (
-            <div class={styles().conversationDetails.toolJsonContainer}>
-              <JsonTree value={parsed()} />
-            </div>
-          )}
-        </Show>
-
-        {/* Tool Calls Display */}
-        <Show when={msg().toolCalls?.length}>
-          <div class={styles().conversationDetails.toolCallsContainer}>
-            <For each={msg().toolCalls}>
-              {(tool) => <ToolCallDisplay tool={tool} />}
-            </For>
-          </div>
-        </Show>
-
-        {/* Chunks Display (for client conversations with server chunks) */}
-        <Show when={msg().chunks?.length ? msg().chunks : null}>
-          {(chunks) => <ChunksCollapsible chunks={chunks()} />}
-        </Show>
-      </div>
-    </div>
-  )
-}

package/src/components/conversation/MessageGroup.tsx

@@ -1,101 +0,0 @@
-import { For, Show } from 'solid-js'
-import { useStyles } from '../../styles/use-styles'
-import { ChunkItem } from './ChunkItem'
-import { ChunkBadges } from './ChunkBadges'
-import type { Component } from 'solid-js'
-import type { Chunk } from '../../store/ai-store'
-
-interface TokenUsage {
-  promptTokens: number
-  completionTokens: number
-  totalTokens: number
-}
-
-interface MessageGroupProps {
-  messageId: string
-  chunks: Array<Chunk>
-  groupIndex: number
-  usage?: TokenUsage
-}
-
-export const MessageGroup: Component<MessageGroupProps> = (props) => {
-  const styles = useStyles()
-
-  const accumulatedContent = () =>
-    props.chunks
-      .filter((c) => c.type === 'content' && (c.content || c.delta))
-      .map((c) => c.content)
-      .join('')
-
-  // Total raw chunks = sum of all chunkCounts
-  const totalRawChunks = () =>
-    props.chunks.reduce((sum, c) => sum + (c.chunkCount || 1), 0)
-  // Consolidated entries = number of entries in the chunks array
-  const consolidatedEntries = () => props.chunks.length
-
-  return (
-    <details class={styles().conversationDetails.messageGroupDetails}>
-      <summary class={styles().conversationDetails.messageGroupSummary}>
-        <div class={styles().conversationDetails.messageGroupContent}>
-          {/* Header */}
-          <div class={styles().conversationDetails.messageGroupHeader}>
-            <span>Message #{props.groupIndex + 1}</span>
-            <div
-              class={`${styles().conversationDetails.chunkBadge} ${styles().conversationDetails.chunkBadgeCount}`}
-            >
-              📦 {totalRawChunks()} chunks
-              <Show when={consolidatedEntries() !== totalRawChunks()}>
-                <span style={{ opacity: 0.7, 'margin-left': '4px' }}>
-                  ({consolidatedEntries()} entries)
-                </span>
-              </Show>
-            </div>
-            <ChunkBadges chunks={props.chunks} />
-            {/* Usage info */}
-            <Show when={props.usage}>
-              <div class={styles().conversationDetails.messageUsage}>
-                <span class={styles().conversationDetails.messageUsageIcon}>
-                  🎯
-                </span>
-                <span>{props.usage?.promptTokens.toLocaleString()} in</span>
-                <span>•</span>
-                <span>
-                  {props.usage?.completionTokens.toLocaleString()} out
-                </span>
-              </div>
-            </Show>
-          </div>
-
-          {/* Message ID */}
-          <div
-            class={styles().conversationDetails.messageId}
-            title={props.messageId}
-          >
-            ID: {props.messageId}
-          </div>
-
-          {/* Accumulated Content Preview */}
-          <Show when={accumulatedContent()}>
-            <div
-              class={styles().conversationDetails.contentPreview}
-              title={accumulatedContent()}
-            >
-              {accumulatedContent()}
-            </div>
-          </Show>
-        </div>
-      </summary>
-
-      {/* Chunks in this group */}
-      <div class={styles().conversationDetails.chunksContainer}>
-        <div class={styles().conversationDetails.chunksList}>
-          <For each={props.chunks}>
-            {(chunk, chunkIndex) => (
-              <ChunkItem chunk={chunk} index={chunkIndex()} variant="large" />
-            )}
-          </For>
-        </div>
-      </div>
-    </details>
-  )
-}