Implement complete nested todo tree web app MVP

This commit implements a fully functional self-hosted task decomposition engine with:

Backend (FastAPI + SQLite):
- RESTful API with full CRUD operations for projects and tasks
- Arbitrary-depth hierarchical task structure using self-referencing parent_task_id
- JSON import endpoint for seeding projects from LLM-generated breakdowns
- SQLAlchemy models with proper relationships and cascade deletes
- Status tracking (backlog, in_progress, blocked, done)
- Auto-generated OpenAPI documentation

Frontend (React + Vite + Tailwind):
- Dark cyberpunk theme with orange accents
- Project list page with create/import/delete functionality
- Dual view modes:
  * Tree View: Collapsible hierarchical display with inline editing
  * Kanban Board: Drag-and-drop status management
- Real-time CRUD operations for tasks and subtasks
- JSON import modal with validation
- Responsive design optimized for desktop

Infrastructure:
- Docker setup with multi-stage builds
- docker-compose for orchestration
- Nginx reverse proxy for production frontend
- Named volume for SQLite persistence
- CORS configuration for local development

Documentation:
- Comprehensive README with setup instructions
- Example JSON import file demonstrating nested structure
- API endpoint documentation
- Data model diagrams

.dockerignore

@@ -0,0 +1,27 @@
+# Backend
+backend/__pycache__
+backend/*.pyc
+backend/.pytest_cache
+backend/.venv
+backend/venv
+backend/*.db
+backend/.env
+
+# Frontend
+frontend/node_modules
+frontend/dist
+frontend/.env
+
+# Git
+.git
+.gitignore
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+
+# Misc
+README.md
+docker-compose.yml

.gitignore

@@ -0,0 +1,43 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+venv/
+env/
+ENV/
+*.egg-info/
+.pytest_cache/
+
+# Database
+*.db
+*.sqlite
+*.sqlite3
+
+# Node
+node_modules/
+dist/
+build/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Docker
+docker-compose.override.yml

backend/Dockerfile

@@ -0,0 +1,16 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Install dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY ./app ./app
+
+# Expose port
+EXPOSE 8000
+
+# Run the application
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"]

backend/app/crud.py

@@ -0,0 +1,125 @@
+from sqlalchemy.orm import Session, joinedload
+from typing import List, Optional
+from . import models, schemas
+
+
+# Project CRUD
+def create_project(db: Session, project: schemas.ProjectCreate) -> models.Project:
+    db_project = models.Project(**project.model_dump())
+    db.add(db_project)
+    db.commit()
+    db.refresh(db_project)
+    return db_project
+
+
+def get_project(db: Session, project_id: int) -> Optional[models.Project]:
+    return db.query(models.Project).filter(models.Project.id == project_id).first()
+
+
+def get_projects(db: Session, skip: int = 0, limit: int = 100) -> List[models.Project]:
+    return db.query(models.Project).offset(skip).limit(limit).all()
+
+
+def update_project(
+    db: Session, project_id: int, project: schemas.ProjectUpdate
+) -> Optional[models.Project]:
+    db_project = get_project(db, project_id)
+    if not db_project:
+        return None
+
+    update_data = project.model_dump(exclude_unset=True)
+    for key, value in update_data.items():
+        setattr(db_project, key, value)
+
+    db.commit()
+    db.refresh(db_project)
+    return db_project
+
+
+def delete_project(db: Session, project_id: int) -> bool:
+    db_project = get_project(db, project_id)
+    if not db_project:
+        return False
+    db.delete(db_project)
+    db.commit()
+    return True
+
+
+# Task CRUD
+def create_task(db: Session, task: schemas.TaskCreate) -> models.Task:
+    # Get max sort_order for siblings
+    if task.parent_task_id:
+        max_order = db.query(models.Task).filter(
+            models.Task.parent_task_id == task.parent_task_id
+        ).count()
+    else:
+        max_order = db.query(models.Task).filter(
+            models.Task.project_id == task.project_id,
+            models.Task.parent_task_id.is_(None)
+        ).count()
+
+    task_data = task.model_dump()
+    if "sort_order" not in task_data or task_data["sort_order"] == 0:
+        task_data["sort_order"] = max_order
+
+    db_task = models.Task(**task_data)
+    db.add(db_task)
+    db.commit()
+    db.refresh(db_task)
+    return db_task
+
+
+def get_task(db: Session, task_id: int) -> Optional[models.Task]:
+    return db.query(models.Task).filter(models.Task.id == task_id).first()
+
+
+def get_tasks_by_project(db: Session, project_id: int) -> List[models.Task]:
+    return db.query(models.Task).filter(models.Task.project_id == project_id).all()
+
+
+def get_root_tasks(db: Session, project_id: int) -> List[models.Task]:
+    """Get all root-level tasks (no parent) for a project"""
+    return db.query(models.Task).filter(
+        models.Task.project_id == project_id,
+        models.Task.parent_task_id.is_(None)
+    ).order_by(models.Task.sort_order).all()
+
+
+def get_task_with_subtasks(db: Session, task_id: int) -> Optional[models.Task]:
+    """Recursively load a task with all its subtasks"""
+    return db.query(models.Task).options(
+        joinedload(models.Task.subtasks)
+    ).filter(models.Task.id == task_id).first()
+
+
+def update_task(
+    db: Session, task_id: int, task: schemas.TaskUpdate
+) -> Optional[models.Task]:
+    db_task = get_task(db, task_id)
+    if not db_task:
+        return None
+
+    update_data = task.model_dump(exclude_unset=True)
+    for key, value in update_data.items():
+        setattr(db_task, key, value)
+
+    db.commit()
+    db.refresh(db_task)
+    return db_task
+
+
+def delete_task(db: Session, task_id: int) -> bool:
+    db_task = get_task(db, task_id)
+    if not db_task:
+        return False
+    db.delete(db_task)
+    db.commit()
+    return True
+
+
+def get_tasks_by_status(db: Session, project_id: int, status: models.TaskStatus) -> List[models.Task]:
+    """Get all tasks for a project with a specific status"""
+    return db.query(models.Task).filter(
+        models.Task.project_id == project_id,
+        models.Task.status == status
+    ).all()

backend/app/database.py

@@ -0,0 +1,20 @@
+from sqlalchemy import create_engine
+from sqlalchemy.ext.declarative import declarative_base
+from sqlalchemy.orm import sessionmaker
+
+SQLALCHEMY_DATABASE_URL = "sqlite:///./tesseract.db"
+
+engine = create_engine(
+    SQLALCHEMY_DATABASE_URL, connect_args={"check_same_thread": False}
+)
+SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+
+Base = declarative_base()
+
+
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()

backend/app/main.py

@@ -0,0 +1,235 @@
+from fastapi import FastAPI, Depends, HTTPException, UploadFile, File
+from fastapi.middleware.cors import CORSMiddleware
+from sqlalchemy.orm import Session
+from typing import List
+import json
+
+from . import models, schemas, crud
+from .database import engine, get_db
+
+# Create database tables
+models.Base.metadata.create_all(bind=engine)
+
+app = FastAPI(
+    title="Tesseract - Nested Todo Tree API",
+    description="API for managing deeply nested todo trees",
+    version="1.0.0"
+)
+
+# CORS middleware for frontend
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["http://localhost:5173", "http://localhost:3000"],  # Vite default port
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+# ========== PROJECT ENDPOINTS ==========
+
+@app.get("/api/projects", response_model=List[schemas.Project])
+def list_projects(skip: int = 0, limit: int = 100, db: Session = Depends(get_db)):
+    """List all projects"""
+    return crud.get_projects(db, skip=skip, limit=limit)
+
+
+@app.post("/api/projects", response_model=schemas.Project, status_code=201)
+def create_project(project: schemas.ProjectCreate, db: Session = Depends(get_db)):
+    """Create a new project"""
+    return crud.create_project(db, project)
+
+
+@app.get("/api/projects/{project_id}", response_model=schemas.Project)
+def get_project(project_id: int, db: Session = Depends(get_db)):
+    """Get a specific project"""
+    db_project = crud.get_project(db, project_id)
+    if not db_project:
+        raise HTTPException(status_code=404, detail="Project not found")
+    return db_project
+
+
+@app.put("/api/projects/{project_id}", response_model=schemas.Project)
+def update_project(
+    project_id: int, project: schemas.ProjectUpdate, db: Session = Depends(get_db)
+):
+    """Update a project"""
+    db_project = crud.update_project(db, project_id, project)
+    if not db_project:
+        raise HTTPException(status_code=404, detail="Project not found")
+    return db_project
+
+
+@app.delete("/api/projects/{project_id}", status_code=204)
+def delete_project(project_id: int, db: Session = Depends(get_db)):
+    """Delete a project and all its tasks"""
+    if not crud.delete_project(db, project_id):
+        raise HTTPException(status_code=404, detail="Project not found")
+    return None
+
+
+# ========== TASK ENDPOINTS ==========
+
+@app.get("/api/projects/{project_id}/tasks", response_model=List[schemas.Task])
+def list_project_tasks(project_id: int, db: Session = Depends(get_db)):
+    """List all tasks for a project"""
+    if not crud.get_project(db, project_id):
+        raise HTTPException(status_code=404, detail="Project not found")
+    return crud.get_tasks_by_project(db, project_id)
+
+
+@app.get("/api/projects/{project_id}/tasks/tree", response_model=List[schemas.TaskWithSubtasks])
+def get_project_task_tree(project_id: int, db: Session = Depends(get_db)):
+    """Get the task tree (root tasks with nested subtasks) for a project"""
+    if not crud.get_project(db, project_id):
+        raise HTTPException(status_code=404, detail="Project not found")
+
+    root_tasks = crud.get_root_tasks(db, project_id)
+
+    def build_tree(task):
+        task_dict = schemas.TaskWithSubtasks.model_validate(task)
+        task_dict.subtasks = [build_tree(subtask) for subtask in task.subtasks]
+        return task_dict
+
+    return [build_tree(task) for task in root_tasks]
+
+
+@app.get("/api/projects/{project_id}/tasks/by-status/{status}", response_model=List[schemas.Task])
+def get_tasks_by_status(
+    project_id: int,
+    status: models.TaskStatus,
+    db: Session = Depends(get_db)
+):
+    """Get all tasks for a project filtered by status (for Kanban view)"""
+    if not crud.get_project(db, project_id):
+        raise HTTPException(status_code=404, detail="Project not found")
+    return crud.get_tasks_by_status(db, project_id, status)
+
+
+@app.post("/api/tasks", response_model=schemas.Task, status_code=201)
+def create_task(task: schemas.TaskCreate, db: Session = Depends(get_db)):
+    """Create a new task"""
+    if not crud.get_project(db, task.project_id):
+        raise HTTPException(status_code=404, detail="Project not found")
+
+    if task.parent_task_id and not crud.get_task(db, task.parent_task_id):
+        raise HTTPException(status_code=404, detail="Parent task not found")
+
+    return crud.create_task(db, task)
+
+
+@app.get("/api/tasks/{task_id}", response_model=schemas.Task)
+def get_task(task_id: int, db: Session = Depends(get_db)):
+    """Get a specific task"""
+    db_task = crud.get_task(db, task_id)
+    if not db_task:
+        raise HTTPException(status_code=404, detail="Task not found")
+    return db_task
+
+
+@app.put("/api/tasks/{task_id}", response_model=schemas.Task)
+def update_task(task_id: int, task: schemas.TaskUpdate, db: Session = Depends(get_db)):
+    """Update a task"""
+    db_task = crud.update_task(db, task_id, task)
+    if not db_task:
+        raise HTTPException(status_code=404, detail="Task not found")
+    return db_task
+
+
+@app.delete("/api/tasks/{task_id}", status_code=204)
+def delete_task(task_id: int, db: Session = Depends(get_db)):
+    """Delete a task and all its subtasks"""
+    if not crud.delete_task(db, task_id):
+        raise HTTPException(status_code=404, detail="Task not found")
+    return None
+
+
+# ========== JSON IMPORT ENDPOINT ==========
+
+def _import_tasks_recursive(
+    db: Session,
+    project_id: int,
+    tasks: List[schemas.ImportSubtask],
+    parent_id: Optional[int] = None,
+    count: int = 0
+) -> int:
+    """Recursively import tasks and their subtasks"""
+    for idx, task_data in enumerate(tasks):
+        task = schemas.TaskCreate(
+            project_id=project_id,
+            parent_task_id=parent_id,
+            title=task_data.title,
+            description=task_data.description,
+            status=task_data.status,
+            sort_order=idx
+        )
+        db_task = crud.create_task(db, task)
+        count += 1
+
+        if task_data.subtasks:
+            count = _import_tasks_recursive(
+                db, project_id, task_data.subtasks, db_task.id, count
+            )
+
+    return count
+
+
+@app.post("/api/import-json", response_model=schemas.ImportResult)
+def import_from_json(import_data: schemas.ImportData, db: Session = Depends(get_db)):
+    """
+    Import a project with nested tasks from JSON.
+
+    Expected format:
+    {
+        "project": {
+            "name": "Project Name",
+            "description": "Optional description"
+        },
+        "tasks": [
+            {
+                "title": "Task 1",
+                "description": "Optional",
+                "status": "backlog",
+                "subtasks": [
+                    {
+                        "title": "Subtask 1.1",
+                        "status": "backlog",
+                        "subtasks": []
+                    }
+                ]
+            }
+        ]
+    }
+    """
+    # Create the project
+    project = crud.create_project(
+        db,
+        schemas.ProjectCreate(
+            name=import_data.project.name,
+            description=import_data.project.description
+        )
+    )
+
+    # Recursively import tasks
+    tasks_created = _import_tasks_recursive(
+        db, project.id, import_data.tasks
+    )
+
+    return schemas.ImportResult(
+        project_id=project.id,
+        project_name=project.name,
+        tasks_created=tasks_created
+    )
+
+
+@app.get("/")
+def root():
+    """API health check"""
+    return {
+        "status": "online",
+        "message": "Tesseract API - Nested Todo Tree Manager",
+        "docs": "/docs"
+    }
+
+
+from typing import Optional

backend/app/models.py

@@ -0,0 +1,41 @@
+from sqlalchemy import Column, Integer, String, Text, DateTime, ForeignKey, Enum
+from sqlalchemy.orm import relationship
+from datetime import datetime
+import enum
+from .database import Base
+
+
+class TaskStatus(str, enum.Enum):
+    BACKLOG = "backlog"
+    IN_PROGRESS = "in_progress"
+    BLOCKED = "blocked"
+    DONE = "done"
+
+
+class Project(Base):
+    __tablename__ = "projects"
+
+    id = Column(Integer, primary_key=True, index=True)
+    name = Column(String(255), nullable=False)
+    description = Column(Text, nullable=True)
+    created_at = Column(DateTime, default=datetime.utcnow)
+    updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+
+    tasks = relationship("Task", back_populates="project", cascade="all, delete-orphan")
+
+
+class Task(Base):
+    __tablename__ = "tasks"
+
+    id = Column(Integer, primary_key=True, index=True)
+    project_id = Column(Integer, ForeignKey("projects.id"), nullable=False)
+    parent_task_id = Column(Integer, ForeignKey("tasks.id"), nullable=True)
+    title = Column(String(500), nullable=False)
+    description = Column(Text, nullable=True)
+    status = Column(Enum(TaskStatus), default=TaskStatus.BACKLOG, nullable=False)
+    sort_order = Column(Integer, default=0)
+    created_at = Column(DateTime, default=datetime.utcnow)
+    updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+
+    project = relationship("Project", back_populates="tasks")
+    parent = relationship("Task", remote_side=[id], backref="subtasks")

backend/app/schemas.py

@@ -0,0 +1,93 @@
+from pydantic import BaseModel, ConfigDict
+from typing import Optional, List
+from datetime import datetime
+from .models import TaskStatus
+
+
+# Task Schemas
+class TaskBase(BaseModel):
+    title: str
+    description: Optional[str] = None
+    status: TaskStatus = TaskStatus.BACKLOG
+    parent_task_id: Optional[int] = None
+    sort_order: int = 0
+
+
+class TaskCreate(TaskBase):
+    project_id: int
+
+
+class TaskUpdate(BaseModel):
+    title: Optional[str] = None
+    description: Optional[str] = None
+    status: Optional[TaskStatus] = None
+    parent_task_id: Optional[int] = None
+    sort_order: Optional[int] = None
+
+
+class Task(TaskBase):
+    id: int
+    project_id: int
+    created_at: datetime
+    updated_at: datetime
+
+    model_config = ConfigDict(from_attributes=True)
+
+
+class TaskWithSubtasks(Task):
+    subtasks: List['TaskWithSubtasks'] = []
+
+    model_config = ConfigDict(from_attributes=True)
+
+
+# Project Schemas
+class ProjectBase(BaseModel):
+    name: str
+    description: Optional[str] = None
+
+
+class ProjectCreate(ProjectBase):
+    pass
+
+
+class ProjectUpdate(BaseModel):
+    name: Optional[str] = None
+    description: Optional[str] = None
+
+
+class Project(ProjectBase):
+    id: int
+    created_at: datetime
+    updated_at: datetime
+
+    model_config = ConfigDict(from_attributes=True)
+
+
+class ProjectWithTasks(Project):
+    tasks: List[Task] = []
+
+    model_config = ConfigDict(from_attributes=True)
+
+
+# JSON Import Schemas
+class ImportSubtask(BaseModel):
+    title: str
+    description: Optional[str] = None
+    status: TaskStatus = TaskStatus.BACKLOG
+    subtasks: List['ImportSubtask'] = []
+
+
+class ImportProject(BaseModel):
+    name: str
+    description: Optional[str] = None
+
+
+class ImportData(BaseModel):
+    project: ImportProject
+    tasks: List[ImportSubtask] = []
+
+
+class ImportResult(BaseModel):
+    project_id: int
+    project_name: str
+    tasks_created: int

backend/requirements.txt

@@ -0,0 +1,6 @@
+fastapi==0.109.0
+uvicorn[standard]==0.27.0
+sqlalchemy==2.0.25
+pydantic==2.5.3
+pydantic-settings==2.1.0
+python-multipart==0.0.6

docker-compose.yml

@@ -0,0 +1,30 @@
+version: '3.8'
+
+services:
+  backend:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    container_name: tesseract-backend
+    ports:
+      - "8000:8000"
+    volumes:
+      - ./backend/app:/app/app
+      - tesseract-db:/app
+    environment:
+      - PYTHONUNBUFFERED=1
+    restart: unless-stopped
+
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    container_name: tesseract-frontend
+    ports:
+      - "3000:80"
+    depends_on:
+      - backend
+    restart: unless-stopped
+
+volumes:
+  tesseract-db:

example-import.json

@@ -0,0 +1,113 @@
+{
+  "project": {
+    "name": "Project Lyra",
+    "description": "Long-running AI assistant project with modular architecture"
+  },
+  "tasks": [
+    {
+      "title": "Cortex Rewire",
+      "description": "Refactor reasoning layer for improved performance",
+      "status": "backlog",
+      "subtasks": [
+        {
+          "title": "Reflection → fix backend argument bug",
+          "status": "in_progress",
+          "subtasks": [
+            {
+              "title": "Normalize LLM backend arg in reflection calls",
+              "status": "in_progress"
+            },
+            {
+              "title": "Add unit tests for reflection module",
+              "status": "backlog"
+            }
+          ]
+        },
+        {
+          "title": "Reasoning parser cleanup",
+          "status": "backlog",
+          "subtasks": [
+            {
+              "title": "Remove deprecated parse methods",
+              "status": "backlog"
+            },
+            {
+              "title": "Optimize regex patterns",
+              "status": "backlog"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Frontend Overhaul",
+      "description": "Modernize the UI with new component library",
+      "status": "backlog",
+      "subtasks": [
+        {
+          "title": "Migrate to Tailwind CSS",
+          "status": "backlog"
+        },
+        {
+          "title": "Build new component library",
+          "status": "backlog",
+          "subtasks": [
+            {
+              "title": "Button components",
+              "status": "backlog"
+            },
+            {
+              "title": "Form components",
+              "status": "backlog"
+            },
+            {
+              "title": "Modal components",
+              "status": "backlog"
+            }
+          ]
+        },
+        {
+          "title": "Implement dark mode toggle",
+          "status": "backlog"
+        }
+      ]
+    },
+    {
+      "title": "API v2 Implementation",
+      "status": "blocked",
+      "description": "Blocked on database migration completion",
+      "subtasks": [
+        {
+          "title": "Design new REST endpoints",
+          "status": "done"
+        },
+        {
+          "title": "Implement GraphQL layer",
+          "status": "blocked"
+        },
+        {
+          "title": "Add rate limiting",
+          "status": "backlog"
+        }
+      ]
+    },
+    {
+      "title": "Documentation Sprint",
+      "status": "done",
+      "subtasks": [
+        {
+          "title": "API documentation",
+          "status": "done"
+        },
+        {
+          "title": "User guide",
+          "status": "done"
+        },
+        {
+          "title": "Developer setup guide",
+          "status": "done"
+        }
+      ]
+    }
+  ]
+}

frontend/Dockerfile

@@ -0,0 +1,26 @@
+FROM node:18-alpine AS builder
+
+WORKDIR /app
+
+# Install dependencies
+COPY package.json ./
+RUN npm install
+
+# Copy source code
+COPY . .
+
+# Build the app
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+
+# Copy built files to nginx
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Copy nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tesseract - Task Decomposition Engine</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

frontend/nginx.conf

@@ -0,0 +1,24 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Serve static files
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Proxy API requests to backend
+    location /api {
+        proxy_pass http://backend:8000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    }
+}

frontend/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "tesseract-frontend",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.1",
+    "lucide-react": "^0.303.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.4.0",
+    "vite": "^5.0.8"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/App.jsx

@@ -0,0 +1,27 @@
+import { Routes, Route } from 'react-router-dom'
+import ProjectList from './pages/ProjectList'
+import ProjectView from './pages/ProjectView'
+
+function App() {
+  return (
+    <div className="min-h-screen bg-cyber-dark">
+      <header className="border-b border-cyber-orange/30 bg-cyber-darkest">
+        <div className="container mx-auto px-4 py-4">
+          <h1 className="text-2xl font-bold text-cyber-orange">
+            TESSERACT
+            <span className="ml-3 text-sm text-gray-500">Task Decomposition Engine</span>
+          </h1>
+        </div>
+      </header>
+
+      <main className="container mx-auto px-4 py-8">
+        <Routes>
+          <Route path="/" element={<ProjectList />} />
+          <Route path="/project/:projectId" element={<ProjectView />} />
+        </Routes>
+      </main>
+    </div>
+  )
+}
+
+export default App

frontend/src/components/KanbanView.jsx

@@ -0,0 +1,290 @@
+import { useState, useEffect } from 'react'
+import { Plus, Edit2, Trash2, Check, X, ChevronDown, ChevronRight } from 'lucide-react'
+import {
+  getProjectTasks,
+  createTask,
+  updateTask,
+  deleteTask
+} from '../utils/api'
+
+const STATUSES = [
+  { key: 'backlog', label: 'Backlog', color: 'border-gray-600' },
+  { key: 'in_progress', label: 'In Progress', color: 'border-blue-500' },
+  { key: 'blocked', label: 'Blocked', color: 'border-red-500' },
+  { key: 'done', label: 'Done', color: 'border-green-500' }
+]
+
+function TaskCard({ task, allTasks, onUpdate, onDragStart }) {
+  const [isEditing, setIsEditing] = useState(false)
+  const [editTitle, setEditTitle] = useState(task.title)
+  const [showSubtasks, setShowSubtasks] = useState(false)
+
+  const subtasks = allTasks.filter(t => t.parent_task_id === task.id)
+  const hasSubtasks = subtasks.length > 0
+
+  const handleSave = async () => {
+    try {
+      await updateTask(task.id, { title: editTitle })
+      setIsEditing(false)
+      onUpdate()
+    } catch (err) {
+      alert(`Error: ${err.message}`)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!confirm('Delete this task and all its subtasks?')) return
+    try {
+      await deleteTask(task.id)
+      onUpdate()
+    } catch (err) {
+      alert(`Error: ${err.message}`)
+    }
+  }
+
+  return (
+    <div
+      draggable={!isEditing}
+      onDragStart={(e) => onDragStart(e, task)}
+      className="bg-cyber-darkest border border-cyber-orange/30 rounded-lg p-3 mb-2 cursor-move hover:border-cyber-orange/60 transition-all group"
+    >
+      {isEditing ? (
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={editTitle}
+            onChange={(e) => setEditTitle(e.target.value)}
+            className="flex-1 px-2 py-1 bg-cyber-darker border border-cyber-orange/50 rounded text-gray-100 text-sm focus:outline-none focus:border-cyber-orange"
+            autoFocus
+          />
+          <button
+            onClick={handleSave}
+            className="text-green-400 hover:text-green-300"
+          >
+            <Check size={16} />
+          </button>
+          <button
+            onClick={() => {
+              setIsEditing(false)
+              setEditTitle(task.title)
+            }}
+            className="text-gray-400 hover:text-gray-300"
+          >
+            <X size={16} />
+          </button>
+        </div>
+      ) : (
+        <>
+          <div className="flex justify-between items-start mb-2">
+            <span className="text-gray-200 text-sm flex-1">{task.title}</span>
+            <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+              <button
+                onClick={() => setIsEditing(true)}
+                className="text-gray-400 hover:text-gray-200"
+              >
+                <Edit2 size={14} />
+              </button>
+              <button
+                onClick={handleDelete}
+                className="text-gray-600 hover:text-red-400"
+              >
+                <Trash2 size={14} />
+              </button>
+            </div>
+          </div>
+
+          {hasSubtasks && (
+            <div className="mt-2 pt-2 border-t border-cyber-orange/20">
+              <button
+                onClick={() => setShowSubtasks(!showSubtasks)}
+                className="flex items-center gap-1 text-xs text-cyber-orange hover:text-cyber-orange-bright"
+              >
+                {showSubtasks ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+                {subtasks.length} subtask{subtasks.length !== 1 ? 's' : ''}
+              </button>
+              {showSubtasks && (
+                <div className="mt-2 pl-3 space-y-1">
+                  {subtasks.map(subtask => (
+                    <div key={subtask.id} className="text-xs text-gray-400">
+                      • {subtask.title}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
+function KanbanColumn({ status, tasks, allTasks, projectId, onUpdate, onDrop, onDragOver }) {
+  const [showAddTask, setShowAddTask] = useState(false)
+  const [newTaskTitle, setNewTaskTitle] = useState('')
+
+  const handleAddTask = async (e) => {
+    e.preventDefault()
+    if (!newTaskTitle.trim()) return
+
+    try {
+      await createTask({
+        project_id: parseInt(projectId),
+        parent_task_id: null,
+        title: newTaskTitle,
+        status: status.key
+      })
+      setNewTaskTitle('')
+      setShowAddTask(false)
+      onUpdate()
+    } catch (err) {
+      alert(`Error: ${err.message}`)
+    }
+  }
+
+  return (
+    <div
+      className="flex-1 min-w-[280px] bg-cyber-darker rounded-lg p-4 border-t-4 ${status.color}"
+      onDrop={(e) => onDrop(e, status.key)}
+      onDragOver={onDragOver}
+    >
+      <div className="flex justify-between items-center mb-4">
+        <h3 className="font-semibold text-gray-200">
+          {status.label}
+          <span className="ml-2 text-xs text-gray-500">({tasks.length})</span>
+        </h3>
+        <button
+          onClick={() => setShowAddTask(true)}
+          className="text-cyber-orange hover:text-cyber-orange-bright"
+        >
+          <Plus size={18} />
+        </button>
+      </div>
+
+      {showAddTask && (
+        <div className="mb-3">
+          <form onSubmit={handleAddTask}>
+            <input
+              type="text"
+              value={newTaskTitle}
+              onChange={(e) => setNewTaskTitle(e.target.value)}
+              placeholder="Task title..."
+              className="w-full px-2 py-2 bg-cyber-darkest border border-cyber-orange/50 rounded text-gray-100 text-sm focus:outline-none focus:border-cyber-orange mb-2"
+              autoFocus
+            />
+            <div className="flex gap-2">
+              <button
+                type="submit"
+                className="px-3 py-1 bg-cyber-orange text-cyber-darkest rounded hover:bg-cyber-orange-bright text-sm font-semibold"
+              >
+                Add
+              </button>
+              <button
+                type="button"
+                onClick={() => setShowAddTask(false)}
+                className="px-3 py-1 text-gray-400 hover:text-gray-200 text-sm"
+              >
+                Cancel
+              </button>
+            </div>
+          </form>
+        </div>
+      )}
+
+      <div className="space-y-2">
+        {tasks.map(task => (
+          <TaskCard
+            key={task.id}
+            task={task}
+            allTasks={allTasks}
+            onUpdate={onUpdate}
+            onDragStart={(e, task) => {
+              e.dataTransfer.setData('taskId', task.id.toString())
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function KanbanView({ projectId }) {
+  const [allTasks, setAllTasks] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    loadTasks()
+  }, [projectId])
+
+  const loadTasks = async () => {
+    try {
+      setLoading(true)
+      const data = await getProjectTasks(projectId)
+      setAllTasks(data)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleDragOver = (e) => {
+    e.preventDefault()
+  }
+
+  const handleDrop = async (e, newStatus) => {
+    e.preventDefault()
+    const taskId = parseInt(e.dataTransfer.getData('taskId'))
+
+    if (!taskId) return
+
+    try {
+      await updateTask(taskId, { status: newStatus })
+      loadTasks()
+    } catch (err) {
+      alert(`Error: ${err.message}`)
+    }
+  }
+
+  if (loading) {
+    return <div className="text-center text-gray-400 py-12">Loading tasks...</div>
+  }
+
+  if (error) {
+    return <div className="text-center text-red-400 py-12">{error}</div>
+  }
+
+  // Only show root-level tasks in Kanban (tasks without parents)
+  const rootTasks = allTasks.filter(t => !t.parent_task_id)
+
+  return (
+    <div>
+      <h3 className="text-xl font-semibold text-gray-300 mb-4">Kanban Board</h3>
+
+      <div className="flex gap-4 overflow-x-auto pb-4">
+        {STATUSES.map(status => (
+          <KanbanColumn
+            key={status.key}
+            status={status}
+            tasks={rootTasks.filter(t => t.status === status.key)}
+            allTasks={allTasks}
+            projectId={projectId}
+            onUpdate={loadTasks}
+            onDrop={handleDrop}
+            onDragOver={handleDragOver}
+          />
+        ))}
+      </div>
+
+      {rootTasks.length === 0 && (
+        <div className="text-center py-16 text-gray-500">
+          <p className="text-lg mb-2">No tasks yet</p>
+          <p className="text-sm">Add tasks using the + button in any column</p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default KanbanView

frontend/src/components/TreeView.jsx

@@ -0,0 +1,336 @@
+import { useState, useEffect } from 'react'
+import {
+  ChevronDown,
+  ChevronRight,
+  Plus,
+  Edit2,
+  Trash2,
+  Check,
+  X
+} from 'lucide-react'
+import {
+  getProjectTaskTree,
+  createTask,
+  updateTask,
+  deleteTask
+} from '../utils/api'
+
+const STATUS_COLORS = {
+  backlog: 'text-gray-400',
+  in_progress: 'text-blue-400',
+  blocked: 'text-red-400',
+  done: 'text-green-400'
+}
+
+const STATUS_LABELS = {
+  backlog: 'Backlog',
+  in_progress: 'In Progress',
+  blocked: 'Blocked',
+  done: 'Done'
+}
+
+function TaskNode({ task, projectId, onUpdate, level = 0 }) {
+  const [isExpanded, setIsExpanded] = useState(true)
+  const [isEditing, setIsEditing] = useState(false)
+  const [editTitle, setEditTitle] = useState(task.title)
+  const [editStatus, setEditStatus] = useState(task.status)
+  const [showAddSubtask, setShowAddSubtask] = useState(false)
+  const [newSubtaskTitle, setNewSubtaskTitle] = useState('')
+
+  const hasSubtasks = task.subtasks && task.subtasks.length > 0
+
+  const handleSave = async () => {
+    try {
+      await updateTask(task.id, {
+        title: editTitle,
+        status: editStatus
+      })
+      setIsEditing(false)
+      onUpdate()
+    } catch (err) {
+      alert(`Error: ${err.message}`)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!confirm('Delete this task and all its subtasks?')) return
+    try {
+      await deleteTask(task.id)
+      onUpdate()
+    } catch (err) {
+      alert(`Error: ${err.message}`)
+    }
+  }
+
+  const handleAddSubtask = async (e) => {
+    e.preventDefault()
+    if (!newSubtaskTitle.trim()) return
+
+    try {
+      await createTask({
+        project_id: parseInt(projectId),
+        parent_task_id: task.id,
+        title: newSubtaskTitle,
+        status: 'backlog'
+      })
+      setNewSubtaskTitle('')
+      setShowAddSubtask(false)
+      setIsExpanded(true)
+      onUpdate()
+    } catch (err) {
+      alert(`Error: ${err.message}`)
+    }
+  }
+
+  return (
+    <div className="mb-2">
+      <div
+        className={`flex items-center gap-2 p-3 bg-cyber-darkest border border-cyber-orange/20 rounded hover:border-cyber-orange/40 transition-all group ${
+          level > 0 ? 'ml-6' : ''
+        }`}
+      >
+        {/* Expand/Collapse */}
+        {hasSubtasks && (
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="text-cyber-orange hover:text-cyber-orange-bright"
+          >
+            {isExpanded ? <ChevronDown size={18} /> : <ChevronRight size={18} />}
+          </button>
+        )}
+        {!hasSubtasks && <div className="w-[18px]" />}
+
+        {/* Task Content */}
+        {isEditing ? (
+          <div className="flex-1 flex gap-2">
+            <input
+              type="text"
+              value={editTitle}
+              onChange={(e) => setEditTitle(e.target.value)}
+              className="flex-1 px-2 py-1 bg-cyber-darker border border-cyber-orange/50 rounded text-gray-100 text-sm focus:outline-none focus:border-cyber-orange"
+              autoFocus
+            />
+            <select
+              value={editStatus}
+              onChange={(e) => setEditStatus(e.target.value)}
+              className="px-2 py-1 bg-cyber-darker border border-cyber-orange/50 rounded text-gray-100 text-sm focus:outline-none focus:border-cyber-orange"
+            >
+              <option value="backlog">Backlog</option>
+              <option value="in_progress">In Progress</option>
+              <option value="blocked">Blocked</option>
+              <option value="done">Done</option>
+            </select>
+            <button
+              onClick={handleSave}
+              className="text-green-400 hover:text-green-300"
+            >
+              <Check size={18} />
+            </button>
+            <button
+              onClick={() => {
+                setIsEditing(false)
+                setEditTitle(task.title)
+                setEditStatus(task.status)
+              }}
+              className="text-gray-400 hover:text-gray-300"
+            >
+              <X size={18} />
+            </button>
+          </div>
+        ) : (
+          <>
+            <div className="flex-1">
+              <span className="text-gray-200">{task.title}</span>
+              <span className={`ml-3 text-xs ${STATUS_COLORS[task.status]}`}>
+                {STATUS_LABELS[task.status]}
+              </span>
+            </div>
+
+            {/* Actions */}
+            <div className="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+              <button
+                onClick={() => setShowAddSubtask(true)}
+                className="text-cyber-orange hover:text-cyber-orange-bright"
+                title="Add subtask"
+              >
+                <Plus size={16} />
+              </button>
+              <button
+                onClick={() => setIsEditing(true)}
+                className="text-gray-400 hover:text-gray-200"
+                title="Edit"
+              >
+                <Edit2 size={16} />
+              </button>
+              <button
+                onClick={handleDelete}
+                className="text-gray-600 hover:text-red-400"
+                title="Delete"
+              >
+                <Trash2 size={16} />
+              </button>
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* Add Subtask Form */}
+      {showAddSubtask && (
+        <div className={`mt-2 ${level > 0 ? 'ml-6' : ''}`}>
+          <form onSubmit={handleAddSubtask} className="flex gap-2">
+            <input
+              type="text"
+              value={newSubtaskTitle}
+              onChange={(e) => setNewSubtaskTitle(e.target.value)}
+              placeholder="New subtask title..."
+              className="flex-1 px-3 py-2 bg-cyber-darker border border-cyber-orange/50 rounded text-gray-100 text-sm focus:outline-none focus:border-cyber-orange"
+              autoFocus
+            />
+            <button
+              type="submit"
+              className="px-3 py-2 bg-cyber-orange text-cyber-darkest rounded hover:bg-cyber-orange-bright text-sm font-semibold"
+            >
+              Add
+            </button>
+            <button
+              type="button"
+              onClick={() => setShowAddSubtask(false)}
+              className="px-3 py-2 text-gray-400 hover:text-gray-200 text-sm"
+            >
+              Cancel
+            </button>
+          </form>
+        </div>
+      )}
+
+      {/* Subtasks */}
+      {isExpanded && hasSubtasks && (
+        <div className="mt-2">
+          {task.subtasks.map(subtask => (
+            <TaskNode
+              key={subtask.id}
+              task={subtask}
+              projectId={projectId}
+              onUpdate={onUpdate}
+              level={level + 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function TreeView({ projectId }) {
+  const [tasks, setTasks] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [showAddRoot, setShowAddRoot] = useState(false)
+  const [newTaskTitle, setNewTaskTitle] = useState('')
+
+  useEffect(() => {
+    loadTasks()
+  }, [projectId])
+
+  const loadTasks = async () => {
+    try {
+      setLoading(true)
+      const data = await getProjectTaskTree(projectId)
+      setTasks(data)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleAddRootTask = async (e) => {
+    e.preventDefault()
+    if (!newTaskTitle.trim()) return
+
+    try {
+      await createTask({
+        project_id: parseInt(projectId),
+        parent_task_id: null,
+        title: newTaskTitle,
+        status: 'backlog'
+      })
+      setNewTaskTitle('')
+      setShowAddRoot(false)
+      loadTasks()
+    } catch (err) {
+      alert(`Error: ${err.message}`)
+    }
+  }
+
+  if (loading) {
+    return <div className="text-center text-gray-400 py-12">Loading tasks...</div>
+  }
+
+  if (error) {
+    return <div className="text-center text-red-400 py-12">{error}</div>
+  }
+
+  return (
+    <div>
+      <div className="mb-4 flex justify-between items-center">
+        <h3 className="text-xl font-semibold text-gray-300">Task Tree</h3>
+        <button
+          onClick={() => setShowAddRoot(true)}
+          className="flex items-center gap-2 px-4 py-2 bg-cyber-orange text-cyber-darkest rounded hover:bg-cyber-orange-bright transition-colors font-semibold text-sm"
+        >
+          <Plus size={16} />
+          Add Root Task
+        </button>
+      </div>
+
+      {showAddRoot && (
+        <div className="mb-4">
+          <form onSubmit={handleAddRootTask} className="flex gap-2">
+            <input
+              type="text"
+              value={newTaskTitle}
+              onChange={(e) => setNewTaskTitle(e.target.value)}
+              placeholder="New task title..."
+              className="flex-1 px-3 py-2 bg-cyber-darker border border-cyber-orange/50 rounded text-gray-100 focus:outline-none focus:border-cyber-orange"
+              autoFocus
+            />
+            <button
+              type="submit"
+              className="px-4 py-2 bg-cyber-orange text-cyber-darkest rounded hover:bg-cyber-orange-bright font-semibold"
+            >
+              Add
+            </button>
+            <button
+              type="button"
+              onClick={() => setShowAddRoot(false)}
+              className="px-4 py-2 text-gray-400 hover:text-gray-200"
+            >
+              Cancel
+            </button>
+          </form>
+        </div>
+      )}
+
+      {tasks.length === 0 ? (
+        <div className="text-center py-16 text-gray-500">
+          <p className="text-lg mb-2">No tasks yet</p>
+          <p className="text-sm">Add a root task to get started</p>
+        </div>
+      ) : (
+        <div>
+          {tasks.map(task => (
+            <TaskNode
+              key={task.id}
+              task={task}
+              projectId={projectId}
+              onUpdate={loadTasks}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default TreeView

frontend/src/index.css

@@ -0,0 +1,36 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  @apply bg-cyber-dark text-gray-200;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-cyber-darkest;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-cyber-orange-dim rounded;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  @apply bg-cyber-orange;
+}

frontend/src/main.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>,
+)

frontend/src/pages/ProjectList.jsx

@@ -0,0 +1,229 @@
+import { useState, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Plus, Upload, Trash2 } from 'lucide-react'
+import { getProjects, createProject, deleteProject, importJSON } from '../utils/api'
+
+function ProjectList() {
+  const [projects, setProjects] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [showCreateModal, setShowCreateModal] = useState(false)
+  const [showImportModal, setShowImportModal] = useState(false)
+  const [newProjectName, setNewProjectName] = useState('')
+  const [newProjectDesc, setNewProjectDesc] = useState('')
+  const [importJSON_Text, setImportJSONText] = useState('')
+  const [error, setError] = useState('')
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    loadProjects()
+  }, [])
+
+  const loadProjects = async () => {
+    try {
+      const data = await getProjects()
+      setProjects(data)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleCreateProject = async (e) => {
+    e.preventDefault()
+    try {
+      const project = await createProject({
+        name: newProjectName,
+        description: newProjectDesc || null,
+      })
+      setProjects([...projects, project])
+      setShowCreateModal(false)
+      setNewProjectName('')
+      setNewProjectDesc('')
+      navigate(`/project/${project.id}`)
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  const handleImportJSON = async (e) => {
+    e.preventDefault()
+    try {
+      const data = JSON.parse(importJSON_Text)
+      const result = await importJSON(data)
+      setShowImportModal(false)
+      setImportJSONText('')
+      await loadProjects()
+      navigate(`/project/${result.project_id}`)
+    } catch (err) {
+      setError(err.message || 'Invalid JSON format')
+    }
+  }
+
+  const handleDeleteProject = async (projectId, e) => {
+    e.stopPropagation()
+    if (!confirm('Delete this project and all its tasks?')) return
+
+    try {
+      await deleteProject(projectId)
+      setProjects(projects.filter(p => p.id !== projectId))
+    } catch (err) {
+      setError(err.message)
+    }
+  }
+
+  if (loading) {
+    return <div className="text-center text-gray-400 py-12">Loading...</div>
+  }
+
+  return (
+    <div>
+      <div className="flex justify-between items-center mb-8">
+        <h2 className="text-3xl font-bold text-gray-100">Projects</h2>
+        <div className="flex gap-3">
+          <button
+            onClick={() => setShowImportModal(true)}
+            className="flex items-center gap-2 px-4 py-2 bg-cyber-darkest text-cyber-orange border border-cyber-orange/50 rounded hover:bg-cyber-orange/10 transition-colors"
+          >
+            <Upload size={18} />
+            Import JSON
+          </button>
+          <button
+            onClick={() => setShowCreateModal(true)}
+            className="flex items-center gap-2 px-4 py-2 bg-cyber-orange text-cyber-darkest rounded hover:bg-cyber-orange-bright transition-colors font-semibold"
+          >
+            <Plus size={18} />
+            New Project
+          </button>
+        </div>
+      </div>
+
+      {error && (
+        <div className="mb-4 p-4 bg-red-900/30 border border-red-500/50 rounded text-red-300">
+          {error}
+        </div>
+      )}
+
+      {projects.length === 0 ? (
+        <div className="text-center py-16 text-gray-500">
+          <p className="text-xl mb-2">No projects yet</p>
+          <p className="text-sm">Create a new project or import from JSON</p>
+        </div>
+      ) : (
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+          {projects.map(project => (
+            <div
+              key={project.id}
+              onClick={() => navigate(`/project/${project.id}`)}
+              className="p-6 bg-cyber-darkest border border-cyber-orange/30 rounded-lg hover:border-cyber-orange hover:shadow-cyber transition-all cursor-pointer group"
+            >
+              <div className="flex justify-between items-start mb-2">
+                <h3 className="text-xl font-semibold text-gray-100 group-hover:text-cyber-orange transition-colors">
+                  {project.name}
+                </h3>
+                <button
+                  onClick={(e) => handleDeleteProject(project.id, e)}
+                  className="text-gray-600 hover:text-red-400 transition-colors"
+                >
+                  <Trash2 size={18} />
+                </button>
+              </div>
+              {project.description && (
+                <p className="text-gray-400 text-sm line-clamp-2">{project.description}</p>
+              )}
+              <p className="text-xs text-gray-600 mt-3">
+                Created {new Date(project.created_at).toLocaleDateString()}
+              </p>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Create Project Modal */}
+      {showCreateModal && (
+        <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50">
+          <div className="bg-cyber-darkest border border-cyber-orange/50 rounded-lg p-6 w-full max-w-md">
+            <h3 className="text-xl font-bold text-cyber-orange mb-4">Create New Project</h3>
+            <form onSubmit={handleCreateProject}>
+              <div className="mb-4">
+                <label className="block text-gray-300 mb-2 text-sm">Project Name</label>
+                <input
+                  type="text"
+                  value={newProjectName}
+                  onChange={(e) => setNewProjectName(e.target.value)}
+                  className="w-full px-3 py-2 bg-cyber-darker border border-cyber-orange/30 rounded text-gray-100 focus:border-cyber-orange focus:outline-none"
+                  required
+                  autoFocus
+                />
+              </div>
+              <div className="mb-6">
+                <label className="block text-gray-300 mb-2 text-sm">Description (optional)</label>
+                <textarea
+                  value={newProjectDesc}
+                  onChange={(e) => setNewProjectDesc(e.target.value)}
+                  className="w-full px-3 py-2 bg-cyber-darker border border-cyber-orange/30 rounded text-gray-100 focus:border-cyber-orange focus:outline-none"
+                  rows="3"
+                />
+              </div>
+              <div className="flex gap-3 justify-end">
+                <button
+                  type="button"
+                  onClick={() => setShowCreateModal(false)}
+                  className="px-4 py-2 text-gray-400 hover:text-gray-200 transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="px-4 py-2 bg-cyber-orange text-cyber-darkest rounded hover:bg-cyber-orange-bright transition-colors font-semibold"
+                >
+                  Create
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+
+      {/* Import JSON Modal */}
+      {showImportModal && (
+        <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50">
+          <div className="bg-cyber-darkest border border-cyber-orange/50 rounded-lg p-6 w-full max-w-2xl">
+            <h3 className="text-xl font-bold text-cyber-orange mb-4">Import Project from JSON</h3>
+            <form onSubmit={handleImportJSON}>
+              <div className="mb-4">
+                <label className="block text-gray-300 mb-2 text-sm">Paste JSON</label>
+                <textarea
+                  value={importJSON_Text}
+                  onChange={(e) => setImportJSONText(e.target.value)}
+                  className="w-full px-3 py-2 bg-cyber-darker border border-cyber-orange/30 rounded text-gray-100 focus:border-cyber-orange focus:outline-none font-mono text-sm"
+                  rows="15"
+                  placeholder='{"project": {"name": "My Project", "description": "..."}, "tasks": [...]}'
+                  required
+                  autoFocus
+                />
+              </div>
+              <div className="flex gap-3 justify-end">
+                <button
+                  type="button"
+                  onClick={() => setShowImportModal(false)}
+                  className="px-4 py-2 text-gray-400 hover:text-gray-200 transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  className="px-4 py-2 bg-cyber-orange text-cyber-darkest rounded hover:bg-cyber-orange-bright transition-colors font-semibold"
+                >
+                  Import
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ProjectList

frontend/src/pages/ProjectView.jsx

@@ -0,0 +1,104 @@
+import { useState, useEffect } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { ArrowLeft, LayoutList, LayoutGrid } from 'lucide-react'
+import { getProject } from '../utils/api'
+import TreeView from '../components/TreeView'
+import KanbanView from '../components/KanbanView'
+
+function ProjectView() {
+  const { projectId } = useParams()
+  const navigate = useNavigate()
+  const [project, setProject] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [view, setView] = useState('tree') // 'tree' or 'kanban'
+
+  useEffect(() => {
+    loadProject()
+  }, [projectId])
+
+  const loadProject = async () => {
+    try {
+      const data = await getProject(projectId)
+      setProject(data)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (loading) {
+    return <div className="text-center text-gray-400 py-12">Loading...</div>
+  }
+
+  if (error || !project) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-red-400 mb-4">{error || 'Project not found'}</p>
+        <button
+          onClick={() => navigate('/')}
+          className="text-cyber-orange hover:text-cyber-orange-bright"
+        >
+          Back to Projects
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <div className="mb-6">
+        <button
+          onClick={() => navigate('/')}
+          className="flex items-center gap-2 text-gray-400 hover:text-cyber-orange transition-colors mb-4"
+        >
+          <ArrowLeft size={18} />
+          Back to Projects
+        </button>
+
+        <div className="flex justify-between items-start">
+          <div>
+            <h2 className="text-3xl font-bold text-gray-100 mb-2">{project.name}</h2>
+            {project.description && (
+              <p className="text-gray-400">{project.description}</p>
+            )}
+          </div>
+
+          <div className="flex gap-2 bg-cyber-darkest rounded-lg p-1 border border-cyber-orange/30">
+            <button
+              onClick={() => setView('tree')}
+              className={`flex items-center gap-2 px-4 py-2 rounded transition-colors ${
+                view === 'tree'
+                  ? 'bg-cyber-orange text-cyber-darkest font-semibold'
+                  : 'text-gray-400 hover:text-gray-200'
+              }`}
+            >
+              <LayoutList size={18} />
+              Tree View
+            </button>
+            <button
+              onClick={() => setView('kanban')}
+              className={`flex items-center gap-2 px-4 py-2 rounded transition-colors ${
+                view === 'kanban'
+                  ? 'bg-cyber-orange text-cyber-darkest font-semibold'
+                  : 'text-gray-400 hover:text-gray-200'
+              }`}
+            >
+              <LayoutGrid size={18} />
+              Kanban
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {view === 'tree' ? (
+        <TreeView projectId={projectId} />
+      ) : (
+        <KanbanView projectId={projectId} />
+      )}
+    </div>
+  )
+}
+
+export default ProjectView

frontend/src/utils/api.js

@@ -0,0 +1,58 @@
+const API_BASE = '/api';
+
+async function fetchAPI(endpoint, options = {}) {
+  const response = await fetch(`${API_BASE}${endpoint}`, {
+    headers: {
+      'Content-Type': 'application/json',
+      ...options.headers,
+    },
+    ...options,
+  });
+
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ detail: 'Request failed' }));
+    throw new Error(error.detail || `HTTP ${response.status}`);
+  }
+
+  if (response.status === 204) {
+    return null;
+  }
+
+  return response.json();
+}
+
+// Projects
+export const getProjects = () => fetchAPI('/projects');
+export const getProject = (id) => fetchAPI(`/projects/${id}`);
+export const createProject = (data) => fetchAPI('/projects', {
+  method: 'POST',
+  body: JSON.stringify(data),
+});
+export const updateProject = (id, data) => fetchAPI(`/projects/${id}`, {
+  method: 'PUT',
+  body: JSON.stringify(data),
+});
+export const deleteProject = (id) => fetchAPI(`/projects/${id}`, { method: 'DELETE' });
+
+// Tasks
+export const getProjectTasks = (projectId) => fetchAPI(`/projects/${projectId}/tasks`);
+export const getProjectTaskTree = (projectId) => fetchAPI(`/projects/${projectId}/tasks/tree`);
+export const getTasksByStatus = (projectId, status) =>
+  fetchAPI(`/projects/${projectId}/tasks/by-status/${status}`);
+
+export const getTask = (id) => fetchAPI(`/tasks/${id}`);
+export const createTask = (data) => fetchAPI('/tasks', {
+  method: 'POST',
+  body: JSON.stringify(data),
+});
+export const updateTask = (id, data) => fetchAPI(`/tasks/${id}`, {
+  method: 'PUT',
+  body: JSON.stringify(data),
+});
+export const deleteTask = (id) => fetchAPI(`/tasks/${id}`, { method: 'DELETE' });
+
+// JSON Import
+export const importJSON = (data) => fetchAPI('/import-json', {
+  method: 'POST',
+  body: JSON.stringify(data),
+});

frontend/tailwind.config.js

@@ -0,0 +1,24 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        'cyber-dark': '#050509',
+        'cyber-darker': '#0a0a0f',
+        'cyber-darkest': '#101018',
+        'cyber-orange': '#ff6b35',
+        'cyber-orange-bright': '#ff8c42',
+        'cyber-orange-dim': '#cc5428',
+      },
+      boxShadow: {
+        'cyber': '0 0 10px rgba(255, 107, 53, 0.3)',
+        'cyber-lg': '0 0 20px rgba(255, 107, 53, 0.5)',
+      }
+    },
+  },
+  plugins: [],
+}

frontend/vite.config.js

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: '0.0.0.0',
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://backend:8000',
+        changeOrigin: true,
+      }
+    }
+  }
+})