feat(ui): Add React based UI for the vibes at /app

This adds a completely separate frontend based on React because I
found that code gen works better with React once the application gets
bigger. In particular it was getting very hard to move past add
connectors and actions.

The idea is to replace the standard UI with this once it has been
tested. But for now it is available at /app in addition to the
original at /

Signed-off-by: Richard Palethorpe <io@richiejp.com>

webui/react-ui/src/hooks/useChat.js

@@ -0,0 +1,78 @@
+import { useState, useCallback, useEffect } from 'react';
+import { chatApi } from '../utils/api';
+import { useSSE } from './useSSE';
+
+/**
+ * Custom hook for chat functionality
+ * @param {string} agentName - Name of the agent to chat with
+ * @returns {Object} - Chat state and functions
+ */
+export function useChat(agentName) {
+  const [messages, setMessages] = useState([]);
+  const [sending, setSending] = useState(false);
+  const [error, setError] = useState(null);
+  
+  // Use SSE hook to receive real-time messages
+  const { data: sseData, isConnected } = useSSE(agentName);
+  
+  // Process SSE data into messages
+  useEffect(() => {
+    if (sseData && sseData.length > 0) {
+      // Process the latest SSE data
+      const latestData = sseData[sseData.length - 1];
+      
+      if (latestData.type === 'message') {
+        setMessages(prev => [...prev, {
+          id: Date.now().toString(),
+          sender: 'agent',
+          content: latestData.content,
+          timestamp: new Date().toISOString(),
+        }]);
+      }
+    }
+  }, [sseData]);
+
+  // Send a message to the agent
+  const sendMessage = useCallback(async (content) => {
+    if (!agentName || !content) return;
+    
+    setSending(true);
+    setError(null);
+    
+    // Add user message to the list
+    const userMessage = {
+      id: Date.now().toString(),
+      sender: 'user',
+      content,
+      timestamp: new Date().toISOString(),
+    };
+    
+    setMessages(prev => [...prev, userMessage]);
+    
+    try {
+      await chatApi.sendMessage(agentName, content);
+      // The agent's response will come through SSE
+      return true;
+    } catch (err) {
+      setError(err.message || 'Failed to send message');
+      console.error('Error sending message:', err);
+      return false;
+    } finally {
+      setSending(false);
+    }
+  }, [agentName]);
+
+  // Clear chat history
+  const clearChat = useCallback(() => {
+    setMessages([]);
+  }, []);
+
+  return {
+    messages,
+    sending,
+    error,
+    isConnected,
+    sendMessage,
+    clearChat,
+  };
+}