coco-ai Svelte Themes

Coco Ai

CoCo AI - The AI Project Manager that Delivers. Svelte 5 platform for autonomous AI agent orchestration.

Download

🤖 CoCo AI - Project Manager

The AI Project Manager that Delivers — A Svelte 5 platform for autonomous AI agent orchestration using the Ralph Wiggum methodology.

🎯 What Is CoCo?

CoCo is an AI Project Manager — not just another chatbot, but a complete system that can:

  • Define Requirements via structured Product Requirements Documents (PRDs)
  • Architect Plans with Work Breakdown Structure (WBS) decomposition
  • Execute Autonomously using the Ralph Wiggum loop methodology
  • Deliver Code with verified, tested implementations

The core innovation is treating AI coding as project management, not prompt engineering. Instead of asking an AI to "build an app," you define a PRD, let CoCo decompose it into features, and watch the autonomous loop execute each one systematically.

🏗️ Architecture

┌─────────────────────────────────────────────────────────────────────┐
│                         CoCo AI v1.4.0                              │
│                   (Main Application Shell)                          │
├─────────────────────────────────────────────────────────────────────┤
│  Auth │ Payments │ Chat │ Library │ Admin │ Projects │ Settings     │
├─────────────────────────────────────────────────────────────────────┤
│                                                                     │
│   ┌──────────────────┐   ┌──────────────────┐   ┌───────────────┐  │
│   │   lib/pm/        │   │  lib/components/ │   │  lib/ai/      │  │
│   │   ┌────────────┐ │   │  ChatInterface   │   │  providers    │  │
│   │   │ engine/    │ │   │  FileUpload      │   │  tools        │  │
│   │   │ stores/    │ │   │  ui/             │   │  utils        │  │
│   │   │ components/│ │   └──────────────────┘   └───────────────┘  │
│   │   │  - gantt/  │ │                                              │
│   │   │  - workflow│ │                                              │
│   │   │ types.ts   │ │                                              │
│   │   └────────────┘ │                                              │
│   └──────────────────┘                                              │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

Core Concepts

Concept Description
PRD Product Requirements Document with phases and features
Feature A single unit of work (the task for one loop iteration)
RPI Workflow Research → Plan → Implement → Test → Commit
Context Zones Smart (green), Warning (yellow), Dumb (red) token tracking
Ralph Loop Autonomous execution: pick feature, complete it, commit, repeat

🚀 Quick Start

Prerequisites

  • Node.js 18+
  • pnpm
  • PostgreSQL (optional - uses mock data by default)

Installation

# Navigate to project
cd /Users/christophermangun/Desktop/svelte-ai-master/Mainv2-coco/CoCoAI-v1.4.0

# Install dependencies
pnpm install

# Start development server
pnpm dev

Server runs at: http://localhost:5174

Test the MVP

  1. Projects List: http://localhost:5174/projects
  2. Project Detail: http://localhost:5174/projects/test-project-1
  3. Try Each Tab: PRD, Timeline, Workflow, Activity
  4. Loop Controls: Start/Pause/Stop buttons in header

📁 Project Structure

src/
├── lib/
│   └── pm/                          # 🎯 Project Manager Module
│       ├── components/
│       │   ├── gantt/               # Gantt chart visualization
│       │   │   ├── Gantt.svelte     # Main timeline component
│       │   │   ├── hooks.ts         # Svelte 5 runes hooks
│       │   │   ├── types.ts         # Gantt-specific types
│       │   │   └── utils.ts         # Date/calculation helpers
│       │   ├── workflow/            # XYFlow orchestration
│       │   │   ├── Workflow.svelte  # Node graph component
│       │   │   ├── nodes/           # Custom node types
│       │   │   ├── types.ts         # Workflow types
│       │   │   └── utils.ts         # Graph utilities
│       │   ├── ContextMonitor.svelte # Token usage display
│       │   └── LoopControls.svelte   # Start/Pause/Stop
│       ├── engine/
│       │   └── index.ts             # Core PM orchestrator
│       ├── stores/
│       │   ├── agents.svelte.ts     # Multi-agent state
│       │   ├── loop.svelte.ts       # Loop iteration state
│       │   └── project.svelte.ts    # Project/PRD state
│       ├── tools/
│       │   └── index.ts             # MCP tool definitions
│       ├── types.ts                 # Complete type system
│       ├── mock-data.ts             # Test data generator
│       └── index.ts                 # Public exports
├── routes/
│   ├── projects/
│   │   ├── +page.svelte             # Projects list
│   │   ├── +page.server.ts          # List data loader
│   │   └── [id]/
│   │       ├── +page.svelte         # Project detail (4 tabs)
│   │       └── +page.server.ts      # Detail data loader
│   └── api/pm/
│       ├── projects/+server.ts      # CRUD endpoints
│       ├── loop/+server.ts          # Loop control
│       ├── chat/+server.ts          # AI interaction
│       └── execute/+server.ts       # Phase execution

🧠 The PM Engine

RPI Workflow (Research → Plan → Implement)

The core methodology borrowed from Anthropic's research on long-running agents:

// Simplified flow in src/lib/pm/engine/index.ts
async executeRPI(feature: PRDFeature): Promise<RPIResult> {
  // 1. RESEARCH: Understand the codebase and requirements
  const research = await this.research(feature);
  
  // 2. PLAN: Create detailed implementation steps with code snippets
  const plan = await this.plan(feature, research.output);
  
  // 3. IMPLEMENT: Execute the plan step by step
  const implementation = await this.implement(feature, plan.output);
  
  // 4. TEST: Verify the implementation works
  const testResult = await this.test(feature);
  
  // 5. COMMIT: Git commit with descriptive message
  if (testResult.success) {
    await this.commit(feature, implementation.output);
  }
  
  return result;
}

Context Zone Management

Keeping AI in the "smart zone" is critical for quality output:

Zone Token Usage Color Action
Smart 0-40% 🟢 Green Full capability
Warning 40-70% 🟡 Yellow Consider compaction
Dumb 70%+ 🔴 Red Force compaction 
interface ContextMetrics {
  tokensUsed: number;
  tokensAvailable: number;
  usagePercent: number;
  zone: 'green' | 'yellow' | 'red';
  shouldCompact: boolean;
}

Agent Roles

The system supports multiple agent types for specialized tasks:

Role Purpose
orchestrator Coordinates the overall loop
researcher Analyzes codebase and requirements
planner Creates detailed implementation plans
coder Writes the actual code
qa_reviewer Reviews code for quality
qa_tester Writes and runs tests
fixer Handles errors and bug fixes

🖥️ UI Components

Project Detail Page (4 Tabs)

PRD Tab

Displays features grouped by phase with status indicators:

  • Feature cards with description and steps
  • Status badges (pending, in_progress, testing, done, blocked)
  • Priority indicators
  • Progress percentage per phase

Timeline Tab (Gantt)

Full-featured Work Breakdown Structure visualization:

  • View modes: Day, Week, Month, Quarter, Year
  • Task bars with progress fill
  • Dependency arrows
  • Critical path highlighting
  • Today line indicator
  • Drag/resize support (planned)

Workflow Tab (XYFlow)

Node graph showing feature relationships:

  • RPI phase nodes (Research → Plan → Implement → Test)
  • Connection edges with animation
  • Status-based node coloring
  • Interactive zoom/pan

Activity Tab

Real-time progress log:

  • Timestamped entries
  • Action type indicators
  • Feature/Agent references
  • Git commit links

Loop Controls

<!-- src/lib/pm/components/LoopControls.svelte -->
<div class="flex gap-2">
  <Button onclick={() => engine.start(projectId)} disabled={isRunning}>
    ▶ Start
  </Button>
  <Button onclick={() => engine.pause()} disabled={!isRunning}>
    ⏸ Pause
  </Button>
  <Button onclick={() => engine.stop()} variant="destructive">
    ⏹ Stop
  </Button>
</div>

📊 Database Schema

Six tables power the PM system (defined for Drizzle ORM):

Table Purpose
pm_projects Project metadata (name, status, working directory)
pm_prds Product requirements documents
pm_features Individual features with status tracking
pm_loops Execution sessions with config
pm_iterations Loop history (one per feature attempt)
pm_progress Activity stream entries

🔌 API Endpoints

Projects

# List all projects
GET /api/pm/projects

# Create new project
POST /api/pm/projects
Content-Type: application/json
{
  "name": "My Project",
  "description": "Project description",
  "workingDirectory": "/path/to/code"
}

Loop Control

# Start the PM loop
POST /api/pm/loop
Content-Type: application/json
{
  "projectId": "project-123",
  "action": "start",
  "config": {
    "maxIterations": 100,
    "autoCommit": true
  }
}

# Pause/Resume/Stop
POST /api/pm/loop
{
  "projectId": "project-123",
  "action": "pause" | "resume" | "stop"
}

AI Chat (Phase Execution)

# Execute a specific phase
POST /api/pm/chat
Content-Type: application/json
{
  "phase": "research" | "plan" | "implement" | "test",
  "featureId": "feature-123",
  "context": { ... }
}

🎯 Key Types

// Feature: The unit of work
interface PRDFeature {
  id: string;
  category: 'functional' | 'ui' | 'api' | 'infrastructure' | 'test' | 'documentation';
  description: string;
  steps: string[];
  passes: boolean;          // Did it pass verification?
  status: FeatureStatus;    // pending | in_progress | testing | done | blocked
  priority: 1 | 2 | 3 | 4 | 5;
  dependencies: string[];
  estimatedHours?: number;
  actualHours?: number;
}

// Loop: The execution session
interface PMLoop {
  id: string;
  projectId: string;
  status: 'idle' | 'running' | 'paused' | 'completed' | 'error' | 'stopped';
  config: LoopConfig;
  currentIteration: number;
  iterations: LoopIteration[];
}

// Gantt Task: Timeline visualization
interface GanttTask {
  id: string;
  name: string;
  start: Date;
  end: Date;
  progress: number;
  dependencies?: string[];
  featureId?: string;
}

🛠️ Development

Run Type Check

npx tsc --noEmit
# Should return 0 errors

Build for Production

pnpm build

Environment Variables

Copy .env.example to .env and configure:

# Database
DATABASE_URL=postgresql://...

# AI Provider
OPENROUTER_API_KEY=...

# Auth (if using)
AUTH_SECRET=...

📋 MVP Status

Feature Status
TypeScript Compiles ✅
Dev Server Runs ✅
Projects List Page ✅
Project Detail (4 Tabs) ✅
PRD Tab ✅
Timeline/Gantt Tab ✅
Workflow/XYFlow Tab ✅
Activity Tab ✅
Loop Controls UI ✅
Context Monitor ✅
API Endpoints ✅
Database Schema ✅
Mock Data ✅

🚧 Roadmap (Post-MVP)

Phase 5: Real Implementation

  • Database connection (replace mock data)
  • Auth integration
  • Real AI loop execution
  • Git integration (auto-commit)
  • Context compaction

Phase 6: Enhanced Features

  • Drag-and-drop Gantt editing
  • Real-time collaboration
  • Agent performance metrics
  • Custom MCP tool integration
  • Export/import PRDs

Phase 7: Enterprise

  • Team workspaces
  • Role-based access
  • Audit logging
  • API rate limiting
  • SSO integration

Phase 8: E2E Testing ✅

  • Server health verification
  • API endpoint testing (32/33 tests passing)
  • Database connection verification
  • Authentication flow testing
  • Response format validation
  • Error handling verification
  • Test report generation

E2E Test Results: 97% pass rate (32/33 tests)

Run tests with:

pnpm test:e2e           # Comprehensive test suite
pnpm test:e2e:http      # HTTP-only tests

📚 References

🙏 Credits

CoCo integrates concepts from:

  • Ralph Wiggum by Geoffrey Huntley - The devilishly simple loop approach
  • Anthropic's Research - RPI workflow and context management
  • 12 Factor Agents - Best practices for agent architecture
  • SVAR Gantt - Timeline visualization reference
  • XYFlow/React Flow - Workflow graph foundation

📄 License

MIT License - See LICENSE for details.

CoCo AI — The AI Project Manager that actually ships code.

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes