Skip to content

smouj/openclaw-mgs-codec

BranchesTags

Repository files navigation

╔═══════════════════════════════════════════════════════╗
║      ██████╗ ██████╗ ███████╗███╗   ██╗              ║
║     ██╔═══██╗██╔══██╗██╔════╝████╗  ██║              ║
║     ██║   ██║██████╔╝█████╗  ██╔██╗ ██║              ║
║     ██║   ██║██╔═══╝ ██╔══╝  ██║╚██╗██║              ║
║     ╚██████╔╝██║     ███████╗██║ ╚████║              ║
║      ╚═════╝ ╚═╝     ╚══════╝╚═╝  ╚═══╝              ║
║                                                       ║
║   OPENCLAW MULTI-AGENT ORCHESTRATION DASHBOARD        ║
║         MGS CODEC INTERFACE v2.0                      ║
║                                                       ║
║          ◈ FREQUENCY 187.89 MHz ◈                     ║
╚═══════════════════════════════════════════════════════╝

CI Deploy Pages Version Next.js FastAPI TypeScript Docker License

🎮 LIVE DEMO · 📖 DOCS · 🐛 ISSUES

🐍 What is OpenClaw MGS Codec?

The most advanced multi-agent AI dashboard ever built — wrapped in an authentic Metal Gear Solid CODEC interface from 1998. This is not a theme — this is a fully operational AI orchestration system disguised as a Cold War military communication device.

"Snake, I need you to listen carefully. Six AI agents are standing by on frequency 187.89 MHz. Your mission: orchestrate them." — Colonel Campbell

The Stack

Layer Technology
Frontend Next.js 15 (App Router) + React 19 + TypeScript
CRT Effects WebGL Fragment Shaders (Three.js) + CSS scanlines
Animations Framer Motion 11 + GSAP 3.12
Backend FastAPI + Pydantic v2 + Motor (async MongoDB)
AI Agents PicoClaw (Claude, GPT-4, OpenRouter, Groq, Gemini)
Database MongoDB 7 + Redis (WebSocket pub/sub)
Audio Web Audio API (procedural MGS beeps)
Deploy Docker Compose + GitHub Actions + GH Pages

🚀 One-Click Install

Option A: Docker Compose (Recommended)

git clone https://github.com/smouj/openclaw-mgs-codec
cd openclaw-mgs-codec
cp .env.example .env       # Edit with your settings
docker-compose up -d

Open http://localhost:3000 — CODEC ACTIVE.

Option B: Native Install Script

git clone https://github.com/smouj/openclaw-mgs-codec
cd openclaw-mgs-codec
chmod +x install.sh && ./install.sh
./start.sh

Option C: Demo Mode (Zero config)

# No MongoDB, no API key required
cd frontend-next
npm install
NEXT_PUBLIC_DEMO_MODE=true npm run dev

🎮 Features

🖥️ Authentic MGS CODEC Interface

  • Frequency Display: 187.89 MHz in glowing red phosphor digits (exact replica)
  • Split-Screen Portraits: Left operator / right agent — Yoji Shinkawa art style
  • PTT Timer: Digital clock with MEM/TUNE buttons
  • Boot Sequence: CRT power-on animation with typewriter boot log
  • Incoming Call: Ring animation + audio alert with portrait flash

🌟 WebGL CRT Shaders (Real GPU effects)

  • Parametric Scanlines: Animated with exact pixel spacing
  • Phosphor Bloom: Cheap box-blur approximation of phosphor persistence
  • Screen Curvature: Barrel distortion in GLSL fragment shader
  • Chromatic Aberration: RGB channel offset at screen edges
  • Film Grain: Green-tinted procedural noise (no texture files)
  • Vignette: Radial darkening toward screen edges
  • Phosphor Flicker: Subtle 60Hz luminance variation

🤖 6 Specialized AI Agents

Agent Frequency Capabilities
🔷 Orchestrator 187.89 MHz Coordination, strategy, delegation
⚡ Shell Executor 141.12 MHz Bash, system commands, automation
🔍 Browser Agent 140.85 MHz Web scraping, research, Playwright
📁 File Manager 140.15 MHz File ops, search, organization
📡 Communications 142.52 MHz Email, webhooks, notifications
⭐ Custom Skill 143.74 MHz Plugins, custom tasks, API

🎵 Web Audio API (Procedural Sound)

All sounds generated in real-time with no audio files:

  • playCodecBeep() — iconic 3-tone MGS CODEC sequence
  • playCallStart() — rising frequency sweep
  • playMessageReceived() — two-tone chime
  • playAlert() — urgent sawtooth alert
  • playBootSequence() — dramatic startup sweep
  • playTransmissionLost() — descending glitch

🪖 Military HUD Overlay

  • LIFE bar: Token usage as red HP bar (decreases with usage)
  • RATIONS: Cost per hour in real-time
  • EQUIPMENT: Active LLM model slots (Claude/GPT/Groq)
  • UPTIME: Session timer with total conversations

⏰ Cron Job Scheduler

Trigger types: cron | interval | date
Job types:    agent_task | shell_command | webhook

🔒 Security

  • Fernet encryption for API keys (AES-128-CBC + HMAC-SHA256)
  • Docker secrets support
  • Sandboxed command execution (dangerous command blocking)
  • Path traversal protection
  • Rate limiting on all API endpoints
  • Tokens never logged or exposed

📡 API Token Configuration

Tokens use provider:api_key format:

anthropic:sk-ant-api03-xxxxx      Claude 3.5 Sonnet
openai:sk-xxxxx                    GPT-4o
openrouter:sk-or-v1-xxxxx          Any model via OpenRouter
groq:gsk_xxxxx                     Groq (ultra-fast)
google:AIzaxxxxx                   Gemini 2.0 Flash
sk-ant-api03-xxxxx                 Default: Anthropic

🏗️ Architecture

openclaw-mgs-codec/
├── frontend-next/          # Next.js 15 (App Router) — NEW
│   ├── app/
│   │   ├── layout.tsx      # Root layout + metadata + fonts
│   │   ├── page.tsx        # Dashboard page
│   │   └── globals.css     # CRT CSS variables + utilities
│   ├── components/
│   │   ├── codec/          # CODEC UI components
│   │   │   ├── CodecDashboard.tsx   # Main orchestrator
│   │   │   ├── CodecBootScreen.tsx  # Power-on animation
│   │   │   ├── CodecHeader.tsx      # Freq display + controls
│   │   │   ├── CodecPortraitPanel.tsx # Agent portraits
│   │   │   ├── CodecConversation.tsx  # Typewriter chat
│   │   │   ├── CodecAgentList.tsx   # Agent selector
│   │   │   ├── CodecHUD.tsx         # Military HUD
│   │   │   ├── CodecScheduler.tsx   # Job scheduler modal
│   │   │   └── CodecTokenModal.tsx  # API token config
│   │   └── effects/        # CRT visual effects
│   │       ├── CRTCanvas.tsx        # WebGL Three.js shader
│   │       ├── ScanlineOverlay.tsx  # CSS scanlines
│   │       ├── NoiseOverlay.tsx     # Static noise
│   │       └── VignetteOverlay.tsx  # Screen vignette
│   ├── lib/
│   │   ├── api.ts          # Typed FastAPI client
│   │   ├── audio.ts        # Web Audio API system
│   │   ├── mockData.ts     # Demo mode data
│   │   └── shaders.ts      # GLSL shader strings
│   └── types/index.ts      # Full TypeScript types
│
├── frontend/               # Legacy React CRA (still works)
├── backend/                # FastAPI + PicoClaw + Scheduler
│   ├── server.py           # API endpoints + WebSocket
│   ├── scheduler.py        # APScheduler integration
│   └── picoclaw_agent/     # AI agent framework
│
├── docs/                   # GitHub Pages landing page
│   ├── index.html          # Spectacular landing (WebGL CRT)
│   └── manifest.json       # PWA manifest
│
├── .github/workflows/
│   ├── ci.yml              # CI: lint + type-check + build
│   └── deploy-pages.yml    # GH Pages auto-deploy
│
├── docker-compose.yml      # Full stack Docker
├── Dockerfile.backend      # FastAPI container
├── Dockerfile.frontend     # Next.js container
└── .env.example            # Environment template

🚢 Deployment

GitHub Pages (Landing)

The landing page in /docs deploys automatically via GitHub Actions on every push to main.

Setup once:

  1. Go to repo Settings → Pages
  2. Source: GitHub Actions
  3. Push to main — it deploys automatically

URL: https://yourusername.github.io/openclaw-mgs-codec/

Docker Compose (Full Stack)

# Production
docker-compose up -d

# With live logs
docker-compose up

# Rebuild after code changes
docker-compose up --build -d

# Stop
docker-compose down

# Stop + remove volumes
docker-compose down -v

# View logs
docker-compose logs -f backend
docker-compose logs -f frontend

Individual Services

# Backend only
docker build -f Dockerfile.backend -t openclaw-backend .
docker run -p 8001:8001 --env-file .env openclaw-backend

# Frontend only
docker build -f Dockerfile.frontend -t openclaw-frontend .
docker run -p 3000:3000 --env-file .env openclaw-frontend

🔧 Development

Frontend (Next.js 15)

cd frontend-next
npm install
npm run dev          # http://localhost:3000 with Turbopack
npm run build        # Production build
npm run type-check   # TypeScript
npm run lint         # ESLint

Frontend Legacy (React CRA)

cd frontend
npm install
npm start            # http://localhost:3000

Backend (FastAPI)

cd backend
pip install -r requirements.txt
python server.py     # http://localhost:8001
# or
uvicorn server:app --reload --port 8001

API Endpoints

Method Path Description
GET /api/health Health check
GET /api/agents List all agents
PUT /api/agents/{id}/status Update agent status
POST /api/conversations Create conversation
POST /api/conversations/{id}/messages Send message (triggers AI)
POST /api/config/token Save encrypted API token
GET /api/metrics Real-time system metrics
GET /api/jobs List scheduled jobs
POST /api/jobs Create scheduled job
WS /ws WebSocket real-time events

🎨 Design System

Color Palette (CRT Phosphor)

#001100  Background (deep phosphor green-black)
#000800  Darker background (void)
#00ff9d  Phosphor green (primary — all text)
#00aa66  Phosphor green dim (secondary)
#006644  Phosphor green dark (hints, borders)
#00ffff  Cyan (user messages)
#ff00ff  Magenta (system messages)
#ff0033  Red (alerts, LIFE bar)
#ffcc00  Yellow (busy state, rations)
#ff2200  Red-orange (frequency display)

Typography

  • Headings, UI, displays: VT323 (Google Fonts — authentic CRT terminal)
  • Body, code, messages: Courier New, Courier, monospace

CSS Utilities

.glow-green      { text-shadow: 0 0 8px #00ff9d, 0 0 20px #00ff9d; }
.crt-screen      { /* CRT outer glow + inset shadow */ }
.crt-scanlines   { /* Animated scanlines overlay */ }
.status-connected { /* Pulsing green dot */ }
.mgs-panel       { /* Dark panel with green border */ }
.mgs-btn         { /* MGS-styled button with hover glow */ }
.freq-display    { /* Red phosphor frequency digits */ }
.life-bar        { /* HP bar */ }

📦 Scripts

./install.sh    # Full installation (deps + config + services)
./start.sh      # Start all services
./stop.sh       # Stop all services
./update.sh     # Pull latest + restart (with git stash)
./diagnose.sh   # System health check (all deps + ports + services)
./logs.sh       # Live log viewer

🤝 Contributing

Contributions welcome! This project follows:

  • TypeScript strict mode
  • ESLint + Prettier formatting
  • Conventional commits (feat:, fix:, chore:)
  • PRs must pass CI before merge
# Fork → clone → branch → PR
git checkout -b feat/your-feature
git commit -m "feat: add plasma beam weapon selector"
git push origin feat/your-feature

🎮 Credits & Inspiration

  • Metal Gear Solid (Konami, 1998) — Hideo Kojima's masterpiece
  • Metal Gear Solid 2: Sons of Liberty (Konami, 2001)
  • Yoji Shinkawa — Artist whose portrait style inspired the UI
  • PicoClaw — The AI agent framework powering real capabilities
  • Anthropic Claude — Primary AI backbone

📄 License

MIT License — See LICENSE for details.

▶ FREQUENCY 187.89 MHz — CODEC ACTIVE
▶ Snake... it's not over yet.
▶ KONAMI × XAI 2026

🎮 Launch Demo · ⭐ Star on GitHub · 🐛 Report Bug

About

👨‍💻 Dashboard de orquestación multi-agente inspirado en la interfaz CODEC de Metal Gear Solid 1 y 2 (1998-2001). Interfaz retro-futurista de espionaje militar con tema CRT phosphor green-black auténtico. 🦞

smouj.github.io/openclaw-mgs-codec/

Topics

bot agent ai bots dashboard controller ia agents ai-agents clawdbot openclaw openclaw-skills picoclaw

Resources

Readme

License

MIT license
Activity

Stars

2 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages