myceliumail 1.0.9 → 1.0.13

package/mobile-app/app/message/[id]/page.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { supabase, Message, markAsRead } from '@/lib/supabase';
+import Link from 'next/link';
+
+export default function MessageDetailPage() {
+    const params = useParams();
+    const router = useRouter();
+    const messageId = params.id as string;
+
+    const [message, setMessage] = useState<Message | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        if (!messageId) return;
+
+        const loadMessage = async () => {
+            const { data, error: fetchError } = await supabase
+                .from('agent_messages')
+                .select('*')
+                .eq('id', messageId)
+                .single();
+
+            if (fetchError) {
+                setError('Failed to load message');
+                setLoading(false);
+                return;
+            }
+
+            setMessage(data);
+            setLoading(false);
+
+            // Mark as read
+            if (!data.read) {
+                markAsRead(messageId);
+            }
+        };
+
+        loadMessage();
+    }, [messageId]);
+
+    const handleReply = () => {
+        if (!message) return;
+        router.push(`/compose?to=${message.from_agent}&subject=Re: ${encodeURIComponent(message.subject || '')}`);
+    };
+
+    if (loading) {
+        return (
+            <div className="min-h-screen bg-gray-950 text-white flex items-center justify-center">
+                <div className="text-center">
+                    <div className="text-4xl mb-4 animate-pulse">🍄</div>
+                    <p className="text-gray-500">Loading message...</p>
+                </div>
+            </div>
+        );
+    }
+
+    if (error || !message) {
+        return (
+            <div className="min-h-screen bg-gray-950 text-white flex items-center justify-center">
+                <div className="text-center">
+                    <div className="text-4xl mb-4">❌</div>
+                    <p className="text-red-400">{error || 'Message not found'}</p>
+                    <Link href="/" className="mt-4 inline-block px-4 py-2 bg-gray-800 rounded-lg">
+                        Back to Inbox
+                    </Link>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="min-h-screen bg-gray-950 text-white">
+            {/* Header */}
+            <header className="sticky top-0 z-10 bg-gray-950/90 backdrop-blur-sm border-b border-gray-800 px-4 py-4">
+                <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                        <Link href="/" className="text-2xl">←</Link>
+                        <span className="text-xl">{message.encrypted ? '🔐' : '📨'}</span>
+                    </div>
+                    <button
+                        onClick={handleReply}
+                        className="px-4 py-2 bg-purple-600 text-white text-sm rounded-lg font-medium hover:bg-purple-500 transition-colors"
+                    >
+                        ↩️ Reply
+                    </button>
+                </div>
+            </header>
+
+            {/* Message Content */}
+            <main className="px-4 py-6">
+                {/* Meta info */}
+                <div className="mb-6 p-4 bg-gray-900 rounded-xl border border-gray-800">
+                    <div className="grid grid-cols-2 gap-4 text-sm">
+                        <div>
+                            <span className="text-gray-400">From</span>
+                            <p className="text-blue-400 font-mono text-lg">{message.from_agent}</p>
+                        </div>
+                        <div>
+                            <span className="text-gray-400">To</span>
+                            <p className="text-green-400 font-mono text-lg">{message.to_agent}</p>
+                        </div>
+                    </div>
+                    <div className="mt-3 text-gray-500 text-sm">
+                        {new Date(message.created_at).toLocaleString()}
+                    </div>
+                </div>
+
+                {/* Subject */}
+                <h1 className="text-2xl font-bold mb-6">
+                    {message.subject || '(no subject)'}
+                </h1>
+
+                {/* Body */}
+                <div className="p-4 bg-gray-900 rounded-xl border border-gray-800">
+                    <p className="whitespace-pre-wrap text-gray-300 leading-relaxed">
+                        {message.message}
+                    </p>
+                </div>
+            </main>
+        </div>
+    );
+}

package/mobile-app/app/page.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { supabase, getInbox, getAgentKeys, Message } from '@/lib/supabase';
+import MessageCard from '@/components/MessageCard';
+import Link from 'next/link';
+
+// Default agents if we can't fetch from agent_keys
+const DEFAULT_AGENTS = ['treebird', 'wsan', 'ssan', 'mycm', 'antigravity'];
+
+export default function InboxPage() {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [agents, setAgents] = useState<string[]>(DEFAULT_AGENTS);
+  const [error, setError] = useState<string | null>(null);
+
+  const loadInbox = useCallback(async () => {
+    try {
+      // Try to get agents from agent_keys table
+      const agentKeys = await getAgentKeys();
+      const agentIds = agentKeys.length > 0 ? agentKeys : DEFAULT_AGENTS;
+      setAgents(agentIds);
+
+      const inbox = await getInbox(agentIds, 50);
+      setMessages(inbox);
+      setError(null);
+    } catch (err) {
+      console.error('Failed to load inbox:', err);
+      setError('Failed to load messages');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadInbox();
+
+    // Set up real-time subscription
+    const channel = supabase
+      .channel('mobile-inbox')
+      .on(
+        'postgres_changes',
+        {
+          event: 'INSERT',
+          schema: 'public',
+          table: 'agent_messages',
+        },
+        (payload) => {
+          const newMsg = payload.new as Message;
+          // Check if this message is for one of our agents
+          if (agents.includes(newMsg.to_agent)) {
+            setMessages(prev => [newMsg, ...prev]);
+          }
+        }
+      )
+      .subscribe();
+
+    return () => {
+      supabase.removeChannel(channel);
+    };
+  }, [loadInbox, agents]);
+
+  const unreadCount = messages.filter(m => !m.read).length;
+
+  return (
+    <div className="min-h-screen bg-gray-950 text-white">
+      {/* Header */}
+      <header className="sticky top-0 z-10 bg-gray-950/90 backdrop-blur-sm border-b border-gray-800 px-4 py-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <span className="text-3xl">🍄</span>
+            <h1 className="text-xl font-bold bg-gradient-to-r from-purple-400 to-pink-500 bg-clip-text text-transparent">
+              Myceliumail
+            </h1>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => { setLoading(true); loadInbox(); }}
+              className="p-2 rounded-lg hover:bg-gray-800 transition-colors"
+            >
+              🔄
+            </button>
+            <Link
+              href="/compose"
+              className="px-4 py-2 bg-purple-600 text-white text-sm rounded-lg font-medium hover:bg-purple-500 transition-colors"
+            >
+              ✉️ Compose
+            </Link>
+          </div>
+        </div>
+        <div className="mt-2 text-sm text-gray-400">
+          {unreadCount > 0 ? (
+            <span className="text-blue-400">{unreadCount} unread</span>
+          ) : (
+            <span>No unread messages</span>
+          )} · {messages.length} total
+        </div>
+      </header>
+
+      {/* Message List */}
+      <main className="px-4 py-4 space-y-3">
+        {loading ? (
+          <div className="text-center py-12 text-gray-500">
+            <div className="text-4xl mb-4 animate-pulse">🍄</div>
+            <p>Loading messages...</p>
+          </div>
+        ) : error ? (
+          <div className="text-center py-12 text-red-400">
+            <div className="text-4xl mb-4">❌</div>
+            <p>{error}</p>
+            <button
+              onClick={loadInbox}
+              className="mt-4 px-4 py-2 bg-gray-800 rounded-lg"
+            >
+              Retry
+            </button>
+          </div>
+        ) : messages.length === 0 ? (
+          <div className="text-center py-12 text-gray-500">
+            <div className="text-4xl mb-4">📭</div>
+            <p>No messages yet</p>
+          </div>
+        ) : (
+          messages.map(message => (
+            <MessageCard key={message.id} message={message} />
+          ))
+        )}
+      </main>
+    </div>
+  );
+}

package/mobile-app/components/MessageCard.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+import { Message } from '@/lib/supabase';
+import Link from 'next/link';
+
+interface MessageCardProps {
+    message: Message;
+}
+
+export default function MessageCard({ message }: MessageCardProps) {
+    const isUnread = !message.read;
+    const timeAgo = formatTimeAgo(new Date(message.created_at));
+
+    return (
+        <Link href={`/message/${message.id}`}>
+            <div className={`
+        p-4 rounded-xl border transition-all active:scale-[0.98]
+        ${isUnread
+                    ? 'bg-gray-800/50 border-gray-700'
+                    : 'bg-gray-900 border-gray-800'
+                }
+      `}>
+                <div className="flex items-center justify-between mb-2">
+                    <div className="flex items-center gap-2">
+                        <span className="text-lg">
+                            {message.encrypted ? '🔐' : '📨'}
+                        </span>
+                        <span className={`font-medium ${isUnread ? 'text-white' : 'text-gray-300'}`}>
+                            {message.from_agent}
+                        </span>
+                        <span className="text-gray-500 text-sm">→ {message.to_agent}</span>
+                    </div>
+                    {isUnread && (
+                        <span className="w-2 h-2 rounded-full bg-blue-500" />
+                    )}
+                </div>
+                <div className={`text-base truncate mb-1 ${isUnread ? 'text-gray-100 font-medium' : 'text-gray-400'}`}>
+                    {message.subject || '(no subject)'}
+                </div>
+                <div className="text-sm text-gray-500">
+                    {timeAgo}
+                </div>
+            </div>
+        </Link>
+    );
+}
+
+function formatTimeAgo(date: Date): string {
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    const diffHours = Math.floor(diffMs / 3600000);
+    const diffDays = Math.floor(diffMs / 86400000);
+
+    if (diffMins < 1) return 'just now';
+    if (diffMins < 60) return `${diffMins}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays < 7) return `${diffDays}d ago`;
+    return date.toLocaleDateString();
+}

package/mobile-app/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

package/mobile-app/lib/supabase.ts

@@ -0,0 +1,87 @@
+import { createClient } from '@supabase/supabase-js';
+
+// Supabase configuration - using the same credentials as mycmail
+const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL || 'https://ruvwundetxnzesrbkdzr.supabase.co';
+const SUPABASE_ANON_KEY = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY || '';
+
+export const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
+    realtime: {
+        params: { eventsPerSecond: 10 }
+    }
+});
+
+export interface Message {
+    id: string;
+    from_agent: string;
+    to_agent: string;
+    subject: string;
+    message: string;
+    encrypted: boolean;
+    read: boolean;
+    created_at: string;
+}
+
+export async function getInbox(agentIds: string[], limit = 50): Promise<Message[]> {
+    const { data, error } = await supabase
+        .from('agent_messages')
+        .select('*')
+        .in('to_agent', agentIds)
+        .order('created_at', { ascending: false })
+        .limit(limit);
+
+    if (error) {
+        console.error('Failed to fetch inbox:', error);
+        return [];
+    }
+
+    return data || [];
+}
+
+export async function sendMessage(
+    from: string,
+    to: string,
+    subject: string,
+    body: string
+): Promise<Message | null> {
+    const { data, error } = await supabase
+        .from('agent_messages')
+        .insert({
+            from_agent: from,
+            to_agent: to,
+            subject,
+            message: body,
+            encrypted: false,
+            read: false,
+        })
+        .select()
+        .single();
+
+    if (error) {
+        console.error('Failed to send message:', error);
+        return null;
+    }
+
+    return data;
+}
+
+export async function markAsRead(messageId: string): Promise<boolean> {
+    const { error } = await supabase
+        .from('agent_messages')
+        .update({ read: true })
+        .eq('id', messageId);
+
+    return !error;
+}
+
+export async function getAgentKeys(): Promise<string[]> {
+    const { data, error } = await supabase
+        .from('agent_keys')
+        .select('agent_id');
+
+    if (error || !data) {
+        console.error('Failed to fetch agent keys:', error);
+        return [];
+    }
+
+    return data.map(row => row.agent_id);
+}

package/mobile-app/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;