Email Web Interface Skill

Description

Web interface for agent email communication (Lourens, Ace, etc.). Provides inbox viewing, draft creation/editing, and sending functionality via Gmail/Gog CLI integration.

When to Use

• When user needs to access agent email inboxes
• To compose and send non-bot emails
• To view and manage email drafts
• When existing webmail interfaces are clunky

Options Considered

Option A: Existing Webmail Solutions

1. Roundcube (Recommended)

   • Pros: Mature, feature-rich, good plugin ecosystem
   • Cons: Can be heavy, PHP-based

2. RainLoop

   • Pros: Modern, lightweight, good mobile support
   • Cons: Less mature, fewer features

3. SnappyMail

   • Pros: Fast, Gmail-like interface
   • Cons: Newer project, smaller community

Option B: Custom Interface

Build a custom React/Node.js interface that:

• Uses Gog CLI for Gmail API access
• Provides clean, minimal interface
• Integrates with Mission Control
• Tailored to our specific needs

Recommended Approach

Start with Roundcube, then customize if needed. Roundcube provides:

• Full email functionality out of the box
• IMAP/SMTP support (works with Gmail)
• Plugin system for customization
• Stable and well-documented

Procedure

1. Install Roundcube

# Install dependencies
apt-get update
apt-get install -y roundcube roundcube-core roundcube-mysql roundcube-plugins

# Or use Docker
docker run -d --name roundcube \
  -p 8081:80 \
  -e ROUNDCUBEMAIL_DEFAULT_HOST=ssl://imap.gmail.com \
  -e ROUNDCUBEMAIL_DEFAULT_PORT=993 \
  -e ROUNDCUBEMAIL_SMTP_SERVER=tls://smtp.gmail.com \
  -e ROUNDCUBEMAIL_SMTP_PORT=587 \
  roundcube/roundcubemail

2. Configure Gmail Access

Ace's Gmail account needs:

1. App Password (if 2FA enabled): Generate in Google Account → Security
2. IMAP enabled: Settings → Forwarding and POP/IMAP → Enable IMAP
3. Less secure apps (if needed): May require allowing less secure apps

3. Roundcube Configuration

// config/config.inc.php
$config['default_host'] = 'ssl://imap.gmail.com';
$config['default_port'] = 993;
$config['smtp_server'] = 'tls://smtp.gmail.com';
$config['smtp_port'] = 587;
$config['smtp_user'] = '[email protected]';
$config['smtp_pass'] = 'APP_PASSWORD_HERE';
$config['imap_conn_options'] = array(
  'ssl' => array(
    'verify_peer' => false,
    'verify_peer_name' => false,
  ),
);

4. Custom Integration (If Needed)

If Roundcube is clunky, build custom interface:

# Custom email interface using Gog CLI
from flask import Flask, render_template, request, jsonify
import subprocess
import json

app = Flask(__name__)

class EmailInterface:
    def __init__(self):
        self.gog_path = "/usr/local/bin/gog"
    
    def get_inbox(self, limit=50):
        """Get inbox emails via Gog CLI."""
        cmd = [self.gog_path, "gmail", "messages", "list", 
               "--limit", str(limit), "--format", "json"]
        
        try:
            result = subprocess.run(cmd, capture_output=True, text=True)
            if result.returncode == 0:
                return json.loads(result.stdout)
        except Exception as e:
            print(f"Error getting inbox: {e}")
        
        return []
    
    def get_message(self, message_id):
        """Get specific email message."""
        cmd = [self.gog_path, "gmail", "messages", "get",
               message_id, "--format", "json"]
        
        try:
            result = subprocess.run(cmd, capture_output=True, text=True)
            if result.returncode == 0:
                return json.loads(result.stdout)
        except Exception as e:
            print(f"Error getting message: {e}")
        
        return None
    
    def send_email(self, to, subject, body):
        """Send email via Gog CLI."""
        cmd = [self.gog_path, "gmail", "messages", "send",
               "--to", to, "--subject", subject, "--body", body]
        
        try:
            result = subprocess.run(cmd, capture_output=True, text=True)
            return result.returncode == 0
        except Exception as e:
            print(f"Error sending email: {e}")
            return False

@app.route('/')
def inbox():
    """Inbox view."""
    email_iface = EmailInterface()
    messages = email_iface.get_inbox(limit=20)
    return render_template('inbox.html', messages=messages)

@app.route('/message/\x3Cmessage_id>')
def view_message(message_id):
    """View specific message."""
    email_iface = EmailInterface()
    message = email_iface.get_message(message_id)
    return render_template('message.html', message=message)

@app.route('/compose', methods=['GET', 'POST'])
def compose():
    """Compose new email."""
    if request.method == 'POST':
        to = request.form['to']
        subject = request.form['subject']
        body = request.form['body']
        
        email_iface = EmailInterface()
        success = email_iface.send_email(to, subject, body)
        
        return jsonify({'success': success})
    
    return render_template('compose.html')

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8082, debug=True)

5. Mission Control Integration

Add email interface to Mission Control sidebar:

// mission-control sidebar config
{
  name: "📧 Ace Email",
  path: "/email",
  icon: "email",
  external: true,
  url: "http://localhost:8081"  // Roundcube
  // or: "http://localhost:8082"  // Custom interface
}

6. Security Considerations

1. HTTPS: Use reverse proxy with SSL
2. Authentication: Add login to email interface
3. Rate limiting: Prevent abuse
4. Logging: Monitor email access
5. Backup: Regular backup of important emails

Implementation Steps

Phase 1: Quick Setup (Today)

1. Install Roundcube via Docker
2. Configure with Ace's Gmail credentials
3. Test basic email functionality
4. Add link to Mission Control

Phase 2: Customization (This Week)

1. Evaluate Roundcube usability
2. If clunky, start custom interface development
3. Implement essential features:
   • Inbox with threading
   • Compose with rich text
   • Draft saving
   • Search functionality

Phase 3: Integration (Next Week)

1. Deep integration with Mission Control
2. Notification system for new emails
3. Email templates for common responses
4. Advanced search and filtering

Testing Checklist

• Can view inbox
• Can read emails
• Can compose new email
• Can send email
• Can save drafts
• Search works
• Mobile responsive
• Secure (HTTPS, auth)

Fallback Plan

If Roundcube doesn't work well:

1. Try RainLoop (lighter alternative)
2. Build minimal custom interface
3. Use Gog CLI directly with simple web wrapper

Resources

• Roundcube: https://roundcube.net
• Gmail IMAP: https://support.google.com/mail/answer/7126229
• Gog CLI: https://github.com/openclaw/gog
• Mission Control Integration Guide