Upload 93 files

.env.example

@@ -0,0 +1,21 @@
+# ── Server ────────────────────────────────────────────────────────────────────
+PORT=4000
+NODE_ENV=production
+
+# ── Dynamic Container Port Range ──────────────────────────────────────────────
+# Each user project gets a unique host port in this range.
+# Make sure the same range is exposed in docker-compose.yml ports section.
+BASE_HOST_PORT=3100
+MAX_HOST_PORT=3300
+
+# ── Docker ────────────────────────────────────────────────────────────────────
+# Path to Docker socket (default for Linux; use 'npipe:////./pipe/docker_engine' on Windows)
+DOCKER_SOCKET=/var/run/docker.sock
+
+# ── Resource Limits per Container ─────────────────────────────────────────────
+CONTAINER_MEMORY_MB=512
+CONTAINER_CPU=0.5
+
+# ── Cleanup ───────────────────────────────────────────────────────────────────
+# How long (ms) a project can be idle before its container is stopped
+CONTAINER_IDLE_TIMEOUT_MS=3600000

.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+dist/
+.env
+data/*.db
+data/*.db-wal
+data/*.db-shm
+logs/
+projects/

Dockerfile

@@ -0,0 +1,61 @@
+# ─── Stage 1: Build TypeScript ───────────────────────────────────────────────
+FROM node:20-slim AS builder
+
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY tsconfig.json ./
+COPY src/ ./src/
+RUN npm run build
+
+# ─── Stage 2: Production Image ───────────────────────────────────────────────
+# We use a full Debian image (not slim) so we can install Docker CLI.
+# The Docker daemon itself runs on the HOST (Fly machine in privileged mode).
+# This container only needs the Docker CLI + socket to talk to it.
+FROM node:20-bookworm AS runner
+
+WORKDIR /app
+
+# ── Install Docker CLI (client only, not the daemon) ──────────────────────────
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    ca-certificates \
+    curl \
+    gnupg \
+    lsb-release \
+    && install -m 0755 -d /etc/apt/keyrings \
+    && curl -fsSL https://download.docker.com/linux/debian/gpg | gpg --dearmor -o /etc/apt/keyrings/docker.gpg \
+    && chmod a+r /etc/apt/keyrings/docker.gpg \
+    && echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/debian $(lsb_release -cs) stable" \
+       > /etc/apt/sources.list.d/docker.list \
+    && apt-get update \
+    && apt-get install -y --no-install-recommends docker-ce-cli \
+    && rm -rf /var/lib/apt/lists/*
+
+# ── Install native Node deps (better-sqlite3 needs build tools) ───────────────
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    python3 make g++ \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY package*.json ./
+RUN npm ci --omit=dev
+
+# Copy compiled output from builder
+COPY --from=builder /app/dist ./dist
+
+# Worker Dockerfiles needed at runtime for building project images
+COPY node.Dockerfile ./node.Dockerfile
+COPY python.Dockerfile ./python.Dockerfile
+
+# Create directories for persistent data
+RUN mkdir -p /app/projects /app/data /app/logs
+
+EXPOSE 4000
+
+ENV NODE_ENV=production
+ENV PORT=4000
+
+# Healthcheck
+HEALTHCHECK --interval=30s --timeout=10s --start-period=30s --retries=3 \
+    CMD curl -f http://localhost:4000/health || exit 1
+
+CMD ["node", "dist/index.js"]

README.md

@@ -1,11 +1 @@
----
-title: Docker Backend
-emoji: 🐠
-colorFrom: blue
-colorTo: green
-sdk: docker
-pinned: false
-license: mit
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# docker-container-manager

deploy.sh

@@ -0,0 +1,38 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo "  Coder AI — Deploy Script"
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+
+# ── 1. Pre-build worker images (if not already built) ──
+echo ""
+echo "▶ Building worker images..."
+
+if ! docker image inspect coder-node &>/dev/null; then
+  echo "  Building coder-node..."
+  docker build -f node.Dockerfile -t coder-node .
+else
+  echo "  coder-node already exists — skipping"
+fi
+
+if ! docker image inspect coder-python &>/dev/null; then
+  echo "  Building coder-python..."
+  docker build -f python.Dockerfile -t coder-python .
+else
+  echo "  coder-python already exists — skipping"
+fi
+
+# ── 2. Pull/build orchestrator image ──
+echo ""
+echo "▶ Building orchestrator image..."
+docker-compose build --no-cache orchestrator
+
+# ── 3. Start (or restart) via docker-compose ──
+echo ""
+echo "▶ Starting orchestrator..."
+docker-compose up -d --remove-orphans
+
+echo ""
+echo "✅ Deployed! Orchestrator running on port ${PORT:-4000}"
+echo "   Logs: docker-compose logs -f orchestrator"

docker-compose.yml

@@ -0,0 +1,47 @@
+version: '3.9'
+
+services:
+  # ── Coder AI Orchestrator ────────────────────────────────────────────────────
+  orchestrator:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: coderai-orchestrator
+    restart: unless-stopped
+    ports:
+      # Main API + proxy port
+      - "${PORT:-4000}:4000"
+      # Dynamic project preview ports range (3100–3300)
+      # Extend this range as you onboard more concurrent users
+      - "3100-3300:3100-3300"
+    volumes:
+      # Allow orchestrator to spawn sibling Docker containers
+      - /var/run/docker.sock:/var/run/docker.sock
+      # Persist SQLite DB across restarts
+      - orchestrator_data:/app/data
+      # Persist project source files across restarts
+      - orchestrator_projects:/app/projects
+    environment:
+      - NODE_ENV=production
+      - PORT=4000
+      - BASE_HOST_PORT=${BASE_HOST_PORT:-3100}
+      - MAX_HOST_PORT=${MAX_HOST_PORT:-3300}
+    env_file:
+      - .env
+    logging:
+      driver: "json-file"
+      options:
+        max-size: "10m"
+        max-file: "3"
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:4000/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 20s
+
+volumes:
+  orchestrator_data:
+    driver: local
+  orchestrator_projects:
+    driver: local

ecosystem.config.js

@@ -0,0 +1,29 @@
+module.exports = {
+    apps: [
+        {
+            name: 'coderai-server',
+            script: 'dist/index.js',
+            instances: 1,           // Must be 1 — Docker socket is not safe to share across workers
+            exec_mode: 'fork',
+            watch: false,
+            max_memory_restart: '512M',
+            env: {
+                NODE_ENV: 'development',
+                PORT: 4000,
+            },
+            env_production: {
+                NODE_ENV: 'production',
+                PORT: 4000,
+            },
+            // Log settings
+            out_file: './logs/out.log',
+            error_file: './logs/error.log',
+            log_date_format: 'YYYY-MM-DD HH:mm:ss',
+            merge_logs: true,
+            // Auto-restart on crash with exponential backoff
+            autorestart: true,
+            restart_delay: 2000,
+            max_restarts: 10,
+        },
+    ],
+};

fly-deploy.sh

@@ -0,0 +1,57 @@
+#!/usr/bin/env bash
+# fly-deploy.sh — Full Fly.io deploy + Docker-in-Docker setup
+# Run this once for initial deploy, then just `fly deploy` for updates.
+set -euo pipefail
+
+APP=${FLY_APP_NAME:-"coderai-orchestrator"}
+
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+echo "  Coder AI → Fly.io Deploy"
+echo "━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
+
+# ── Check flyctl is installed ──────────────────────────────────────────────
+if ! command -v flyctl &>/dev/null; then
+  echo "Installing flyctl..."
+  curl -L https://fly.io/install.sh | sh
+  export PATH="$HOME/.fly/bin:$PATH"
+fi
+
+# ── Create app if it doesn't exist ────────────────────────────────────────
+flyctl apps list | grep -q "$APP" || {
+  echo "▶ Creating Fly app: $APP"
+  flyctl apps create "$APP" --machines
+}
+
+# ── Create persistent volume (only first time) ────────────────────────────
+flyctl volumes list -a "$APP" | grep -q "coderai_data" || {
+  echo "▶ Creating persistent volume (1GB)..."
+  flyctl volumes create coderai_data --size 1 --region sin -a "$APP"
+}
+
+# ── Set secrets from .env ─────────────────────────────────────────────────
+if [ -f .env ]; then
+  echo "▶ Setting secrets from .env..."
+  # Filter out comments and empty lines, set as Fly secrets
+  grep -v '^\s*#' .env | grep -v '^\s*$' | flyctl secrets import -a "$APP"
+fi
+
+# ── Deploy ────────────────────────────────────────────────────────────────
+echo "▶ Deploying..."
+flyctl deploy --remote-only -a "$APP"
+
+# ── Enable Docker-in-Docker (privileged mode) ─────────────────────────────
+echo ""
+echo "▶ Enabling Docker socket access (privileged machine)..."
+MACHINE_ID=$(flyctl machines list -a "$APP" --json | python3 -c "import sys,json; print(json.load(sys.stdin)[0]['id'])")
+
+flyctl machines update "$MACHINE_ID" \
+  --privileged \
+  -a "$APP" \
+  --yes
+
+echo ""
+echo "✅ Done! App running at: https://${APP}.fly.dev"
+echo "   Health: https://${APP}.fly.dev/health"
+echo ""
+echo "   For updates: flyctl deploy -a $APP"
+echo "   For logs:    flyctl logs -a $APP"

fly.toml

@@ -0,0 +1,69 @@
+# fly.toml — Fly.io deployment config for Coder AI Orchestrator
+# Deploy: fly deploy
+
+app = "coderai-orchestrator"      # Change to your unique app name
+primary_region = "sin"            # Singapore — closest to India; or try "bom" if available
+
+[build]
+  dockerfile = "Dockerfile"
+
+[env]
+  NODE_ENV = "production"
+  PORT     = "4000"
+  # Port range for user project containers (must match [[services]] TCP)
+  BASE_HOST_PORT = "3100"
+  MAX_HOST_PORT  = "3200"
+
+# ── Main HTTP service ──────────────────────────────────────────────────────────
+[[services]]
+  protocol    = "tcp"
+  internal_port = 4000
+
+  [[services.ports]]
+    port     = 80
+    handlers = ["http"]
+
+  [[services.ports]]
+    port     = 443
+    handlers = ["tls", "http"]
+
+  [services.concurrency]
+    type       = "requests"
+    soft_limit = 50
+    hard_limit = 100
+
+  [[services.http_checks]]
+    interval   = "15s"
+    timeout    = "5s"
+    grace_period = "30s"
+    method     = "GET"
+    path       = "/health"
+
+# ── Project preview port range (TCP passthrough) ──────────────────────────────
+# Each user project gets a unique port in 3100-3200 range
+# Fly.io exposes these as TCP services so users can hit preview URLs
+[[services]]
+  protocol      = "tcp"
+  internal_port = 3100
+
+  [[services.ports]]
+    port     = 3100
+    handlers = ["tcp"]
+
+# ── Machine/VM settings ───────────────────────────────────────────────────────
+[vm]
+  cpu_kind  = "shared"
+  cpus      = 2
+  memory_mb = 2048     # 2GB — adjust based on concurrent users
+
+# ── Persistent volumes (SQLite DB + project files) ────────────────────────────
+[mounts]
+  source      = "coderai_data"
+  destination = "/app/data"
+
+# NOTE: Fly.io does NOT support Docker-in-Docker by default.
+# To enable Docker socket access (required to spawn project containers),
+# you must use a Fly Machine with --privileged flag.
+# Run this once after initial deploy:
+#   fly machine update <machine-id> --privileged
+# Or use the fly-machines.sh helper script included in this repo.

node.Dockerfile

@@ -0,0 +1,39 @@
+# ─── specialized Node.js Worker Image ──────────────────────────────────────────
+FROM node:20-slim
+
+# Avoid interactive prompts
+ENV DEBIAN_FRONTEND=noninteractive
+
+RUN apt-get update && apt-get install -y \
+    curl \
+    git \
+    unzip \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install Bun for speed
+RUN curl -fsSL https://bun.sh/install | bash
+ENV PATH="/root/.bun/bin:${PATH}"
+
+# ─── Pre-cache common packages ────────────────────────────────────────────────
+WORKDIR /tmp/precache
+RUN echo '{\
+  "name":"precache",\
+  "version":"1.0.0",\
+  "dependencies":{\
+    "next":"14.2.0",\
+    "react":"^18.3.1",\
+    "react-dom":"^18.3.1",\
+    "typescript":"^5.5.3",\
+    "tailwindcss":"^3.4.1",\
+    "postcss":"^8.4.38",\
+    "vite":"^5.4.0",\
+    "@vitejs/plugin-react":"^4.3.1",\
+    "framer-motion":"^11.3.8",\
+    "lucide-react":"^0.395.0"\
+  }\
+}' > package.json
+RUN bun install
+
+WORKDIR /app
+EXPOSE 3000 5173 8080 4173
+CMD ["tail", "-f", "/dev/null"]

nodemon.json

@@ -0,0 +1,7 @@
+{
+  "watch": ["src"],
+  "ignore": ["projects/**", "node_modules/**"],
+  "ext": "ts,json",
+  "exec": "ts-node src/index.ts",
+  "env": {}
+}

package.json

@@ -0,0 +1,49 @@
+{
+  "name": "server-orchestrator",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "nodemon",
+    "build": "tsc",
+    "start": "node dist/index.js",
+    "start:dev": "ts-node src/index.ts",
+    "start:prod": "npm run build && node dist/index.js",
+    "pm2:start": "npm run build && pm2 start ecosystem.config.js --env production",
+    "pm2:stop": "pm2 stop coderai-server",
+    "pm2:logs": "pm2 logs coderai-server",
+    "docker:build": "bash deploy.sh",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "commonjs",
+  "dependencies": {
+    "@types/better-sqlite3": "^7.6.13",
+    "@types/fs-extra": "^11.0.4",
+    "@types/http-proxy": "^1.17.17",
+    "@types/tar-fs": "^2.0.4",
+    "archiver": "^7.0.1",
+    "better-sqlite3": "^12.6.2",
+    "cors": "^2.8.6",
+    "dockerode": "^4.0.9",
+    "dotenv": "^17.3.1",
+    "express": "^5.2.1",
+    "fs-extra": "^11.3.4",
+    "http-proxy": "^1.18.1",
+    "tar-fs": "^3.1.2",
+    "uuid": "^13.0.0"
+  },
+  "devDependencies": {
+    "@types/archiver": "^7.0.0",
+    "@types/cors": "^2.8.19",
+    "@types/dockerode": "^4.0.1",
+    "@types/express": "^5.0.6",
+    "@types/node": "^25.4.0",
+    "@types/uuid": "^10.0.0",
+    "nodemon": "^3.1.14",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.3"
+  }
+}

projects/060c1fce-28f4-472a-b360-97eb9dd5065d/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Neon Task</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  </head>
+  <body class="bg-background text-text font-['Syne']">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

projects/060c1fce-28f4-472a-b360-97eb9dd5065d/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "neon-tasks",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "framer-motion": "^11.3.8",
+    "lucide-react": "^0.395.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.0"
+  }
+}

projects/060c1fce-28f4-472a-b360-97eb9dd5065d/postcss.config.js

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

projects/060c1fce-28f4-472a-b360-97eb9dd5065d/src/App.tsx

@@ -0,0 +1,7 @@
+import Routes from './routes';
+
+function App() {
+  return <Routes />;
+}
+
+export default App;

projects/060c1fce-28f4-472a-b360-97eb9dd5065d/src/components/TodoInput.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+
+type TodoInputProps = {
+  onAdd: (text: string) => void;
+};
+
+export default function TodoInput({ onAdd }: TodoInputProps) {
+  const [text, setText] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (text.trim()) {
+      onAdd(text);
+      setText('');
+    }
+  };
+
+  return (
+    <motion.form
+      onSubmit={handleSubmit}
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+      className="flex gap-4 mb-8"
+    >
+      <input
+        type="text"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        placeholder="What needs to be done?"
+        className="flex-1 px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-lg text-gray-100 placeholder-gray-400 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-all"
+      />
+      <motion.button
+        whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.95 }}
+        type="submit"
+        className="px-6 py-3 bg-primary text-gray-900 font-bold rounded-lg hover:bg-primary/90 transition-all"
+      >
+        Add
+      </motion.button>
+    </motion.form>
+  );
+}

projects/060c1fce-28f4-472a-b360-97eb9dd5065d/src/components/TodoItem.tsx

@@ -0,0 +1,49 @@
+import { motion } from 'framer-motion';
+import { Todo } from '../types';
+import { Check, X } from 'lucide-react';
+
+interface TodoItemProps {
+  todo: Todo;
+  onToggle: (id: number) => void;
+  onDelete: (id: number) => void;
+  index: number;
+}
+
+export default function TodoItem({ todo, onToggle, onDelete, index }: TodoItemProps) {
+  return (
+    <motion.li
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, x: -100 }}
+      transition={{ duration: 0.3, delay: index * 0.1 }}
+      className="flex items-center justify-between p-4 rounded-lg bg-black/30 border border-white/10 mb-3 last:mb-0 hover:bg-black/50 transition-all duration-300"
+    >
+      <div className="flex items-center gap-4">
+        <button
+          onClick={() => onToggle(todo.id)}
+          className={`w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-300 ${
+            todo.completed
+              ? 'border-primary bg-primary/20'
+              : 'border-white/30 hover:border-primary'
+          }`}
+        >
+          {todo.completed && <Check size={16} className="text-primary" />}
+        </button>
+        <span
+          className={`text-lg transition-all duration-300 ${
+            todo.completed ? 'text-white/50 line-through' : 'text-text'
+          }`}
+        >
+          {todo.text}
+        </span>
+      </div>
+
+      <button
+        onClick={() => onDelete(todo.id)}
+        className="text-white/30 hover:text-red-400 transition-colors duration-300 p-1 rounded-full hover:bg-red-400/10"
+      >
+        <X size={20} />
+      </button>
+    </motion.li>
+  );
+}

projects/060c1fce-28f4-472a-b360-97eb9dd5065d/src/components/TodoList.tsx

@@ -0,0 +1,50 @@
+import { motion } from 'framer-motion';
+import TodoItem from './TodoItem';
+import { Todo } from '../types';
+
+interface TodoListProps {
+  todos: Todo[];
+  onToggle: (id: number) => void;
+  onDelete: (id: number) => void;
+}
+
+export default function TodoList({ todos, onToggle, onDelete }: TodoListProps) {
+  if (todos.length === 0) {
+    return (
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        className="text-center text-white/50 py-8"
+      >
+        No tasks yet. Add one above!
+      </motion.div>
+    );
+  }
+
+  return (
+    <motion.ul
+      initial="hidden"
+      animate="visible"
+      variants={{
+        hidden: { opacity: 0 },
+        visible: {
+          opacity: 1,
+          transition: {
+            staggerChildren: 0.1
+          }
+        }
+      }}
+      className="mt-6"
+    >
+      {todos.map((todo, index) => (
+        <TodoItem
+          key={todo.id}
+          todo={todo}
+          onToggle={onToggle}
+          onDelete={onDelete}
+          index={index}
+        />
+      ))}
+    </motion.ul>
+  );
+}

projects/060c1fce-28f4-472a-b360-97eb9dd5065d/src/index.css

@@ -0,0 +1,29 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    background: radial-gradient(ellipse at 50% 30%, rgba(0, 245, 255, 0.1) 0%, transparent 70%),
+                linear-gradient(135deg, rgba(10, 10, 26, 0.8) 0%, rgba(20, 20, 40, 0.8) 100%);
+    min-height: 100vh;
+  }
+
+  body {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+@keyframes glow {
+  0%, 100% {
+    box-shadow: 0 0 10px rgba(0, 245, 255, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 20px rgba(0, 245, 255, 0.6);
+  }
+}
+
+.glow {
+  animation: glow 3s ease-in-out infinite;
+}

projects/060c1fce-28f4-472a-b360-97eb9dd5065d/src/main.tsx

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

projects/060c1fce-28f4-472a-b360-97eb9dd5065d/src/pages/TodoPage.tsx

@@ -0,0 +1,62 @@
+import { useState, useEffect } from 'react';
+import { Todo } from '../types';
+import TodoInput from '../components/TodoInput';
+import TodoList from '../components/TodoList';
+import { loadTodos, saveTodos } from '../utils/storage';
+import { AnimatePresence } from 'framer-motion';
+
+export default function TodoPage() {
+  const [todos, setTodos] = useState<Todo[]>([]);
+  const [animationKey, setAnimationKey] = useState(0);
+
+  useEffect(() => {
+    setTodos(loadTodos());
+  }, []);
+
+  useEffect(() => {
+    saveTodos(todos);
+  }, [todos]);
+
+  const addTodo = (text: string) => {
+    const newTodo: Todo = {
+      id: Date.now(),
+      text,
+      completed: false,
+    };
+    setTodos([...todos, newTodo]);
+    setAnimationKey(prev => prev + 1);
+  };
+
+  const toggleTodo = (id: number) => {
+    setTodos(todos.map(todo =>
+      todo.id === id ? { ...todo, completed: !todo.completed } : todo
+    ));
+  };
+
+  const deleteTodo = (id: number) => {
+    setTodos(todos.filter(todo => todo.id !== id));
+  };
+
+  return (
+    <div className="min-h-screen bg-background text-text font-syne">
+      <div className="container mx-auto px-4 py-16 max-w-2xl">
+        <h1 className="text-5xl font-bold text-center mb-12 text-primary glow">
+          Neon Tasks
+        </h1>
+
+        <div className="bg-black/20 backdrop-blur-sm rounded-2xl p-8 border border-white/10 shadow-2xl shadow-primary/10">
+          <TodoInput onAdd={addTodo} />
+
+          <AnimatePresence mode="wait">
+            <TodoList
+              key={animationKey}
+              todos={todos}
+              onToggle={toggleTodo}
+              onDelete={deleteTodo}
+            />
+          </AnimatePresence>
+        </div>
+      </div>
+    </div>
+  );
+}

projects/060c1fce-28f4-472a-b360-97eb9dd5065d/src/routes.tsx

@@ -0,0 +1,15 @@
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import TodoPage from './pages/TodoPage';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <TodoPage />,
+  },
+]);
+
+const Routes = () => {
+  return <RouterProvider router={router} />;
+};
+
+export default Routes;

projects/060c1fce-28f4-472a-b360-97eb9dd5065d/src/types.ts

@@ -0,0 +1,5 @@
+export interface Todo {
+  id: number
+  text: string
+  completed: boolean
+}

projects/060c1fce-28f4-472a-b360-97eb9dd5065d/src/utils/animations.ts

@@ -0,0 +1,16 @@
+import { Variants } from 'framer-motion';
+
+export const fadeInUp: Variants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0 },
+};
+
+export const staggerContainer = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1,
+    },
+  },
+};

projects/060c1fce-28f4-472a-b360-97eb9dd5065d/src/utils/storage.ts

@@ -0,0 +1,16 @@
+import { Todo } from '../types';
+
+const STORAGE_KEY = 'neon-tasks';
+
+export const loadTodos = (): Todo[] => {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    return stored ? JSON.parse(stored) : [];
+  } catch {
+    return [];
+  }
+};
+
+export const saveTodos = (todos: Todo[]): void => {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
+};

projects/060c1fce-28f4-472a-b360-97eb9dd5065d/tailwind.config.js

@@ -0,0 +1,23 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: '#00f5ff',
+        background: '#0a0a1a',
+        text: '#e0e0e0',
+      },
+      fontFamily: {
+        sans: ['Syne', 'sans-serif'],
+      },
+      animation: {
+        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+      }
+    },
+  },
+  plugins: [],
+}

projects/060c1fce-28f4-472a-b360-97eb9dd5065d/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": ["vite/client"]
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

projects/060c1fce-28f4-472a-b360-97eb9dd5065d/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

projects/060c1fce-28f4-472a-b360-97eb9dd5065d/vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: '0.0.0.0',
+    port: 3000,
+    strictPort: true
+  }
+})

projects/706236f9-12ab-40ac-989e-75c18042cdb2/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Neon Task</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  </head>
+  <body class="bg-background text-text font-['Syne']">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

projects/706236f9-12ab-40ac-989e-75c18042cdb2/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "neon-tasks",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "framer-motion": "^11.3.8",
+    "lucide-react": "^0.395.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.5.3",
+    "vite": "^5.4.0"
+  }
+}

projects/706236f9-12ab-40ac-989e-75c18042cdb2/postcss.config.js

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

projects/706236f9-12ab-40ac-989e-75c18042cdb2/src/App.tsx

@@ -0,0 +1,7 @@
+import Routes from './routes';
+
+function App() {
+  return <Routes />;
+}
+
+export default App;

projects/706236f9-12ab-40ac-989e-75c18042cdb2/src/components/TodoInput.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+
+type TodoInputProps = {
+  onAdd: (text: string) => void;
+};
+
+export default function TodoInput({ onAdd }: TodoInputProps) {
+  const [text, setText] = useState('');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (text.trim()) {
+      onAdd(text);
+      setText('');
+    }
+  };
+
+  return (
+    <motion.form
+      onSubmit={handleSubmit}
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+      className="flex gap-4 mb-8"
+    >
+      <input
+        type="text"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        placeholder="What needs to be done?"
+        className="flex-1 px-4 py-3 bg-gray-800/50 border border-gray-700 rounded-lg text-gray-100 placeholder-gray-400 focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/50 transition-all"
+      />
+      <motion.button
+        whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.95 }}
+        type="submit"
+        className="px-6 py-3 bg-primary text-gray-900 font-bold rounded-lg hover:bg-primary/90 transition-all"
+      >
+        Add
+      </motion.button>
+    </motion.form>
+  );
+}

projects/706236f9-12ab-40ac-989e-75c18042cdb2/src/components/TodoItem.tsx

@@ -0,0 +1,49 @@
+import { motion } from 'framer-motion';
+import { Todo } from '../types';
+import { Check, X } from 'lucide-react';
+
+interface TodoItemProps {
+  todo: Todo;
+  onToggle: (id: number) => void;
+  onDelete: (id: number) => void;
+  index: number;
+}
+
+export default function TodoItem({ todo, onToggle, onDelete, index }: TodoItemProps) {
+  return (
+    <motion.li
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, x: -100 }}
+      transition={{ duration: 0.3, delay: index * 0.1 }}
+      className="flex items-center justify-between p-4 rounded-lg bg-black/30 border border-white/10 mb-3 last:mb-0 hover:bg-black/50 transition-all duration-300"
+    >
+      <div className="flex items-center gap-4">
+        <button
+          onClick={() => onToggle(todo.id)}
+          className={`w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-300 ${
+            todo.completed
+              ? 'border-primary bg-primary/20'
+              : 'border-white/30 hover:border-primary'
+          }`}
+        >
+          {todo.completed && <Check size={16} className="text-primary" />}
+        </button>
+        <span
+          className={`text-lg transition-all duration-300 ${
+            todo.completed ? 'text-white/50 line-through' : 'text-text'
+          }`}
+        >
+          {todo.text}
+        </span>
+      </div>
+
+      <button
+        onClick={() => onDelete(todo.id)}
+        className="text-white/30 hover:text-red-400 transition-colors duration-300 p-1 rounded-full hover:bg-red-400/10"
+      >
+        <X size={20} />
+      </button>
+    </motion.li>
+  );
+}

projects/706236f9-12ab-40ac-989e-75c18042cdb2/src/components/TodoList.tsx

@@ -0,0 +1,50 @@
+import { motion } from 'framer-motion';
+import TodoItem from './TodoItem';
+import { Todo } from '../types';
+
+interface TodoListProps {
+  todos: Todo[];
+  onToggle: (id: number) => void;
+  onDelete: (id: number) => void;
+}
+
+export default function TodoList({ todos, onToggle, onDelete }: TodoListProps) {
+  if (todos.length === 0) {
+    return (
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        className="text-center text-white/50 py-8"
+      >
+        No tasks yet. Add one above!
+      </motion.div>
+    );
+  }
+
+  return (
+    <motion.ul
+      initial="hidden"
+      animate="visible"
+      variants={{
+        hidden: { opacity: 0 },
+        visible: {
+          opacity: 1,
+          transition: {
+            staggerChildren: 0.1
+          }
+        }
+      }}
+      className="mt-6"
+    >
+      {todos.map((todo, index) => (
+        <TodoItem
+          key={todo.id}
+          todo={todo}
+          onToggle={onToggle}
+          onDelete={onDelete}
+          index={index}
+        />
+      ))}
+    </motion.ul>
+  );
+}

projects/706236f9-12ab-40ac-989e-75c18042cdb2/src/index.css

@@ -0,0 +1,29 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    background: radial-gradient(ellipse at 50% 30%, rgba(0, 245, 255, 0.1) 0%, transparent 70%),
+                linear-gradient(135deg, rgba(10, 10, 26, 0.8) 0%, rgba(20, 20, 40, 0.8) 100%);
+    min-height: 100vh;
+  }
+
+  body {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+@keyframes glow {
+  0%, 100% {
+    box-shadow: 0 0 10px rgba(0, 245, 255, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 20px rgba(0, 245, 255, 0.6);
+  }
+}
+
+.glow {
+  animation: glow 3s ease-in-out infinite;
+}

projects/706236f9-12ab-40ac-989e-75c18042cdb2/src/main.tsx

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

projects/706236f9-12ab-40ac-989e-75c18042cdb2/src/pages/TodoPage.tsx

@@ -0,0 +1,62 @@
+import { useState, useEffect } from 'react';
+import { Todo } from '../types';
+import TodoInput from '../components/TodoInput';
+import TodoList from '../components/TodoList';
+import { loadTodos, saveTodos } from '../utils/storage';
+import { AnimatePresence } from 'framer-motion';
+
+export default function TodoPage() {
+  const [todos, setTodos] = useState<Todo[]>([]);
+  const [animationKey, setAnimationKey] = useState(0);
+
+  useEffect(() => {
+    setTodos(loadTodos());
+  }, []);
+
+  useEffect(() => {
+    saveTodos(todos);
+  }, [todos]);
+
+  const addTodo = (text: string) => {
+    const newTodo: Todo = {
+      id: Date.now(),
+      text,
+      completed: false,
+    };
+    setTodos([...todos, newTodo]);
+    setAnimationKey(prev => prev + 1);
+  };
+
+  const toggleTodo = (id: number) => {
+    setTodos(todos.map(todo =>
+      todo.id === id ? { ...todo, completed: !todo.completed } : todo
+    ));
+  };
+
+  const deleteTodo = (id: number) => {
+    setTodos(todos.filter(todo => todo.id !== id));
+  };
+
+  return (
+    <div className="min-h-screen bg-background text-text font-syne">
+      <div className="container mx-auto px-4 py-16 max-w-2xl">
+        <h1 className="text-5xl font-bold text-center mb-12 text-primary glow">
+          Neon Tasks
+        </h1>
+
+        <div className="bg-black/20 backdrop-blur-sm rounded-2xl p-8 border border-white/10 shadow-2xl shadow-primary/10">
+          <TodoInput onAdd={addTodo} />
+
+          <AnimatePresence mode="wait">
+            <TodoList
+              key={animationKey}
+              todos={todos}
+              onToggle={toggleTodo}
+              onDelete={deleteTodo}
+            />
+          </AnimatePresence>
+        </div>
+      </div>
+    </div>
+  );
+}

projects/706236f9-12ab-40ac-989e-75c18042cdb2/src/routes.tsx

@@ -0,0 +1,15 @@
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import TodoPage from './pages/TodoPage';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <TodoPage />,
+  },
+]);
+
+const Routes = () => {
+  return <RouterProvider router={router} />;
+};
+
+export default Routes;

projects/706236f9-12ab-40ac-989e-75c18042cdb2/src/types.ts

@@ -0,0 +1,5 @@
+export interface Todo {
+  id: number
+  text: string
+  completed: boolean
+}

projects/706236f9-12ab-40ac-989e-75c18042cdb2/src/utils/animations.ts

@@ -0,0 +1,16 @@
+import { Variants } from 'framer-motion';
+
+export const fadeInUp: Variants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0 },
+};
+
+export const staggerContainer = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.1,
+    },
+  },
+};

projects/706236f9-12ab-40ac-989e-75c18042cdb2/src/utils/storage.ts

@@ -0,0 +1,16 @@
+import { Todo } from '../types';
+
+const STORAGE_KEY = 'neon-tasks';
+
+export const loadTodos = (): Todo[] => {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    return stored ? JSON.parse(stored) : [];
+  } catch {
+    return [];
+  }
+};
+
+export const saveTodos = (todos: Todo[]): void => {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(todos));
+};

projects/706236f9-12ab-40ac-989e-75c18042cdb2/tailwind.config.js

@@ -0,0 +1,23 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: '#00f5ff',
+        background: '#0a0a1a',
+        text: '#e0e0e0',
+      },
+      fontFamily: {
+        sans: ['Syne', 'sans-serif'],
+      },
+      animation: {
+        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+      }
+    },
+  },
+  plugins: [],
+}

projects/706236f9-12ab-40ac-989e-75c18042cdb2/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": ["vite/client"]
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

projects/706236f9-12ab-40ac-989e-75c18042cdb2/tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}