Michael Mainguy
1f12b143ef
🚀 Features implemented: - IndexedDB local database for trace storage and management - Drag & drop trace file upload with validation - HTTP Request viewer with advanced filtering and analysis - CDN provider detection (Cloudflare, Akamai, CloudFront, etc.) - Queue time analysis with bottleneck detection - Visual highlighting for file sizes and request durations - Priority-based request analysis - Phase event viewer with detailed trace exploration - Filmstrip screenshot integration (with debugging) - 3D Babylon.js viewer component 📊 Analysis capabilities: - HTTP/1.1 vs HTTP/2 performance comparison - CDN edge vs origin detection - Connection limit bottleneck identification - Priority queue analysis - Visual correlation with network requests - Performance bottleneck identification 🛠️ Technical stack: - React 19.1.0 + TypeScript 5.8.3 - Vite build system - IndexedDB for local storage - Babylon.js 8+ for 3D visualization - Chrome DevTools trace format support 🎨 User experience: - Clean, professional interface design - Color-coded performance indicators - Expandable detailed views - Search and filtering capabilities - Responsive grid layouts - Intuitive navigation 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
68 lines
3.3 KiB
Markdown
68 lines
3.3 KiB
Markdown
# CLAUDE.md
|
|
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
|
|
## Project Overview
|
|
|
|
This is a React + TypeScript + Vite project called "perfviz" - a modern web application built with the latest versions of React (19.1.0), TypeScript (5.8.3), and Vite (7.0.4).
|
|
|
|
## Development Commands
|
|
|
|
- **Start development server**: `npm run dev` - Runs Vite dev server with HMR on http://localhost:5173/
|
|
- **Build for production**: `npm run build` - TypeScript compilation followed by Vite build
|
|
- **Lint code**: `npm run lint` - Run ESLint on the entire codebase
|
|
- **Preview production build**: `npm run preview` - Preview the production build locally
|
|
|
|
## Architecture
|
|
|
|
### Build System
|
|
- **Vite** as the build tool with React plugin for Fast Refresh
|
|
- **ES modules** configuration (`"type": "module"` in package.json)
|
|
- **Bundler module resolution** with TypeScript extensions allowed in imports
|
|
|
|
### TypeScript Configuration
|
|
- **Dual TypeScript configs**:
|
|
- `tsconfig.app.json` for application code (`src/` directory)
|
|
- `tsconfig.node.json` for build tooling (Vite config)
|
|
- **Strict TypeScript** with unused locals/parameters checking enabled
|
|
- **React JSX transform** (`react-jsx`) for React 19+ compatibility
|
|
|
|
### Code Quality
|
|
- **ESLint** with TypeScript support and React-specific rules:
|
|
- React Hooks rules for proper hooks usage
|
|
- React Refresh rules for HMR compatibility
|
|
- TypeScript recommended rules
|
|
- **Globals configured** for browser environment
|
|
|
|
### Application Structure
|
|
- **Entry point**: `src/main.tsx` renders the App component in React 19 StrictMode
|
|
- **Root component**: `src/App.tsx` contains the main application logic
|
|
- **3D Viewer**: `src/BabylonViewer.tsx` React component wrapping Babylon.js 3D scene
|
|
- **Styling**: CSS modules with `src/index.css` and `src/App.css`
|
|
- **Assets**: Static assets in `public/` and component assets in `src/assets/`
|
|
|
|
## Key Dependencies
|
|
|
|
- **React 19.1.0** with modern features and concurrent rendering
|
|
- **TypeScript 5.8.3** with latest language features
|
|
- **Vite 7.0.4** for fast development and optimized builds
|
|
- **ESLint 9.30.1** with typescript-eslint for code quality
|
|
- **BabylonJS 8.21.1** for 3D graphics and visualization
|
|
|
|
## Development Notes
|
|
|
|
- The project uses **React 19's new JSX transform** and concurrent features
|
|
- **HMR (Hot Module Replacement)** is enabled through Vite's React plugin
|
|
- **Strict mode** is enabled in development for better debugging
|
|
- **Browser targets** are ES2022+ for modern JavaScript features
|
|
|
|
## Babylon.js Integration
|
|
|
|
- **Version**: Using Babylon.js 8.21.1 (modern version 8+)
|
|
- **Camera Management**: Use `scene.activeCamera` instead of deprecated `camera.attachToCanvas()`
|
|
- **ArcRotateCamera Controls**: Use `camera.attachControl(canvas, true)` for mouse interaction
|
|
- **Scene Setup**: Cameras, lights, and meshes are added directly to the scene object
|
|
- **Engine Integration**: Engine handles canvas interaction and render loop
|
|
- **React Integration**: Proper cleanup with engine disposal in useEffect return function
|
|
- **Version-Specific Documentation**: ALWAYS check Babylon.js documentation for version 8.21.1 specifically to avoid deprecated methods and ensure current API usage
|
|
- **API Verification**: Before suggesting any Babylon.js code, verify method signatures and availability in the current version |