@tanstack/ai-devtools-core 0.0.1

package/src/components/conversation/EmbeddingsTab.tsx

@@ -0,0 +1,80 @@
+import { For, Show } from 'solid-js'
+import { useStyles } from '../../styles/use-styles'
+import { formatDuration } from '../utils'
+import type { Component } from 'solid-js'
+import type { EmbeddingOperation } from '../../store/ai-context'
+
+interface EmbeddingsTabProps {
+  embeddings: Array<EmbeddingOperation>
+}
+
+export const EmbeddingsTab: Component<EmbeddingsTabProps> = (props) => {
+  const styles = useStyles()
+
+  return (
+    <Show
+      when={props.embeddings.length > 0}
+      fallback={
+        <div class={styles().conversationDetails.emptyMessages}>
+          No embedding operations yet
+        </div>
+      }
+    >
+      <div class={styles().conversationDetails.messagesList}>
+        <For each={props.embeddings}>
+          {(embedding) => (
+            <div class={styles().conversationDetails.operationCard}>
+              <div class={styles().conversationDetails.operationHeader}>
+                <div class={styles().conversationDetails.operationIcon}>🔢</div>
+                <div class={styles().conversationDetails.operationTitle}>
+                  Embedding
+                </div>
+                <div
+                  class={`${styles().conversationDetails.operationStatus} ${
+                    embedding.status === 'completed'
+                      ? styles().conversationDetails.operationStatusCompleted
+                      : styles().conversationDetails.operationStatusPending
+                  }`}
+                >
+                  {embedding.status}
+                </div>
+                <Show when={embedding.duration > 0}>
+                  <div class={styles().conversationDetails.durationBadge}>
+                    ⏱️ {formatDuration(embedding.duration)}
+                  </div>
+                </Show>
+              </div>
+              <div class={styles().conversationDetails.operationDetails}>
+                <div class={styles().conversationDetails.operationDetail}>
+                  <span class={styles().conversationDetails.operationLabel}>
+                    Model:
+                  </span>
+                  <span class={styles().conversationDetails.operationValue}>
+                    {embedding.model}
+                  </span>
+                </div>
+                <div class={styles().conversationDetails.operationDetail}>
+                  <span class={styles().conversationDetails.operationLabel}>
+                    Inputs:
+                  </span>
+                  <span class={styles().conversationDetails.operationValue}>
+                    {embedding.inputCount} item
+                    {embedding.inputCount !== 1 ? 's' : ''}
+                  </span>
+                </div>
+                <div class={styles().conversationDetails.operationDetail}>
+                  <span class={styles().conversationDetails.operationLabel}>
+                    Started:
+                  </span>
+                  <span class={styles().conversationDetails.operationValue}>
+                    {new Date(embedding.timestamp).toLocaleTimeString()}
+                  </span>
+                </div>
+              </div>
+            </div>
+          )}
+        </For>
+      </div>
+    </Show>
+  )
+}

package/src/components/conversation/MessageCard.tsx

@@ -0,0 +1,137 @@
+import { For, Show } from 'solid-js'
+import { useStyles } from '../../styles/use-styles'
+import { 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}`
+  }
+
+  // Check if this is a non-user message (needs source banner and content wrapper)
+  const isSourcedMessage = () => msg().role !== 'user'
+
+  return (
+    <div class={getCardClass()}>
+      {/* Source indicator banner at top of card */}
+      <Show when={isSourcedMessage()}>
+        <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={
+          isSourcedMessage()
+            ? 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>
+        </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>
+
+        <div class={styles().conversationDetails.messageContent}>
+          {msg().content}
+        </div>
+
+        {/* Tool Calls Display */}
+        <Show when={msg().toolCalls && msg().toolCalls!.length > 0}>
+          <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 && msg().chunks!.length > 0}>
+          <ChunksCollapsible chunks={msg().chunks!} />
+        </Show>
+      </div>
+    </div>
+  )
+}

package/src/components/conversation/MessageGroup.tsx

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

package/src/components/conversation/MessagesTab.tsx

@@ -0,0 +1,30 @@
+import { For, Show } from 'solid-js'
+import { useStyles } from '../../styles/use-styles'
+import { MessageCard } from './MessageCard'
+import type { Component } from 'solid-js'
+import type { Message } from '../../store/ai-store'
+
+interface MessagesTabProps {
+  messages: Array<Message>
+}
+
+export const MessagesTab: Component<MessagesTabProps> = (props) => {
+  const styles = useStyles()
+
+  return (
+    <Show
+      when={props.messages.length > 0}
+      fallback={
+        <div class={styles().conversationDetails.emptyMessages}>
+          No messages yet. Start a conversation to see messages here.
+        </div>
+      }
+    >
+      <div class={styles().conversationDetails.messagesList}>
+        <For each={props.messages}>
+          {(msg) => <MessageCard message={msg} />}
+        </For>
+      </div>
+    </Show>
+  )
+}

package/src/components/conversation/SummariesTab.tsx

@@ -0,0 +1,91 @@
+import { For, Show } from 'solid-js'
+import { useStyles } from '../../styles/use-styles'
+import { formatDuration } from '../utils'
+import type { Component } from 'solid-js'
+import type { SummarizeOperation } from '../../store/ai-context'
+
+interface SummariesTabProps {
+  summaries: Array<SummarizeOperation>
+}
+
+export const SummariesTab: Component<SummariesTabProps> = (props) => {
+  const styles = useStyles()
+
+  return (
+    <Show
+      when={props.summaries.length > 0}
+      fallback={
+        <div class={styles().conversationDetails.emptyMessages}>
+          No summarize operations yet
+        </div>
+      }
+    >
+      <div class={styles().conversationDetails.messagesList}>
+        <For each={props.summaries}>
+          {(summary) => (
+            <div class={styles().conversationDetails.operationCard}>
+              <div class={styles().conversationDetails.operationHeader}>
+                <div class={styles().conversationDetails.operationIcon}>📝</div>
+                <div class={styles().conversationDetails.operationTitle}>
+                  Summarize
+                </div>
+                <div
+                  class={`${styles().conversationDetails.operationStatus} ${
+                    summary.status === 'completed'
+                      ? styles().conversationDetails.operationStatusCompleted
+                      : styles().conversationDetails.operationStatusPending
+                  }`}
+                >
+                  {summary.status}
+                </div>
+                <Show
+                  when={summary.duration !== undefined && summary.duration > 0}
+                >
+                  <div class={styles().conversationDetails.durationBadge}>
+                    ⏱️ {formatDuration(summary.duration)}
+                  </div>
+                </Show>
+              </div>
+              <div class={styles().conversationDetails.operationDetails}>
+                <div class={styles().conversationDetails.operationDetail}>
+                  <span class={styles().conversationDetails.operationLabel}>
+                    Model:
+                  </span>
+                  <span class={styles().conversationDetails.operationValue}>
+                    {summary.model}
+                  </span>
+                </div>
+                <div class={styles().conversationDetails.operationDetail}>
+                  <span class={styles().conversationDetails.operationLabel}>
+                    Input:
+                  </span>
+                  <span class={styles().conversationDetails.operationValue}>
+                    {summary.inputLength.toLocaleString()} chars
+                  </span>
+                </div>
+                <Show when={summary.outputLength !== undefined}>
+                  <div class={styles().conversationDetails.operationDetail}>
+                    <span class={styles().conversationDetails.operationLabel}>
+                      Output:
+                    </span>
+                    <span class={styles().conversationDetails.operationValue}>
+                      {summary.outputLength?.toLocaleString()} chars
+                    </span>
+                  </div>
+                </Show>
+                <div class={styles().conversationDetails.operationDetail}>
+                  <span class={styles().conversationDetails.operationLabel}>
+                    Started:
+                  </span>
+                  <span class={styles().conversationDetails.operationValue}>
+                    {new Date(summary.timestamp).toLocaleTimeString()}
+                  </span>
+                </div>
+              </div>
+            </div>
+          )}
+        </For>
+      </div>
+    </Show>
+  )
+}

package/src/components/conversation/ToolCallDisplay.tsx

@@ -0,0 +1,99 @@
+import { Show } from 'solid-js'
+import { JsonTree } from '@tanstack/devtools-ui'
+import { useStyles } from '../../styles/use-styles'
+import { formatDuration } from '../utils'
+import type { Component } from 'solid-js'
+import type { ToolCall } from '../../store/ai-context'
+
+interface ToolCallDisplayProps {
+  tool: ToolCall
+}
+
+export const ToolCallDisplay: Component<ToolCallDisplayProps> = (props) => {
+  const styles = useStyles()
+  const tool = () => props.tool
+
+  // Parse arguments if they're a string
+  const parsedArguments = () => {
+    const args = tool().arguments
+    if (typeof args === 'string') {
+      try {
+        return JSON.parse(args)
+      } catch {
+        return args
+      }
+    }
+    return args
+  }
+
+  return (
+    <details
+      class={`${styles().conversationDetails.toolCall} ${
+        tool().approvalRequired
+          ? styles().conversationDetails.toolCallApproval
+          : styles().conversationDetails.toolCallNormal
+      }`}
+    >
+      <summary class={styles().conversationDetails.toolCallHeader}>
+        <div
+          class={`${styles().conversationDetails.toolCallName} ${
+            tool().approvalRequired
+              ? styles().conversationDetails.toolCallNameApproval
+              : styles().conversationDetails.toolCallNameNormal
+          }`}
+        >
+          {tool().approvalRequired ? '⚠️' : '🔧'} {tool().name}
+        </div>
+        <div
+          class={`${styles().conversationDetails.toolStateBadge} ${
+            tool().approvalRequired
+              ? styles().conversationDetails.toolStateBadgeApproval
+              : styles().conversationDetails.toolStateBadgeNormal
+          }`}
+        >
+          {tool().state}
+        </div>
+        <Show when={tool().duration !== undefined && tool().duration! > 0}>
+          <div class={styles().conversationDetails.durationBadge}>
+            ⏱️ {formatDuration(tool().duration)}
+          </div>
+        </Show>
+        <Show when={tool().approvalRequired}>
+          <div class={styles().conversationDetails.approvalRequiredBadge}>
+            APPROVAL REQUIRED
+          </div>
+        </Show>
+      </summary>
+      <div class={styles().conversationDetails.toolCallContent}>
+        <Show when={tool().arguments}>
+          <div class={styles().conversationDetails.toolSection}>
+            <div class={styles().conversationDetails.toolSectionLabel}>
+              Arguments
+            </div>
+            <div class={styles().conversationDetails.toolJsonContainer}>
+              <JsonTree
+                value={parsedArguments() as Record<string, unknown>}
+                defaultExpansionDepth={2}
+                copyable
+              />
+            </div>
+          </div>
+        </Show>
+        <Show when={tool().result !== undefined}>
+          <div class={styles().conversationDetails.toolSection}>
+            <div class={styles().conversationDetails.toolSectionLabel}>
+              Result
+            </div>
+            <div class={styles().conversationDetails.toolJsonContainer}>
+              <JsonTree
+                value={tool().result as Record<string, unknown>}
+                defaultExpansionDepth={2}
+                copyable
+              />
+            </div>
+          </div>
+        </Show>
+      </div>
+    </details>
+  )
+}

package/src/components/conversation/index.ts

@@ -0,0 +1,8 @@
+export { ConversationHeader } from './ConversationHeader'
+export { ConversationTabs } from './ConversationTabs'
+export type { TabType } from './ConversationTabs'
+
+export { MessagesTab } from './MessagesTab'
+export { ChunksTab } from './ChunksTab'
+export { EmbeddingsTab } from './EmbeddingsTab'
+export { SummariesTab } from './SummariesTab'

package/src/components/list/ConversationRow.tsx

@@ -0,0 +1,85 @@
+import { Show } from 'solid-js'
+import { useStyles } from '../../styles/use-styles'
+import { useAIStore } from '../../store/ai-context'
+import { getStatusColor, getTypeColor } from '../utils'
+import type { Conversation } from '../../store/ai-context'
+import type { Component } from 'solid-js'
+
+interface ConversationRowProps {
+  conversation: Conversation
+}
+
+export const ConversationRow: Component<ConversationRowProps> = (props) => {
+  const { state, selectConversation } = useAIStore()
+  const styles = useStyles()
+  const conv = () => props.conversation
+
+  const hasToolCalls = () => {
+    return conv().messages.some(
+      (msg) => msg.toolCalls && msg.toolCalls.length > 0,
+    )
+  }
+
+  const countToolCalls = () => {
+    return conv().messages.reduce((total, msg) => {
+      return total + (msg.toolCalls?.length || 0)
+    }, 0)
+  }
+
+  // Total raw chunks = sum of all chunkCounts from all chunks
+  const totalRawChunks = () => {
+    return conv().chunks.reduce((sum, c) => sum + (c.chunkCount || 1), 0)
+  }
+
+  return (
+    <div
+      class={`${styles().utilRow} ${state.activeConversationId === conv().id ? styles().utilRowSelected : ''}`}
+      onClick={() => selectConversation(conv().id)}
+    >
+      <div class={styles().conversationsList.rowMain}>
+        <div class={styles().conversationsList.rowTop}>
+          <div class={styles().conversationsList.rowInfo}>
+            <div
+              class={styles().conversationsList.typeDot}
+              style={{ background: getTypeColor(conv().type) }}
+            />
+            <div class={styles().conversationsList.label}>{conv().label}</div>
+            <Show when={hasToolCalls()}>
+              <div
+                class={styles().conversationsList.toolCallsBadge}
+                title={`${countToolCalls()} tool call${countToolCalls() !== 1 ? 's' : ''}`}
+              >
+                🔧 {countToolCalls()}
+              </div>
+            </Show>
+          </div>
+          <div class={styles().conversationsList.rowRight}>
+            <Show when={conv().status === 'active'}>
+              <div class={styles().conversationsList.loadingIndicator}>⟳</div>
+            </Show>
+            <div
+              class={styles().conversationsList.statusDot}
+              style={{ background: getStatusColor(conv().status) }}
+            />
+          </div>
+        </div>
+        <div class={styles().conversationsList.stats}>
+          <div class={styles().conversationsList.statItem}>
+            💬 {conv().messages.length}
+          </div>
+          <div class={styles().conversationsList.statItem}>
+            📦 {totalRawChunks()}
+          </div>
+          <Show when={conv().usage}>
+            <div
+              class={styles().conversationsList.tokensBadge}
+              title={`Prompt: ${conv().usage?.promptTokens || 0} | Completion: ${conv().usage?.completionTokens || 0}`}
+            >
+              🎯 {conv().usage?.totalTokens.toLocaleString() || 0}
+            </div>
+          </Show>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/list/index.ts

@@ -0,0 +1 @@
+export { ConversationRow } from './ConversationRow'