feat(tarko): add event stream viewer (#1374)

Author: ulivz

multimodal/agent-tars/core/src/webui-config.ts

@@ -146,4 +146,7 @@ export const AGENT_TARS_WEBUI_CONFIG: AgentWebUIImplementation = {
     defaultLayout: 'narrow-chat',
     enableLayoutSwitchButton: true,
   },
+  debug: {
+    enableEventStreamViewer: true,
+  },
 };

multimodal/tarko/agent-ui/src/common/components/JsonRenderer.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+interface JsonRendererProps {
+  data: unknown;
+  className?: string;
+}
+
+export const JsonRenderer: React.FC<JsonRendererProps> = ({ data, className = '' }) => {
+  return (
+    <pre
+      className={`overflow-auto rounded bg-gray-950 text-gray-300 font-mono text-xs border border-gray-800 ${className}`}
+    >
+      {JSON.stringify(data, null, 2)}
+    </pre>
+  );
+};

multimodal/tarko/agent-ui/src/common/state/actions/eventProcessors/EventHandlerRegistry.ts

@@ -1,5 +1,6 @@
 import { EventHandler } from './types';
 import { AgentEventStream } from '@/common/types';
+import { isEventStreamViewerEnabled } from '@/config/web-ui-config';
 import {
   UserMessageHandler,
   AssistantMessageHandler,
@@ -17,6 +18,8 @@ import { SystemMessageHandler, EnvironmentInputHandler } from './handlers/System
 
 import { AgentRunStartHandler, AgentRunEndHandler } from './handlers/AgentRunHandler';
 
+import { RawEventsHandler } from './handlers/RawEventsHandler';
+
 /**
  * Event handler registry manages all event handlers
  */
@@ -49,6 +52,11 @@ export class EventHandlerRegistry {
     // Agent run handlers
     this.register(new AgentRunStartHandler());
     this.register(new AgentRunEndHandler());
+
+    // Raw events handler (only register if event stream viewer is enabled)
+    if (isEventStreamViewerEnabled()) {
+      this.register(new RawEventsHandler());
+    }
   }
 
   /**
@@ -65,6 +73,13 @@ export class EventHandlerRegistry {
     return this.handlers.find((handler) => handler.canHandle(event)) || null;
   }
 
+  /**
+   * Find all handlers that can handle an event
+   */
+  findAllHandlers(event: AgentEventStream.Event): EventHandler[] {
+    return this.handlers.filter((handler) => handler.canHandle(event));
+  }
+
   /**
    * Get all registered handlers
    */

multimodal/tarko/agent-ui/src/common/state/actions/eventProcessors/handlers/RawEventsHandler.ts

@@ -0,0 +1,39 @@
+import { EventHandler, EventHandlerContext } from '../types';
+import { rawEventsAtom } from '@/common/state/atoms/rawEvents';
+import { AgentEventStream } from '@/common/types';
+
+/**
+ * Handler for storing all raw events in the rawEventsAtom
+ * This enables the Event Stream Viewer to show real-time events
+ */
+export class RawEventsHandler implements EventHandler {
+  canHandle(event: AgentEventStream.Event): event is AgentEventStream.Event {
+    // Handle all event types
+    return true;
+  }
+
+  async handle(
+    context: EventHandlerContext,
+    sessionId: string,
+    event: AgentEventStream.Event,
+  ): Promise<void> {
+    const { get, set } = context;
+
+    // Get current raw events
+    const currentRawEvents = get(rawEventsAtom);
+
+    // Initialize session events if not exists
+    const sessionEvents = currentRawEvents[sessionId] || [];
+
+    // Add new event to the session
+    const updatedSessionEvents = [...sessionEvents, event];
+
+    // Update the atom with new events
+    set(rawEventsAtom, {
+      ...currentRawEvents,
+      [sessionId]: updatedSessionEvents,
+    });
+
+    console.log(`[RawEventsHandler] Added ${event.type} event to session ${sessionId}`);
+  }
+}

multimodal/tarko/agent-ui/src/common/state/actions/eventProcessors/index.ts

@@ -23,14 +23,21 @@ export const processEventAction = atom(null, async (get, set, params: EventProce
     }
   }
 
-  const handler = eventHandlerRegistry.findHandler(event);
-
-  if (handler) {
-    try {
-      await handler.handle(context, sessionId, event);
-    } catch (error) {
-      console.error(`Error handling event ${event.type}:`, error);
-    }
+  // Find and execute all appropriate handlers
+  const handlers = eventHandlerRegistry.findAllHandlers(event);
+
+  if (handlers.length > 0) {
+    // Execute all handlers in parallel
+    const handlerPromises = handlers.map(async (handler) => {
+      try {
+        await handler.handle(context, sessionId, event);
+      } catch (error) {
+        console.error(`Error in handler for event ${event.type}:`, error);
+        // Continue processing to avoid breaking the event stream
+      }
+    });
+
+    await Promise.all(handlerPromises);
   } else {
     console.warn(`No handler found for event type: ${event.type}`);
   }

multimodal/tarko/agent-ui/src/common/state/atoms/eventStreamModal.ts

@@ -0,0 +1,6 @@
+import { atom } from 'jotai';
+
+/**
+ * Event Stream Modal visibility state
+ */
+export const eventStreamModalOpenAtom = atom<boolean>(false);

multimodal/tarko/agent-ui/src/config/web-ui-config.ts

@@ -150,3 +150,21 @@ export function isSidebarEnabled(): boolean {
 export function isHomeEnabled(): boolean {
   return getLayoutConfig().enableHome ?? true;
 }
+
+/**
+ * Get debug configuration from web UI config
+ */
+export function getDebugConfig() {
+  return (
+    getWebUIConfig().debug || {
+      enableEventStreamViewer: false,
+    }
+  );
+}
+
+/**
+ * Check if Event Stream Viewer is enabled
+ */
+export function isEventStreamViewerEnabled(): boolean {
+  return getDebugConfig().enableEventStreamViewer ?? false;
+}

multimodal/tarko/agent-ui/src/standalone/app/Layout/index.tsx

@@ -11,6 +11,9 @@ import {
   closeMobileBottomSheetAtom,
   toggleMobileBottomSheetFullscreenAtom,
 } from '@/common/state/atoms/ui';
+import { eventStreamModalOpenAtom } from '@/common/state/atoms/eventStreamModal';
+import { EventStreamModal } from '@/standalone/modals/EventStreamModal';
+import { isEventStreamViewerEnabled } from '@/config/web-ui-config';
 import { Shell } from './Shell';
 import { MobileBottomSheet } from './MobileBottomSheet';
 import './Layout.css';
@@ -27,6 +30,8 @@ export const Layout: React.FC<LayoutProps> = ({ isReplayMode: propIsReplayMode }
   const mobileBottomSheet = useAtomValue(mobileBottomSheetAtom);
   const closeMobileBottomSheet = useSetAtom(closeMobileBottomSheetAtom);
   const toggleMobileBottomSheetFullscreen = useSetAtom(toggleMobileBottomSheetFullscreenAtom);
+  const [isEventStreamModalOpen, setIsEventStreamModalOpen] = useAtom(eventStreamModalOpenAtom);
+  const enableEventStreamViewer = isEventStreamViewerEnabled();
 
   const isReplayMode = propIsReplayMode !== undefined ? propIsReplayMode : contextIsReplayMode;
 
@@ -82,6 +87,14 @@ export const Layout: React.FC<LayoutProps> = ({ isReplayMode: propIsReplayMode }
         onClose={closeMobileBottomSheet}
         onToggleFullscreen={toggleMobileBottomSheetFullscreen}
       />
+
+      {/* Event Stream Modal */}
+      {enableEventStreamViewer && (
+        <EventStreamModal
+          isOpen={isEventStreamModalOpen}
+          onClose={() => setIsEventStreamModalOpen(false)}
+        />
+      )}
     </div>
   );
 };

multimodal/tarko/agent-ui/src/standalone/modals/EventStreamModal.tsx

@@ -0,0 +1,152 @@
+import React, { useEffect, useRef, useState, useMemo } from 'react';
+import { useAtom } from 'jotai';
+import { Dialog, DialogPanel } from '@tarko/ui';
+import { FiX, FiChevronRight, FiChevronDown, FiFilter } from 'react-icons/fi';
+import { rawEventsAtom } from '@/common/state/atoms/rawEvents';
+import { useSession } from '@/common/hooks/useSession';
+import { JsonRenderer } from '@/common/components/JsonRenderer';
+import { AgentEventStream } from '@/common/types';
+
+interface EventStreamModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+interface EventItemProps {
+  event: AgentEventStream.Event;
+  index: number;
+}
+
+const EventItem: React.FC<EventItemProps> = ({ event, index }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const getEventSummary = (event: AgentEventStream.Event): string => {
+    switch (event.type) {
+      case 'user_message':
+        return `User: ${event.content?.slice(0, 50) || 'Message'}...`;
+      case 'assistant_message':
+        return `Assistant: ${event.content?.slice(0, 50) || 'Response'}...`;
+      case 'tool_call':
+        return `Tool Call: ${event.name || 'Unknown'}`;
+      case 'tool_result':
+        return `Tool Result: ${event.error ? 'Error' : 'Completed'}`;
+      default:
+        return event.type;
+    }
+  };
+
+  return (
+    <div className="border-b border-gray-800">
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full flex items-center gap-3 p-4 hover:bg-gray-900 text-left"
+      >
+        {isExpanded ? (
+          <FiChevronDown size={16} className="text-gray-400 flex-shrink-0" />
+        ) : (
+          <FiChevronRight size={16} className="text-gray-400 flex-shrink-0" />
+        )}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-3 mb-1">
+            <span className="text-yellow-400 font-mono text-sm">
+              [{new Date(event.timestamp).toISOString()}]
+            </span>
+            <span className="text-blue-400 font-mono text-sm">{event.type}</span>
+          </div>
+          <div className="text-gray-300 text-sm truncate">{getEventSummary(event)}</div>
+        </div>
+      </button>
+
+      {isExpanded && <JsonRenderer data={event} className="text-sm p-3" />}
+    </div>
+  );
+};
+
+export const EventStreamModal: React.FC<EventStreamModalProps> = ({ isOpen, onClose }) => {
+  const [rawEvents] = useAtom(rawEventsAtom);
+  const { activeSessionId } = useSession();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [selectedFilter, setSelectedFilter] = useState<string>('all');
+
+  const currentSessionEvents = activeSessionId ? rawEvents[activeSessionId] || [] : [];
+
+  // Get unique event types for filter
+  const eventTypes = useMemo(() => {
+    const types = new Set(currentSessionEvents.map((event) => event.type));
+    return Array.from(types).sort();
+  }, [currentSessionEvents]);
+
+  // Filter events based on selected filter
+  const filteredEvents = useMemo(() => {
+    if (selectedFilter === 'all') {
+      return currentSessionEvents;
+    }
+    return currentSessionEvents.filter((event) => event.type === selectedFilter);
+  }, [currentSessionEvents, selectedFilter]);
+
+  // Auto-scroll to bottom when new events arrive
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [filteredEvents.length]);
+
+  return (
+    <Dialog open={isOpen} onClose={onClose} fullScreen>
+      <DialogPanel className="w-full h-full bg-black text-white flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 bg-gray-900 border-b border-gray-700">
+          <div className="flex items-center gap-4">
+            <h2 className="text-lg font-mono">Event Stream Debug</h2>
+            <span className="text-sm text-gray-400">
+              Session: {activeSessionId || 'None'} | Events: {filteredEvents.length}/
+              {currentSessionEvents.length}
+            </span>
+          </div>
+
+          <div className="flex items-center gap-4">
+            {/* Filter */}
+            <div className="flex items-center gap-2">
+              <FiFilter size={16} className="text-gray-400" />
+              <select
+                value={selectedFilter}
+                onChange={(e) => setSelectedFilter(e.target.value)}
+                className="bg-gray-800 text-white border border-gray-600 rounded px-3 py-1 text-sm font-mono focus:outline-none focus:border-blue-500"
+              >
+                <option value="all">All Types</option>
+                {eventTypes.map((type) => (
+                  <option key={type} value={type}>
+                    {type}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <button onClick={onClose} className="p-2 hover:bg-gray-800 rounded transition-colors">
+              <FiX size={20} />
+            </button>
+          </div>
+        </div>
+
+        {/* Content */}
+        <div ref={scrollRef} className="flex-1 overflow-auto">
+          {filteredEvents.length === 0 ? (
+            <div className="flex items-center justify-center h-full">
+              <div className="text-gray-500 font-mono">
+                {currentSessionEvents.length === 0
+                  ? 'No events yet...'
+                  : `No events of type "${selectedFilter}"`}
+              </div>
+            </div>
+          ) : (
+            <div>
+              {filteredEvents.map((event, index) => (
+                <EventItem key={`${event.timestamp}-${index}`} event={event} index={index} />
+              ))}
+            </div>
+          )}
+        </div>
+      </DialogPanel>
+    </Dialog>
+  );
+};