{"id":43614620,"url":"https://github.com/pyrex41/cl-fun","last_synced_at":"2026-02-04T12:23:47.766Z","repository":{"id":318755953,"uuid":"1075666409","full_name":"pyrex41/cl-fun","owner":"pyrex41","description":null,"archived":false,"fork":false,"pushed_at":"2025-10-14T22:41:15.000Z","size":2604,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-15T02:32:15.938Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pyrex41.png","metadata":{"files":{"readme":"docs/README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"docs/AGENTS.md","dco":null,"cla":null}},"created_at":"2025-10-13T20:19:10.000Z","updated_at":"2025-10-14T22:41:18.000Z","dependencies_parsed_at":"2025-10-15T05:42:05.497Z","dependency_job_id":"9758d6ad-2c5a-43ce-96b7-45b3a06e2a77","html_url":"https://github.com/pyrex41/cl-fun","commit_stats":null,"previous_names":["pyrex41/cl-fun"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/pyrex41/cl-fun","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pyrex41%2Fcl-fun","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pyrex41%2Fcl-fun/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pyrex41%2Fcl-fun/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pyrex41%2Fcl-fun/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pyrex41","download_url":"https://codeload.github.com/pyrex41/cl-fun/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pyrex41%2Fcl-fun/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29084187,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-04T03:31:03.593Z","status":"ssl_error","status_checked_at":"2026-02-04T03:29:50.742Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-02-04T12:23:46.665Z","updated_at":"2026-02-04T12:23:47.760Z","avatar_url":"https://github.com/pyrex41.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CollabCanvas\n### Real-Time Collaborative Design Tool with AI\n*Built with Common Lisp + PixiJS*\n\nA Figma-like collaborative canvas where multiple designers can work together in real-time, with an AI agent that can create and manipulate designs through natural language.\n\n---\n\n## 📋 What You're Building\n\nThis project implements:\n\n- **Real-time multiplayer canvas** with WebSocket sync\n- **60 FPS pan and zoom** using PixiJS\n- **Live cursor tracking** showing all connected users\n- **Object creation and manipulation** (rectangles, circles, text)\n- **State persistence** with SQLite\n- **Email/password authentication** with sessions\n- **AI agent integration** for natural language design commands\n\n---\n\n## 🏗️ Architecture\n\n```\n┌─────────────────────────────────────────────────┐\n│                   Frontend                       │\n│  ┌──────────────────────────────────────────┐  │\n│  │         PixiJS Canvas (WebGL)             │  │\n│  │  - Pan/Zoom - Shapes - Transformations    │  │\n│  └──────────────────────────────────────────┘  │\n│               ↕ WebSocket                       │\n└─────────────────────────────────────────────────┘\n                      ↕\n┌─────────────────────────────────────────────────┐\n│                Backend (Common Lisp)             │\n│  ┌──────────────┐    ┌───────────────────────┐ │\n│  │ Hunchentoot  │    │   Hunchensocket       │ │\n│  │   HTTP API   │    │  Real-time Sync       │ │\n│  └──────────────┘    └───────────────────────┘ │\n│          ↓                     ↓                │\n│  ┌────────────────────────────────────────────┐│\n│  │          SQLite Database                    ││\n│  │   Users | Sessions | Canvas States         ││\n│  └────────────────────────────────────────────┘│\n└─────────────────────────────────────────────────┘\n```\n\n---\n\n## 🚀 Quick Start\n\n### Prerequisites\n\n```bash\n# Install Roswell (Common Lisp environment manager)\nbrew install roswell  # macOS\n# or see ROSWELL_GUIDE.md for other platforms\n\n# Install Node.js 18+\nbrew install node  # or from nodejs.org\n\n# Install pnpm (optional, can use npm)\nnpm install -g pnpm\n```\n\n### Setup (5 minutes)\n\n```bash\n# Clone the repository\ngit clone \u003cyour-repo\u003e\ncd collabcanvas\n\n# Backend setup\ncd backend\nln -s $(pwd) ~/.roswell/local-projects/collabcanvas\nros -e '(ql:register-local-projects)'\nros -e '(ql:quickload :collabcanvas)'\n\n# Frontend setup\ncd ../frontend\npnpm install  # or npm install\n\n# Initialize database\nmkdir -p backend/data\nsqlite3 backend/data/canvas.db \u003c backend/db/schema.sql\n```\n\n### Run Development Servers\n\n**Terminal 1 - Backend:**\n```bash\ncd backend\n./start.sh\n# Server starts on http://localhost:8080\n```\n\n**Terminal 2 - Frontend:**\n```bash\ncd frontend\npnpm dev  # or npm run dev\n# Dev server starts on http://localhost:5173\n```\n\n**Open your browser:**\n- Go to http://localhost:5173\n- Register an account\n- Open a second browser window (different account)\n- See real-time collaboration!\n\n---\n\n## 📁 Project Structure\n\n```\ncollabcanvas/\n├── backend/                      # Common Lisp backend\n│   ├── collabcanvas.asd         # ASDF system definition\n│   ├── src/\n│   │   ├── package.lisp         # Package definitions\n│   │   ├── config.lisp          # Configuration\n│   │   ├── utils.lisp           # Utilities\n│   │   ├── database.lisp        # SQLite operations\n│   │   ├── auth.lisp            # Authentication\n│   │   ├── websocket.lisp       # Real-time sync\n│   │   ├── canvas-state.lisp    # State management\n│   │   ├── ai-agent.lisp        # AI integration\n│   │   └── main.lisp            # Server entry point\n│   ├── db/\n│   │   └── schema.sql           # Database schema\n│   ├── data/                    # Runtime data (git-ignored)\n│   └── start.sh                 # Development startup\n├── frontend/                     # PixiJS frontend\n│   ├── package.json\n│   ├── vite.config.js\n│   ├── index.html\n│   └── src/\n│       ├── main.js              # App entry point\n│       ├── canvas.js            # PixiJS canvas logic\n│       ├── websocket.js         # WebSocket client\n│       ├── auth.js              # Auth UI\n│       └── styles.css\n├── Dockerfile                    # Container definition\n├── fly.toml                      # Fly.io config\n└── README.md                     # This file\n```\n\n---\n\n## 🎯 MVP Requirements (24 Hours)\n\n### Must Have\n\n- [x] Pan/zoom canvas\n- [x] Create shapes (rectangle, circle)\n- [x] Move objects\n- [x] Real-time sync (2+ users)\n- [x] Multiplayer cursors with names\n- [x] Presence awareness\n- [x] User authentication\n- [x] Deployed and accessible\n\n### Performance Targets\n\n- **FPS:** 60 during all interactions\n- **Sync Latency:** \u003c100ms for objects, \u003c50ms for cursors\n- **Scale:** 500+ objects, 5+ concurrent users\n\n---\n\n## 🔧 Development\n\n### Backend REPL Workflow\n\n```bash\n# Start REPL\nros run\n\n# In REPL\n(ql:quickload :collabcanvas)\n(collabcanvas:start)\n\n# Make code changes in editor\n\n# Reload specific file\n(load \"src/websocket.lisp\")\n\n# Or reload entire system\n(asdf:load-system :collabcanvas :force t)\n\n# Stop server\n(collabcanvas:stop)\n```\n\n### Frontend Hot Reload\n\nVite automatically reloads on file changes. Just edit and save!\n\n### Testing Multiplayer\n\n1. Start backend and frontend\n2. Open http://localhost:5173 in two browser windows\n3. Register different accounts in each\n4. Create objects in one - see them appear in the other\n5. Move cursor - see it in the other window\n\n---\n\n## 🌐 Deployment\n\n### Build Frontend\n\n```bash\ncd frontend\npnpm build\n# Creates frontend/dist/\n```\n\n### Deploy to Fly.io\n\n```bash\n# Install Fly CLI\ncurl -L https://fly.io/install.sh | sh\n\n# Login\nfly auth login\n\n# Launch (first time)\nfly launch\n\n# Deploy updates\nfly deploy\n\n# View logs\nfly logs\n\n# Open app\nfly open\n```\n\nYour app will be live at `https://collabcanvas-yourname.fly.dev`\n\n---\n\n## 📡 API Reference\n\n### HTTP Endpoints\n\n**POST /api/register**\n```json\n{\n  \"email\": \"user@example.com\",\n  \"password\": \"securepassword\",\n  \"username\": \"johndoe\"\n}\n```\n\n**POST /api/login**\n```json\n{\n  \"email\": \"user@example.com\",\n  \"password\": \"securepassword\"\n}\n```\nResponse:\n```json\n{\n  \"success\": true,\n  \"sessionId\": \"uuid-here\",\n  \"userId\": 1,\n  \"username\": \"johndoe\"\n}\n```\n\n**POST /api/logout**\n```json\n{\n  \"sessionId\": \"uuid-here\"\n}\n```\n\n**GET /api/canvas/state?canvasId=xxx**\n\nReturns current canvas state as JSON.\n\n### WebSocket Messages\n\n**Connect:** `ws://localhost:8080/ws/\u003ccanvas-id\u003e`\n\n**Client → Server:**\n\n```javascript\n// Authenticate\n{\n  type: 'auth',\n  sessionId: 'uuid',\n  username: 'johndoe',\n  canvasId: 'canvas-123'\n}\n\n// Cursor update\n{\n  type: 'cursor',\n  x: 100,\n  y: 200\n}\n\n// Create object\n{\n  type: 'object-create',\n  object: {\n    id: 'obj-123',\n    type: 'rectangle',\n    x: 100,\n    y: 100,\n    width: 200,\n    height: 100,\n    color: 0xFF0000\n  }\n}\n\n// Update object\n{\n  type: 'object-update',\n  objectId: 'obj-123',\n  updates: {\n    x: 150,\n    y: 150\n  }\n}\n\n// Delete object\n{\n  type: 'object-delete',\n  objectId: 'obj-123'\n}\n```\n\n**Server → Client:**\n\n```javascript\n// Auth success\n{\n  type: 'auth-success',\n  userId: 1,\n  username: 'johndoe'\n}\n\n// Remote cursor\n{\n  type: 'cursor',\n  userId: 2,\n  username: 'jane',\n  x: 250,\n  y: 300\n}\n\n// Presence update\n{\n  type: 'presence',\n  users: [\n    { userId: 1, username: 'john' },\n    { userId: 2, username: 'jane' }\n  ]\n}\n\n// Broadcast messages (same format as client sends)\n```\n\n---\n\n## 🤖 AI Agent Integration\n\n### Phase 1: Function Calling Setup\n\nThe AI agent uses OpenAI function calling to interpret natural language and execute canvas operations.\n\n**Example Commands:**\n- \"Create a blue rectangle at position 200, 300\"\n- \"Move the circle to the center\"\n- \"Create a login form\"\n- \"Arrange these shapes in a grid\"\n\n**Implementation** (in `src/ai-agent.lisp`):\n\n```lisp\n(defun process-ai-command (command canvas-state)\n  \"Process natural language command and return canvas operations\"\n  ;; Call OpenAI API with function definitions\n  ;; Parse response and return list of operations\n  ;; Operations are then broadcast to all clients\n  )\n```\n\nSee `ARCHITECTURE.md` for detailed AI integration guide.\n\n---\n\n## 🐛 Troubleshooting\n\n### Backend won't start\n\n```bash\n# Clear FASL cache\nrm -rf ~/.cache/common-lisp/\n\n# Re-register and reload\nros -e '(ql:register-local-projects)'\nros -e '(asdf:load-system :collabcanvas :force t)'\n```\n\n### WebSocket connection fails\n\n- Check backend is running: `curl http://localhost:8080/health`\n- Verify WebSocket URL in frontend matches backend port\n- Check browser console for connection errors\n- Ensure no firewall blocking port 8080\n\n### Objects not syncing\n\n- Open browser console in both windows\n- Check WebSocket status (should be \"open\")\n- Verify messages are being sent/received\n- Check backend logs for errors\n- Test with simplified scenario (just two users)\n\n### Performance issues\n\n- Reduce cursor update frequency (throttle to 30/sec)\n- Check FPS with Chrome DevTools (Performance tab)\n- Profile for memory leaks\n- Reduce object complexity\n- Use browser dev tools to identify bottlenecks\n\n---\n\n## 📚 Resources\n\n### Project Documentation\n\n- **Architecture Guide:** `COLLABCANVAS_ARCHITECTURE.md`\n- **Quick Start:** `QUICKSTART_GUIDE.md`\n- **MVP Checklist:** `MVP_CHECKLIST.md`\n- **Roswell Guide:** `ROSWELL_GUIDE.md`\n- **Claude Code Guide:** `CLAUDE.md`\n\n### Task Master Integration\n\n**Implementation is structured using Task Master with 75 detailed subtasks:**\n\n- **15 main tasks** (project structure → deployment)\n- **Each task has 5 subtasks** (30-60 min each)\n- **Total implementation time:** ~40-75 hours\n- **Track progress:** `task-master list` and `task-master status`\n- **PRD Document:** `.taskmaster/docs/prd.md`\n\n```bash\n# View all tasks\ntask-master list\n\n# Start next subtask\ntask-master next\ntask-master show 1.1\n\n# Track progress\ntask-master status\n```\n\n### External Resources\n\n- [PixiJS Documentation](https://pixijs.download/release/docs/index.html)\n- [Hunchensocket Guide](https://github.com/joaotavora/hunchensocket)\n- [Common Lisp Cookbook](https://lispcookbook.github.io/cl-cookbook/)\n- [Fly.io Documentation](https://fly.io/docs/)\n\n---\n\n## 🎨 Features Roadmap\n\n### Phase 1: MVP ✅\n- Real-time collaboration\n- Basic shapes\n- Auth \u0026 persistence\n\n### Phase 2: Enhanced Canvas\n- [ ] Multi-select\n- [ ] Layers \u0026 z-index\n- [ ] Text tool\n- [ ] Lines \u0026 paths\n- [ ] Undo/redo\n\n### Phase 3: AI Integration\n- [ ] Function calling setup\n- [ ] Basic commands (create, move, resize)\n- [ ] Layout commands (grid, align, distribute)\n- [ ] Complex commands (create forms, components)\n- [ ] Natural language query\n\n### Phase 4: Polish\n- [ ] Export to PNG/JSON\n- [ ] Import images\n- [ ] Keyboard shortcuts\n- [ ] Templates\n- [ ] Comments \u0026 annotations\n\n---\n\n## 🤝 Contributing\n\nThis is a learning project! Feel free to:\n\n1. Fork the repository\n2. Create a feature branch\n3. Make your changes\n4. Test thoroughly\n5. Submit a pull request\n\n### Code Style\n\n- **Lisp:** Follow standard Common Lisp conventions\n- **JavaScript:** ES6+, functional style where possible\n- **Comments:** Explain *why*, not *what*\n- **Testing:** Add tests for new features\n\n---\n\n## 📄 License\n\nMIT License - see LICENSE file for details\n\n---\n\n## 🙏 Acknowledgments\n\n- Inspired by Figma's collaborative infrastructure\n- Built on the shoulders of Common Lisp giants\n- PixiJS for incredible 2D rendering performance\n- The Roswell project for making CL development accessible\n\n---\n\n## 📧 Contact\n\nQuestions? Issues? Reach out or open an issue!\n\n**Remember:** A simple, working multiplayer canvas beats a complex, broken one. Ship the MVP! 🚀\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpyrex41%2Fcl-fun","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpyrex41%2Fcl-fun","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpyrex41%2Fcl-fun/lists"}