debug-connectionlisted

# WebSocket Connection Debugging ## Architecture ``` ┌─────────────┐ WebSocket ┌─────────────────┐ postMessage ┌─────────────────┐ │ CLI serve │ ◄───────────────► │ Plugin UI │ ◄───────────────► │ Plugin Main │ │ (Bun) │ ws://...:3456 │ (ui.ts) │ │ (code.ts) │ └─────────────┘ └─────────────────┘ └─────────────────┘ │ │ │ │ File watcher │ Browser APIs │ Figma API │ YAML parsing │ WebSocket client │ Canvas rendering └───────────────────────────────────┴─────────────────────────────────────┘ ``` ## Common Issues & Solutions ### 1. Connection Refused **Symptoms**: Plugin shows "Connecting..." indefinitely **Check**: ```bash # Is CLI serve running? ps aux | grep "figram serve" # Check port availability (default: 3456) lsof -i :3456 ``` **Solution**: Start CLI with `bun run packages/cli/src/index.ts serve diagram.yaml` ### 2. Connection Drops **Symptoms**: Works initially, then stops syncing **Check**: - Plugin UI console for WebSocket close events - CLI terminal for error messages **Solution**: Check for YAML parse errors blocking updates ### 3. Patches Not Applied **Symptoms**: Connected but canvas doesn't update **Debug steps**: 1. Check CLI output for patch generation 2. Check Plugin UI co