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
-
Roundcube (Recommended)
- Pros: Mature, feature-rich, good plugin ecosystem
- Cons: Can be heavy, PHP-based
-
RainLoop
- Pros: Modern, lightweight, good mobile support
- Cons: Less mature, fewer features
-
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:
- App Password (if 2FA enabled): Generate in Google Account → Security
- IMAP enabled: Settings → Forwarding and POP/IMAP → Enable IMAP
- 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'] = 'ace.agent.email@gmail.com';
$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/<message_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
- HTTPS: Use reverse proxy with SSL
- Authentication: Add login to email interface
- Rate limiting: Prevent abuse
- Logging: Monitor email access
- Backup: Regular backup of important emails
Implementation Steps
Phase 1: Quick Setup (Today)
- Install Roundcube via Docker
- Configure with Ace's Gmail credentials
- Test basic email functionality
- Add link to Mission Control
Phase 2: Customization (This Week)
- Evaluate Roundcube usability
- If clunky, start custom interface development
- Implement essential features:
- Inbox with threading
- Compose with rich text
- Draft saving
- Search functionality
Phase 3: Integration (Next Week)
- Deep integration with Mission Control
- Notification system for new emails
- Email templates for common responses
- Advanced search and filtering
Testing Checklist
Fallback Plan
If Roundcube doesn't work well:
- Try RainLoop (lighter alternative)
- Build minimal custom interface
- Use Gog CLI directly with simple web wrapper
Resources
