@tanstack/ai-devtools-core 0.3.37 → 0.4.0

package/src/components/conversation/MessagesTab.tsx

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

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

@@ -1,99 +0,0 @@
-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 ?? 0) > 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/list/ConversationRow.tsx

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

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