Live Example: Kanban Board

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

What We're Building

In this example, we'll use CCO to build a complete Kanban board application with the following requirements:

Requirements

  • 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 following paper aesthetic

Step 1: Initialize Project Repository

First, we create a new repository and set up CCO context files.

bash 
# Create repository
mkdir kanban-demo && cd kanban-demo
git init

# Create CCO context files
mkdir -p .context

cat > AGENTS.md << 'EOF'
# Kanban Board Project
## Tech Stack
- Python/Flask for backend
- SQLite for database
- Vanilla JS for frontend
EOF

cat > .context/architecture.md << 'EOF'
# Architecture
## Components
- User Management, Status Management, Ticket System, Dashboard
EOF

git add . && git commit -m "Initial"
ℹī¸

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-YOUR-KEY-HERE'

cco plan --repo /tmp/kanban-demo --task "Napravi Kanban board..."

Plan Output Example

Task: Create Kanban board with admin panel
Selected agent: implementer (trigger: kanban, board, admin)

Context bundle:
- AGENTS.md (always loaded)
- .context/architecture.md (project structure)
- .context/decisions.md (initial statuses, users)

Proposed approach:
1. Create Flask app with SQLAlchemy models
2. Define User, Status, Ticket models
3. Create admin routes for CRUD operations
4. Create dashboard with Kanban columns
5. Add drag-and-drop JavaScript functionality

Step 3: Start Task Branch

Use cco tasks start to create an isolated branch for this task.

bash 
cco tasks start "Napravi Kanban board" --repo /tmp/kanban-demo

# Output:
# Created branch: task/napravi-kanban-board-20260508XXXXXX
# Task ID: xxxxx-xxxx
✓

Task is now registered in AOMA memory with status 'active'. The branch provides isolation - any commits stay on this branch until finish.

Step 4: Execute the Task

Use cco task --guarded to execute with mutation guardrails.

bash 
# Checkout to task branch
git checkout task/napravi-kanban-board-XXXXXX

# Execute task with guarded mode
# --guarded: enables mutation with verification
# --allow-file: whitelist files that can be modified
# --verify-command: command to verify changes

cco task \
  --repo /tmp/kanban-demo \
  --task "Napravi Kanban board..." \
  --guarded \
  --allow-file app.py \
  --allow-file templates/*.html \
  --allow-file static/css/*.css \
  --verify-command "python3 init_db.py && python3 -c 'from app import app; print(OK)'"
Flag Description
--guarded Enables file modifications. Without it, CCO reads but doesn't write.
--allow-file Whitelist specific files/patterns that can be modified. Glob patterns supported.
--verify-command Command run after changes to verify correctness. Task fails if verification fails.
--allow-noop Allow task to complete even if no files were modified (when verify passes).

Step 5: Monitor Execution

CCO logs HTTP requests and progress in real-time.

bash 
run_id: 20260508TXXXXXXZ-napravi-kanban-xxxxxxxx
{"timestamp": "...", "level": "INFO", "message": "HTTP Request: GET https://api.minimax.io/v1/models"}
{"timestamp": "...", "level": "INFO", "message": "HTTP Request: POST https://api.minimax.io/v1/chat/completions"}
...

Creating Flask Kanban board application
- Route: /dashboard (GET)
- Route: /admin (GET)
- Route: /api/ticket (POST, PUT, DELETE)
...

Each request is logged with timestamp, level, and module. This helps track API usage and debug issues.

Step 6: Finish Task

Complete the task to merge changes back to main.

bash 
cco tasks finish "Napravi Kanban board" --repo /tmp/kanban-demo

# What happens:
# 1. Commits all changes on task branch
# 2. Switches to main/master
# 3. Merges task branch
# 4. Deletes task branch
# 5. Updates AOMA memory with status='completed'

What Was Built

The Kanban board application includes:

File Description
app.py Flask application with SQLAlchemy models (User, Status, Ticket)
templates/dashboard.html Kanban board view with drag-and-drop columns
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, To Do, In Progress, Review, Done
  • 3 Default Users: Test1, Test2, Test3
  • Drag-and-Drop: Tickets can be moved between columns
  • Admin Panel: Add/edit/delete statuses and users
  • REST API: Full CRUD for tickets
  • Responsive Design: Bootstrap 5 with custom styling

Running the Application

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

# Run the application
python3 app.py

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

Dashboard: http://localhost:5000 - Main Kanban board

Admin: http://localhost: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