diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 151a80c..2f79b05 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -1,5 +1,19 @@ # GitHub Copilot Agent Instructions for MQTT Explorer +## Overview + +MQTT Explorer is an Electron-based desktop application for exploring MQTT brokers. It provides a comprehensive UI for connecting to MQTT brokers, browsing topics, and analyzing message flows. + +## Technology Stack + +- **Frontend**: React 16.x with Material-UI +- **Backend**: Node.js with TypeScript +- **Desktop Framework**: Electron 29.x +- **MQTT Client**: [mqttjs](https://github.com/mqttjs/MQTT.js) v4.x +- **State Management**: Redux with redux-thunk +- **Build Tools**: webpack, TypeScript compiler +- **Testing**: Mocha + Chai for unit tests, Playwright for MCP introspection tests + ## Project Setup ### Building and Running @@ -97,9 +111,128 @@ The project supports MCP (Model Context Protocol) for automated testing with Pla - `src/` - Electron main process and bindings - `src/spec/` - Test specifications including MCP introspection tests +## Code Style and Formatting + +### Linting + +The project uses TSLint with Airbnb config and Prettier for code formatting: + +```bash +# Run all linters +yarn lint + +# Run linters individually +yarn lint:prettier # Check Prettier formatting +yarn lint:tslint # Check TSLint rules +yarn lint:spellcheck # Check spelling in code + +# Auto-fix issues +yarn lint:fix # Fix TSLint and Prettier issues +yarn lint:tslint:fix # Fix TSLint issues only +yarn lint:prettier:fix # Fix Prettier issues only +``` + +### Code Style Rules + +- **Semicolons**: Never use semicolons (enforced by TSLint and Prettier) +- **Quotes**: Single quotes for strings +- **Indentation**: 2 spaces +- **Line length**: Maximum 120 characters (Prettier) / 200 characters (TSLint) +- **Arrow functions**: No parentheses for single parameters (`x => x + 1`) +- **Trailing commas**: Required for multiline objects and arrays (ES5 compatible) + +### TypeScript Guidelines + +- Enable strict null checks and no implicit any +- Use TypeScript interfaces for data structures +- Prefer `const` over `let`, avoid `var` +- Use type inference when possible, explicit types when clarity is needed + +## Dependency Management + +### Adding Dependencies + +```bash +# Add to root project +yarn add + +# Add to app (frontend) +cd app && yarn add + +# Add to backend +cd backend && yarn add + +# Add dev dependencies +yarn add -D +``` + +### Important Dependency Notes + +- Main dependencies are in the root `package.json` +- Frontend React app has its own dependencies in `app/package.json` +- Backend models and logic have dependencies in `backend/package.json` +- Always use `--frozen-lockfile` in CI to ensure reproducible builds +- Run `yarn install` after pulling changes that modify `yarn.lock` + +## Debugging + +### Development Mode + +```bash +# Start with hot reload for frontend +yarn dev + +# This runs two processes in parallel: +# 1. webpack-dev-server for the React app (port varies) +# 2. Electron in development mode with the --development flag +``` + +### Debugging TypeScript + +- Source maps are enabled in `tsconfig.json` +- Use `ts-node` for running TypeScript files directly +- Backend tests can be debugged with: `cd backend && yarn test-inspect` + +### Common Issues + +- **Build fails**: Clear `dist/` and `app/build/` directories, then rebuild +- **Electron won't start**: Ensure `yarn build` completed successfully +- **Tests fail**: Check if MQTT broker (mosquitto) is running for integration tests +- **UI not updating**: In dev mode, ensure webpack-dev-server is running + +## Deployment and Packaging + +### Creating Releases + +```bash +# Prepare release (updates version, changelog) +yarn prepare-release + +# Package the application for distribution +yarn package + +# Package with Docker (for consistent builds) +yarn package-with-docker +``` + +### Release Workflow + +- **Beta releases**: Create PR to `beta` branch with "feat:" or "fix:" commits +- **Production releases**: Create PR to `release` branch with "feat:" or "fix:" commits +- Semantic release automatically handles versioning and changelog +- Builds are created for Windows, macOS, and Linux + +### Build Artifacts + +- Output directory: `build/` +- Supported formats: DMG (macOS), EXE/NSIS (Windows), AppImage/Snap (Linux), AppX (Windows Store) +- Code signing is configured via `res/` directory certificates and provisioning profiles + ## Important Notes - Always run `yarn build` before starting the application - The app uses Electron (see `package.json` for version) - MQTT communication is handled via [mqttjs](https://github.com/mqttjs/MQTT.js) - All code changes should pass linting (`yarn lint`) +- Node.js version requirement: >= 18 +- The project uses workspace-like structure with separate package.json files for app and backend