@tanstack/ai-devtools-core 0.2.1 → 0.2.3

package/src/store/ai-context.tsx

@@ -4,7 +4,7 @@ import { aiEventClient } from '@tanstack/ai/event-client'
 import type { ParentComponent } from 'solid-js'
 
 interface MessagePart {
-  type: 'text' | 'tool-call' | 'tool-result'
+  type: 'text' | 'tool-call' | 'tool-result' | 'thinking'
   content?: string
   toolCallId?: string
   toolName?: string
@@ -84,6 +84,8 @@ export interface Chunk {
   duration?: number
   /** Number of raw chunks that were merged into this consolidated chunk */
   chunkCount: number
+  /** Whether this is a client-side tool execution */
+  isClientTool?: boolean
 }
 
 export interface SummarizeOperation {
@@ -96,6 +98,13 @@ export interface SummarizeOperation {
   status: 'started' | 'completed'
 }
 
+export interface ActivityEvent {
+  id: string
+  name: string
+  timestamp: number
+  payload: unknown
+}
+
 export interface Conversation {
   id: string
   type: 'client' | 'server'
@@ -111,12 +120,21 @@ export interface Conversation {
   iterationCount?: number
   toolNames?: Array<string>
   options?: Record<string, unknown>
-  providerOptions?: Record<string, unknown>
+  modelOptions?: Record<string, unknown>
+  systemPrompts?: Array<string>
   /** Flags for which operation types this conversation has */
   hasChat?: boolean
   hasSummarize?: boolean
+  hasImage?: boolean
+  hasSpeech?: boolean
+  hasTranscription?: boolean
+  hasVideo?: boolean
   /** Summarize operations in this conversation */
   summaries?: Array<SummarizeOperation>
+  imageEvents?: Array<ActivityEvent>
+  speechEvents?: Array<ActivityEvent>
+  transcriptionEvents?: Array<ActivityEvent>
+  videoEvents?: Array<ActivityEvent>
 }
 
 interface AIStoreState {
@@ -336,6 +354,10 @@ export const AIProvider: ParentComponent = (props) => {
         label,
         messages: [],
         chunks: [],
+        imageEvents: [],
+        speechEvents: [],
+        transcriptionEvents: [],
+        videoEvents: [],
         status: 'active',
         startedAt: Date.now(),
       })
@@ -398,6 +420,9 @@ export const AIProvider: ParentComponent = (props) => {
         return
       }
     }
+
+    // Fallback: add to conversation's main chunks array if no assistant message found
+    addChunk(conversationId, chunk)
   }
 
   function updateMessageUsage(
@@ -553,6 +578,38 @@ export const AIProvider: ParentComponent = (props) => {
     queueChunk(conversationId, chunk)
   }
 
+  function addActivityEvent(
+    conversationId: string,
+    activity:
+      | 'imageEvents'
+      | 'speechEvents'
+      | 'transcriptionEvents'
+      | 'videoEvents',
+    event: ActivityEvent,
+  ): void {
+    if (!state.conversations[conversationId]) return
+
+    setState(
+      'conversations',
+      conversationId,
+      activity,
+      produce((events: Array<ActivityEvent> | undefined) => {
+        if (!events) return [event]
+        events.push(event)
+        return events
+      }),
+    )
+
+    const activityFlagMap: Record<typeof activity, keyof Conversation> = {
+      imageEvents: 'hasImage',
+      speechEvents: 'hasSpeech',
+      transcriptionEvents: 'hasTranscription',
+      videoEvents: 'hasVideo',
+    }
+
+    setState('conversations', conversationId, activityFlagMap[activity], true)
+  }
+
   /**
    * For server conversations, ensure a message exists for the given messageId.
    * This creates a placeholder message that will be updated as chunks arrive.
@@ -598,58 +655,146 @@ export const AIProvider: ParentComponent = (props) => {
       }),
     )
 
+    // ============= Message Events =============
+
     cleanupFns.push(
-      aiEventClient.on('client:message-sent', (e) => {
-        const clientId = e.payload.clientId
-        if (!state.conversations[clientId]) {
+      aiEventClient.on('text:message:created', (e) => {
+        const { clientId, streamId, messageId, role, content, timestamp } =
+          e.payload
+        const conversationId =
+          clientId ||
+          (streamId ? streamToConversation.get(streamId) : undefined)
+
+        if (!conversationId) return
+        if (role === 'tool' || role === 'system') return
+
+        if (!state.conversations[conversationId]) {
           getOrCreateConversation(
-            clientId,
-            'client',
-            `Client Chat (${clientId.substring(0, 8)})`,
+            conversationId,
+            clientId ? 'client' : 'server',
+            clientId
+              ? `Client Chat (${conversationId.substring(0, 8)})`
+              : `Server Chat (${conversationId.substring(0, 8)})`,
           )
         }
-        addMessage(clientId, {
-          id: e.payload.messageId,
-          role: 'user',
-          content: e.payload.content,
-          timestamp: e.payload.timestamp,
-          source: 'client',
+
+        const conv = state.conversations[conversationId]
+        if (!conv) return
+
+        const existingIndex = conv.messages.findIndex(
+          (message) => message.id === messageId,
+        )
+
+        const parts = e.payload.parts?.map((part) => {
+          if (part.type === 'text') {
+            return { type: 'text', content: part.content } satisfies MessagePart
+          }
+          if (part.type === 'tool-call') {
+            return {
+              type: 'tool-call',
+              toolCallId: part.id,
+              toolName: part.name,
+              arguments: part.arguments,
+              state: part.state,
+              output: part.output,
+              content: part.approval
+                ? JSON.stringify(part.approval)
+                : undefined,
+            } satisfies MessagePart
+          }
+          if (part.type === 'tool-result') {
+            return {
+              type: 'tool-result',
+              toolCallId: part.toolCallId,
+              content: part.content,
+              state: part.state,
+              error: part.error,
+            } satisfies MessagePart
+          }
+          return {
+            type: 'thinking',
+            content: part.content,
+          } satisfies MessagePart
         })
-        updateConversation(clientId, { status: 'active' })
+
+        const toolCalls = e.payload.toolCalls?.map((toolCall) => ({
+          id: toolCall.id,
+          name: toolCall.function.name,
+          arguments: toolCall.function.arguments,
+          state: 'input-complete',
+        }))
+
+        const source = e.payload.source ?? (clientId ? 'client' : 'server')
+
+        if (role === 'user' && conv.type === 'client' && source === 'server') {
+          return
+        }
+
+        // Skip empty assistant messages from client - the real content comes from server
+        if (
+          role === 'assistant' &&
+          source === 'client' &&
+          !content &&
+          (!toolCalls || toolCalls.length === 0)
+        ) {
+          return
+        }
+
+        const messagePayload: Message = {
+          id: messageId,
+          role,
+          content,
+          timestamp,
+          parts,
+          toolCalls,
+          source,
+        }
+
+        if (existingIndex >= 0) {
+          updateMessage(conversationId, existingIndex, messagePayload)
+        } else {
+          addMessage(conversationId, messagePayload)
+        }
+
+        updateConversation(conversationId, { status: 'active', hasChat: true })
       }),
     )
 
     cleanupFns.push(
-      aiEventClient.on('client:message-appended', (e) => {
-        const clientId = e.payload.clientId
-        const role = e.payload.role
+      aiEventClient.on('text:message:user', (e) => {
+        const { clientId, streamId, messageId, content, timestamp } = e.payload
+        const conversationId =
+          clientId ||
+          (streamId ? streamToConversation.get(streamId) : undefined)
+        if (!conversationId) return
 
-        if (role === 'user') return
-        if (!state.conversations[clientId]) return
+        const conv = state.conversations[conversationId]
+        if (!conv) return
 
-        if (role === 'assistant') {
-          addMessage(clientId, {
-            id: e.payload.messageId,
-            role: 'assistant',
-            content: e.payload.contentPreview,
-            timestamp: e.payload.timestamp,
-            source: 'client',
-          })
-        } else if (role === 'tool') {
-          // Tool result message from the LLM
-          addMessage(clientId, {
-            id: e.payload.messageId,
-            role: 'tool',
-            content: e.payload.contentPreview,
-            timestamp: e.payload.timestamp,
-            source: 'client',
-          })
+        const existingIndex = conv.messages.findIndex(
+          (message) => message.id === messageId,
+        )
+
+        if (existingIndex >= 0) return
+
+        const source = e.payload.source ?? (clientId ? 'client' : 'server')
+
+        if (conv.type === 'client' && source === 'server') {
+          return
         }
+
+        addMessage(conversationId, {
+          id: messageId,
+          role: 'user',
+          content,
+          timestamp,
+          source,
+        })
       }),
     )
 
     cleanupFns.push(
-      aiEventClient.on('client:loading-changed', (e) => {
+      aiEventClient.on('client:loading:changed', (e) => {
         const clientId = e.payload.clientId
         if (state.conversations[clientId]) {
           updateConversation(clientId, {
@@ -672,7 +817,7 @@ export const AIProvider: ParentComponent = (props) => {
     )
 
     cleanupFns.push(
-      aiEventClient.on('client:messages-cleared', (e) => {
+      aiEventClient.on('client:messages:cleared', (e) => {
         const clientId = e.payload.clientId
         if (state.conversations[clientId]) {
           updateConversation(clientId, {
@@ -698,7 +843,7 @@ export const AIProvider: ParentComponent = (props) => {
     )
 
     cleanupFns.push(
-      aiEventClient.on('client:error-changed', (e) => {
+      aiEventClient.on('client:error:changed', (e) => {
         const clientId = e.payload.clientId
         if (state.conversations[clientId] && e.payload.error) {
           updateConversation(clientId, { status: 'error' })
@@ -706,112 +851,10 @@ export const AIProvider: ParentComponent = (props) => {
       }),
     )
 
-    cleanupFns.push(
-      aiEventClient.on('client:assistant-message-updated', (e) => {
-        const clientId = e.payload.clientId
-        const messageId = e.payload.messageId
-        const content = e.payload.content
-
-        if (!state.conversations[clientId]) return
-
-        const conv = state.conversations[clientId]
-
-        // Find message by ID anywhere in the list, not just the last one
-        const messageIndex = conv.messages.findIndex(
-          (m: Message) => m.id === messageId,
-        )
-
-        // Only update existing messages, don't create new ones
-        // (client:message-appended is responsible for creating messages)
-        if (messageIndex >= 0) {
-          updateMessage(clientId, messageIndex, {
-            content,
-            model: conv.model,
-          })
-        }
-      }),
-    )
-
-    cleanupFns.push(
-      aiEventClient.on('client:tool-call-updated', (e) => {
-        const {
-          clientId,
-          messageId,
-          toolCallId,
-          toolName,
-          state: toolCallState,
-          arguments: args,
-        } = e.payload as {
-          clientId: string
-          messageId: string
-          toolCallId: string
-          toolName: string
-          state: string
-          arguments: unknown
-          timestamp: number
-        }
-
-        if (!state.conversations[clientId]) return
-
-        const conv = state.conversations[clientId]
-        const messageIndex = conv.messages.findIndex(
-          (m: Message) => m.id === messageId,
-        )
-        if (messageIndex === -1) return
-
-        const message = conv.messages[messageIndex]
-        if (!message) return
-
-        const toolCalls = message.toolCalls || []
-        const existingToolIndex = toolCalls.findIndex(
-          (t: ToolCall) => t.id === toolCallId,
-        )
-
-        const toolCall: ToolCall = {
-          id: toolCallId,
-          name: toolName,
-          arguments: JSON.stringify(args, null, 2),
-          state: toolCallState,
-        }
-
-        if (existingToolIndex >= 0) {
-          updateToolCall(clientId, messageIndex, existingToolIndex, toolCall)
-        } else {
-          setToolCalls(clientId, messageIndex, [...toolCalls, toolCall])
-        }
-      }),
-    )
-
-    cleanupFns.push(
-      aiEventClient.on('client:approval-requested', (e) => {
-        const { clientId, messageId, toolCallId, approvalId } = e.payload
-
-        if (!state.conversations[clientId]) return
-
-        const conv = state.conversations[clientId]
-        const messageIndex = conv.messages.findIndex((m) => m.id === messageId)
-        if (messageIndex === -1) return
-
-        const message = conv.messages[messageIndex]
-        if (!message?.toolCalls) return
-
-        const toolCallIndex = message.toolCalls.findIndex(
-          (t) => t.id === toolCallId,
-        )
-        if (toolCallIndex === -1) return
-
-        updateToolCall(clientId, messageIndex, toolCallIndex, {
-          approvalRequired: true,
-          approvalId,
-          state: 'approval-requested',
-        })
-      }),
-    )
-
     // ============= Tool Events =============
 
     cleanupFns.push(
-      aiEventClient.on('tool:result-added', (e) => {
+      aiEventClient.on('tools:result:added', (e) => {
         const {
           clientId,
           toolCallId,
@@ -821,10 +864,23 @@ export const AIProvider: ParentComponent = (props) => {
           timestamp,
         } = e.payload
 
+        if (!clientId) return
         if (!state.conversations[clientId]) return
 
         const conv = state.conversations[clientId]
 
+        // Always create a chunk for the tool result
+        const chunk: Chunk = {
+          id: `chunk-tool-result-${toolCallId}-${Date.now()}`,
+          type: 'tool_result',
+          toolCallId,
+          toolName,
+          result: output,
+          timestamp,
+          chunkCount: 1,
+          isClientTool: true,
+        }
+
         // Find the message with the tool call and update it
         for (
           let messageIndex = conv.messages.length - 1;
@@ -844,28 +900,25 @@ export const AIProvider: ParentComponent = (props) => {
               state: resultState === 'output-error' ? 'error' : 'complete',
             })
 
-            // Also add a chunk to show the tool result in the chunks view
-            const chunk: Chunk = {
-              id: `chunk-tool-result-${toolCallId}-${Date.now()}`,
-              type: 'tool_result',
-              messageId: message.id,
-              toolCallId,
-              toolName,
-              result: output,
-              timestamp,
-              chunkCount: 1,
-            }
+            // Add chunk with message ID
+            chunk.messageId = message.id
             addChunkToMessage(clientId, chunk)
             return
           }
         }
+
+        // If we couldn't find the message with toolCalls, still add the chunk
+        // This handles cases where the message hasn't been processed yet
+        // or the tool call is a client-only tool
+        addChunkToMessage(clientId, chunk)
       }),
     )
 
     cleanupFns.push(
-      aiEventClient.on('tool:approval-responded', (e) => {
+      aiEventClient.on('tools:approval:responded', (e) => {
         const { clientId, toolCallId, approved } = e.payload
 
+        if (!clientId) return
         if (!state.conversations[clientId]) return
 
         const conv = state.conversations[clientId]
@@ -892,52 +945,82 @@ export const AIProvider: ParentComponent = (props) => {
       }),
     )
 
-    // ============= Stream Events =============
-
     cleanupFns.push(
-      aiEventClient.on('stream:chunk:content', (e) => {
-        const streamId = e.payload.streamId
-        const conversationId = streamToConversation.get(streamId)
-        if (!conversationId) return
+      aiEventClient.on('tools:call:updated', (e) => {
+        const {
+          clientId,
+          streamId,
+          messageId,
+          toolCallId,
+          toolName,
+          state: toolCallState,
+          arguments: args,
+        } = e.payload
 
-        const chunk: Chunk = {
-          id: `chunk-${Date.now()}-${Math.random()}`,
-          type: 'content',
-          messageId: e.payload.messageId,
-          content: e.payload.content,
-          delta: e.payload.delta,
-          timestamp: e.payload.timestamp,
-          chunkCount: 1,
-        }
+        const conversationId =
+          clientId ||
+          (streamId ? streamToConversation.get(streamId) : undefined)
+        if (!conversationId || !state.conversations[conversationId]) return
 
         const conv = state.conversations[conversationId]
-        if (conv?.type === 'client') {
-          addChunkToMessage(conversationId, chunk)
-        } else {
-          ensureMessageForChunk(
+        const messageIndex = conv.messages.findIndex(
+          (m: Message) => m.id === messageId,
+        )
+        if (messageIndex === -1) return
+
+        const message = conv.messages[messageIndex]
+        if (!message) return
+
+        const toolCalls = message.toolCalls || []
+        const existingToolIndex = toolCalls.findIndex(
+          (t: ToolCall) => t.id === toolCallId,
+        )
+
+        const toolCall: ToolCall = {
+          id: toolCallId,
+          name: toolName,
+          arguments: args,
+          state: toolCallState,
+        }
+
+        if (existingToolIndex >= 0) {
+          updateToolCall(
             conversationId,
-            e.payload.messageId,
-            e.payload.timestamp,
+            messageIndex,
+            existingToolIndex,
+            toolCall,
           )
-          addChunk(conversationId, chunk)
+        } else {
+          setToolCalls(conversationId, messageIndex, [...toolCalls, toolCall])
         }
       }),
     )
 
     cleanupFns.push(
-      aiEventClient.on('stream:chunk:tool-call', (e) => {
-        const streamId = e.payload.streamId
-        const conversationId = streamToConversation.get(streamId)
+      aiEventClient.on('tools:input:available', (e) => {
+        const {
+          streamId,
+          messageId,
+          toolCallId,
+          toolName,
+          input,
+          timestamp,
+          clientId,
+        } = e.payload
+
+        const conversationId =
+          clientId ||
+          (streamId ? streamToConversation.get(streamId) : undefined)
         if (!conversationId) return
 
         const chunk: Chunk = {
           id: `chunk-${Date.now()}-${Math.random()}`,
           type: 'tool_call',
-          messageId: e.payload.messageId,
-          toolCallId: e.payload.toolCallId,
-          toolName: e.payload.toolName,
-          arguments: e.payload.arguments,
-          timestamp: e.payload.timestamp,
+          messageId: messageId,
+          toolCallId,
+          toolName,
+          arguments: JSON.stringify(input),
+          timestamp,
           chunkCount: 1,
         }
 
@@ -945,36 +1028,209 @@ export const AIProvider: ParentComponent = (props) => {
         if (conv?.type === 'client') {
           addChunkToMessage(conversationId, chunk)
         } else {
-          ensureMessageForChunk(
-            conversationId,
-            e.payload.messageId,
-            e.payload.timestamp,
-          )
           addChunk(conversationId, chunk)
         }
       }),
     )
 
     cleanupFns.push(
-      aiEventClient.on('stream:chunk:tool-result', (e) => {
-        const streamId = e.payload.streamId
-        const conversationId = streamToConversation.get(streamId)
-        if (!conversationId) return
+      aiEventClient.on('tools:call:completed', (e) => {
+        const {
+          streamId,
+          toolCallId,
+          toolName,
+          result,
+          duration,
+          messageId,
+          timestamp,
+          clientId,
+        } = e.payload
 
-        const chunk: Chunk = {
-          id: `chunk-${Date.now()}-${Math.random()}`,
-          type: 'tool_result',
-          messageId: e.payload.messageId,
-          toolCallId: e.payload.toolCallId,
-          content: e.payload.result,
-          timestamp: e.payload.timestamp,
-          chunkCount: 1,
-        }
+        const conversationId =
+          clientId ||
+          (streamId ? streamToConversation.get(streamId) : undefined)
+        if (!conversationId || !state.conversations[conversationId]) return
 
         const conv = state.conversations[conversationId]
-        if (conv?.type === 'client') {
-          addChunkToMessage(conversationId, chunk)
-        } else {
+
+        const chunk: Chunk = {
+          id: `chunk-tool-result-${toolCallId}-${Date.now()}`,
+          type: 'tool_result',
+          messageId: messageId,
+          toolCallId,
+          toolName,
+          result,
+          duration,
+          timestamp,
+          chunkCount: 1,
+        }
+
+        if (conv.type === 'client' && messageId) {
+          const messageIndex = conv.messages.findIndex(
+            (m) => m.id === messageId,
+          )
+          if (messageIndex !== -1) {
+            queueMessageChunk(conversationId, messageIndex, chunk)
+          } else {
+            for (let i = conv.messages.length - 1; i >= 0; i--) {
+              if (conv.messages[i]?.role === 'assistant') {
+                queueMessageChunk(conversationId, i, chunk)
+                break
+              }
+            }
+          }
+        } else {
+          addChunk(conversationId, chunk)
+        }
+
+        for (let i = conv.messages.length - 1; i >= 0; i--) {
+          const message = conv.messages[i]
+          if (!message?.toolCalls) continue
+
+          const toolCallIndex = message.toolCalls.findIndex(
+            (t) => t.id === toolCallId,
+          )
+          if (toolCallIndex >= 0) {
+            updateToolCall(conversationId, i, toolCallIndex, {
+              duration,
+              result,
+            })
+            return
+          }
+        }
+      }),
+    )
+
+    // ============= Stream Events =============
+
+    cleanupFns.push(
+      aiEventClient.on('text:chunk:content', (e) => {
+        const streamId = e.payload.streamId
+        const conversationId = streamToConversation.get(streamId)
+        if (!conversationId) return
+
+        const chunk: Chunk = {
+          id: `chunk-${Date.now()}-${Math.random()}`,
+          type: 'content',
+          messageId: e.payload.messageId,
+          content: e.payload.content,
+          delta: e.payload.delta,
+          timestamp: e.payload.timestamp,
+          chunkCount: 1,
+        }
+
+        const conv = state.conversations[conversationId]
+        if (conv?.type === 'client') {
+          addChunkToMessage(conversationId, chunk)
+        } else {
+          ensureMessageForChunk(
+            conversationId,
+            e.payload.messageId,
+            e.payload.timestamp,
+          )
+          addChunk(conversationId, chunk)
+        }
+
+        if (e.payload.messageId) {
+          const messageIndex = conv?.messages.findIndex(
+            (msg) => msg.id === e.payload.messageId,
+          )
+          if (messageIndex !== undefined && messageIndex >= 0) {
+            updateMessage(conversationId, messageIndex, {
+              content: e.payload.content,
+            })
+          }
+        }
+      }),
+    )
+
+    cleanupFns.push(
+      aiEventClient.on('text:chunk:tool-call', (e) => {
+        const streamId = e.payload.streamId
+        const conversationId = streamToConversation.get(streamId)
+        if (!conversationId) return
+
+        const chunk: Chunk = {
+          id: `chunk-${Date.now()}-${Math.random()}`,
+          type: 'tool_call',
+          messageId: e.payload.messageId,
+          toolCallId: e.payload.toolCallId,
+          toolName: e.payload.toolName,
+          arguments: e.payload.arguments,
+          timestamp: e.payload.timestamp,
+          chunkCount: 1,
+        }
+
+        const conv = state.conversations[conversationId]
+        if (conv?.type === 'client') {
+          addChunkToMessage(conversationId, chunk)
+        } else {
+          ensureMessageForChunk(
+            conversationId,
+            e.payload.messageId,
+            e.payload.timestamp,
+          )
+          addChunk(conversationId, chunk)
+        }
+
+        if (e.payload.messageId) {
+          const messageIndex = conv?.messages.findIndex(
+            (msg) => msg.id === e.payload.messageId,
+          )
+          if (messageIndex !== undefined && messageIndex >= 0) {
+            const message = conv?.messages[messageIndex]
+            if (!message) return
+
+            const toolCalls = message.toolCalls || []
+            const existingToolIndex = toolCalls.findIndex(
+              (t: ToolCall) => t.id === e.payload.toolCallId,
+            )
+
+            const toolCall: ToolCall = {
+              id: e.payload.toolCallId,
+              name: e.payload.toolName,
+              arguments: e.payload.arguments,
+              state: 'input-streaming',
+            }
+
+            if (existingToolIndex >= 0) {
+              updateToolCall(
+                conversationId,
+                messageIndex,
+                existingToolIndex,
+                toolCall,
+              )
+            } else {
+              setToolCalls(conversationId, messageIndex, [
+                ...toolCalls,
+                toolCall,
+              ])
+            }
+          }
+        }
+      }),
+    )
+
+    cleanupFns.push(
+      aiEventClient.on('text:chunk:tool-result', (e) => {
+        const streamId = e.payload.streamId
+        const conversationId = streamToConversation.get(streamId)
+        if (!conversationId) return
+
+        const chunk: Chunk = {
+          id: `chunk-${Date.now()}-${Math.random()}`,
+          type: 'tool_result',
+          messageId: e.payload.messageId,
+          toolCallId: e.payload.toolCallId,
+          result: e.payload.result,
+          timestamp: e.payload.timestamp,
+          chunkCount: 1,
+        }
+
+        const conv = state.conversations[conversationId]
+        if (conv?.type === 'client') {
+          addChunkToMessage(conversationId, chunk)
+        } else {
           ensureMessageForChunk(
             conversationId,
             e.payload.messageId,
@@ -1005,7 +1261,7 @@ export const AIProvider: ParentComponent = (props) => {
     )
 
     cleanupFns.push(
-      aiEventClient.on('stream:chunk:thinking', (e) => {
+      aiEventClient.on('text:chunk:thinking', (e) => {
         const streamId = e.payload.streamId
         const conversationId = streamToConversation.get(streamId)
         if (!conversationId) return
@@ -1046,7 +1302,7 @@ export const AIProvider: ParentComponent = (props) => {
     )
 
     cleanupFns.push(
-      aiEventClient.on('stream:chunk:done', (e) => {
+      aiEventClient.on('text:chunk:done', (e) => {
         const streamId = e.payload.streamId
         const conversationId = streamToConversation.get(streamId)
         if (!conversationId) return
@@ -1089,7 +1345,7 @@ export const AIProvider: ParentComponent = (props) => {
     )
 
     cleanupFns.push(
-      aiEventClient.on('stream:chunk:error', (e) => {
+      aiEventClient.on('text:chunk:error', (e) => {
         const streamId = e.payload.streamId
         const conversationId = streamToConversation.get(streamId)
         if (!conversationId) return
@@ -1123,20 +1379,7 @@ export const AIProvider: ParentComponent = (props) => {
     )
 
     cleanupFns.push(
-      aiEventClient.on('stream:ended', (e) => {
-        const streamId = e.payload.streamId
-        const conversationId = streamToConversation.get(streamId)
-        if (!conversationId) return
-
-        updateConversation(conversationId, {
-          status: 'completed',
-          completedAt: e.payload.timestamp,
-        })
-      }),
-    )
-
-    cleanupFns.push(
-      aiEventClient.on('stream:approval-requested', (e) => {
+      aiEventClient.on('tools:approval:requested', (e) => {
         const {
           streamId,
           messageId,
@@ -1145,9 +1388,11 @@ export const AIProvider: ParentComponent = (props) => {
           input,
           approvalId,
           timestamp,
+          clientId,
         } = e.payload
 
-        const conversationId = streamToConversation.get(streamId)
+        const conversationId =
+          clientId || streamToConversation.get(streamId) || ''
         if (!conversationId) return
 
         const conv = state.conversations[conversationId]
@@ -1192,112 +1437,10 @@ export const AIProvider: ParentComponent = (props) => {
       }),
     )
 
-    // ============= Processor Events =============
-
-    cleanupFns.push(
-      aiEventClient.on('processor:text-updated', (e) => {
-        const streamId = e.payload.streamId
-
-        let conversationId = streamToConversation.get(streamId)
-
-        if (!conversationId) {
-          const activeClients = Object.values(state.conversations)
-            .filter((c) => c.type === 'client' && c.status === 'active')
-            .sort((a, b) => b.startedAt - a.startedAt)
-
-          if (activeClients.length > 0 && activeClients[0]) {
-            conversationId = activeClients[0].id
-            streamToConversation.set(streamId, conversationId)
-          }
-        }
-
-        if (!conversationId) return
-
-        const conv = state.conversations[conversationId]
-        if (!conv) return
-
-        // Only update existing assistant messages, don't create new ones
-        // (client:message-appended is responsible for creating messages)
-        const lastMessage = conv.messages[conv.messages.length - 1]
-        if (lastMessage && lastMessage.role === 'assistant') {
-          updateMessage(conversationId, conv.messages.length - 1, {
-            content: e.payload.content,
-          })
-        }
-      }),
-    )
-
-    cleanupFns.push(
-      aiEventClient.on('processor:tool-call-state-changed', (e) => {
-        const streamId = e.payload.streamId
-        const conversationId = streamToConversation.get(streamId)
-
-        if (!conversationId || !state.conversations[conversationId]) return
-
-        const conv = state.conversations[conversationId]
-        const lastMessage = conv.messages[conv.messages.length - 1]
-
-        if (lastMessage && lastMessage.role === 'assistant') {
-          const toolCalls = lastMessage.toolCalls || []
-          const existingToolIndex = toolCalls.findIndex(
-            (t) => t.id === e.payload.toolCallId,
-          )
-
-          const toolCall: ToolCall = {
-            id: e.payload.toolCallId,
-            name: e.payload.toolName,
-            arguments: JSON.stringify(e.payload.arguments, null, 2),
-            state: e.payload.state,
-          }
-
-          if (existingToolIndex >= 0) {
-            updateToolCall(
-              conversationId,
-              conv.messages.length - 1,
-              existingToolIndex,
-              toolCall,
-            )
-          } else {
-            setToolCalls(conversationId, conv.messages.length - 1, [
-              ...toolCalls,
-              toolCall,
-            ])
-          }
-        }
-      }),
-    )
-
-    cleanupFns.push(
-      aiEventClient.on('processor:tool-result-state-changed', (e) => {
-        const streamId = e.payload.streamId
-        const conversationId = streamToConversation.get(streamId)
-
-        if (!conversationId || !state.conversations[conversationId]) return
-
-        const conv = state.conversations[conversationId]
-
-        for (let i = conv.messages.length - 1; i >= 0; i--) {
-          const message = conv.messages[i]
-          if (!message?.toolCalls) continue
-
-          const toolCallIndex = message.toolCalls.findIndex(
-            (t) => t.id === e.payload.toolCallId,
-          )
-          if (toolCallIndex >= 0) {
-            updateToolCall(conversationId, i, toolCallIndex, {
-              result: e.payload.content,
-              state: e.payload.error ? 'error' : e.payload.state,
-            })
-            return
-          }
-        }
-      }),
-    )
-
     // ============= Chat Events (for usage tracking) =============
 
     cleanupFns.push(
-      aiEventClient.on('text:started', (e) => {
+      aiEventClient.on('text:request:started', (e) => {
         const streamId = e.payload.streamId
         const model = e.payload.model
         const provider = e.payload.provider
@@ -1305,7 +1448,13 @@ export const AIProvider: ParentComponent = (props) => {
 
         if (clientId && state.conversations[clientId]) {
           streamToConversation.set(streamId, clientId)
-          updateConversation(clientId, { status: 'active', ...e.payload })
+          requestToConversation.set(e.payload.requestId, clientId)
+          updateConversation(clientId, {
+            status: 'active',
+            ...e.payload,
+            systemPrompts: e.payload.systemPrompts,
+            hasChat: true,
+          })
           return
         }
 
@@ -1315,7 +1464,12 @@ export const AIProvider: ParentComponent = (props) => {
 
         if (activeClient) {
           streamToConversation.set(streamId, activeClient.id)
-          updateConversation(activeClient.id, { ...e.payload })
+          requestToConversation.set(e.payload.requestId, activeClient.id)
+          updateConversation(activeClient.id, {
+            ...e.payload,
+            systemPrompts: e.payload.systemPrompts,
+            hasChat: true,
+          })
         } else {
           const existingServerConv = Object.values(state.conversations).find(
             (c) => c.type === 'server' && c.model === model,
@@ -1323,22 +1477,33 @@ export const AIProvider: ParentComponent = (props) => {
 
           if (existingServerConv) {
             streamToConversation.set(streamId, existingServerConv.id)
+            requestToConversation.set(
+              e.payload.requestId,
+              existingServerConv.id,
+            )
             updateConversation(existingServerConv.id, {
               status: 'active',
               ...e.payload,
+              systemPrompts: e.payload.systemPrompts,
+              hasChat: true,
             })
           } else {
             const serverId = `server-${model}`
             getOrCreateConversation(serverId, 'server', `${model} Server`)
             streamToConversation.set(streamId, serverId)
-            updateConversation(serverId, { ...e.payload })
+            requestToConversation.set(e.payload.requestId, serverId)
+            updateConversation(serverId, {
+              ...e.payload,
+              systemPrompts: e.payload.systemPrompts,
+              hasChat: true,
+            })
           }
         }
       }),
     )
 
     cleanupFns.push(
-      aiEventClient.on('text:completed', (e) => {
+      aiEventClient.on('text:request:completed', (e) => {
         const { requestId, usage } = e.payload
 
         const conversationId = requestToConversation.get(requestId)
@@ -1359,20 +1524,7 @@ export const AIProvider: ParentComponent = (props) => {
     )
 
     cleanupFns.push(
-      aiEventClient.on('text:iteration', (e) => {
-        const { requestId, iterationNumber } = e.payload
-
-        const conversationId = requestToConversation.get(requestId)
-        if (conversationId && state.conversations[conversationId]) {
-          updateConversation(conversationId, {
-            iterationCount: iterationNumber,
-          })
-        }
-      }),
-    )
-
-    cleanupFns.push(
-      aiEventClient.on('usage:tokens', (e) => {
+      aiEventClient.on('text:usage', (e) => {
         const { requestId, usage, messageId } = e.payload
 
         const conversationId = requestToConversation.get(requestId)
@@ -1383,81 +1535,10 @@ export const AIProvider: ParentComponent = (props) => {
       }),
     )
 
-    // ============= Tool Call Completed (with duration) =============
-
-    cleanupFns.push(
-      aiEventClient.on('tool:call-completed', (e) => {
-        const {
-          streamId,
-          toolCallId,
-          toolName,
-          result,
-          duration,
-          messageId,
-          timestamp,
-        } = e.payload
-
-        const conversationId = streamToConversation.get(streamId)
-        if (!conversationId || !state.conversations[conversationId]) return
-
-        const conv = state.conversations[conversationId]
-
-        // Add a tool_result chunk to show the result in the chunks view
-        const chunk: Chunk = {
-          id: `chunk-tool-result-${toolCallId}-${Date.now()}`,
-          type: 'tool_result',
-          messageId: messageId,
-          toolCallId,
-          toolName,
-          result,
-          duration,
-          timestamp,
-          chunkCount: 1,
-        }
-
-        // Add chunk to message if it's a client conversation, otherwise to conversation
-        if (conv.type === 'client' && messageId) {
-          const messageIndex = conv.messages.findIndex(
-            (m) => m.id === messageId,
-          )
-          if (messageIndex !== -1) {
-            queueMessageChunk(conversationId, messageIndex, chunk)
-          } else {
-            // If message not found, add to last assistant message
-            for (let i = conv.messages.length - 1; i >= 0; i--) {
-              if (conv.messages[i]?.role === 'assistant') {
-                queueMessageChunk(conversationId, i, chunk)
-                break
-              }
-            }
-          }
-        } else {
-          addChunk(conversationId, chunk)
-        }
-
-        // Update the tool call with duration
-        for (let i = conv.messages.length - 1; i >= 0; i--) {
-          const message = conv.messages[i]
-          if (!message?.toolCalls) continue
-
-          const toolCallIndex = message.toolCalls.findIndex(
-            (t) => t.id === toolCallId,
-          )
-          if (toolCallIndex >= 0) {
-            updateToolCall(conversationId, i, toolCallIndex, {
-              duration,
-              result,
-            })
-            return
-          }
-        }
-      }),
-    )
-
     // ============= Summarize Events =============
 
     cleanupFns.push(
-      aiEventClient.on('summarize:started', (e) => {
+      aiEventClient.on('summarize:request:started', (e) => {
         const { requestId, model, inputLength, timestamp, clientId } = e.payload
 
         // Try to find an active conversation to attach to, or create a new one
@@ -1505,7 +1586,7 @@ export const AIProvider: ParentComponent = (props) => {
     )
 
     cleanupFns.push(
-      aiEventClient.on('summarize:completed', (e) => {
+      aiEventClient.on('summarize:request:completed', (e) => {
         const { requestId, outputLength, duration } = e.payload
 
         const conversationId = requestToConversation.get(requestId)
@@ -1533,6 +1614,290 @@ export const AIProvider: ParentComponent = (props) => {
       }),
     )
 
+    // ============= Image Events =============
+
+    cleanupFns.push(
+      aiEventClient.on('image:request:started', (e) => {
+        const { requestId, clientId, timestamp } = e.payload
+
+        let conversationId = clientId
+        if (!conversationId || !state.conversations[conversationId]) {
+          conversationId = `image-${requestId}`
+          getOrCreateConversation(
+            conversationId,
+            'server',
+            `Image (${requestId.substring(0, 8)})`,
+          )
+        }
+
+        addActivityEvent(conversationId, 'imageEvents', {
+          id: requestId,
+          name: 'image:request:started',
+          timestamp,
+          payload: e.payload,
+        })
+      }),
+    )
+
+    cleanupFns.push(
+      aiEventClient.on('image:request:completed', (e) => {
+        const { requestId, clientId, timestamp } = e.payload
+
+        let conversationId = clientId
+        if (!conversationId || !state.conversations[conversationId]) {
+          conversationId = `image-${requestId}`
+          getOrCreateConversation(
+            conversationId,
+            'server',
+            `Image (${requestId.substring(0, 8)})`,
+          )
+        }
+
+        addActivityEvent(conversationId, 'imageEvents', {
+          id: requestId,
+          name: 'image:request:completed',
+          timestamp,
+          payload: e.payload,
+        })
+      }),
+    )
+
+    cleanupFns.push(
+      aiEventClient.on('image:usage', (e) => {
+        const { requestId, clientId, timestamp } = e.payload
+
+        let conversationId = clientId
+        if (!conversationId || !state.conversations[conversationId]) {
+          conversationId = `image-${requestId}`
+          getOrCreateConversation(
+            conversationId,
+            'server',
+            `Image (${requestId.substring(0, 8)})`,
+          )
+        }
+
+        addActivityEvent(conversationId, 'imageEvents', {
+          id: requestId,
+          name: 'image:usage',
+          timestamp,
+          payload: e.payload,
+        })
+      }),
+    )
+
+    // ============= Speech Events =============
+
+    cleanupFns.push(
+      aiEventClient.on('speech:request:started', (e) => {
+        const { requestId, clientId, timestamp } = e.payload
+
+        let conversationId = clientId
+        if (!conversationId || !state.conversations[conversationId]) {
+          conversationId = `speech-${requestId}`
+          getOrCreateConversation(
+            conversationId,
+            'server',
+            `Speech (${requestId.substring(0, 8)})`,
+          )
+        }
+
+        addActivityEvent(conversationId, 'speechEvents', {
+          id: requestId,
+          name: 'speech:request:started',
+          timestamp,
+          payload: e.payload,
+        })
+      }),
+    )
+
+    cleanupFns.push(
+      aiEventClient.on('speech:request:completed', (e) => {
+        const { requestId, clientId, timestamp } = e.payload
+
+        let conversationId = clientId
+        if (!conversationId || !state.conversations[conversationId]) {
+          conversationId = `speech-${requestId}`
+          getOrCreateConversation(
+            conversationId,
+            'server',
+            `Speech (${requestId.substring(0, 8)})`,
+          )
+        }
+
+        addActivityEvent(conversationId, 'speechEvents', {
+          id: requestId,
+          name: 'speech:request:completed',
+          timestamp,
+          payload: e.payload,
+        })
+      }),
+    )
+
+    cleanupFns.push(
+      aiEventClient.on('speech:usage', (e) => {
+        const { requestId, clientId, timestamp } = e.payload
+
+        let conversationId = clientId
+        if (!conversationId || !state.conversations[conversationId]) {
+          conversationId = `speech-${requestId}`
+          getOrCreateConversation(
+            conversationId,
+            'server',
+            `Speech (${requestId.substring(0, 8)})`,
+          )
+        }
+
+        addActivityEvent(conversationId, 'speechEvents', {
+          id: requestId,
+          name: 'speech:usage',
+          timestamp,
+          payload: e.payload,
+        })
+      }),
+    )
+
+    // ============= Transcription Events =============
+
+    cleanupFns.push(
+      aiEventClient.on('transcription:request:started', (e) => {
+        const { requestId, clientId, timestamp } = e.payload
+
+        let conversationId = clientId
+        if (!conversationId || !state.conversations[conversationId]) {
+          conversationId = `transcription-${requestId}`
+          getOrCreateConversation(
+            conversationId,
+            'server',
+            `Transcription (${requestId.substring(0, 8)})`,
+          )
+        }
+
+        addActivityEvent(conversationId, 'transcriptionEvents', {
+          id: requestId,
+          name: 'transcription:request:started',
+          timestamp,
+          payload: e.payload,
+        })
+      }),
+    )
+
+    cleanupFns.push(
+      aiEventClient.on('transcription:request:completed', (e) => {
+        const { requestId, clientId, timestamp } = e.payload
+
+        let conversationId = clientId
+        if (!conversationId || !state.conversations[conversationId]) {
+          conversationId = `transcription-${requestId}`
+          getOrCreateConversation(
+            conversationId,
+            'server',
+            `Transcription (${requestId.substring(0, 8)})`,
+          )
+        }
+
+        addActivityEvent(conversationId, 'transcriptionEvents', {
+          id: requestId,
+          name: 'transcription:request:completed',
+          timestamp,
+          payload: e.payload,
+        })
+      }),
+    )
+
+    cleanupFns.push(
+      aiEventClient.on('transcription:usage', (e) => {
+        const { requestId, clientId, timestamp } = e.payload
+
+        let conversationId = clientId
+        if (!conversationId || !state.conversations[conversationId]) {
+          conversationId = `transcription-${requestId}`
+          getOrCreateConversation(
+            conversationId,
+            'server',
+            `Transcription (${requestId.substring(0, 8)})`,
+          )
+        }
+
+        addActivityEvent(conversationId, 'transcriptionEvents', {
+          id: requestId,
+          name: 'transcription:usage',
+          timestamp,
+          payload: e.payload,
+        })
+      }),
+    )
+
+    // ============= Video Events =============
+
+    cleanupFns.push(
+      aiEventClient.on('video:request:started', (e) => {
+        const { requestId, clientId, timestamp } = e.payload
+
+        let conversationId = clientId
+        if (!conversationId || !state.conversations[conversationId]) {
+          conversationId = `video-${requestId}`
+          getOrCreateConversation(
+            conversationId,
+            'server',
+            `Video (${requestId.substring(0, 8)})`,
+          )
+        }
+
+        addActivityEvent(conversationId, 'videoEvents', {
+          id: requestId,
+          name: 'video:request:started',
+          timestamp,
+          payload: e.payload,
+        })
+      }),
+    )
+
+    cleanupFns.push(
+      aiEventClient.on('video:request:completed', (e) => {
+        const { requestId, clientId, timestamp } = e.payload
+
+        let conversationId = clientId
+        if (!conversationId || !state.conversations[conversationId]) {
+          conversationId = `video-${requestId}`
+          getOrCreateConversation(
+            conversationId,
+            'server',
+            `Video (${requestId.substring(0, 8)})`,
+          )
+        }
+
+        addActivityEvent(conversationId, 'videoEvents', {
+          id: requestId,
+          name: 'video:request:completed',
+          timestamp,
+          payload: e.payload,
+        })
+      }),
+    )
+
+    cleanupFns.push(
+      aiEventClient.on('video:usage', (e) => {
+        const { requestId, clientId, timestamp } = e.payload
+
+        let conversationId = clientId
+        if (!conversationId || !state.conversations[conversationId]) {
+          conversationId = `video-${requestId}`
+          getOrCreateConversation(
+            conversationId,
+            'server',
+            `Video (${requestId.substring(0, 8)})`,
+          )
+        }
+
+        addActivityEvent(conversationId, 'videoEvents', {
+          id: requestId,
+          name: 'video:usage',
+          timestamp,
+          payload: e.payload,
+        })
+      }),
+    )
+
     // Cleanup all listeners on unmount
     onCleanup(() => {
       for (const cleanup of cleanupFns) {