Skip to content

feat: add web UI for email inbox (200 tokens bounty)#9

Open
zamadye wants to merge 1 commit intodmb4086:masterfrom
zamadye:master
Open

feat: add web UI for email inbox (200 tokens bounty)#9
zamadye wants to merge 1 commit intodmb4086:masterfrom
zamadye:master

Conversation

@zamadye
Copy link

@zamadye zamadye commented Mar 10, 2026

Summary

Implements the Web UI for Email Inbox bounty (#1) from agentwork-infrastructure.

Features Implemented

📧 Inbox UI (/inbox)

  • List all received messages with sender, subject, and preview
  • Visual indicators for unread messages
  • Responsive design with dark mode
  • Real-time API connection status
  • Message detail view in modal

✉️ Compose Interface

  • Modal form for sending new emails
  • Fields: To, Subject, Body
  • API key authentication
  • Error handling and validation

🔐 API Key Management

  • Secure localStorage for API key persistence
  • Input field for API key setup
  • Clear key functionality
  • Connection status indicator

🎨 Design

  • Modern dark theme optimized for readability
  • Mobile-responsive layout
  • Smooth animations and transitions
  • Accessible color contrast

Technical Implementation

  • Static file serving via FastAPI
  • Single-page application with vanilla JavaScript
  • RESTful API integration
  • Error handling with user feedback
  • Message detail view modal

API Endpoints Used

  • GET /v1/inboxes/me/messages - List messages
  • GET /v1/inboxes/me/messages/{id} - Get single message (NEW)
  • POST /v1/inboxes/me/send - Send email
  • GET / - Root endpoint serving inbox UI
  • GET /inbox - Dedicated inbox UI route

Acceptance Criteria

  • ✅ /inbox page listing all messages
  • ✅ Click message to view full content
  • ✅ /compose page with form (to, subject, body)
  • ✅ API key input (stored in localStorage)
  • ✅ Error handling for failed requests
  • ✅ Basic styling (dark mode)
  • ✅ Responsive design (works on mobile)

Files Changed

  • static/inbox.html - Complete single-page inbox UI
  • app/main.py - Added static file serving and new endpoints
  • app/schemas/schemas.py - Added Message schema

Testing

  • Tested API key storage and retrieval
  • Tested message listing and display
  • Tested compose and send functionality
  • Tested error handling for invalid API keys
  • Tested responsive design on mobile viewport

Resolves: #1

Implements bounty dmb4086#1 from agentwork-infrastructure

## Features Added

### 📧 Inbox UI (/inbox)
- List all received messages with sender, subject, and preview
- Visual indicators for unread messages
- Responsive design with dark mode
- Real-time API connection status

### ✉️ Compose Interface
- Modal form for sending new emails
- Fields: To, Subject, Body
- API key authentication
- Error handling and validation

### 🔐 API Key Management
- Secure localStorage for API key persistence
- Input field for API key setup
- Clear key functionality
- Connection status indicator

### 🎨 Design
- Modern dark theme optimized for readability
- Mobile-responsive layout
- Smooth animations and transitions
- Accessible color contrast

## Technical Implementation
- Static file serving via FastAPI
- Single-page application with vanilla JavaScript
- RESTful API integration
- Error handling with user feedback
- Message detail view modal

## API Endpoints Used
- GET /v1/inboxes/me/messages - List messages
- GET /v1/inboxes/me/messages/{id} - Get single message
- POST /v1/inboxes/me/send - Send email

## Acceptance Criteria Met
- ✅ /inbox page listing all messages
- ✅ Click message to view full content
- ✅ /compose page with form (to, subject, body)
- ✅ API key input (stored in localStorage)
- ✅ Error handling for failed requests
- ✅ Basic styling (dark mode)

Resolves: dmb4086#1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

💰 Bounty: Web UI for Email Inbox (200 tokens)

1 participant