← Discover MCPs and Agents
m
AgentAI & MLGitHub

mcp_agent_mail_website

Links

README

From the repo.

MCP Agent Mail Website

Next.js React TypeScript Bun Deploy Tests License

The marketing, documentation, and interactive visualization site for MCP Agent Mail, a coordination infrastructure for AI coding agents.

Live site: https://mcpagentmail.com Engine source: https://github.com/Dicklesworthstone/mcp_agent_mail_rust

Quick Install

git clone https://github.com/Dicklesworthstone/mcp_agent_mail_website.git
cd mcp_agent_mail_website
bun install
bun dev

If you only want to browse, open https://mcpagentmail.com.

TL;DR

The Problem: Multi-agent AI coding sessions (Claude Code, Codex CLI, Gemini CLI) need coordination, but most project sites either explain the internals poorly or treat documentation as an afterthought. Interactive systems with 38 MCP tools, file reservations, threaded messaging, and cross-project coordination need something better than a flat docs page.

The Solution: This site keeps product narrative, technical architecture, and interactive demonstrations in one place. A broad gallery of interactive visualizations lets users explore identity systems, message lifecycles, file reservations, Search V3, stress gauntlet scenarios, and rollout mechanics, all rendered client-side with zero backend dependencies.

Why This Setup Works

CapabilityPractical Benefit
Centralized content modelAll static content maintained in one 3200-line lib/content.ts
Interactive visualization galleryComplex coordination behavior shown through animated components
Spec explorerFull technical specification browsable with search and category filtering
Performance-aware frontendHeavy components lazy-loaded via LazyViz with viewport detection
Strict TypeScript + lintingSafer refactors and clearer maintenance boundaries
Vitest + Playwright suitesUnit and browser tests cover content, UI primitives, and critical user flows
JSON-LD structured dataFour schema types (SoftwareApplication, WebSite, FAQPage, HowTo)
Bun-only workflowOne package manager and one lockfile path

Quick Example

# 1) Install dependencies
bun install

# 2) Start local dev server (Turbopack)
bun dev

# 3) Visit key pages
#    http://localhost:3000/                  Home (hero, features, comparisons, code examples)
#    http://localhost:3000/showcase          Interactive visualization gallery
#    http://localhost:3000/architecture      Engine internals
#    http://localhost:3000/spec-explorer     Specification browser
#    http://localhost:3000/getting-started   Onboarding guide
#    http://localhost:3000/glossary          Searchable terminology

# 4) Run static checks
bun tsc --noEmit
bun lint

# 5) Run tests
bun run test                # Unit tests (Vitest)
bun run test:e2e            # Browser tests (Playwright)

# 6) Build production bundle
bun run build

Design Philosophy

  1. Use demonstrations for complex behavior When possible, show coordination behavior directly with interactive visualizations rather than prose. File reservations, message lifecycles, and stress gauntlet scenarios are animated, not just described.

  2. Keep content in one main source file lib/content.ts is the single source of truth for all static site copy, feature lists, comparison data, code examples, glossary terms, FAQ, testimonials, JSON-LD generators, and media metadata.

  3. Avoid unnecessary moving parts No CMS, no external APIs for core functionality, no runtime database. All content is compiled into the bundle. The spec explorer fetches markdown files from /public/spec-docs/ on demand.

  4. Respect user preferences All animations honor prefers-reduced-motion. Heavy visualizations defer rendering until near the viewport via LazyViz. Lab mode (Ctrl+Shift+X) unlocks experimental features.

  5. Keep quality checks routine Type-checking, linting, unit tests, and E2E tests are part of normal development. CI runs both suites on every push.

How It Compares

DimensionThis ProjectGeneric Static Docs SiteTypical Marketing Landing Page
Technical depthHigh (formal models, spec explorer)Medium/LowLow
InteractivityInteractive visualization galleryLowMedium
Coordination demosLive animated walkthroughsNoneNone
Content editing modelSingle TS source fileSplit across many filesOften CMS-based
Testing coverageVitest unit + Playwright browser suitesRareRare
SEO structureFour JSON-LD schema typesBasic meta tagsBasic meta tags
Best use caseProduct + technical docs for complex systemsReference docsTop-of-funnel marketing

What MCP Agent Mail Does

MCP Agent Mail provides coordination infrastructure for multi-agent AI coding sessions. When 5, 10, or 40+ AI coding agents (Claude Code, Codex CLI, Gemini CLI) work on the same codebase simultaneously, they need to know who is editing what, communicate about design decisions, and avoid silently overwriting each other's work.

Without coordination, agents step on each other constantly. Two agents edit the same file. A third agent wastes tokens re-implementing something the first agent already finished. Nobody knows what happened or why. The commit history is chaos.

Agent Mail solves this with five core primitives:

1. Project-Scoped Identity Every agent gets a memorable, persistent identity (GreenCastle, BlueLake, RedHarbor), automatically generated on registration. Identities carry metadata (which program, which model, what task) and persist across reconnections, replacing anonymous processes that have no way to identify each other.

2. Threaded Asynchronous Messaging Agents communicate through structured messages with subjects, recipients, CC/BCC, importance levels, and acknowledgment requirements. Messages are stored in a Git-backed archive, never consuming agent context windows. Threads track design decisions over time with full auditability.

3. Advisory File Reservations Before editing, agents declare exclusive or shared leases on file glob patterns (e.g., src/auth/**/*.ts). Reservations are advisory by default, visible to all agents and enforced by an optional pre-commit guard hook. TTL-based expiration prevents stale locks from blocking work.

4. Hybrid Search Two-tier fusion combining lexical and semantic search with reranking. Field-based filters (subject:, body:, from:), cross-project search via product bus, and relevance scoring built on frankensearch. Agents recover context from message history before asking teammates for status.

5. Operator Visibility A 16-screen TUI dashboard plus a web UI give humans real-time visibility into what every agent is doing. The Human Overseer compose form lets operators send high-priority messages to redirect agents mid-session.

The Numbers

MetricValueContext
MCP Tools38Coordination primitives across 9 clusters
MCP Resources25Agent-discoverable read-only surfaces
Stress Gauntlet10/10All representative high-load scenarios passed
Sustained Throughput~49 RPSMixed workload stress profile baseline
Concurrent Agents40-50Proven in production with zero coordination failures
Rust Crates12Active workspace members, plus a standalone dashboard WASM workspace

Agent Mail vs. Alternatives

The full comparison across 12 coordination dimensions:

FeatureAgent MailGit WorktreesShared DocsNo Coordination
Agent IdentityPersistent, project-scopedNoneManual namingNone
MessagingThreaded + searchableNoneAppend-only filesNone
File Conflict PreventionAdvisory reservations + guardIsolated branchesNoneNone
Audit TrailGit + SQLiteGit history onlyFile historyNone
Cross-Project CoordinationProduct busNoneNoneNone
SearchHybrid lexical + semanticGit logText searchNone
Operator Visibility16-screen TUI + Web UIGit logFile browserNone
MCP Integration38 tools + 25 resourcesNoneNoneNone
Agent DiscoveryAuto-detect + registerManualManualManual
AcknowledgmentsBuilt-in ack protocolNoneNoneNone
Build ConcurrencyBuild slot managementNoneNoneRace conditions
Stress Tested10/10 gauntlet (30 agents)N/AN/AN/A

Git worktrees isolate branches but provide zero communication or coordination primitives. Shared document schemes (files in a .coordination/ directory) lack threading, search, identity, and acknowledgments. No coordination means silent overwrites, wasted tokens, and merge hell.

Three Operational Pillars

The Getting Started page organizes Agent Mail around three pillars:

1. Scoped Agent Identity. Project-scoped identities maintain thread continuity and explicit inbox semantics. Parallel agents stay coordinated instead of colliding.

2. Reservation Guardrails. Advisory file reservations plus optional guard enforcement make ownership visible before edits and safer at commit time.

3. Auditable Workflows. Messages, acknowledgements, and search traces are queryable in SQLite and preserved in a Git-auditable archive. Every coordination action is recoverable.

Agent Mail in Action

# Install Agent Mail (one-liner)
curl -fsSL "https://raw.githubusercontent.com/Dicklesworthstone/mcp_agent_mail_rust/main/install.sh?$(date +%s)" | bash

# Start the server + TUI
am

# Bootstrap a session (project + agent + inbox in one call)
macro_start_session(
  human_key="/abs/path/to/repo",
  program="claude-code",
  model="opus-4.6",
  task_description="Implementing auth module"
)
# Returns: { project, agent, file_reservations, inbox }

# Reserve files before editing
file_reservation_paths(
  project_key="/abs/path/to/repo",
  agent_name="GreenCastle",
  paths=["src/auth/**/*.ts", "src/middleware/auth.ts"],
  ttl_seconds=3600,
  exclusive=true,
  reason="bd-123"
)

# Coordinate through threaded messages
send_message(
  project_key="/abs/path/to/repo",
  sender_name="GreenCastle",
  to=["BlueLake"],
  subject="[bd-123] Starting auth refactor",
  body_md="Reserved src/auth/**. Taking login + token rotation.",
  thread_id="bd-123",
  ack_required=true
)

MCP config for Claude Code (.mcp.json):

{
  "mcpServers": {
    "agent-mail": {
      "command": "mcp-agent-mail",
      "args": []
    }
  }
}

Tech Stack

LayerTechnology
FrameworkNext.js 16 (App Router, Turbopack)
UIReact 19, TypeScript (strict mode)
StylingTailwind CSS 4
Motionframer-motion
Iconslucide-react
Data layerTanStack Query + Table + Virtual + Form
Markdownmarked + DOMPurify (XSS-safe rendering)
Utilitiesclsx + tailwind-merge
Unit testingVitest 4 + Testing Library
E2E testingPlaywright 1.58
Package managerbun only
DeploymentVercel

Routes

RoutePurposeKey Sections
/Primary landing + value propositionHero media, proof strip, concepts deep-dive, features grid, comparison table, code examples, architecture preview, adoption CTAs
/showcaseInteractive visualization galleryAnimated demos organized by coordination concept
/architectureFormal system internalsRuntime model, structured concurrency regions, cancel protocol, state machines, capability tiers
/spec-explorerTechnical specification browserSearchable spec library with markdown rendering and category filtering
/getting-startedOnboarding guideInstallation, quickstart, MCP config, operational pillars, FAQ
/glossaryTerminology referenceSearchable index with short and long definitions

The 38 MCP Tools

Agent Mail exposes 38 tools organized into 9 clusters, all accessible via the Model Context Protocol standard:

Infrastructure

Bootstrap project context, health checks, server lifecycle.

  • health_check, ensure_project, install_precommit_guard, uninstall_precommit_guard
  • When to use: When an agent joins a repository or diagnostics indicate drift.

Identity

Create and update persistent agent identities and metadata.

  • register_agent, create_agent_identity, whois, resolve_pane_identity, cleanup_pane_identities, list_agents
  • When to use: Before sending mail or reserving files.

Messaging

Coordinate work asynchronously with durable, threaded, auditable messages.

  • send_message, reply_message, fetch_inbox, acknowledge_message, mark_message_read
  • When to use: For handoffs, blockers, design decisions, escalation paths.

Contacts

Control who can message whom across teams and projects.

  • request_contact, respond_contact, list_contacts, set_contact_policy
  • When to use: Adding new collaborators or enforcing contact policy.

File Reservations

Advertise file ownership intent and avoid stepping on parallel edits.

  • check_file_reservation_conflicts, file_reservation_paths, renew_file_reservations, release_file_reservations, force_release_file_reservation
  • When to use: Before starting edits, and renewing/releasing throughout execution.

Search

Recover context rapidly from message history and thread archives.

  • search_messages, summarize_thread
  • When to use: Before asking teammates for status or planning new work.

Macros

Collapse common multi-step workflows into one predictable tool call.

  • macro_start_session, macro_prepare_thread, macro_file_reservation_cycle, macro_contact_handshake
  • When to use: Optimizing token budget or reducing orchestration mistakes.

Product Bus

Link multiple repos under one product-level coordination surface.

  • ensure_product, products_link, search_messages_product, fetch_inbox_product, summarize_thread_product
  • When to use: Architecture spans multiple services/repos with shared releases.

Build Slots

Throttle expensive builds/tests to prevent CI or machine contention.

  • acquire_build_slot, renew_build_slot, release_build_slot
  • When to use: Shared runners or large swarms doing parallel compile-heavy work.

MCP Resources

Twenty-five read-only resource surfaces let agents inspect system state without tool calls (lower token overhead):

Resource URIPurposeOperator Value
resource://inbox/{agent}Latest inbox snapshotLow-token-overhead inbox check
resource://thread/{thread_id}Full thread historyPrevents context loss across sessions
resource://agents/{project_key}Known agents + contactable identitiesDiscoverability for new agents
resource://file_reservations/{slug}Active lease ownership + expiryConflict awareness before editing
resource://tooling/metricsThroughput/error/latency telemetrySupports triage decisions
resource://tooling/diagnosticsStorage/search/tool diagnosticsEarly warning for operators
resource://tooling/capabilities/{agent}Agent capability profileSupports targeted task assignment

16-Screen Operations TUI

The terminal dashboard answers the core operational questions that arise during multi-agent sessions:

ScreenQuestion It AnswersKey Signals
DashboardIs the system healthy and active?Inbound message rate, reservation conflicts, service health
MessagesWhich coordination messages need attention?Importance, ack required, sender and project
ThreadsHow did this decision evolve over time?Participants, open action items, decision checkpoints
AgentsWho is online and what are they doing?Last active, task description, program/model
SearchWhich messages, agents, or projects match these facets?Cross-surface results, facet filters, thread/date scope
ReservationsWhere are file ownership conflicts emerging?Path overlaps, exclusive holders, TTL expiration
Tool MetricsWhich tools and transports are hot or failing?Call volume, error rate, tail latency
System HealthAre the database, queues, and connections healthy?Database health, queue pressure, connection probes
TimelineWhat happened, and in what order?Message lifecycle, reservation changes, event timestamps
ProjectsWhich projects are carrying the coordination load?Message counts, agent counts, reservation counts
ContactsCan this agent message that agent right now?Approval state, policy mode, cross-project links
ExplorerWhich inbound or outbound messages match this operational slice?Direction, grouping, ack status
AnalyticsWhich anomalies deserve investigation next?Confidence score, actionable next step, deep-linked evidence
AttachmentsWhich attachment should I inspect, and where did it come from?Inline preview, source provenance, sender context
Archive BrowserWhat does the canonical Git archive contain?Directory tree, file preview, audit trail
ATCAre agents live, conflicting, and backed by decision evidence?Agent liveness, conflict decisions, evidence ledger

Robot Mode CLI

The am robot CLI provides 16 non-interactive subcommands optimized for agent consumption, organized into 5 operational tracks:

TrackObjectiveExample Commands
Situational AwarenessGet fast status before taking actionam robot status --format toon, am robot health --format json
Message TriagePrioritize and acknowledge inbound tasksam robot inbox --format json --agent GreenCastle, am robot thread --format md bd-123
History RetrievalRecover past decisions before proposing changesam robot search --format json "auth refactor"
Edit SafetyInspect ownership, avoid reservation collisionsam robot reservations --format json
Operator ReportingProduce machine-readable snapshotsam robot status --format json > status.snapshot.json

Output formats: toon (token-efficient), json (structured), md (human-readable Markdown).

Session Macros

Four macros collapse common multi-step workflows into single calls:

MacroWhat It DoesReturns
macro_start_sessionBootstraps project + agent + inbox in one call{project, agent, file_reservations, inbox}
macro_prepare_threadJoins existing conversations, catches agent up on thread historyThread context + unread messages
macro_file_reservation_cycleManages reserve-work-release flows atomicallyReservation status
macro_contact_handshakeSets up cross-agent contacts with approval handshakeContact approval state

macro_start_session is the most important: it takes a project_key, program (e.g., "claude-code"), model (e.g., "opus-4.6"), and task_description, then registers the agent, fetches the inbox, and returns everything needed to begin coordinating.

Visualization System

The site features dozens of interactive visualization components built on a shared framework (components/viz/viz-framework.tsx):

Framework primitives:

  • VizSurface: viewport-aware container with intersection observer
  • VizControlButton: styled button with tone variants (info, success, warning, danger)
  • VizHeader, VizLearningBlock, VizMetricCard: reusable UI blocks
  • LazyViz: defers mounting until 600px from viewport
  • useVizInViewport(), useVizReducedMotion(): performance hooks

Visualization categories:

CategoryExamplesCount
Core CoordinationFile reservations, message lifecycle, agent handshake, build-slot coordination~6
Swarm DynamicsSwarm simulation, conflict cascade, territory map, human overseer~5
Storage & ThroughputDual-write pipeline, commit coalescer, race view, backpressure health~4
Search & RetrievalSearch V3 pipeline, token economy, MCP resource flows~3
Operator SurfacesTUI screens, robot mode, dual-mode interface, Product Bus~4
Architecture MapsSystem topology, MCP architecture, Beads integration, reliability internals~4
Stress & ResilienceStress gauntlet, failure handling, load behaviors across shared state~3

Showcase Highlights

The most complex visualizations simulate real coordination scenarios:

Swarm Simulation. Models steady-state deployment with five agents (GreenCastle, BlueLake, RedHarbor, GoldPeak, CoralBay) in a constellation layout. Message particles flow between agents in real time. File reservation bars track ownership. An event feed captures every coordination action. Metrics: message count, reservation count, task count, conflict count.

Stress Gauntlet. 10-scenario production readiness test. Each test progresses through idle/checking/pass states: Pool Warmup, Concurrent Project, Concurrent Agent, Message Pipeline, File Reservations, WBQ Saturation, Pool Exhaustion, Sustained Load, Thundering Herd, Inbox Storm. Every scenario has defined metrics and pass/fail thresholds.

Territory Map. Treemap visualization of file tree structure with four color-coded agents. Glob patterns match file indices to show ownership and reservation overlaps. Interactive scenario steps walk through the reservation lifecycle.

Token Economy. Side-by-side comparison of token consumption. Chat-based coordination burns ~12,000 tokens per step (broadcasts, replies, status updates). Agent Mail uses ~200 tokens per step (targeted MCP tool calls). Over 10 steps with a 200,000 token budget, that is a 60x reduction.

Conflict Cascade. Visualizes what happens without coordination: silent overwrites, wasted work, merge conflicts. Then shows how advisory reservations prevent the cascade before it starts.

System Topology. Animated flow diagram: CLI/Robot Mode → MCP Server → Tool Handlers → SQLite → Storage Layer → Git Archive. Three flow modes (Message in blue, Reservation in amber, Search in green) show how requests move through the system.

Installation

Option 1: Clone Repository

git clone https://github.com/Dicklesworthstone/mcp_agent_mail_website.git
cd mcp_agent_mail_website
bun install

Option 2: Tarball via curl

export REPO_OWNER="Dicklesworthstone"
export REPO_NAME="mcp_agent_mail_website"
curl -fsSL "https://codeload.github.com/${REPO_OWNER}/${REPO_NAME}/tar.gz/refs/heads/master" \
  | tar -xz
cd "${REPO_NAME}-master"
bun install

Option 3: Existing Local Checkout

cd /path/to/mcp_agent_mail_website
bun install

Quick Start

  1. Install dependencies:
    bun install
    
  2. Start development server:
    bun dev
    
  3. Open http://localhost:3000.
  4. Run checks before pushing:
    bun tsc --noEmit
    bun lint
    bun run build
    

Command Reference

Bun Scripts

CommandPurpose
bun devStart Next.js dev server with Turbopack
bun run buildBuild production bundle
bun startRun production server
bun lintRun ESLint
bun tsc --noEmitType-check without emit
bun run testRun unit tests (Vitest)
bun run test:watchRun Vitest in watch mode
bun run test:e2eRun 7 Playwright E2E specs
bun run test:e2e:uiRun Playwright in interactive UI mode

Issue Tracking (br)

CommandPurpose
br ready --jsonList unblocked issues
br create "Title" -t task -p 2 --jsonCreate issue
br update br-42 --status in_progress --jsonMark work in progress
br close br-42 --reason "Done"Close completed issue
br sync --flush-onlyExport issue state to .beads/

Bug Scanner (ubs)

CommandPurpose
ubs $(git diff --name-only --cached)Scan staged changes
ubs --only=ts,tsx components/Scan specific scope
ubs .Full project scan

Configuration

Primary Config Files

FilePurpose
next.config.tsNext.js configuration (WebP images, compression, strict mode)
tsconfig.jsonTypeScript settings (ES2017 target, strict, @/ path alias)
eslint.config.mjsESLint flat config
postcss.config.mjsTailwind/PostCSS setup
vitest.config.tsTest config (jsdom, v8 coverage, 70%+ thresholds)
playwright.config.tsE2E config (multi-browser, artifact upload)
lib/content.tsMain static site content source (3200+ lines)

Environment Variables

Core functionality has no required external API environment variables.

Example .env.local:

# Optional local-only values
# Do not commit this file

Architecture

┌──────────────────────────────────────────────────────────────────────────┐
│                           Next.js App Router                            │
│  /, /showcase, /architecture, /spec-explorer, /getting-started,         │
│  /glossary                                                              │
└──────────────────────────────────────────────────────────────────────────┘
                  │
                  ▼
┌──────────────────────────────────────────────────────────────────────────┐
│                          Client Shell Layer                              │
│  SiteProvider (lab mode, audio SFX, keyboard shortcuts)                 │
│  + SiteHeader/Footer + GlowOrbits + transitions                        │
└──────────────────────────────────────────────────────────────────────────┘
                  │
        ┌─────────┴──────────────┐
        ▼                        ▼
┌───────────────────┐   ┌──────────────────────────────────────────────────┐
│ Content System    │   │ Visualization Subsystem                          │
│ lib/content.ts    │   │ VizSurface + LazyViz + interactive components    │
│ Static copy/data  │   │ framer-motion animations + useReducedMotion      │
│ JSON-LD generators│   │ Viewport-aware lazy loading                      │
└───────────────────┘   └──────────────────────────────────────────────────┘
        │                        │
        ▼                        ▼
┌───────────────────┐   ┌──────────────────────────────────────────────────┐
│ UI Components     │   │ Spec Explorer Subsystem                          │
│ SectionShell,     │   │ TanStack Query/Table/Virtual + marked            │
│ HeroMedia, cards, │   │ Category-filtered markdown viewer                │
│ GlitchText, etc.  │   │ Keyboard-navigable search (/ to focus, Esc)     │
└───────────────────┘   └──────────────────────────────────────────────────┘

Content Model

All site content lives in lib/content.ts (3200+ lines) as typed TypeScript exports:

ExportPurpose
siteConfigName, title, description, URLs, social links
navItems6 main navigation routes
heroStatsTrust metrics (38 MCP Tools, 25 Resources, 10/10 Stress Gauntlet, ~49 RPS)
features16 feature cards with descriptions and categories
comparisonData12-row comparison table (Agent Mail vs. Git Worktrees vs. Shared Docs vs. No Coordination)
codeExample / codeExampleRobot / codeExampleCrossProjectThree code blocks demonstrating core workflows
toolClusterCopy9 MCP tool clusters with representative tools
resourceSurfaceCopyRepresentative MCP resource URI patterns
tuiScreenCopy16 TUI screen descriptions
robotCommandTrackCopy5 CLI command tracks
glossaryTermsFull glossary index
faqFrequently asked questions
testimonialsSocial proof (48 items)
changelogDevelopment timeline
get*JsonLd()Four JSON-LD schema generators for SEO

Runtime Architecture & Operational Contracts

The architecture page and spec explorer are centered on the actual mcp_agent_mail_rust system design:

Dual persistence. Agent Mail writes coordination state into SQLite for fast queries while preserving a Git-auditable archive for messages, reservations, and profiles. The site visualizes this as the dual-write pipeline and commit coalescer.

Dual-mode interface. The docs cover the contract between the MCP-first server surface and the operator CLI surface, including deny UX, mode switching, rollout, and migration guidance.

Search V3 migration. A large part of the corpus is dedicated to the search stack transition: query contracts, quality gates, corpus design, component mapping, and rollout/rollback procedures.

Operator surfaces. The TUI product contract, parity matrix, developer guide, operator runbook, and web UI parity docs show how the 16-screen operations console and /mail/* surfaces are expected to behave.

Release, cutover, and incident discipline. The bundled specs include release gates, artifact schemas, deployment verification, Python-to-Rust import procedures, and real incident diagnostics from the Rust repo.

Visual Design System

The site uses a dark theme with animated glass-morphism effects:

GlowOrbits. Eight-color spectrum (blue, cyan, orange, sky) rendered as three orbital rings with parallax mouse tracking. Spring physics (damping: 50, stiffness: 100) create smooth cursor-following motion. Rotation durations are staggered (30s, 38s, 46s) for depth. Intersection observer defers animation until the element enters the viewport. Reduced-motion media query disables all animation.

SectionShell. Reusable page section wrapper with eyebrow text, title, icon (40+ lucide-react options), kicker, and children. Desktop layout uses a sticky left sidebar (lg:sticky lg:top-32). Framer-motion reveal animations slide content in from the left. GlitchText hover effects on headings add visual texture.

Color Palette. Neon accent colors against dark backgrounds: blue (#3B82F6) for primary actions, orange (#F97316) for warnings and emphasis, green (#22C55E) for success states, purple (#8B5CF6) for advanced/formal concepts. Glass-morphism borders (border-white/5, bg-white/[0.02]) with gradient overlays and blur effects.

Hero Media System

The hero embeds the production Agent Mail DashboardScreen and shared terminal chrome inside a browser-safe replay shell, compiled from Rust to WebAssembly and rendered to canvas by FrankenTUI. It is not the old DOM simulation and not a prerecorded video.

  • Real TUI behavior: the shared 16-screen native tab bar and bottom status chrome, production responsive dashboard layout, search/filter shortcuts, event panels, sparklines, and direct keyboard/pointer input; non-dashboard tabs expose populated, read-only views derived from the same validated public replay state. The browser omits the native mutating operator actions and full command palette; Ctrl+P, :, and the status palette affordance open its read-only Search adapter instead
  • Verified assets: the pack, runner, renderer, and font are checked against byte counts and SHA-256 digests in public/agent-mail-dashboard/manifest.v1.json; the immediate static poster is pinned to one same-origin URL and deliberately loads directly so fallback paint does not wait on the JavaScript digest pipeline
  • Privacy-bounded data: opening project/agent/message/reservation/contact/ack baseline counts come from a count-only SQLite export; every name, path, message, subject, thread, and replay event is synthetic
  • Deterministic replay: an 18-second loop drives the in-memory browser adapter; the site never opens a visitor's database or calls a mailbox mutation API
  • Production-density opening frame: 192 varied privacy-safe startup events, 500 synthetic agents, 41 synthetic projects, 200 synthetic contacts, and populated reservation, latency, throughput, activity, and message-preview panels make the first frame resemble a busy real Agent Mail session without shipping a megabyte of repeated snapshot rows; deterministic synthetic replay operations then evolve the visible counters in browser memory
  • Interactive by default: the first click both focuses and operates the terminal; native tabs, dashboard filters, replay rows, scrolling, Tab/Shift+Tab, direct number jumps, and slash search work without an extra interaction gate
  • Compact controls underneath: Play/Pause, Reset, zoom out, 100% reset, zoom in, and one-click browser fullscreen refit the native terminal without decorative device chrome; the native screen-tab row remains visible and directly clickable
  • Fast, sharp startup: a dense native-structure shell poster is preloaded for immediate paint; verified pack/font/module loading and WebAssembly compilation run in parallel, JavaScript executes directly from verified bytes, and digest-keyed immutable artifact requests prevent an older browser cache from crossing deployments
  • Readable bounded raster cost: the embedded terminal is capped to a comfortable landing-page width and starts at native 100% zoom, while controls expose a 55%-115% range; rendering caps device density at 2x, enforces an adaptive 8.5-million-pixel backing budget, and automatically scales logical cell density beyond a 2560x1440 viewport so large and fullscreen canvases do not create unbounded Rust layout work
  • Responsive lifecycle: resize events reflow the production TUI, pointer moves and wheel bursts are coalesced per animation frame while discrete clicks and keys are applied synchronously, replay time uses the native 100 ms cadence, empty patch batches do not repaint the canvas, and off-screen frames are suspended
  • Accessible fallback: a screen-reader mirror, live status, keyboard instructions, static poster, and no-script/error fallback remain available

The Rust boundary and offline exporter live in the engine repository at crates/mcp-agent-mail-dashboard-wasm/. Regenerated public packs must pass the Rust typed privacy validator and this site's runtime/data/font digest tests before publication.

Lab Mode & Audio SFX

Hidden behind Ctrl+Shift+X, Lab Mode unlocks experimental features via the SiteProvider context. The audio SFX system synthesizes four sounds using the Web Audio API:

SoundWaveformFrequencyDurationUsed For
clickSine800Hz → 100Hz100msUI interactions
zapSine600Hz → 80Hz150msTransitions
humTriangle60Hz500msAmbient feedback
errorSquare150Hz → 100Hz300msError states

Audio Context lifecycle is managed properly (created on first interaction, resumed after browser suspension). WebkitAudioContext fallback ensures Safari compatibility.

Spec Explorer Deep Dive

The spec explorer now serves a site-authored library of mcp_agent_mail_rust explainers organized around the real system surfaces this website visualizes:

CategoryRepresentative DocsFocus
Core Conceptsagent-mail-at-a-glance, jargon-mapProduct mental model and vocabulary
Coordination Flowssystem-topology, message-lifecycle-and-threads, file-reservations-and-guardrails, product-bus-and-cross-projectHow work moves through the system
Storage & Searchdual-write-and-commit-coalescer, search-v3-explainedPersistence, indexing, ranking, and degradation behavior
Interface Surfacesmcp-surface-tools-resources-macros, operator-surfacesMCP tools/resources, robot CLI, TUI, and web UI responsibilities
Reliability & Safetyreliability-and-safetyStress gauntlet, backpressure, privacy, auditability, and recovery
Migration & Paritymigration-rollout-and-parityPython-to-Rust cutover, release discipline, and parity proofs

The viewer uses TanStack Query for data fetching, TanStack Table for the sidebar index, TanStack Virtual for scroll performance on long documents, and marked + DOMPurify for XSS-safe markdown rendering. The docs intentionally cross-link to /glossary, /architecture, and /showcase so the prose and visual explanations reinforce each other. Keyboard navigation: / focuses search, Escape clears.

Accessibility

Reduced Motion. The useReducedMotion hook (framer-motion) checks prefers-reduced-motion: reduce at the system level. GlowOrbits disables all orbital animations. The WASM dashboard disables chart transitions, pauses replay time, and renders a deterministic static frame. All framer-motion animations are conditionally applied.

Semantic HTML & ARIA. Skip link at the top of every page for keyboard navigation. aria-expanded on collapsible elements. Semantic heading hierarchy (h1 → h2 → h3). Alt text on images. Accessible names and state descriptions on terminal controls and other interactive elements.

Keyboard Navigation. Ctrl+Shift+X toggles lab mode (blocked during text input to prevent conflicts). Spec explorer search focuses on /, clears on Escape. All buttons and interactive elements are properly focusable.

SEO & Structured Data

Four JSON-LD schema types are embedded in the page markup:

Schema TypeWhat It DescribesWhere Used
SoftwareApplicationAgent Mail as a developer toolRoot layout
WebSiteSite entity with publisher infoRoot layout
FAQPageQuestions and answersGetting Started
HowToInstallation/quickstart instructionsGetting Started

OpenGraph and Twitter Card meta tags are generated from siteConfig in the root layout, with dedicated image endpoints (/opengraph-image, /twitter-image).

Testing

Unit Tests (Vitest)

Vitest suites in __tests__/ cover the following contracts:

FileCoverage
agent-mail-wasm.test.tsManifest validation, bounded streaming, digest gates, lifecycle races, WASM initialization, and retry behavior
content.test.tsSite configuration, navigation, content contracts, current product claims, and JSON-LD generators
navigation.test.tsNavigation items, routes, features, glossary, changelog, FAQ, and hero statistics
viz-state.test.tsVisualization framework exports and state-transition behavior
conversion.test.tsAdoption, credibility, testimonials, evidence claims, and cross-module ID uniqueness
ui-primitives.test.tsxJSON-LD rendering, utilities, text-input detection, visualization primitives, and motion exports

E2E Tests (Playwright)

Playwright specs in e2e/ cover the following browser behavior:

SpecCoverage
smoke.spec.tsPage loads, basic navigation
navigation.spec.tsRoute transitions, nav bar behavior
accessibility.spec.tsA11y scans, ARIA compliance
metadata.spec.tsJSON-LD validation, OG tags, meta elements
performance.spec.tsCore Web Vitals, load times
hero-media.spec.tsVerified WASM loading, native terminal interaction, fallback handling, zoom, and fullscreen
visualizations.spec.tsViz rendering, LazyViz triggers

Custom diagnostics fixtures (e2e/fixtures.ts) capture console messages, network requests, and breadcrumb trails.

CI pipeline (.github/workflows/test.yml) runs both suites with artifact upload.

Development Workflow

  1. Pick work from br ready.
  2. Implement changes.
  3. Run checks:
    bun tsc --noEmit
    bun lint
    ubs --staged
    
  4. Sync issue state:
    br sync --flush-only
    
  5. Commit code and .beads/ together.

Troubleshooting

bun: command not found

Install Bun first:

curl -fsSL https://bun.sh/install | bash
exec "$SHELL"

bun lint reports errors in .next_trash* or generated files

Generated artifacts may be getting linted. Run lint on source files directly while investigating:

bun lint components/ app/ lib/

Playwright error: missing browser binaries

Install required browsers:

bunx playwright install

Vitest tests fail with missing jsdom

Ensure dev dependencies are installed:

bun install

Next.js warning about multiple lockfiles

Set turbopack.root in next.config.ts or remove unrelated lockfiles in parent directories.

Limitations

What This Project Does Not Do

  • No CMS-backed content authoring UI
  • No built-in auth or account system
  • No i18n/localized route support
  • No server-side API endpoints for core site functionality
  • Bun-only package management by project policy

Known Constraints

CapabilityCurrent StateNotes
Live backend APIsNot usedSite is entirely static + client-side interactive modules
Content authoring UINot supportedEdit lib/content.ts directly
Live mailbox dataNot implementedThe hero uses real aggregate snapshot counts plus synthetic details; it never connects to a visitor's Agent Mail instance
Spec explorer SSRPartialViewer is client-heavy by design (TanStack Query + Virtual)

FAQ

What is MCP Agent Mail?

A coordination infrastructure for AI coding agents. It provides project-scoped identities, threaded messaging, advisory file reservations, hybrid search, and a 16-screen operations TUI, all exposed via 38 MCP tools. See the engine source.

Is this the Agent Mail server itself?

No. This repository is the marketing and documentation website. The Rust server lives at mcp_agent_mail_rust.

Where should I edit static site copy?

lib/content.ts is the single source of truth for all static content, features, comparisons, code examples, glossary, FAQ, testimonials, and JSON-LD structured data.

Why are there so many visualization components?

Each visualization demonstrates a specific coordination concept interactively. File reservations, message lifecycles, swarm coordination, Search V3, storage internals, and stress behavior are all easier to understand through animation than prose.

Which package manager is supported?

Only Bun (bun install, bun dev, etc.). Do not use npm, yarn, or pnpm.

What checks should I run before push?

bun tsc --noEmit
bun lint
bun run test
bun run build
ubs --staged

For unit tests, use bun run test (Vitest). Plain bun test invokes Bun's native runner and can execute Playwright specs unintentionally.

Do I need environment variables?

No, for core local development. If needed, use .env.local and do not commit it.

How does the spec explorer work?

It fetches markdown files from /public/spec-docs/, renders them with marked + DOMPurify, and presents them in a dual-pane layout with TanStack Table for the sidebar index and TanStack Virtual for scroll performance. Search uses the / hotkey with debounced filtering.

What does the architecture page and spec explorer cover?

They cover the actual mcp_agent_mail_rust design surface: MCP/CLI dual-mode behavior, SQLite + Git dual-write persistence, Search V3 migration contracts, TUI/web parity, rollout and release gates, Python-to-Rust import/cutover, and incident diagnostics pulled from the Rust repo’s documentation set.

What is Lab Mode?

A hidden feature toggled with Ctrl+Shift+X that unlocks experimental site features. It includes a synthesized audio SFX system (click, zap, hum, error sounds via the Web Audio API).

Do I need to configure every agent manually?

No. Running am auto-detects common coding agents and bootstraps MCP connectivity. Manual config snippets are available for Claude Code, Codex CLI, and Gemini CLI on the Getting Started page.

Are file reservations mandatory locks?

No. They are advisory coordination primitives with conflict visibility. Other agents can see reservations and choose to respect them. The optional pre-commit guard (mcp-agent-mail-guard) enforces them at commit time, but can be bypassed with AGENT_MAIL_BYPASS=1 for emergencies.

How does Agent Mail avoid losing message history?

Messages are recorded in SQLite for query speed and exported into a Git-auditable archive. The dual-write pipeline ensures durability: SQLite is the source of truth for queries, Git is the source of truth for audit and recovery.

What are the GlowOrbits?

The animated orbital rings visible in the site background. Eight colors, three rings with staggered rotation speeds (30s/38s/46s), parallax mouse tracking with spring physics. Disabled automatically when prefers-reduced-motion is set.

Target Audience

The site is designed for three primary personas:

Solo Builder. An individual developer running 3-5 agents on a single repo. Without coordination they get silent file overwrites, merge conflicts, and lost work. Reservations prevent collisions, roster visibility shows what each agent is doing, threaded messaging enables handoffs, and audit trails explain what happened.

Team Lead. An engineering lead managing agent swarms across multiple repositories. Without visibility into what agents are doing across repos, there is no way to redirect an agent mid-session. The 16-screen TUI and Web UI provide real-time dashboards, Human Overseer messaging redirects agents, pre-commit guard enforces reservation discipline, and the searchable audit trail captures every decision.

Platform Engineer. Someone building internal multi-agent infrastructure for their organization. They need scalable coordination without vendor lock-in: open-source, MCP standard (works with any MCP-compatible agent), cross-provider (Claude, GPT, Gemini), and stress-tested at 30+ concurrent agents.

Evidence-Backed Claims

Each major claim on the site has a corresponding verification source:

ClaimEvidence
Runs 40-50 concurrent agents with zero coordination failuresStress gauntlet scenario 7: 30+ agent pipelines at 49 RPS
12-crate Rust workspace with zero unsafe codeGrep verification across all .rs files in engine repo
9x reduction in Git commits through coalescingMeasured at 9:1 ratio in stress scenario
Automatic recovery from connection pool exhaustionStress gauntlet scenario 6 validates recovery
Handles thundering herd with zero errors30 agents hitting endpoint simultaneously in scenario 9
Automatic stale lock detection and cleanupScenario 4 creates .git/index.lock and verifies cleanup
First open-source cross-provider multi-agent coordinationMCP standard, no vendor lock-in, works with any MCP client
38 MCP tools covering full coordination lifecycleEnumerable in 9 clusters

About Contributions

About Contributions: Please don't take this the wrong way, but I do not accept outside contributions for any of my projects. I simply don't have the mental bandwidth to review anything, and it's my name on the thing, so I'm responsible for any problems it causes; thus, the risk-reward is highly asymmetric from my perspective. I'd also have to worry about other "stakeholders," which seems unwise for tools I mostly make for myself for free. Feel free to submit issues, and even PRs if you want to illustrate a proposed fix, but know I won't merge them directly. Instead, I'll have Claude or Codex review submissions via gh and independently decide whether and how to address them. Bug reports in particular are welcome. Sorry if this offends, but I want to avoid wasted time and hurt feelings. I understand this isn't in sync with the prevailing open-source ethos that seeks community contributions, but it's the only way I can move at this velocity and keep my sanity.

License

No explicit license file is currently included in this repository snapshot. Unless or until a license is added by the project owner, default copyright protections apply.

Collected info

  • 10 stars
  • 3 forks
  • Language: TypeScript
  • Source updated: 8/27/2026