@tanstack/ai-devtools-core 0.0.1

package/src/components/conversation/ChunkItem.tsx

@@ -0,0 +1,273 @@
+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

@@ -0,0 +1,58 @@
+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>
+  )
+}

package/src/components/conversation/ChunksTab.tsx

@@ -0,0 +1,85 @@
+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'
+      if (!groups.has(key)) {
+        groups.set(key, [])
+      }
+      groups.get(key)!.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

@@ -0,0 +1,130 @@
+import { For, 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 toolNames = () => conv().toolNames ?? []
+  const options = () => conv().options
+  const providerOptions = () => conv().providerOptions
+  const iterationCount = () => conv().iterationCount
+
+  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>
+          <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)}`}
+        </div>
+        <Show when={conv().usage}>
+          <div class={styles().conversationDetails.usageInfo}>
+            <span class={styles().conversationDetails.usageLabel}>
+              🎯 Tokens:
+            </span>
+            <span>
+              Prompt: {conv().usage?.promptTokens.toLocaleString() || 0}
+            </span>
+            <span>•</span>
+            <span>
+              Completion: {conv().usage?.completionTokens.toLocaleString() || 0}
+            </span>
+            <span>•</span>
+            <span class={styles().conversationDetails.usageBold}>
+              Total: {conv().usage?.totalTokens.toLocaleString() || 0}
+            </span>
+          </div>
+        </Show>
+        {/* 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>
+        {/* Provider Options - always visible in compact form */}
+        <Show
+          when={providerOptions() && Object.keys(providerOptions()!).length > 0}
+        >
+          <div class={styles().conversationDetails.optionsRow}>
+            <span class={styles().conversationDetails.optionsLabel}>
+              🏷️ Provider:
+            </span>
+            <div class={styles().conversationDetails.optionsCompact}>
+              <For each={Object.entries(providerOptions()!)}>
+                {([key, value]) => (
+                  <span class={styles().conversationDetails.optionBadge}>
+                    {key}:{' '}
+                    {typeof value === 'object'
+                      ? JSON.stringify(value)
+                      : String(value)}
+                  </span>
+                )}
+              </For>
+            </div>
+          </div>
+        </Show>
+      </div>
+    </div>
+  )
+}

package/src/components/conversation/ConversationTabs.tsx

@@ -0,0 +1,104 @@
+import { Show } 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' | 'embeddings' | 'summaries'
+
+interface ConversationTabsProps {
+  conversation: Conversation
+  activeTab: TabType
+  onTabChange: (tab: TabType) => void
+}
+
+export const ConversationTabs: Component<ConversationTabsProps> = (props) => {
+  const styles = useStyles()
+  const conv = () => props.conversation
+
+  // Total raw chunks = sum of all chunkCounts
+  const totalRawChunks = () =>
+    conv().chunks.reduce((sum, c) => sum + (c.chunkCount || 1), 0)
+
+  const embeddingsCount = () => conv().embeddings?.length ?? 0
+  const summariesCount = () => conv().summaries?.length ?? 0
+
+  // Determine if we should show any chat-related tabs
+  // For server conversations, don't show messages tab - only chunks
+  const hasMessages = () =>
+    conv().type === 'client' && conv().messages.length > 0
+  const hasChunks = () => conv().chunks.length > 0 || conv().type === 'server'
+  const hasEmbeddings = () => conv().hasEmbedding || embeddingsCount() > 0
+  const hasSummaries = () => conv().hasSummarize || summariesCount() > 0
+
+  // Count how many tabs would be visible
+  const visibleTabCount = () => {
+    let count = 0
+    if (hasMessages()) count++
+    if (hasChunks() && conv().type === 'server') count++
+    if (hasEmbeddings()) count++
+    if (hasSummaries()) 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 messages tab for client conversations or when there are messages */}
+      <Show when={hasMessages()}>
+        <button
+          class={`${styles().actionButton} ${
+            props.activeTab === 'messages'
+              ? styles().conversationDetails.tabButtonActive
+              : ''
+          }`}
+          onClick={() => props.onTabChange('messages')}
+        >
+          💬 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} ${
+            props.activeTab === 'chunks'
+              ? styles().conversationDetails.tabButtonActive
+              : ''
+          }`}
+          onClick={() => props.onTabChange('chunks')}
+        >
+          📦 Chunks ({totalRawChunks()})
+        </button>
+      </Show>
+      {/* Show embeddings tab if there are embedding operations */}
+      <Show when={hasEmbeddings()}>
+        <button
+          class={`${styles().actionButton} ${
+            props.activeTab === 'embeddings'
+              ? styles().conversationDetails.tabButtonActive
+              : ''
+          }`}
+          onClick={() => props.onTabChange('embeddings')}
+        >
+          🔢 Embeddings ({embeddingsCount()})
+        </button>
+      </Show>
+      {/* Show summaries tab if there are summarize operations */}
+      <Show when={hasSummaries()}>
+        <button
+          class={`${styles().actionButton} ${
+            props.activeTab === 'summaries'
+              ? styles().conversationDetails.tabButtonActive
+              : ''
+          }`}
+          onClick={() => props.onTabChange('summaries')}
+        >
+          📝 Summaries ({summariesCount()})
+        </button>
+      </Show>
+    </div>
+  )
+}