Fix conversation selection to load full conversation details

- Add loadConversationDetails function to fetch RemoteConversation and events
- Update conversation click handler to load details when selected
- Add conversation events display with messages, actions, and observations
- Add proper styling for events list with color-coded event types
- Clear conversation details when conversation is deleted or deselected
- Show loading state while fetching conversation details

Co-authored-by: openhands <openhands@all-hands.dev>

Author: openhands-agent

example/src/components/ConversationManager.css

@@ -289,6 +289,104 @@
   margin-bottom: 10px;
 }
 
+/* Events and Messages Styles */
+.conversation-events {
+  background-color: white;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  padding: 15px;
+  margin-bottom: 20px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.conversation-events h3 {
+  margin: 0 0 15px 0;
+  color: #1f2937;
+  font-size: 1rem;
+}
+
+.events-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.event-item {
+  border: 1px solid #e5e7eb;
+  border-radius: 4px;
+  padding: 10px;
+  background-color: #f9fafb;
+}
+
+.event-item.event-message {
+  border-left: 4px solid #3b82f6;
+}
+
+.event-item.event-action {
+  border-left: 4px solid #f59e0b;
+}
+
+.event-item.event-observation {
+  border-left: 4px solid #10b981;
+}
+
+.event-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  font-size: 12px;
+}
+
+.event-type {
+  background-color: #e5e7eb;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.event-timestamp {
+  color: #6b7280;
+  font-size: 11px;
+}
+
+.event-content {
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+.message-content {
+  margin-top: 5px;
+  padding: 8px;
+  background-color: white;
+  border-radius: 3px;
+  border: 1px solid #e5e7eb;
+}
+
+.action-args {
+  margin-top: 8px;
+}
+
+.action-args pre {
+  background-color: #f3f4f6;
+  padding: 8px;
+  border-radius: 3px;
+  font-size: 11px;
+  overflow-x: auto;
+  margin: 4px 0 0 0;
+}
+
+.observation-content {
+  margin-top: 5px;
+  padding: 8px;
+  background-color: white;
+  border-radius: 3px;
+  border: 1px solid #e5e7eb;
+  white-space: pre-wrap;
+}
+
 /* Responsive design */
 @media (max-width: 768px) {
   .conversation-layout {

example/src/components/ConversationManager.tsx

@@ -22,6 +22,8 @@ export const ConversationManager: React.FC = () => {
   const [error, setError] = useState<string | null>(null);
   const [manager, setManager] = useState<SDKConversationManager | null>(null);
   const [selectedConversation, setSelectedConversation] = useState<string | null>(null);
+  const [selectedConversationDetails, setSelectedConversationDetails] = useState<RemoteConversation | null>(null);
+  const [conversationEvents, setConversationEvents] = useState<any[]>([]);
   const [messageInput, setMessageInput] = useState('');
   const [activeConversations, setActiveConversations] = useState<Map<string, RemoteConversation>>(new Map());
   const [currentAgent, setCurrentAgent] = useState<AgentBase | null>(null);
@@ -152,6 +154,8 @@ export const ConversationManager: React.FC = () => {
       // Clear selection if this conversation was selected
       if (selectedConversation === conversationId) {
         setSelectedConversation(null);
+        setSelectedConversationDetails(null);
+        setConversationEvents([]);
       }
 
       // Reload conversations list
@@ -163,6 +167,36 @@ export const ConversationManager: React.FC = () => {
     }
   };
 
+  // Load conversation details
+  const loadConversationDetails = async (conversationId: string) => {
+    if (!manager) return;
+
+    setLoading(true);
+    setError(null);
+    try {
+      // Check if we already have this conversation loaded
+      let conversation = activeConversations.get(conversationId);
+      
+      if (!conversation) {
+        // Load the conversation if not already active
+        conversation = await manager.loadConversation(conversationId);
+        setActiveConversations(prev => new Map(prev.set(conversationId, conversation!)));
+      }
+
+      setSelectedConversationDetails(conversation);
+
+      // Load events
+      const events = await conversation.state.events.getEvents();
+      setConversationEvents(events);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load conversation details');
+      setSelectedConversationDetails(null);
+      setConversationEvents([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
   // Send message to conversation
   const sendMessage = async (conversationId: string, message: string) => {
     if (!manager || !message.trim()) return;
@@ -272,7 +306,10 @@ export const ConversationManager: React.FC = () => {
                 <div 
                   key={conversation.id} 
                   className={`conversation-item ${selectedConversation === conversation.id ? 'selected' : ''}`}
-                  onClick={() => setSelectedConversation(conversation.id)}
+                  onClick={() => {
+                    setSelectedConversation(conversation.id);
+                    loadConversationDetails(conversation.id);
+                  }}
                 >
                   <div className="conversation-info">
                     <div className="conversation-id">
@@ -331,15 +368,74 @@ export const ConversationManager: React.FC = () => {
                     </p>
                     <p><strong>Agent:</strong> {conv.agent?.name}</p>
                     <p><strong>Model:</strong> {conv.agent?.llm?.model}</p>
-                    <p><strong>Total Events:</strong> {conv.conversation_stats?.total_events || 0}</p>
-                    <p><strong>Messages:</strong> {conv.conversation_stats?.message_events || 0}</p>
-                    <p><strong>Actions:</strong> {conv.conversation_stats?.action_events || 0}</p>
-                    <p><strong>Observations:</strong> {conv.conversation_stats?.observation_events || 0}</p>
+                    <p><strong>Total Events:</strong> {conversationEvents.length}</p>
+                    <p><strong>Messages:</strong> {conversationEvents.filter(e => e.event_type === 'message').length}</p>
+                    <p><strong>Actions:</strong> {conversationEvents.filter(e => e.event_type === 'action').length}</p>
+                    <p><strong>Observations:</strong> {conversationEvents.filter(e => e.event_type === 'observation').length}</p>
                   </div>
                 );
               })()}
             </div>
 
+            {/* Events/Messages Section */}
+            <div className="conversation-events">
+              <h3>Events & Messages</h3>
+              {loading && <p>Loading conversation details...</p>}
+              {conversationEvents.length === 0 && !loading && (
+                <p>No events found in this conversation.</p>
+              )}
+              <div className="events-list">
+                {conversationEvents.map((event, index) => (
+                  <div key={index} className={`event-item event-${event.event_type}`}>
+                    <div className="event-header">
+                      <span className="event-type">{event.event_type}</span>
+                      <span className="event-timestamp">
+                        {event.timestamp ? new Date(event.timestamp).toLocaleString() : 'No timestamp'}
+                      </span>
+                    </div>
+                    <div className="event-content">
+                      {event.event_type === 'message' && event.content && (
+                        <div>
+                          <strong>{event.content.role}:</strong>
+                          <div className="message-content">
+                            {Array.isArray(event.content.content) 
+                              ? event.content.content.map((c: any, i: number) => (
+                                  <div key={i}>{c.text || JSON.stringify(c)}</div>
+                                ))
+                              : event.content.content
+                            }
+                          </div>
+                        </div>
+                      )}
+                      {event.event_type === 'action' && (
+                        <div>
+                          <strong>Action:</strong> {event.action || 'Unknown action'}
+                          {event.args && (
+                            <div className="action-args">
+                              <strong>Args:</strong> <pre>{JSON.stringify(event.args, null, 2)}</pre>
+                            </div>
+                          )}
+                        </div>
+                      )}
+                      {event.event_type === 'observation' && (
+                        <div>
+                          <strong>Observation:</strong>
+                          <div className="observation-content">
+                            {event.content || event.observation || 'No content'}
+                          </div>
+                        </div>
+                      )}
+                      {!['message', 'action', 'observation'].includes(event.event_type) && (
+                        <div>
+                          <pre>{JSON.stringify(event, null, 2)}</pre>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
             <div className="message-input-section">
               <h3>Send Message</h3>
               <div className="message-input-container">