myceliumail 1.0.1 → 1.0.2

package/src/dashboard/public/app.js

@@ -1,523 +0,0 @@
-// Load inbox on page load
-let currentMessageId = null;
-let currentAgentId = 'treebird'; // Default viewer identity
-let supabaseClient = null;
-let realtimeChannel = null;
-
-// Request notification permission on load
-async function requestNotificationPermission() {
-    if ('Notification' in window && Notification.permission === 'default') {
-        await Notification.requestPermission();
-    }
-}
-
-// Show browser notification
-function showBrowserNotification(message) {
-    if ('Notification' in window && Notification.permission === 'granted') {
-        const preview = message.message?.substring(0, 100) || message.body?.substring(0, 100) || '';
-        const notification = new Notification(`📬 ${message.from_agent}: ${message.subject}`, {
-            body: preview,
-            icon: '🍄',
-            tag: message.id, // Prevent duplicate notifications
-        });
-
-        notification.onclick = () => {
-            window.focus();
-            viewMessage(message.id);
-        };
-    }
-}
-
-// Setup Supabase Realtime subscription
-async function setupRealtime() {
-    try {
-        // Fetch config from server
-        const res = await fetch('/api/config');
-        const config = await res.json();
-
-        if (!config.supabaseUrl || !config.supabaseKey) {
-            console.log('Supabase not configured, using polling only');
-            return;
-        }
-
-        const agentId = config.agentId || 'anonymous';
-        currentAgentId = agentId;
-        console.log('🍄 Setting up Realtime for', agentId);
-
-        supabaseClient = supabase.createClient(config.supabaseUrl, config.supabaseKey);
-
-        realtimeChannel = supabaseClient
-            .channel('dashboard-inbox')
-            .on(
-                'postgres_changes',
-                {
-                    event: 'INSERT',
-                    schema: 'public',
-                    table: 'agent_messages',
-                    filter: `to_agent=eq.${agentId}`
-                },
-                (payload) => {
-                    console.log('📬 New message via Realtime:', payload.new.subject);
-                    showBrowserNotification(payload.new);
-                    loadInbox(true); // Refresh inbox to show new message
-                }
-            )
-            .subscribe((status) => {
-                if (status === 'SUBSCRIBED') {
-                    console.log('✅ Connected to Supabase Realtime');
-                    // Update UI to show we're connected
-                    const stats = document.getElementById('stats');
-                    if (stats && !stats.innerHTML.includes('🔴')) {
-                        stats.innerHTML = stats.innerHTML.replace('Loading...', '<span class="text-green-400">●</span> ' + stats.innerHTML);
-                    }
-                }
-            });
-    } catch (err) {
-        console.error('Failed to setup Realtime:', err);
-    }
-}
-
-async function loadInbox(preserveSelection = true) {
-    try {
-        const res = await fetch('/api/inbox');
-        const data = await res.json();
-
-        updateInboxList(data.messages);
-        updateStats(data);
-
-        // If we have a selected message, make sure it's highlighted/marked as active
-        if (preserveSelection && currentMessageId) {
-            highlightMessage(currentMessageId);
-        }
-    } catch (err) {
-        console.error('Failed to load inbox:', err);
-    }
-}
-
-function updateInboxList(messages) {
-    const list = document.getElementById('inbox-list');
-
-    if (messages.length === 0) {
-        list.innerHTML = `
-            <div class="text-center text-gray-600 py-8">
-                No messages found
-            </div>
-        `;
-        return;
-    }
-
-    // Sort by timestamp descending
-    messages.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
-
-    list.innerHTML = messages.map(msg => {
-        const isUnread = !msg.read && (!msg.readBy || !msg.readBy.includes(currentAgentId));
-        return `
-        <div id="msg-${msg.id}" 
-             class="message-item p-4 rounded-lg cursor-pointer border border-transparent hover:border-gray-700 hover:bg-gray-800 transition-all group ${isUnread ? 'bg-gray-800/50 border-gray-700' : ''}"
-             onclick="viewMessage('${msg.id}')">
-            <div class="flex items-center justify-between mb-1">
-                <div class="flex items-center gap-2">
-                    ${msg.encrypted ? '<span title="Encrypted">🔐</span>' : '<span title="Cleartext">📨</span>'}
-                    <span class="font-medium text-gray-200 ${isUnread ? 'text-white' : ''}">${msg.sender}</span>
-                    <span class="text-gray-500 text-sm">→ ${msg.recipient}</span>
-                </div>
-                ${isUnread ? '<span class="w-2 h-2 rounded-full bg-blue-500"></span>' : ''}
-            </div>
-            <div class="text-base font-medium ${isUnread ? 'text-gray-100' : 'text-gray-400'} truncate mb-0.5">
-                ${msg.subject || '(no subject)'}
-            </div>
-            <div class="text-sm text-gray-500">
-                ${new Date(msg.createdAt).toLocaleString()}
-            </div>
-        </div>
-    `}).join('');
-}
-
-async function viewMessage(id) {
-    currentMessageId = id;
-    highlightMessage(id);
-
-    // Show loading state
-    const detail = document.getElementById('message-detail');
-    detail.innerHTML = '<div class="h-full flex items-center justify-center text-gray-500">Loading...</div>';
-
-    try {
-        const res = await fetch(`/api/message/${id}`);
-        const msg = await res.json();
-
-        renderMessageDetail(msg);
-
-        // Mark as read for current agent
-        if (!msg.readBy || !msg.readBy.includes(currentAgentId)) {
-            await fetch(`/api/message/${id}/read`, {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ readerId: currentAgentId })
-            });
-            // Update local UI state immediately
-            const item = document.getElementById(`msg-${id}`);
-            if (item) {
-                const indicator = item.querySelector('.bg-blue-500');
-                if (indicator) indicator.remove();
-                item.classList.remove('bg-gray-800/50', 'border-gray-700');
-            }
-        }
-
-    } catch (err) {
-        console.error('Failed to view message:', err);
-        detail.innerHTML = '<div class="text-red-500">Failed to load message</div>';
-    }
-}
-
-function highlightMessage(id) {
-    // Remove active class from all
-    document.querySelectorAll('.message-item').forEach(el => {
-        el.classList.remove('ring-1', 'ring-purple-500', 'bg-gray-800');
-    });
-    // Add to current
-    const el = document.getElementById(`msg-${id}`);
-    if (el) {
-        el.classList.add('ring-1', 'ring-purple-500', 'bg-gray-800');
-    }
-}
-
-function renderMessageDetail(msg) {
-    const detail = document.getElementById('message-detail');
-
-    detail.innerHTML = `
-        <div class="max-w-4xl mx-auto w-full anim-fade-in">
-            <div class="mb-8 p-6 bg-gray-850 rounded-xl border border-gray-800">
-                <div class="flex justify-between items-start mb-4">
-                    <div>
-                        <div class="text-base text-gray-400 mb-1">From</div>
-                        <div class="font-mono text-xl text-blue-400">${msg.sender}</div>
-                    </div>
-                    <div class="text-center">
-                        <div class="text-base text-gray-400 mb-1">To</div>
-                        <div class="font-mono text-xl text-green-400">${msg.recipient}</div>
-                    </div>
-                     <div class="text-right">
-                        <div class="text-base text-gray-400 mb-1">Received</div>
-                        <div class="text-lg text-gray-300">${new Date(msg.createdAt).toLocaleString()}</div>
-                    </div>
-                </div>
-                
-                <h1 class="text-3xl font-bold text-white mb-6 pt-4 border-t border-gray-800">${msg.subject || '(no subject)'}</h1>
-                
-                ${msg.encrypted && msg.decrypted ? `
-                    <div class="bg-green-900/20 border border-green-900/50 text-green-400 px-3 py-2 rounded-lg text-base inline-flex items-center gap-2 mb-4">
-                        🔐 Decrypted by: ${msg.decryptedBy || 'unknown'}
-                    </div>
-                ` : ''}
-                
-                ${msg.encrypted && !msg.decrypted ? `
-                     <div class="bg-red-900/20 border border-red-900/50 text-red-400 px-3 py-2 rounded-lg text-base inline-flex items-center gap-2 mb-4">
-                        🔒 Could not decrypt message
-                    </div>
-                ` : ''}
-            </div>
-
-            <div class="prose prose-invert max-w-none bg-gray-900 p-8 rounded-xl border border-gray-800 shadow-sm">
-                <p class="whitespace-pre-wrap font-sans text-xl text-gray-300 leading-relaxed">${escapeHtml(msg.body)}</p>
-            </div>
-
-            ${msg.attachments && msg.attachments.length > 0 ? `
-            <!-- Attachments -->
-            <div class="mt-6 bg-gray-900 p-6 rounded-xl border border-gray-800">
-                <h3 class="text-lg font-semibold text-gray-300 mb-4">📎 Attachments (${msg.attachments.length})</h3>
-                <div class="space-y-3">
-                    ${msg.attachments.map((att, i) => `
-                        <div class="flex items-center justify-between bg-gray-850 p-4 rounded-lg border border-gray-700">
-                            <div class="flex items-center gap-3">
-                                <span class="text-2xl">${getFileIcon(att.type)}</span>
-                                <div>
-                                    <div class="text-white font-medium">${escapeHtml(att.name)}</div>
-                                    <div class="text-sm text-gray-500">${formatFileSize(att.size)}</div>
-                                </div>
-                            </div>
-                            <button onclick='downloadAttachment(${JSON.stringify(att.name)}, ${JSON.stringify(att.type)}, ${JSON.stringify(att.data)})'
-                                    class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-500 transition-colors text-lg">
-                                ⬇️ Download
-                            </button>
-                        </div>
-                    `).join('')}
-                </div>
-            </div>
-            ` : ''}
-
-            <!-- Action Buttons -->
-            <div class="mt-8 flex gap-4 justify-between">
-                <div class="flex gap-3">
-                    <button onclick="showReplyForm('${msg.id}', '${msg.sender}')" 
-                            class="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-500 transition-colors flex items-center gap-2 font-medium text-lg">
-                        <span>↩️</span> Reply
-                    </button>
-                    <button onclick="forwardMessage('${msg.id}')" 
-                            class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-500 transition-colors flex items-center gap-2 font-medium text-lg">
-                        <span>➡️</span> Forward
-                    </button>
-                </div>
-                <div class="flex gap-3">
-                    <button onclick="archiveMessage('${msg.id}')" 
-                            class="px-6 py-3 bg-gray-800 text-gray-300 rounded-lg hover:bg-gray-700 hover:text-white transition-colors flex items-center gap-2 font-medium border border-gray-700 text-lg">
-                        <span>📦</span> Archive
-                    </button>
-                    <button onclick="deleteMessage('${msg.id}')" 
-                            class="px-6 py-3 bg-red-900/50 text-red-300 rounded-lg hover:bg-red-800 hover:text-white transition-colors flex items-center gap-2 font-medium border border-red-900/50 text-lg">
-                        <span>🗑️</span> Delete
-                    </button>
-                </div>
-            </div>
-            
-            <!-- Reply Form (hidden by default) -->
-            <div id="reply-form" class="hidden mt-8 bg-gray-850 p-6 rounded-xl border border-gray-800">
-                <h3 class="text-xl font-bold mb-4">Reply to <span id="reply-to"></span></h3>
-                <div class="mb-4">
-                    <label class="block text-gray-400 mb-2 text-lg">From (your agent ID):</label>
-                    <input type="text" id="reply-from" value="${currentAgentId}" 
-                           class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-3 text-lg text-white focus:border-purple-500 focus:outline-none">
-                </div>
-                <div class="mb-4">
-                    <label class="block text-gray-400 mb-2 text-lg">Message:</label>
-                    <textarea id="reply-body" rows="6" 
-                              class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-3 text-lg text-white focus:border-purple-500 focus:outline-none resize-none"></textarea>
-                </div>
-                <div class="mb-4">
-                    <label class="block text-gray-400 mb-2 text-lg">Attach Files (max 5MB each):</label>
-                    <input type="file" id="reply-files" multiple 
-                           class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-3 text-lg text-white file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:bg-purple-600 file:text-white file:cursor-pointer">
-                    <div id="file-list" class="mt-2 text-sm text-gray-400"></div>
-                </div>
-                <div class="flex gap-4 justify-end">
-                    <button onclick="hideReplyForm()" 
-                            class="px-6 py-3 bg-gray-800 text-gray-300 rounded-lg hover:bg-gray-700 text-lg">Cancel</button>
-                    <button onclick="sendReply()" 
-                            class="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-500 font-medium text-lg">Send Reply</button>
-                </div>
-            </div>
-        </div>
-    `;
-}
-
-function escapeHtml(text) {
-    if (!text) return '';
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
-}
-
-function readFileAsBase64(file) {
-    return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => {
-            // Remove data URL prefix to get just base64
-            const base64 = reader.result.split(',')[1];
-            resolve(base64);
-        };
-        reader.onerror = reject;
-        reader.readAsDataURL(file);
-    });
-}
-
-function formatFileSize(bytes) {
-    if (bytes < 1024) return bytes + ' B';
-    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
-    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
-}
-
-function downloadAttachment(name, type, data) {
-    const link = document.createElement('a');
-    link.href = `data:${type};base64,${data}`;
-    link.download = name;
-    link.click();
-}
-
-function getFileIcon(mimeType) {
-    if (!mimeType) return '📄';
-    if (mimeType.startsWith('image/')) return '🖼️';
-    if (mimeType.startsWith('video/')) return '🎬';
-    if (mimeType.startsWith('audio/')) return '🎵';
-    if (mimeType.includes('pdf')) return '📕';
-    if (mimeType.includes('zip') || mimeType.includes('archive')) return '📦';
-    if (mimeType.includes('text')) return '📝';
-    if (mimeType.includes('json') || mimeType.includes('javascript')) return '💻';
-    return '📄';
-}
-
-let replyToRecipient = '';
-let replyToSubject = '';
-
-function showReplyForm(msgId, sender) {
-    // If replying to a message you sent, the reply should go back to the recipient
-    // But we don't have that info easily, so just warn
-    if (sender === currentAgentId) {
-        const actualRecipient = prompt(`You sent this message. Who should the reply go to?`, sender);
-        if (!actualRecipient) return;
-        replyToRecipient = actualRecipient;
-    } else {
-        replyToRecipient = sender;
-    }
-
-    const currentMsg = document.querySelector('h1').textContent;
-    replyToSubject = currentMsg.startsWith('Re:') ? currentMsg : `Re: ${currentMsg}`;
-
-    document.getElementById('reply-to').textContent = replyToRecipient;
-    document.getElementById('reply-form').classList.remove('hidden');
-    document.getElementById('reply-body').focus();
-}
-
-function hideReplyForm() {
-    document.getElementById('reply-form').classList.add('hidden');
-}
-
-async function sendReply() {
-    const from = document.getElementById('reply-from').value;
-    const body = document.getElementById('reply-body').value;
-    const fileInput = document.getElementById('reply-files');
-
-    if (!body.trim()) {
-        alert('Please enter a message');
-        return;
-    }
-
-    // Process attachments
-    const attachments = [];
-    const MAX_SIZE = 5 * 1024 * 1024; // 5MB
-
-    if (fileInput && fileInput.files.length > 0) {
-        for (const file of fileInput.files) {
-            if (file.size > MAX_SIZE) {
-                alert(`File "${file.name}" exceeds 5MB limit`);
-                return;
-            }
-
-            const base64 = await readFileAsBase64(file);
-            attachments.push({
-                name: file.name,
-                type: file.type || 'application/octet-stream',
-                data: base64,
-                size: file.size
-            });
-        }
-    }
-
-    try {
-        console.log('Sending reply to:', replyToRecipient, 'from:', from);
-        const response = await fetch('/api/send', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                to: replyToRecipient,
-                subject: replyToSubject,
-                body: body,
-                from: from,
-                attachments: attachments.length > 0 ? attachments : undefined
-            })
-        });
-
-        const result = await response.json();
-        console.log('Reply result:', result);
-
-        if (!response.ok || !result.success) {
-            throw new Error(result.error || 'Failed to send');
-        }
-
-        hideReplyForm();
-        alert('Reply sent!' + (attachments.length > 0 ? ` (${attachments.length} attachment(s))` : ''));
-        loadInbox(true);
-    } catch (err) {
-        console.error('Send reply error:', err);
-        alert('Failed to send reply: ' + err.message);
-    }
-}
-
-async function forwardMessage(id) {
-    const recipient = prompt('Forward to (agent ID):');
-    if (!recipient) return;
-
-    try {
-        const res = await fetch(`/api/message/${id}`);
-        const msg = await res.json();
-
-        const from = prompt('Your agent ID:', currentAgentId);
-        if (!from) return;
-
-        await fetch('/api/send', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                to: recipient,
-                subject: `Fwd: ${msg.subject || '(no subject)'}`,
-                body: `---------- Forwarded message ----------\nFrom: ${msg.sender}\nTo: ${msg.recipient}\n\n${msg.body}`,
-                from: from
-            })
-        });
-
-        alert('Message forwarded!');
-    } catch (err) {
-        alert('Failed to forward message');
-    }
-}
-
-async function deleteMessage(id) {
-    if (!confirm('Delete this message permanently?')) return;
-
-    try {
-        await fetch(`/api/message/${id}`, { method: 'DELETE' });
-
-        // Clear detail view
-        const detail = document.getElementById('message-detail');
-        detail.innerHTML = `
-            <div class="flex flex-col items-center justify-center h-full text-gray-500 gap-4">
-                <span class="text-6xl opacity-20">🗑️</span>
-                <p>Message deleted</p>
-            </div>
-        `;
-
-        currentMessageId = null;
-        loadInbox(false);
-    } catch (err) {
-        alert('Failed to delete message');
-    }
-}
-
-async function archiveMessage(id) {
-    if (!confirm('Archive this message?')) return;
-
-    try {
-        await fetch(`/api/message/${id}/archive`, { method: 'POST' });
-
-        // Clear detail view
-        const detail = document.getElementById('message-detail');
-        detail.innerHTML = `
-            <div class="flex flex-col items-center justify-center h-full text-gray-500 gap-4">
-                <span class="text-6xl opacity-20">📦</span>
-                <p>Message archived</p>
-            </div>
-        `;
-
-        currentMessageId = null;
-        loadInbox(false);
-    } catch (err) {
-        alert('Failed to archive message');
-    }
-}
-
-function updateStats(data) {
-    const unreadCount = data.messages.filter(m => !m.read && (!m.readBy || !m.readBy.includes(currentAgentId))).length;
-    document.getElementById('stats').innerHTML = `
-        <span class="mr-3">Total: <span class="text-white font-bold">${data.total}</span></span>
-        <span class="${unreadCount > 0 ? 'text-blue-400 font-bold' : ''}">Unread: ${unreadCount}</span>
-    `;
-
-    // Update tab title
-    document.title = unreadCount > 0 ? `(${unreadCount}) Myceliumail` : 'Myceliumail Dashboard';
-}
-
-// Initial load
-requestNotificationPermission();
-setupRealtime();
-loadInbox();
-
-// Poll every 30 seconds as fallback (Realtime handles instant updates)
-setInterval(() => loadInbox(true), 30000);

package/src/dashboard/public/index.html

@@ -1,75 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <title>🍄 Myceliumail Dashboard</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
-    <link rel="stylesheet" href="/styles.css">
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        gray: {
-                            850: '#1f2937',
-                            950: '#030712',
-                        }
-                    }
-                }
-            }
-        }
-    </script>
-</head>
-
-<body class="bg-gray-950 text-gray-100 min-h-screen">
-    <div class="container mx-auto p-6 h-screen flex flex-col">
-        <!-- Header -->
-        <header class="flex justify-between items-center mb-6 shrink-0">
-            <div class="flex items-center gap-3">
-                <span class="text-4xl">🍄</span>
-                <h1
-                    class="text-3xl font-bold bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent">
-                    Myceliumail</h1>
-            </div>
-            <div id="stats" class="text-sm text-gray-400 bg-gray-900 px-4 py-2 rounded-full border border-gray-800">
-                Loading...
-            </div>
-        </header>
-
-        <!-- Main Content -->
-        <div class="grid grid-cols-12 gap-6 flex-1 min-h-0">
-            <!-- Inbox List -->
-            <div class="col-span-4 bg-gray-900 rounded-xl border border-gray-800 flex flex-col overflow-hidden">
-                <div
-                    class="p-4 border-b border-gray-800 bg-gray-900/50 backdrop-blur flex items-center justify-between">
-                    <h2 class="text-xl font-semibold text-gray-200">Inbox</h2>
-                    <button onclick="loadInbox(false)"
-                        class="p-2 text-gray-400 hover:text-white hover:bg-gray-800 rounded-lg transition-colors"
-                        title="Refresh inbox">
-                        🔄
-                    </button>
-                </div>
-                <div id="inbox-list" class="flex-1 overflow-y-auto p-2 space-y-2">
-                    <!-- Messages will act here -->
-                </div>
-            </div>
-
-            <!-- Message Detail -->
-            <div
-                class="col-span-8 bg-gray-900 rounded-xl border border-gray-800 flex flex-col overflow-hidden relative">
-                <div id="message-detail" class="flex-1 overflow-y-auto p-8">
-                    <div class="flex flex-col items-center justify-center h-full text-gray-500 gap-4">
-                        <span class="text-6xl opacity-20">📨</span>
-                        <p>Select a message to view</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <script src="/app.js"></script>
-</body>
-
-</html>

package/src/dashboard/public/styles.css

@@ -1,68 +0,0 @@
-html {
-    font-size: clamp(18px, 2.5vw, 22px);
-}
-
-body {
-    scrollbar-gutter: stable;
-    font-size: 1.1rem;
-    line-height: 1.6;
-}
-
-::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-}
-
-::-webkit-scrollbar-track {
-    background: #111827;
-}
-
-::-webkit-scrollbar-thumb {
-    background: #374151;
-    border-radius: 5px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: #4b5563;
-}
-
-.anim-fade-in {
-    animation: fadeIn 0.3s ease-out;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.message-item:active {
-    transform: scale(0.98);
-}
-
-/* Larger text helpers */
-.text-base {
-    font-size: 1.1rem !important;
-}
-
-.text-lg {
-    font-size: 1.25rem !important;
-}
-
-.text-xl {
-    font-size: 1.5rem !important;
-}
-
-.text-2xl {
-    font-size: 1.75rem !important;
-}
-
-.text-3xl {
-    font-size: 2rem !important;
-}