@tanstack/ai-devtools-core 0.3.37 → 0.4.0

package/src/components/ConversationDetails.tsx

@@ -1,216 +0,0 @@
-import { Show, createEffect, createSignal } from 'solid-js'
-import { useStyles } from '../styles/use-styles'
-import { useAIStore } from '../store/ai-context'
-import {
-  ActivityEventsTab,
-  ChunksTab,
-  ConversationHeader,
-  ConversationTabs,
-  IterationTimeline,
-  MessagesTab,
-  SummariesTab,
-} from './conversation'
-import type { TabType } from './conversation'
-import type { Conversation } from '../store/ai-context'
-import type { Component } from 'solid-js'
-
-export const ConversationDetails: Component = () => {
-  const { state } = useAIStore()
-  const styles = useStyles()
-  const [activeTab, setActiveTab] = createSignal<TabType>('messages')
-
-  const activeConversation = (): Conversation | undefined => {
-    if (!state.activeConversationId) return undefined
-    return state.conversations[state.activeConversationId]
-  }
-
-  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) 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 {
-        setActiveTab('messages')
-      }
-    }
-  })
-
-  return (
-    <Show
-      when={activeConversation()}
-      fallback={
-        <div class={styles().conversationDetails.emptyState}>
-          Select a conversation to view details
-        </div>
-      }
-    >
-      {(conv) => (
-        <div class={styles().conversationDetails.container}>
-          <ConversationHeader conversation={conv()} />
-
-          {/* Primary view: iteration timeline when iterations exist */}
-          <Show when={hasIterations()}>
-            <div class={styles().conversationDetails.contentArea}>
-              <IterationTimeline
-                iterations={conv().iterations}
-                messages={conv().messages}
-              />
-            </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/ConversationsList.tsx

@@ -1,21 +0,0 @@
-import { For } from 'solid-js'
-import { useStyles } from '../styles/use-styles'
-import { useAIStore } from '../store/ai-context'
-import { ConversationRow } from './list'
-import type { Conversation } from '../store/ai-context'
-import type { Component } from 'solid-js'
-
-export const ConversationsList: Component = () => {
-  const { state } = useAIStore()
-  const styles = useStyles()
-
-  const conversations = () => Object.values(state.conversations)
-
-  return (
-    <div class={styles().utilList}>
-      <For each={conversations()}>
-        {(conv: Conversation) => <ConversationRow conversation={conv} />}
-      </For>
-    </div>
-  )
-}

package/src/components/conversation/ActivityEventsTab.tsx

@@ -1,57 +0,0 @@
-import { For, Show } from 'solid-js'
-import { useStyles } from '../../styles/use-styles'
-import type { Component } from 'solid-js'
-import type { ActivityEvent } from '../../store/ai-context'
-
-interface ActivityEventsTabProps {
-  title: string
-  events: Array<ActivityEvent>
-}
-
-export const ActivityEventsTab: Component<ActivityEventsTabProps> = (props) => {
-  const styles = useStyles()
-
-  const formattedTimestamp = (timestamp: number) =>
-    new Date(timestamp).toLocaleTimeString()
-
-  return (
-    <Show
-      when={props.events.length > 0}
-      fallback={
-        <div class={styles().conversationDetails.noChunks}>No events yet</div>
-      }
-    >
-      <div class={styles().conversationDetails.streamContainer}>
-        <div class={styles().conversationDetails.streamHeader}>
-          <div class={styles().conversationDetails.streamHeaderRow}>
-            <div class={styles().conversationDetails.streamTitle}>
-              {props.title}
-            </div>
-            <div
-              class={`${styles().conversationDetails.chunkBadge} ${styles().conversationDetails.chunkBadgeCount}`}
-            >
-              {props.events.length} events
-            </div>
-          </div>
-          <div class={styles().conversationDetails.streamSubtitle}>
-            Activity event log
-          </div>
-        </div>
-        <div class={styles().conversationDetails.messageGroups}>
-          <For each={props.events}>
-            {(event) => (
-              <div class={styles().detailSection}>
-                <div class={styles().detailSectionHeader}>
-                  {event.name} · {formattedTimestamp(event.timestamp)}
-                </div>
-                <pre class={styles().conversationDetails.jsonPreview}>
-                  {JSON.stringify(event.payload, null, 2)}
-                </pre>
-              </div>
-            )}
-          </For>
-        </div>
-      </div>
-    </Show>
-  )
-}

package/src/components/conversation/ChunkBadges.tsx

@@ -1,51 +0,0 @@
-import { Show } from 'solid-js'
-import { useStyles } from '../../styles/use-styles'
-import type { Component } from 'solid-js'
-import type { Chunk } from '../../store/ai-store'
-
-interface ChunkBadgesProps {
-  chunks: Array<Chunk>
-}
-
-export const ChunkBadges: Component<ChunkBadgesProps> = (props) => {
-  const styles = useStyles()
-
-  const hasToolCalls = () => props.chunks.some((c) => c.type === 'tool_call')
-  const hasErrors = () => props.chunks.some((c) => c.type === 'error')
-  const hasApproval = () => props.chunks.some((c) => c.type === 'approval')
-  const finishReason = () =>
-    props.chunks.find((c) => c.type === 'done')?.finishReason
-
-  return (
-    <>
-      <Show when={hasToolCalls()}>
-        <span
-          class={`${styles().conversationDetails.chunkBadge} ${styles().conversationDetails.chunkBadgeTool}`}
-        >
-          🔧 Tool Calls
-        </span>
-      </Show>
-      <Show when={hasErrors()}>
-        <span
-          class={`${styles().conversationDetails.chunkBadge} ${styles().conversationDetails.chunkBadgeError}`}
-        >
-          ❌ Error
-        </span>
-      </Show>
-      <Show when={hasApproval()}>
-        <span
-          class={`${styles().conversationDetails.chunkBadge} ${styles().conversationDetails.chunkBadgeApproval}`}
-        >
-          ⚠️ Approval
-        </span>
-      </Show>
-      <Show when={finishReason()}>
-        <span
-          class={`${styles().conversationDetails.chunkBadge} ${styles().conversationDetails.chunkBadgeSuccess}`}
-        >
-          ✓ {finishReason()}
-        </span>
-      </Show>
-    </>
-  )
-}

package/src/components/conversation/ChunkItem.tsx

@@ -1,273 +0,0 @@
-import { Show, createSignal } from 'solid-js'
-import { JsonTree } from '@tanstack/devtools-ui'
-import { useStyles } from '../../styles/use-styles'
-import { formatDuration, formatTimestamp, getChunkTypeColor } from '../utils'
-import type { Component } from 'solid-js'
-import type { Chunk } from '../../store/ai-store'
-
-interface ChunkItemProps {
-  chunk: Chunk
-  index: number
-  variant?: 'small' | 'large'
-}
-
-export const ChunkItem: Component<ChunkItemProps> = (props) => {
-  const styles = useStyles()
-  const [showRaw, setShowRaw] = createSignal(false)
-  const isLarge = () => props.variant === 'large'
-  const chunkCount = () => props.chunk.chunkCount || 1
-
-  const parseToolArguments = (): Record<string, unknown> => {
-    try {
-      return JSON.parse(props.chunk.arguments || '{}') as Record<
-        string,
-        unknown
-      >
-    } catch {
-      return { raw: props.chunk.arguments }
-    }
-  }
-
-  const parseToolResult = (): Record<string, unknown> => {
-    try {
-      if (typeof props.chunk.result === 'string') {
-        return JSON.parse(props.chunk.result) as Record<string, unknown>
-      }
-      return props.chunk.result as Record<string, unknown>
-    } catch {
-      return { raw: props.chunk.result }
-    }
-  }
-
-  return (
-    <div
-      class={
-        isLarge()
-          ? styles().conversationDetails.chunkItemLarge
-          : styles().conversationDetails.chunkItem
-      }
-    >
-      {/* Chunk Header */}
-      <div
-        class={
-          isLarge()
-            ? styles().conversationDetails.chunkHeaderLarge
-            : styles().conversationDetails.chunkHeader
-        }
-      >
-        {/* Chunk Number */}
-        <div
-          class={
-            isLarge()
-              ? styles().conversationDetails.chunkNumberLarge
-              : styles().conversationDetails.chunkNumber
-          }
-        >
-          #{props.index + 1}
-          <Show when={chunkCount() > 1}>
-            <span style={{ 'margin-left': '4px', opacity: 0.7 }}>
-              ({chunkCount()} chunks)
-            </span>
-          </Show>
-        </div>
-
-        {/* Type Badge */}
-        <div
-          class={
-            isLarge()
-              ? styles().conversationDetails.chunkTypeBadgeLarge
-              : styles().conversationDetails.chunkTypeBadge
-          }
-        >
-          <div
-            class={
-              isLarge()
-                ? styles().conversationDetails.chunkTypeDotLarge
-                : styles().conversationDetails.chunkTypeDot
-            }
-            style={{ background: getChunkTypeColor(props.chunk.type) }}
-          />
-          <div
-            class={
-              isLarge()
-                ? styles().conversationDetails.chunkTypeLabelLarge
-                : styles().conversationDetails.chunkTypeLabel
-            }
-          >
-            {props.chunk.type}
-          </div>
-        </div>
-
-        {/* Tool Name Badge */}
-        <Show when={props.chunk.toolName}>
-          <div
-            class={
-              isLarge()
-                ? styles().conversationDetails.chunkToolBadgeLarge
-                : styles().conversationDetails.chunkToolBadge
-            }
-          >
-            🔧 {props.chunk.toolName}
-          </div>
-        </Show>
-
-        {/* Timestamp */}
-        <div
-          class={
-            isLarge()
-              ? styles().conversationDetails.chunkTimestampLarge
-              : styles().conversationDetails.chunkTimestamp
-          }
-        >
-          {formatTimestamp(props.chunk.timestamp)}
-        </div>
-
-        {/* Toggle Raw JSON Button */}
-        <button
-          onClick={() => setShowRaw(!showRaw())}
-          class={`${
-            isLarge()
-              ? styles().conversationDetails.rawJsonButtonLarge
-              : styles().conversationDetails.rawJsonButton
-          } ${
-            showRaw()
-              ? styles().conversationDetails.rawJsonButtonActive
-              : styles().conversationDetails.rawJsonButtonInactive
-          }`}
-          title={showRaw() ? 'Show formatted' : 'Show raw JSON'}
-        >
-          {'{}'}
-        </button>
-      </div>
-
-      {/* Chunk Content */}
-      <Show when={!showRaw()}>
-        <Show when={props.chunk.content || props.chunk.delta}>
-          <div
-            class={
-              isLarge()
-                ? styles().conversationDetails.chunkContentLarge
-                : styles().conversationDetails.chunkContent
-            }
-          >
-            {props.chunk.content}
-          </div>
-        </Show>
-        <Show when={props.chunk.error}>
-          <div
-            class={
-              isLarge()
-                ? styles().conversationDetails.chunkErrorLarge
-                : styles().conversationDetails.chunkError
-            }
-          >
-            ❌ {props.chunk.error}
-          </div>
-        </Show>
-        <Show when={props.chunk.finishReason}>
-          <div
-            class={
-              isLarge()
-                ? styles().conversationDetails.chunkFinishLarge
-                : styles().conversationDetails.chunkFinish
-            }
-          >
-            ✓{' '}
-            {isLarge()
-              ? `Finish: ${props.chunk.finishReason}`
-              : props.chunk.finishReason}
-          </div>
-        </Show>
-        <Show when={props.chunk.type === 'approval'}>
-          <div
-            class={
-              isLarge()
-                ? styles().conversationDetails.chunkApprovalLarge
-                : styles().conversationDetails.chunkApproval
-            }
-          >
-            <div
-              class={
-                isLarge()
-                  ? styles().conversationDetails.chunkApprovalTitleLarge
-                  : styles().conversationDetails.chunkApprovalTitle
-              }
-            >
-              ⚠️ Approval Required
-            </div>
-            <Show when={props.chunk.input}>
-              <div
-                class={
-                  isLarge()
-                    ? styles().conversationDetails.chunkApprovalInputLarge
-                    : styles().conversationDetails.chunkApprovalInput
-                }
-              >
-                Input: {JSON.stringify(props.chunk.input, null, 2)}
-              </div>
-            </Show>
-          </div>
-        </Show>
-        <Show when={props.chunk.type === 'tool_call' && props.chunk.arguments}>
-          <div class={styles().conversationDetails.chunkToolCall}>
-            <div class={styles().conversationDetails.chunkToolCallHeader}>
-              <span class={styles().conversationDetails.chunkToolCallTitle}>
-                📤 Tool Arguments
-              </span>
-            </div>
-            <div class={styles().conversationDetails.toolJsonContainer}>
-              <JsonTree
-                value={parseToolArguments()}
-                defaultExpansionDepth={2}
-                copyable
-              />
-            </div>
-          </div>
-        </Show>
-        <Show
-          when={
-            props.chunk.type === 'tool_result' &&
-            props.chunk.result !== undefined
-          }
-        >
-          <div class={styles().conversationDetails.chunkToolResult}>
-            <div class={styles().conversationDetails.chunkToolResultHeader}>
-              <span class={styles().conversationDetails.chunkToolResultTitle}>
-                ✓ Tool Result
-              </span>
-              <Show
-                when={
-                  props.chunk.duration !== undefined && props.chunk.duration > 0
-                }
-              >
-                <span class={styles().conversationDetails.durationBadge}>
-                  ⏱️ {formatDuration(props.chunk.duration)}
-                </span>
-              </Show>
-            </div>
-            <div class={styles().conversationDetails.toolJsonContainer}>
-              <JsonTree
-                value={parseToolResult()}
-                defaultExpansionDepth={2}
-                copyable
-              />
-            </div>
-          </div>
-        </Show>
-      </Show>
-
-      {/* Raw JSON View */}
-      <Show when={showRaw()}>
-        <div
-          class={
-            isLarge()
-              ? styles().conversationDetails.rawJsonLarge
-              : styles().conversationDetails.rawJson
-          }
-        >
-          {JSON.stringify(props.chunk, null, 2)}
-        </div>
-      </Show>
-    </div>
-  )
-}

package/src/components/conversation/ChunksCollapsible.tsx

@@ -1,56 +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 ChunksCollapsibleProps {
-  chunks: Array<Chunk>
-}
-
-export const ChunksCollapsible: Component<ChunksCollapsibleProps> = (props) => {
-  const styles = useStyles()
-
-  const accumulatedContent = () =>
-    props.chunks
-      .filter((c) => c.type === 'content' && (c.content || c.delta))
-      .map((c) => c.delta || c.content)
-      .join('')
-
-  // Total raw chunks = sum of all chunkCounts
-  const totalRawChunks = () =>
-    props.chunks.reduce((sum, c) => sum + (c.chunkCount || 1), 0)
-
-  return (
-    <details class={styles().conversationDetails.chunksDetails}>
-      <summary class={styles().conversationDetails.chunksSummary}>
-        <div class={styles().conversationDetails.chunksSummaryRow}>
-          <span class={styles().conversationDetails.chunksSummaryArrow}>▶</span>
-          <span class={styles().conversationDetails.chunksSummaryTitle}>
-            📦 {totalRawChunks()} chunks
-          </span>
-          <ChunkBadges chunks={props.chunks} />
-        </div>
-        {/* Accumulated Content Preview */}
-        <Show when={accumulatedContent()}>
-          <div
-            class={styles().conversationDetails.contentPreview}
-            title={accumulatedContent()}
-          >
-            {accumulatedContent()}
-          </div>
-        </Show>
-      </summary>
-      <div class={styles().conversationDetails.chunksContainer}>
-        <div class={styles().conversationDetails.chunksList}>
-          <For each={props.chunks}>
-            {(chunk, index) => (
-              <ChunkItem chunk={chunk} index={index()} variant="small" />
-            )}
-          </For>
-        </div>
-      </div>
-    </details>
-  )
-}