@tanstack/ai-devtools-core 0.2.1 → 0.2.3

package/dist/esm/store/ai-context.js

@@ -129,6 +129,10 @@ const AIProvider = (props) => {
         label,
         messages: [],
         chunks: [],
+        imageEvents: [],
+        speechEvents: [],
+        transcriptionEvents: [],
+        videoEvents: [],
         status: "active",
         startedAt: Date.now()
       });
@@ -170,6 +174,7 @@ const AIProvider = (props) => {
         return;
       }
     }
+    addChunk(conversationId, chunk);
   }
   function updateMessageUsage(conversationId, messageId, cumulativeUsage) {
     const conv = state.conversations[conversationId];
@@ -240,6 +245,21 @@ const AIProvider = (props) => {
     if (!state.conversations[conversationId]) return;
     queueChunk(conversationId, chunk);
   }
+  function addActivityEvent(conversationId, activity, event) {
+    if (!state.conversations[conversationId]) return;
+    setState("conversations", conversationId, activity, produce((events) => {
+      if (!events) return [event];
+      events.push(event);
+      return events;
+    }));
+    const activityFlagMap = {
+      imageEvents: "hasImage",
+      speechEvents: "hasSpeech",
+      transcriptionEvents: "hasTranscription",
+      videoEvents: "hasVideo"
+    };
+    setState("conversations", conversationId, activityFlagMap[activity], true);
+  }
   function ensureMessageForChunk(conversationId, messageId, timestamp) {
     if (!messageId) return;
     const conv = state.conversations[conversationId];
@@ -264,46 +284,115 @@ const AIProvider = (props) => {
         provider: "Client"
       });
     }));
-    cleanupFns.push(aiEventClient.on("client:message-sent", (e) => {
-      const clientId = e.payload.clientId;
-      if (!state.conversations[clientId]) {
-        getOrCreateConversation(clientId, "client", `Client Chat (${clientId.substring(0, 8)})`);
+    cleanupFns.push(aiEventClient.on("text:message:created", (e) => {
+      const {
+        clientId,
+        streamId,
+        messageId,
+        role,
+        content,
+        timestamp
+      } = e.payload;
+      const conversationId = clientId || (streamId ? streamToConversation.get(streamId) : void 0);
+      if (!conversationId) return;
+      if (role === "tool" || role === "system") return;
+      if (!state.conversations[conversationId]) {
+        getOrCreateConversation(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
+          };
+        }
+        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) : void 0
+          };
+        }
+        if (part.type === "tool-result") {
+          return {
+            type: "tool-result",
+            toolCallId: part.toolCallId,
+            content: part.content,
+            state: part.state,
+            error: part.error
+          };
+        }
+        return {
+          type: "thinking",
+          content: part.content
+        };
       });
-      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;
+      }
+      if (role === "assistant" && source === "client" && !content && (!toolCalls || toolCalls.length === 0)) {
+        return;
+      }
+      const messagePayload = {
+        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;
-      if (role === "user") return;
-      if (!state.conversations[clientId]) 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") {
-        addMessage(clientId, {
-          id: e.payload.messageId,
-          role: "tool",
-          content: e.payload.contentPreview,
-          timestamp: e.payload.timestamp,
-          source: "client"
-        });
+    cleanupFns.push(aiEventClient.on("text:message:user", (e) => {
+      const {
+        clientId,
+        streamId,
+        messageId,
+        content,
+        timestamp
+      } = e.payload;
+      const conversationId = clientId || (streamId ? streamToConversation.get(streamId) : void 0);
+      if (!conversationId) return;
+      const conv = state.conversations[conversationId];
+      if (!conv) return;
+      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) => {
+    cleanupFns.push(aiEventClient.on("client:loading:changed", (e) => {
       const clientId = e.payload.clientId;
       if (state.conversations[clientId]) {
         updateConversation(clientId, {
@@ -320,7 +409,7 @@ const AIProvider = (props) => {
         });
       }
     }));
-    cleanupFns.push(aiEventClient.on("client:messages-cleared", (e) => {
+    cleanupFns.push(aiEventClient.on("client:messages:cleared", (e) => {
       const clientId = e.payload.clientId;
       if (state.conversations[clientId]) {
         updateConversation(clientId, {
@@ -340,7 +429,7 @@ const AIProvider = (props) => {
         });
       }
     }));
-    cleanupFns.push(aiEventClient.on("client:error-changed", (e) => {
+    cleanupFns.push(aiEventClient.on("client:error:changed", (e) => {
       const clientId = e.payload.clientId;
       if (state.conversations[clientId] && e.payload.error) {
         updateConversation(clientId, {
@@ -348,31 +437,79 @@ const AIProvider = (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;
+    cleanupFns.push(aiEventClient.on("tools:result:added", (e) => {
+      const {
+        clientId,
+        toolCallId,
+        toolName,
+        output,
+        state: resultState,
+        timestamp
+      } = e.payload;
+      if (!clientId) return;
       if (!state.conversations[clientId]) return;
       const conv = state.conversations[clientId];
-      const messageIndex = conv.messages.findIndex((m) => m.id === messageId);
-      if (messageIndex >= 0) {
-        updateMessage(clientId, messageIndex, {
-          content,
-          model: conv.model
-        });
+      const chunk = {
+        id: `chunk-tool-result-${toolCallId}-${Date.now()}`,
+        type: "tool_result",
+        toolCallId,
+        toolName,
+        result: output,
+        timestamp,
+        chunkCount: 1,
+        isClientTool: true
+      };
+      for (let messageIndex = conv.messages.length - 1; messageIndex >= 0; messageIndex--) {
+        const message = conv.messages[messageIndex];
+        if (!message?.toolCalls) continue;
+        const toolCallIndex = message.toolCalls.findIndex((t) => t.id === toolCallId);
+        if (toolCallIndex >= 0) {
+          updateToolCall(clientId, messageIndex, toolCallIndex, {
+            result: output,
+            state: resultState === "output-error" ? "error" : "complete"
+          });
+          chunk.messageId = message.id;
+          addChunkToMessage(clientId, chunk);
+          return;
+        }
+      }
+      addChunkToMessage(clientId, chunk);
+    }));
+    cleanupFns.push(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];
+      for (let messageIndex = conv.messages.length - 1; messageIndex >= 0; messageIndex--) {
+        const message = conv.messages[messageIndex];
+        if (!message?.toolCalls) continue;
+        const toolCallIndex = message.toolCalls.findIndex((t) => t.id === toolCallId);
+        if (toolCallIndex >= 0) {
+          updateToolCall(clientId, messageIndex, toolCallIndex, {
+            state: approved ? "approved" : "denied",
+            approvalRequired: false
+          });
+          return;
+        }
       }
     }));
-    cleanupFns.push(aiEventClient.on("client:tool-call-updated", (e) => {
+    cleanupFns.push(aiEventClient.on("tools:call:updated", (e) => {
       const {
         clientId,
+        streamId,
         messageId,
         toolCallId,
         toolName,
         state: toolCallState,
         arguments: args
       } = e.payload;
-      if (!state.conversations[clientId]) return;
-      const conv = state.conversations[clientId];
+      const conversationId = clientId || (streamId ? streamToConversation.get(streamId) : void 0);
+      if (!conversationId || !state.conversations[conversationId]) return;
+      const conv = state.conversations[conversationId];
       const messageIndex = conv.messages.findIndex((m) => m.id === messageId);
       if (messageIndex === -1) return;
       const message = conv.messages[messageIndex];
@@ -382,93 +519,98 @@ const AIProvider = (props) => {
       const toolCall = {
         id: toolCallId,
         name: toolName,
-        arguments: JSON.stringify(args, null, 2),
+        arguments: args,
         state: toolCallState
       };
       if (existingToolIndex >= 0) {
-        updateToolCall(clientId, messageIndex, existingToolIndex, toolCall);
+        updateToolCall(conversationId, messageIndex, existingToolIndex, toolCall);
       } else {
-        setToolCalls(clientId, messageIndex, [...toolCalls, toolCall]);
+        setToolCalls(conversationId, messageIndex, [...toolCalls, toolCall]);
       }
     }));
-    cleanupFns.push(aiEventClient.on("client:approval-requested", (e) => {
+    cleanupFns.push(aiEventClient.on("tools:input:available", (e) => {
       const {
-        clientId,
+        streamId,
         messageId,
         toolCallId,
-        approvalId
+        toolName,
+        input,
+        timestamp,
+        clientId
       } = 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"
-      });
-    }));
-    cleanupFns.push(aiEventClient.on("tool:result-added", (e) => {
-      const {
-        clientId,
+      const conversationId = clientId || (streamId ? streamToConversation.get(streamId) : void 0);
+      if (!conversationId) return;
+      const chunk = {
+        id: `chunk-${Date.now()}-${Math.random()}`,
+        type: "tool_call",
+        messageId,
         toolCallId,
         toolName,
-        output,
-        state: resultState,
-        timestamp
-      } = e.payload;
-      if (!state.conversations[clientId]) return;
-      const conv = state.conversations[clientId];
-      for (let messageIndex = conv.messages.length - 1; messageIndex >= 0; messageIndex--) {
-        const message = conv.messages[messageIndex];
-        if (!message?.toolCalls) continue;
-        const toolCallIndex = message.toolCalls.findIndex((t) => t.id === toolCallId);
-        if (toolCallIndex >= 0) {
-          updateToolCall(clientId, messageIndex, toolCallIndex, {
-            result: output,
-            state: resultState === "output-error" ? "error" : "complete"
-          });
-          const chunk = {
-            id: `chunk-tool-result-${toolCallId}-${Date.now()}`,
-            type: "tool_result",
-            messageId: message.id,
-            toolCallId,
-            toolName,
-            result: output,
-            timestamp,
-            chunkCount: 1
-          };
-          addChunkToMessage(clientId, chunk);
-          return;
-        }
+        arguments: JSON.stringify(input),
+        timestamp,
+        chunkCount: 1
+      };
+      const conv = state.conversations[conversationId];
+      if (conv?.type === "client") {
+        addChunkToMessage(conversationId, chunk);
+      } else {
+        addChunk(conversationId, chunk);
       }
     }));
-    cleanupFns.push(aiEventClient.on("tool:approval-responded", (e) => {
+    cleanupFns.push(aiEventClient.on("tools:call:completed", (e) => {
       const {
-        clientId,
+        streamId,
         toolCallId,
-        approved
+        toolName,
+        result,
+        duration,
+        messageId,
+        timestamp,
+        clientId
       } = e.payload;
-      if (!state.conversations[clientId]) return;
-      const conv = state.conversations[clientId];
-      for (let messageIndex = conv.messages.length - 1; messageIndex >= 0; messageIndex--) {
-        const message = conv.messages[messageIndex];
+      const conversationId = clientId || (streamId ? streamToConversation.get(streamId) : void 0);
+      if (!conversationId || !state.conversations[conversationId]) return;
+      const conv = state.conversations[conversationId];
+      const chunk = {
+        id: `chunk-tool-result-${toolCallId}-${Date.now()}`,
+        type: "tool_result",
+        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(clientId, messageIndex, toolCallIndex, {
-            state: approved ? "approved" : "denied",
-            approvalRequired: false
+          updateToolCall(conversationId, i, toolCallIndex, {
+            duration,
+            result
           });
           return;
         }
       }
     }));
-    cleanupFns.push(aiEventClient.on("stream:chunk:content", (e) => {
+    cleanupFns.push(aiEventClient.on("text:chunk:content", (e) => {
       const streamId = e.payload.streamId;
       const conversationId = streamToConversation.get(streamId);
       if (!conversationId) return;
@@ -488,8 +630,16 @@ const AIProvider = (props) => {
         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 !== void 0 && messageIndex >= 0) {
+          updateMessage(conversationId, messageIndex, {
+            content: e.payload.content
+          });
+        }
+      }
     }));
-    cleanupFns.push(aiEventClient.on("stream:chunk:tool-call", (e) => {
+    cleanupFns.push(aiEventClient.on("text:chunk:tool-call", (e) => {
       const streamId = e.payload.streamId;
       const conversationId = streamToConversation.get(streamId);
       if (!conversationId) return;
@@ -510,8 +660,28 @@ const AIProvider = (props) => {
         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 !== void 0 && messageIndex >= 0) {
+          const message = conv?.messages[messageIndex];
+          if (!message) return;
+          const toolCalls = message.toolCalls || [];
+          const existingToolIndex = toolCalls.findIndex((t) => t.id === e.payload.toolCallId);
+          const 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("stream:chunk:tool-result", (e) => {
+    cleanupFns.push(aiEventClient.on("text:chunk:tool-result", (e) => {
       const streamId = e.payload.streamId;
       const conversationId = streamToConversation.get(streamId);
       if (!conversationId) return;
@@ -520,7 +690,7 @@ const AIProvider = (props) => {
         type: "tool_result",
         messageId: e.payload.messageId,
         toolCallId: e.payload.toolCallId,
-        content: e.payload.result,
+        result: e.payload.result,
         timestamp: e.payload.timestamp,
         chunkCount: 1
       };
@@ -546,7 +716,7 @@ const AIProvider = (props) => {
         }
       }
     }));
-    cleanupFns.push(aiEventClient.on("stream:chunk:thinking", (e) => {
+    cleanupFns.push(aiEventClient.on("text:chunk:thinking", (e) => {
       const streamId = e.payload.streamId;
       const conversationId = streamToConversation.get(streamId);
       if (!conversationId) return;
@@ -575,7 +745,7 @@ const AIProvider = (props) => {
         addChunk(conversationId, chunk);
       }
     }));
-    cleanupFns.push(aiEventClient.on("stream:chunk:done", (e) => {
+    cleanupFns.push(aiEventClient.on("text:chunk:done", (e) => {
       const streamId = e.payload.streamId;
       const conversationId = streamToConversation.get(streamId);
       if (!conversationId) return;
@@ -605,7 +775,7 @@ const AIProvider = (props) => {
         completedAt: e.payload.timestamp
       });
     }));
-    cleanupFns.push(aiEventClient.on("stream:chunk:error", (e) => {
+    cleanupFns.push(aiEventClient.on("text:chunk:error", (e) => {
       const streamId = e.payload.streamId;
       const conversationId = streamToConversation.get(streamId);
       if (!conversationId) return;
@@ -629,16 +799,7 @@ const AIProvider = (props) => {
         completedAt: e.payload.timestamp
       });
     }));
-    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) => {
+    cleanupFns.push(aiEventClient.on("tools:approval:requested", (e) => {
       const {
         streamId,
         messageId,
@@ -646,9 +807,10 @@ const AIProvider = (props) => {
         toolName,
         input,
         approvalId,
-        timestamp
+        timestamp,
+        clientId
       } = e.payload;
-      const conversationId = streamToConversation.get(streamId);
+      const conversationId = clientId || streamToConversation.get(streamId) || "";
       if (!conversationId) return;
       const conv = state.conversations[conversationId];
       if (!conv) return;
@@ -684,104 +846,56 @@ const AIProvider = (props) => {
         }
       }
     }));
-    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;
-      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 = {
-          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;
-        }
-      }
-    }));
-    cleanupFns.push(aiEventClient.on("text:started", (e) => {
+    cleanupFns.push(aiEventClient.on("text:request:started", (e) => {
       const streamId = e.payload.streamId;
       const model = e.payload.model;
       e.payload.provider;
       const clientId = e.payload.clientId;
       if (clientId && state.conversations[clientId]) {
         streamToConversation.set(streamId, clientId);
+        requestToConversation.set(e.payload.requestId, clientId);
         updateConversation(clientId, {
           status: "active",
-          ...e.payload
+          ...e.payload,
+          systemPrompts: e.payload.systemPrompts,
+          hasChat: true
         });
         return;
       }
       const activeClient = Object.values(state.conversations).find((c) => c.type === "client" && c.status === "active" && !c.model);
       if (activeClient) {
         streamToConversation.set(streamId, activeClient.id);
+        requestToConversation.set(e.payload.requestId, activeClient.id);
         updateConversation(activeClient.id, {
-          ...e.payload
+          ...e.payload,
+          systemPrompts: e.payload.systemPrompts,
+          hasChat: true
         });
       } else {
         const existingServerConv = Object.values(state.conversations).find((c) => c.type === "server" && c.model === model);
         if (existingServerConv) {
           streamToConversation.set(streamId, existingServerConv.id);
+          requestToConversation.set(e.payload.requestId, existingServerConv.id);
           updateConversation(existingServerConv.id, {
             status: "active",
-            ...e.payload
+            ...e.payload,
+            systemPrompts: e.payload.systemPrompts,
+            hasChat: true
           });
         } else {
           const serverId = `server-${model}`;
           getOrCreateConversation(serverId, "server", `${model} Server`);
           streamToConversation.set(streamId, serverId);
+          requestToConversation.set(e.payload.requestId, serverId);
           updateConversation(serverId, {
-            ...e.payload
+            ...e.payload,
+            systemPrompts: e.payload.systemPrompts,
+            hasChat: true
           });
         }
       }
     }));
-    cleanupFns.push(aiEventClient.on("text:completed", (e) => {
+    cleanupFns.push(aiEventClient.on("text:request:completed", (e) => {
       const {
         requestId,
         usage
@@ -801,19 +915,7 @@ const AIProvider = (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) => {
+    cleanupFns.push(aiEventClient.on("text:usage", (e) => {
       const {
         requestId,
         usage,
@@ -827,59 +929,7 @@ const AIProvider = (props) => {
         updateMessageUsage(conversationId, messageId, usage);
       }
     }));
-    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];
-      const chunk = {
-        id: `chunk-tool-result-${toolCallId}-${Date.now()}`,
-        type: "tool_result",
-        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;
-        }
-      }
-    }));
-    cleanupFns.push(aiEventClient.on("summarize:started", (e) => {
+    cleanupFns.push(aiEventClient.on("summarize:request:started", (e) => {
       const {
         requestId,
         model,
@@ -915,7 +965,7 @@ const AIProvider = (props) => {
         setState("conversations", conversationId, "hasSummarize", true);
       }
     }));
-    cleanupFns.push(aiEventClient.on("summarize:completed", (e) => {
+    cleanupFns.push(aiEventClient.on("summarize:request:completed", (e) => {
       const {
         requestId,
         outputLength,
@@ -934,6 +984,222 @@ const AIProvider = (props) => {
         }));
       }
     }));
+    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
+      });
+    }));
+    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
+      });
+    }));
+    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
+      });
+    }));
+    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
+      });
+    }));
     onCleanup(() => {
       for (const cleanup of cleanupFns) {
         cleanup();