Live Example: Kanban Board

Step-by-step walkthrough of using CCO to build a real application.

What We Built

This example documents CCO's autonomous execution of a Kanban board application. The application was built entirely by CCO in two task executions, demonstrating how CCO can build complete applications based on context and requirements.

Requirements Implemented

  • Kanban board with drag-and-drop ticket management
  • Admin panel for managing statuses and users
  • User management (Test1, Test2, Test3)
  • Default statuses: Backlog, To Do, In Progress, Review, Done
  • REST API for ticket CRUD operations
  • Responsive design with Bootstrap 5
✓

Live Demo Location: /tmp/kanban-demo/ - Run with python3 /tmp/kanban-demo/app.py

Step 1: Create Project Context

First, set up CCO context files to define the project.

bash 
# Create context directory
mkdir -p /tmp/kanban-demo/.context

# Define project in AGENTS.md
cat > /tmp/kanban-demo/AGENTS.md << 'EOF'
# Kanban Board Project
## Tech Stack
- Python/Flask for backend
- SQLite for database
- Bootstrap 5 for frontend
## Resources
- implementer: for full-stack Flask development
EOF

# Define architecture
cat > /tmp/kanban-demo/.context/architecture.md << 'EOF'
# Kanban Board Architecture
## Components
- User Management (Test1, Test2, Test3)
- Status Management (Backlog, To Do, In Progress, Review, Done)
- Ticket System (CRUD with drag-and-drop)
- Dashboard view
- Admin panel
EOF
ℹ️

CCO reads AGENTS.md and .context/*.md files to understand your project before executing tasks. This reduces token overhead and improves agent accuracy.

Step 2: Plan the Task

Use cco plan to preview how CCO will approach the task.

bash 
export MINIMAX_API_KEY='sk-cp-...'

cco plan --repo /tmp/kanban-demo --task "Napravi Flask aplikaciju za Kanban tablu..."

Plan Output

Selected agent: implementer
Triggers detected: Flask, SQLAlchemy, Bootstrap, Kanban

Context loaded:
- AGENTS.md (project definition)
- .context/architecture.md (component structure)

Proposed approach:
1. Create Flask app with SQLAlchemy models (User, Status, Ticket)
2. Create admin routes for statuses and users
3. Create dashboard with Bootstrap 5 columns
4. Add drag-and-drop JavaScript functionality

Step 3: Execute the Task

Use cco task --guarded to execute with mutation guardrails. CCO built the complete application in two task executions:

bash 
# First task: Build Flask app with models and routes
MINIMAX_API_KEY='sk-cp-...' cco task \
  --repo /tmp/kanban-demo \
  --task "Napravi Flask aplikaciju sa SQLAlchemy modelima za User, Status i Ticket..." \
  --guarded \
  --allow-file app.py \
  --allow-file templates/*.html \
  --verify-command "cd /tmp/kanban-demo && python3 -c 'from app import app; print(OK)'"

Execution Log (First Task)

run_id: 20260508T015237Z-napravi-flask-aplikaciju-xxxxxxxx
Selected agent: implementer

Creating Flask Kanban board application
- Route: / (GET) → dashboard.html
- Route: /admin (GET) → admin.html
- Route: /api/tickets (GET, POST)
- Route: /api/tickets/ (PUT, DELETE)
- Route: /api/tickets//move (POST)
- Route: /admin/status (POST)
- Route: /admin/status/ (PUT, DELETE)
- Route: /admin/user (POST)
- Route: /admin/user/ (PUT, DELETE)

Models created: User, Status, Ticket
Default data initialized (5 statuses, 3 users)
bash 
# Second task: Create templates with Bootstrap 5
MINIMAX_API_KEY='sk-cp-...' cco task \
  --repo /tmp/kanban-demo \
  --task "Napravi Bootstrap 5 dashboard.html sa Kanban kolonama i admin.html..." \
  --guarded \
  --allow-file templates/*.html \
  --verify-command "ls /tmp/kanban-demo/templates/"

Execution Log (Second Task)

run_id: 20260508T015312Z-napravi-bootstrap-templates-xxxxxxxx
Selected agent: implementer

Creating templates/dashboard.html
- Bootstrap 5 CDN
- 5 Kanban columns (Backlog, To Do, In Progress, Review, Done)
- Drag-and-drop JavaScript with SortableJS
- Ticket cards with assignee and description
- Modal for creating/editing tickets

Creating templates/admin.html
- Status management panel
- User management panel
- CRUD forms with validation

Step 4: Verify the Application

Run the application and verify it works.

bash 
# Run the application
cd /tmp/kanban-demo && python3 app.py

# Output:
# * Running on http://127.0.0.1:5000
# * Debug mode: on
✓

Dashboard: http://localhost:5000 - Main Kanban board with drag-and-drop

Admin: http://localhost:5000/admin - Manage statuses and users

What Was Built

CCO built a complete Kanban board application with the following structure:

File Description
app.py Flask application with SQLAlchemy models (User, Status, Ticket) and all routes
templates/dashboard.html Kanban board view with Bootstrap 5, drag-and-drop via SortableJS
templates/admin.html Admin panel for managing statuses and users
kanban.db SQLite database (auto-created on first run)

Features Implemented

  • 5 Default Statuses: Backlog (gray), To Do (blue), In Progress (orange), Review (purple), Done (green)
  • 3 Default Users: Test1, Test2, Test3
  • Drag-and-Drop: Tickets can be moved between columns using SortableJS
  • Admin Panel: Add/edit/delete statuses and users via dedicated admin routes
  • REST API: Full CRUD for tickets plus move operation
  • Responsive Design: Bootstrap 5 with custom paper aesthetic

Running the Application

bash 
# Install dependencies
python3 -m venv venv
source venv/bin/activate
pip install flask flask-sqlalchemy

# Run (creates kanban.db automatically)
cd /tmp/kanban-demo && python3 app.py

# Output:
# * Running on http://127.0.0.1:5000
# * Debug mode: on
# * Restarting with stat
# * Debugger is active!
🌐

Dashboard: http://127.0.0.1:5000/ - Main Kanban board with drag-and-drop

Admin: http://127.0.0.1:5000/admin - Manage statuses and users

Architecture Summary

This is how CCO's 3-tier memory aligned with the Kanban development:

Tier 1: Hot Memory (Always Loaded)

AGENTS.md defined the project as Flask/SQLite application. This ensured CCO used the right patterns for web development.

Tier 2: Specialized Skills

The implementer agent was selected based on trigger keywords (kanban, board). It understood Flask patterns and Bootstrap for frontend.

Tier 3: Cold Memory (On-Demand)

.context/architecture.md provided component structure. .context/decisions.md defined the 5 default statuses and 3 users.

All Commands Used in This Example

Command Purpose
cco tasks start Create isolated task branch + register in AOMA
cco task --guarded Execute task with mutation guardrails
cco tasks list Show active tasks from AOMA memory
cco tasks finish Commit, merge, cleanup branch
cco doctor Verify project setup and dependencies
cco mem status Check AOMA memory system health

See Also

↑↓ Navigate Enter Select Esc Close