ONE Platform: Mail Application v1.0.0

Focus: Full-featured email client application with inbox, compose, threads, and rich editor Type: Complete frontend application (Astro + React 19 + Tailwind v4) UI Pattern: Gmail-like interface with sidebar, email list, and detail view Process: Cycle 1-100 cycle sequence Timeline: 12-16 cycles per specialist per day Target: Fully functional mail app UI and state management

PHASE 1: FOUNDATION & ARCHITECTURE (Cycle 1-10)

Purpose: Define mail app requirements, data model, UI patterns

Cycle 1: Define Mail App Features

Cycle 2: Map Mail App to 6-Dimension Ontology

Cycle 3: Design Data Model

Email Object:

{
  id: string (uuid)
  from: { name, email }
  to: [{ name, email }]
  cc: [{ name, email }]
  bcc: [{ name, email }]
  subject: string
  body: string (HTML)
  plainText: string
  timestamp: number (ms)
  read: boolean
  starred: boolean
  archived: boolean
  spam: boolean
  deleted: boolean
  draftId?: string
  threadId: string
  labels: string[]
  attachments: Attachment[]
  replyTo?: string (email id)
  forwardOf?: string (email id)
  metadata: {
    unsubscribeLink?: string
    importance?: 'high' | 'normal' | 'low'
    category?: 'primary' | 'social' | 'promotions' | 'updates'
  }
}

Contact Object:

{
  id: string
  name: string
  email: string
  avatar?: string
  lastInteraction?: number
  frequency: number (how many emails)
  isFavorite?: boolean
  notes?: string
}

Label Object:

{
  id: string
  name: string
  color: string
  count: number
  unreadCount: number
}

Cycle 4: Design UI Layout

Cycle 5: Design Compose UI

Cycle 6: Design Responsive Behavior

Cycle 7: Design Search & Filtering

Cycle 8: Design Settings & Preferences

Cycle 9: Design Empty States & Error States

Cycle 10: Define Success Metrics

PHASE 2: REACT STATE & COMPONENTS (Cycle 11-30)

Purpose: Build React state management and interactive components

Cycle 11: Create Email Store (Zustand)

Cycle 12: Create UI Store (Zustand)

Cycle 13: Create MailSidebar Component

Cycle 14: Create EmailListItem Component

Cycle 15: Create EmailList Component

Cycle 16: Create EmailDetail Component

Cycle 17: Create ComposeForm Component

Cycle 18: Create RichTextEditor Component

Cycle 19: Create SearchBar Component

Cycle 20: Create AdvancedSearch Component

Cycle 21: Create ContactAutoComplete Component

Cycle 22: Create AttachmentUpload Component

Cycle 23: Create EmailThread Component

Cycle 24: Create ContextMenu Component

Cycle 25: Create SettingsPanel Component

Cycle 26: Create EmptyState Component

Display:
- Icon (inbox empty, search no results, etc.)
- Title (“No emails” / “No results”)
- Message (helpful text)
- CTA button (compose, clear search, etc.)
Props:
- type (inbox-empty, search-empty, folder-empty, etc.)
- onAction (callback for button)

Cycle 27: Create LoadingState Component

Cycle 28: Create HeaderNav Component

Cycle 29: Create FloatingComposeButton Component

Cycle 30: Create EmailCard Component

PHASE 3: ASTRO PAGES (Cycle 31-40)

Purpose: Create main Astro page structure

Cycle 31: Create Main Layout (MailLayout.astro)

Cycle 32: Create Mail Index Page (mail/index.astro)

Cycle 33: Create Mail Thread Page (mail/[threadId].astro)

PHASE 4: MOCK DATA & INTEGRATION (Cycle 41-50)

Purpose: Create realistic mock data and wire up components

Cycle 41: Create Mock Email Data

Cycle 42: Create Mock Contact Data

Cycle 43: Create Mock Label Data

Cycle 44: Wire Up Email Store to Mock Data

Cycle 45: Wire Up UI Store to Settings

Cycle 46: Implement Email Actions

Cycle 47: Implement Compose Draft System

Cycle 48: Implement Search & Filters

Cycle 49: Implement Responsive Behavior

Cycle 50: Implement Keyboard Shortcuts

PHASE 5: POLISH & OPTIMIZATION (Cycle 51-70)

Purpose: Refine UX, accessibility, performance

Cycle 51: Add Animations

Cycle 52: Implement Accessibility

Cycle 53: Optimize Performance

Cycle 54: Add Error Handling

Cycle 55: Add Toast Notifications

Cycle 56: Implement Dark Mode

Cycle 57: Add Print Styles

Cycle 58: Test All Interactions

Cycle 59: Test Mobile Experience

Cycle 60: Lighthouse Audit

Cycle 61: Add Loading Skeletons

Cycle 62: Add Drag & Drop

Cycle 63: Add Undo/Redo

Cycle 64: Create Help Documentation

Cycle 65: Add Analytics Events

Cycle 66: Create Settings Page

Cycle 67: Add Contact Management (Future)

Cycle 68: Add Snooze Feature (Future)

Cycle 69: Test Cross-Browser

Cycle 70: Final Polish

SUCCESS CRITERIA

Mail app is complete when:

✅ Inbox loads and displays mock emails
✅ Clicking email shows detail view with full content
✅ Compose form opens and accepts input
✅ Send email (mock) works
✅ Mark read/unread toggles
✅ Star/unstar toggles
✅ Archive removes from inbox
✅ Delete removes email (with undo)
✅ Search filters emails
✅ Reply/forward creates new email
✅ Attachments display
✅ Settings save and apply (theme, density)
✅ Mobile responsive (swipeable, full-width)
✅ Dark mode works
✅ Keyboard shortcuts functional
✅ Lighthouse > 80
✅ No console errors
✅ Accessible (WCAG 2.1 AA)

Timeline: 70-75 cycles for complete implementation Status: Ready to build Next: Use Claude Code to implement step by step following cycle sequence