From 730a72243c077c1d25790d7638168d81d597ca49 Mon Sep 17 00:00:00 2001 From: Claude Date: Tue, 21 Oct 2025 18:04:18 +0000 Subject: [PATCH 01/14] Integrate Claude Code into multi-agent collaboration setup Add comprehensive Claude Code integration to the existing multi-agent collaboration infrastructure, enabling seamless cooperation between Claude Code, GitHub Copilot, CodeRabbit, and other AI agents. Changes: - Created .claude/project-instructions.md with complete project guide tailored for Claude Code's capabilities and workflows - Updated AGENT_COLLABORATION.md to include Claude Code as a supported agent with detailed capabilities, strengths, and best use cases - Added agent comparison matrix showing which agent excels at which task types (refactoring, reviews, documentation, etc.) - Updated copilot-instructions.md to reference Claude Code and explain collaboration patterns between agents - Enhanced PR template to include Claude Code in agent attribution section and request TodoWrite summaries - Improved agent task template with task type recommendations guiding users to the most suitable agent for each task type - Updated main README.md with multi-agent development section - Updated docs/README.md with links to agent-specific documentation Benefits: - Clear documentation for Claude Code's role in the development workflow - Structured approach to multi-agent collaboration and task assignment - Cross-references between agent-specific docs for easy navigation - Guidance on choosing the right agent for specific task types - Consistent handoff templates for seamless agent-to-agent collaboration The integration maintains consistency with existing documentation while adding Claude Code specific features like TodoWrite task tracking, direct git operations, and systematic multi-file refactoring capabilities. Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .claude/project-instructions.md | 433 +++++++++++++++++++++++++++ .github/AGENT_COLLABORATION.md | 74 ++++- .github/ISSUE_TEMPLATE/agent_task.md | 14 +- .github/PULL_REQUEST_TEMPLATE.md | 5 +- .github/copilot-instructions.md | 15 +- README.md | 16 + docs/README.md | 8 +- 7 files changed, 556 insertions(+), 9 deletions(-) create mode 100644 .claude/project-instructions.md diff --git a/.claude/project-instructions.md b/.claude/project-instructions.md new file mode 100644 index 0000000..d0864cc --- /dev/null +++ b/.claude/project-instructions.md @@ -0,0 +1,433 @@ +# Claude Code Instructions for Bleedy + +## Project Overview + +**Bleedy** is a web application for adding bleed margins to images, built with Vue 3, Vite, TypeScript, and PyScript. It allows users to upload images and automatically add professional bleed margins using Python image processing in the browser. + +### Key Technologies + +- **Frontend**: Vue 3 + TypeScript + Vite +- **UI Framework**: Element Plus with custom wired-elements for sketchy aesthetics +- **Python Integration**: PyScript 2025.5.1 with PIL (Pillow) for image processing +- **Build Tool**: Vite 6.x with hot reload +- **Testing**: Vitest (currently no tests exist) +- **Linting**: ESLint 9.x with Vue/TypeScript support +- **Package Manager**: npm (required version 11.0.0+) + +## Build and Development Commands + +### Environment Setup + +**ALWAYS run `npm install` first** - this project uses patched dependencies and requires proper installation. + +```bash +npm install +``` + +### Development Commands + +#### Start Development Server + +```bash +npm run dev +``` + +- Starts Vite dev server on http://localhost:5173/ +- Includes hot reload for Vue components +- Takes ~1-2 seconds to start +- PyScript loads asynchronously in browser + +#### Build for Production + +```bash +npm run build +``` + +- **Time required**: ~8-10 seconds +- Creates `dist/` directory with production build +- Includes PyScript files and assets +- Warning about chunk sizes is expected (large PyScript dependencies) + +#### Type Checking + +```bash +npm run type-check +``` + +- **Known Issues**: Currently fails with 46+ TypeScript errors in components +- Errors relate to: + - Missing type definitions for never[] arrays + - Property access on implicit 'any' types + - Missing Window API types (showOpenFilePicker) + - RoughJS module declaration issues +- Build still succeeds despite type errors + +#### Preview Production Build + +```bash +npm run preview +``` + +- Serves production build locally for testing + +### Linting and Formatting + +#### ESLint + +```bash +npm run lint +``` + +- **Status**: Working with ESLint 9.x flat config (ES modules format) +- Configuration in `eslint.config.js` uses modern ES modules format +- Automatically ignores `dist/`, `dist-ssr/`, and `node_modules/` folders + +#### Prettier + +```bash +npm run format +``` + +- Formats source files in `src/` directory +- Configuration in `.prettierrc.json` +- **Known Issue**: Prettier cache may report formatting issues even when files are correctly formatted + - Use `npx prettier --check . --cache=false` to verify actual formatting status + - Use `npx prettier --write . --cache=false` if standard format command seems inconsistent + +### Testing + +```bash +npm run test:unit +``` + +- **Status**: No tests currently exist +- Uses Vitest with jsdom environment +- Configuration ready in `vitest.config.ts` + +## Project Architecture + +### Directory Structure + +``` +/ +├── src/ +│ ├── App.vue # Main application component +│ ├── main.ts # Vue app entry point +│ ├── components/ # Vue components +│ │ ├── StepManager.vue # Main workflow component +│ │ ├── ImageProcessor.vue # Image processing UI +│ │ └── steps/ # Step-by-step UI components +│ ├── router/ # Vue Router configuration +│ └── assets/ # Static assets and styles +├── public/ +│ ├── pyscript/ # PyScript Python code +│ │ ├── main.py # Core image processing logic +│ │ └── config.toml # PyScript configuration +│ └── js/ +│ └── bleedy_interop.js # JS-Python bridge +├── patches/ # npm patches for dependencies +│ ├── roughjs@4.6.6.patch +│ └── wired-elements@3.0.0-rc.6.patch +├── .claude/ # Claude Code configuration +│ └── project-instructions.md # This file +├── .github/ # GitHub configuration +│ ├── AGENT_COLLABORATION.md # Multi-agent collaboration guide +│ └── copilot-instructions.md # Copilot configuration +└── dist/ # Production build output +``` + +### Key Configuration Files + +- `vite.config.ts` - Vite build configuration with Vue, Element Plus, and custom elements +- `tsconfig.*.json` - TypeScript configuration split across multiple files +- `vitest.config.ts` - Test configuration (inherits from Vite config) +- `eslint.config.js` - ESLint configuration (needs ES modules fix) +- `.prettierrc.json` - Code formatting rules + +### PyScript Integration + +- **Python Version**: Pyodide 0.26.1 +- **Python Packages**: Pillow (PIL) for image processing +- **Communication**: Custom event system between Python and Vue +- **Files**: + - `public/pyscript/main.py` - Image processing algorithms + - `public/pyscript/config.toml` - PyScript/Pyodide configuration + - `public/js/bleedy_interop.js` - JavaScript bridge for Python-Vue communication + +## Dependencies and Patches + +### Critical Dependencies + +- `vue@^3.5.13` - Core framework +- `element-plus@^2.9.5` - UI components +- `typescript@~5.7.2` - Type checking +- `vite@^6.0.6` - Build tool + +### Patched Dependencies + +**IMPORTANT**: This project patches two dependencies. Running `npm install` applies these patches automatically. + +1. `roughjs@4.6.6.patch` - Fixes rendering issues +2. `wired-elements@3.0.0-rc.6.patch` - Fixes compatibility with modern browsers + +### Known Dependency Issues + +- **wired-elements**: Using old RC version (3.0.0-rc.6) that's no longer maintained +- **Browserslist**: Data is 7 months old (warning during build) + +## Continuous Integration + +### GitHub Workflows + +1. **Azure Static Web Apps CI/CD** (`.github/workflows/azure-static-web-apps-thankful-mushroom-08ecc5d1e.yml`) + - Deploys to Azure on pushes to master + - Uses standard Node.js build process + +2. **CI** (`.github/workflows/ci.yml`) + - Continuous integration checks on push/PR + - Runs build and lint checks + +3. **SonarCloud** (`.github/workflows/sonarcloud.yml`) + - Code quality analysis on push/PR + +4. **Post-Merge Cleanup** (`.github/workflows/post-merge-cleanup.yml`) + - Cleanup tasks after merge + +5. **Lockfile Sync** (`.github/workflows/lockfile-sync.yml`) + - Keeps package-lock.json in sync + +6. **Azure Staging Cleanup** (`.github/workflows/azure-staging-cleanup.yml`) + - Cleans up staging environments + +## Common Issues and Solutions + +### TypeScript Errors + +- **Issue**: 46+ type errors across multiple components +- **Impact**: Build succeeds, but `npm run type-check` fails +- **Main Issues**: + - ImageSelection.vue: Array type inference (`never[]` instead of proper types) + - Missing Window API types for File System Access API + - RoughJS module lacks TypeScript declarations +- **Solution**: Add proper type annotations and interface declarations + +### ESLint Configuration + +- **Status**: Using ESLint 9.x flat config format (ES modules) with proper ignore patterns +- Ignores `dist/`, `dist-ssr/`, and `node_modules/` folders automatically + +### PyScript Loading + +- **Issue**: PyScript loads asynchronously, may cause timing issues +- **Solution**: Use event listeners for Python-JavaScript communication + +### Build Warnings + +- Large bundle size warnings are expected due to PyScript/Pyodide dependencies +- Chunk size limit warnings can be ignored for this use case + +### Prettier Cache Issues + +- **Issue**: `npm run format:check` may report formatting issues due to stale cache +- **Verification**: Use `npx prettier --check . --cache=false` to verify true formatting status +- **Solution**: Run `npx prettier --write . --cache=false` or clear `node_modules/.cache/prettier/` + +## Development Guidelines + +### Making Changes + +1. **Always run `npm install`** after pulling changes (patches may update) +2. **Test in development mode first**: `npm run dev` +3. **Check build**: `npm run build` (ignore type check failures for now) +4. **Verify functionality**: Test image upload and processing in browser + +### Component Development + +- Vue 3 Composition API with `