Implement Matrix channel creation functionality (#5962)

Author: spencrmartin

ui/desktop/src/App.tsx

@@ -387,6 +387,14 @@ function BaseChatContent({
     const customEvent = e as unknown as CustomEvent;
     const combinedTextFromInput = customEvent.detail?.value || '';
 
+    // DIAGNOSTIC: Log chat info when submitting message
+    console.log('[Matrix Message Send - BaseChat] handleSubmit called:', {
+      chatId: chat.id,
+      chatTitle: chat.title,
+      messagePreview: combinedTextFromInput.substring(0, 50) + '...',
+      timestamp: new Date().toISOString(),
+    });
+
     // Mark that user has started using the recipe when they submit a message
     if (recipeConfig && combinedTextFromInput.trim()) {
       setHasStartedUsingRecipe(true);

ui/desktop/src/components/BaseChat.tsx

@@ -114,6 +114,7 @@ function BaseChatContent({
     initialMessage,
     onSessionIdChange,
     isMatrixTab: !!matrixRoomId, // Pass Matrix tab flag based on whether we have a matrixRoomId
+    matrixRoomId, // Pass Matrix room ID for message routing
     tabId, // Pass tabId for sidecar filtering
   });
 
@@ -144,20 +145,26 @@ function BaseChatContent({
         sender: message.sender?.displayName || message.sender?.userId || 'unknown'
       });
 
-      // FIXED: Make Matrix message events SESSION-SPECIFIC to prevent cross-tab contamination
-      // Include sessionId in the event detail so only the correct useChatStream instance processes it
+      // FIXED: For Matrix tabs, use matrixRoomId as the routing key instead of sessionId
+      // This ensures messages are routed correctly even if backend session ID changes
+      const routingKey = matrixRoomId || sessionId;
+      
       const messageEvent = new CustomEvent('matrix-message-received', {
         detail: { 
           message,
-          targetSessionId: sessionId, // CRITICAL: Only this session should process this message
+          targetSessionId: sessionId, // Backend session ID (for logging)
+          targetRoomId: matrixRoomId, // Matrix room ID (for routing)
+          routingKey: routingKey, // The actual key to match on
           timestamp: new Date().toISOString()
         }
       });
       window.dispatchEvent(messageEvent);
 
-      console.log('📥 BaseChat2 dispatched SESSION-SPECIFIC matrix-message-received event:', {
+      console.log('📥 BaseChat2 dispatched matrix-message-received event:', {
         messageId: message.id,
-        targetSessionId: sessionId.substring(0, 8),
+        targetSessionId: sessionId?.substring(0, 8),
+        targetRoomId: matrixRoomId?.substring(0, 20),
+        routingKey: routingKey?.substring(0, 20),
         sender: message.sender?.displayName || message.sender?.userId || 'unknown'
       });
     }
@@ -286,17 +293,20 @@ function BaseChatContent({
   const shouldShowPopularTopics = showPopularTopics && 
     messages.length === 0 && !initialMessage && chatState === ChatState.Idle;
 
-  // Debug logging for empty state
-  console.log('BaseChat2 render state:', {
-    sessionId: sessionId, // Show full session ID for debugging
-    sessionIdShort: sessionId.slice(0, 8), // Also show truncated for readability
+  // DIAGNOSTIC: Enhanced logging for Matrix debugging
+  console.log('🔍 BaseChat2 render state:', {
+    sessionId: sessionId?.slice(0, 8) + '...', // Show truncated for readability
+    matrixRoomId: matrixRoomId?.substring(0, 20) + '...',
+    isMatrixTab: !!matrixRoomId,
     messagesLength: messages.length,
     chatState,
     shouldShowPopularTopics,
     loadingChat,
     hasSession: !!session,
     sessionName: session?.name,
-    sessionDescription: session?.description
+    sessionDescription: session?.description,
+    showParticipantsBar,
+    tabId
   });
 
   // Memoize the chat object to prevent infinite re-renders

ui/desktop/src/components/BaseChat2.tsx

@@ -106,6 +106,7 @@ interface ChatInputProps {
   append?: (message: Message) => void;
   isExtensionsLoading?: boolean;
   gooseEnabled?: boolean;
+  matrixRoomId?: string | null; // Matrix room ID for this specific chat tab
 }
 
 export default function ChatInput({
@@ -134,7 +135,13 @@ export default function ChatInput({
   append,
   isExtensionsLoading = false,
   gooseEnabled = true,
+  matrixRoomId,
 }: ChatInputProps) {
+  // DIAGNOSTIC: Log the matrixRoomId prop when ChatInput renders
+  console.log('[ChatInput] Received matrixRoomId prop:', {
+    matrixRoomId,
+    timestamp: new Date().toISOString(),
+  });
   // Track the available width for responsive layout
   const [availableWidth, setAvailableWidth] = useState(window.innerWidth);
   const chatInputRef = useRef<HTMLDivElement>(null);

ui/desktop/src/components/ChatInput.tsx

@@ -0,0 +1,107 @@
+import React, { useState, useEffect } from 'react';
+import { ChevronRight, Hash } from 'lucide-react';
+import { matrixService } from '../services/MatrixService';
+import { motion } from 'framer-motion';
+
+interface SpaceBreadcrumbProps {
+  roomId: string;
+  className?: string;
+}
+
+interface BreadcrumbData {
+  spaceName: string;
+  spaceId: string;
+  roomName: string;
+  roomId: string;
+}
+
+export const SpaceBreadcrumb: React.FC<SpaceBreadcrumbProps> = ({ roomId, className = '' }) => {
+  const [breadcrumb, setBreadcrumb] = useState<BreadcrumbData | null>(null);
+
+  useEffect(() => {
+    const loadBreadcrumb = () => {
+      try {
+        // Get all Spaces
+        const spaces = matrixService.getSpaces();
+        
+        // Find which Space contains this room
+        for (const space of spaces) {
+          const children = matrixService.getSpaceChildren(space.roomId);
+          const childRoom = children.find(child => child.roomId === roomId);
+          
+          if (childRoom) {
+            // Found the parent Space!
+            setBreadcrumb({
+              spaceName: space.name || 'Unnamed Space',
+              spaceId: space.roomId,
+              roomName: childRoom.name || 'Unnamed Room',
+              roomId: roomId,
+            });
+            return;
+          }
+        }
+        
+        // Room is not in any Space
+        setBreadcrumb(null);
+      } catch (error) {
+        console.error('Failed to load Space breadcrumb:', error);
+        setBreadcrumb(null);
+      }
+    };
+
+    loadBreadcrumb();
+    
+    // Listen for Space changes
+    const handleSpaceUpdate = () => {
+      loadBreadcrumb();
+    };
+    
+    matrixService.on('spaceChildAdded', handleSpaceUpdate);
+    matrixService.on('spaceChildRemoved', handleSpaceUpdate);
+    matrixService.on('ready', handleSpaceUpdate);
+    
+    return () => {
+      matrixService.off('spaceChildAdded', handleSpaceUpdate);
+      matrixService.off('spaceChildRemoved', handleSpaceUpdate);
+      matrixService.off('ready', handleSpaceUpdate);
+    };
+  }, [roomId]);
+
+  // Don't render if room is not in a Space
+  if (!breadcrumb) {
+    return null;
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: -10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.2 }}
+      className={`flex items-center gap-2 px-4 py-2 bg-background-muted border-b border-border-default ${className}`}
+    >
+      {/* Space Icon */}
+      <div className="flex items-center gap-2 text-text-muted">
+        <div className="w-5 h-5 bg-background-accent/20 rounded flex items-center justify-center">
+          <Hash className="w-3 h-3 text-text-on-accent" />
+        </div>
+        <span className="text-sm font-medium">{breadcrumb.spaceName}</span>
+      </div>
+
+      {/* Separator */}
+      <ChevronRight className="w-4 h-4 text-text-muted" />
+
+      {/* Room Name */}
+      <div className="flex items-center gap-2">
+        <Hash className="w-4 h-4 text-text-muted" />
+        <span className="text-sm text-text-default">{breadcrumb.roomName}</span>
+      </div>
+
+      {/* Optional: Add a badge to indicate it's a Space room */}
+      <div className="ml-auto">
+        <span className="text-xs px-2 py-0.5 rounded-full bg-blue-500/10 text-blue-600 dark:text-blue-400">
+          Space Room
+        </span>
+      </div>
+    </motion.div>
+  );
+};

ui/desktop/src/components/SpaceBreadcrumb.tsx

@@ -6,6 +6,7 @@ import MultiPanelTabSidecar from './MultiPanelTabSidecar';
 import { useTabContext } from '../contexts/TabContext';
 import { ResizableSplitter } from './Layout/ResizableSplitter';
 import { TaskExecutionProvider } from '../contexts/TaskExecutionContext';
+import { SpaceBreadcrumb } from './SpaceBreadcrumb';
 
 interface TabbedChatContainerProps {
   setIsGoosehintsModalOpen?: (isOpen: boolean) => void;
@@ -200,6 +201,13 @@ export const TabbedChatContainer: React.FC<TabbedChatContainerProps> = ({
           />
         </div>
 
+        {/* Space Breadcrumb - Show for Matrix tabs with room IDs */}
+        {activeTabState && activeTabState.tab.type === 'matrix' && activeTabState.tab.matrixRoomId && (
+          <div className="flex-shrink-0">
+            <SpaceBreadcrumb roomId={activeTabState.tab.matrixRoomId} />
+          </div>
+        )}
+
         {/* Main Content Area - Chat and Sidecar */}
         <div className="flex-1 min-h-0 relative overflow-hidden rounded-t-lg bg-background-default">
         {/* Render all tabs but only show the active one - this prevents unmounting */}

ui/desktop/src/components/TabbedChatContainer.tsx

@@ -19,6 +19,8 @@ import MatrixAuth from '../peers/MatrixAuth';
 import { useNavigate } from 'react-router-dom';
 import { useTabContext } from '../../contexts/TabContext';
 import { matrixService } from '../../services/MatrixService';
+import { sessionMappingService } from '../../services/SessionMappingService';
+import SpaceRoomsView from './SpaceRoomsView';
 
 interface Channel {
   roomId: string;
@@ -547,6 +549,7 @@ const ChannelsView: React.FC<ChannelsViewProps> = ({ onClose }) => {
   const [showMatrixAuth, setShowMatrixAuth] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const [favorites, setFavorites] = useState<Set<string>>(new Set());
+  const [selectedSpace, setSelectedSpace] = useState<{ id: string; name: string } | null>(null);
 
   // Load favorites from localStorage on mount
   useEffect(() => {
@@ -606,9 +609,11 @@ const ChannelsView: React.FC<ChannelsViewProps> = ({ onClose }) => {
     return mxcUrl;
   };
 
-  // Filter channels (non-DM rooms) from Matrix rooms and add favorite status
-  const channels: Channel[] = rooms
-    .filter(room => !room.isDirectMessage)
+  // Get Matrix Spaces from context
+  const { spaces } = useMatrix();
+  
+  // Map Spaces to channels and add favorite status
+  const channels: Channel[] = spaces
     .map(room => ({
       roomId: room.roomId,
       name: room.name || 'Unnamed Channel',
@@ -638,23 +643,33 @@ const ChannelsView: React.FC<ChannelsViewProps> = ({ onClose }) => {
 
   const handleOpenChannel = async (channel: Channel) => {
     try {
-      console.log('📱 Opening channel:', channel);
-      
-      // Open a new tab/chat session with Matrix room parameters
-      // Pass the channel name so it appears in the tab title
-      openMatrixChat(channel.roomId, currentUser?.userId || '', channel.name);
+      console.log('📦 Opening Space:', channel);
 
-      // Navigate to the pair view where the tabs are displayed
-      navigate('/pair');
+      // Set the selected space to show its rooms
+      setSelectedSpace({ id: channel.roomId, name: channel.name });
     } catch (error) {
-      console.error('Failed to open channel:', error);
+      console.error('Failed to open Space:', error);
     }
   };
 
   const handleCreateChannel = async (name: string, topic: string, isPublic: boolean) => {
-    // TODO: Implement channel creation via Matrix service
-    console.log('Creating channel:', { name, topic, isPublic });
-    alert('Channel creation not yet implemented');
+    try {
+      console.log('📦 Creating Matrix Space:', { name, topic, isPublic });
+      
+      // Use the new createSpace method from MatrixService
+      const spaceId = await matrixService.createSpace(name, topic, isPublic);
+      
+      console.log('✅ Space created successfully:', spaceId);
+      
+      // Create session mapping for the new space
+      const participants = [currentUser?.userId || ''];
+      await sessionMappingService.createMappingWithBackendSession(spaceId, participants, name);
+      
+      console.log('✅ Space creation complete');
+    } catch (error) {
+      console.error('❌ Failed to create Space:', error);
+      throw error;
+    }
   };
 
   const handleEditChannel = (channel: Channel) => {
@@ -734,6 +749,17 @@ const ChannelsView: React.FC<ChannelsViewProps> = ({ onClose }) => {
     return <MatrixAuth onClose={() => setShowMatrixAuth(false)} />;
   }
 
+  // Show SpaceRoomsView if a space is selected
+  if (selectedSpace) {
+    return (
+      <SpaceRoomsView
+        spaceId={selectedSpace.id}
+        spaceName={selectedSpace.name}
+        onBack={() => setSelectedSpace(null)}
+      />
+    );
+  }
+
   return (
     <div className="relative flex flex-col h-screen bg-background-muted">
       {/* Header */}