diff --git a/LOCAL_TESTING.md b/LOCAL_TESTING.md deleted file mode 100644 index 146e504..0000000 --- a/LOCAL_TESTING.md +++ /dev/null @@ -1,173 +0,0 @@ -# Local Testing Checklist - -## Quick Start - -```bash -npm run dev -``` - -Visit: http://localhost:4321 - ---- - -## ✅ Feature Testing Checklist - -### 1. Homepage & Navigation -- [ ] Homepage loads at http://localhost:4321 -- [ ] No console errors in DevTools -- [ ] Privacy page accessible at http://localhost:4321/privacy - -### 2. Theme System -- [ ] Theme toggle button visible in header -- [ ] Click toggle switches between light/dark -- [ ] Theme persists on page refresh -- [ ] No flash of wrong theme on load - -### 3. Command Palette (⌘K) -- [ ] Press ⌘K (Mac) or Ctrl+K (Windows/Linux) -- [ ] Palette opens with input auto-focused -- [ ] Type to search immediately (no click needed) -- [ ] Empty search shows all tools -- [ ] Search "hash" → shows Hash File tool -- [ ] Search "sha" → shows Hash File tool -- [ ] Search "256" → shows Hash File tool -- [ ] Search "generate" → shows Hash File tool -- [ ] Click tool → navigates to tool page -- [ ] Press Escape → closes palette -- [ ] Click backdrop → closes palette - -### 4. Hash Demo Tool -Visit: http://localhost:4321/tools/hash-demo - -- [ ] Page loads without errors -- [ ] Dropzone visible with instructions -- [ ] Click dropzone → file picker opens -- [ ] Select a file → worker starts processing -- [ ] Progress bar shows during processing -- [ ] Hash result displays (64-character hex string) -- [ ] Download button appears after completion -- [ ] Click download → saves .sha256 file -- [ ] Drag & drop file → also works -- [ ] Theme toggle works on tool page -- [ ] ⌘K works on tool page - -### 5. Service Worker (PWA) -Check DevTools → Application tab: - -- [ ] Service worker registered -- [ ] Manifest shows "GoodWebTools" -- [ ] No service worker errors - -### 6. Performance Verification -Check DevTools → Network tab: - -- [ ] Initial page load < 100 KB transferred -- [ ] No external requests (all same-origin) -- [ ] Resources load from localhost only -- [ ] CSS and JS bundles are gzipped - -### 7. Build Verification - -```bash -npm run build -npm run preview -``` - -- [ ] Build completes without errors -- [ ] Preview server runs at http://localhost:4321 -- [ ] All features work in production build -- [ ] Service worker generates (dist/sw.js exists) - ---- - -## 🐛 Common Issues & Fixes - -### Dev server won't start -```bash -# Kill existing process -pkill -f "astro dev" -# Restart -npm run dev -``` - -### Port 4321 already in use -```bash -# Kill process on port -lsof -ti:4321 | xargs kill -9 -# Or use different port -npm run dev -- --port 3000 -``` - -### Build errors -```bash -# Clean and rebuild -rm -rf dist/ .astro/ -npm run build -``` - -### Theme not persisting -- Check browser localStorage (DevTools → Application → Local Storage) -- Should see `theme: "dark"` or `theme: "light"` - -### Command palette not opening -- Check browser console for errors -- Verify keyboard shortcut (⌘K on Mac, Ctrl+K on Windows/Linux) -- Try clicking outside and retry - ---- - -## 🧪 Manual Testing Script - -Run through this quick test: - -1. **Start fresh:** - ```bash - npm run dev - ``` - -2. **Homepage:** - - Visit http://localhost:4321 - - Toggle theme (light → dark → light) - - Refresh page (theme should persist) - -3. **Command Palette:** - - Press ⌘K - - Type "hash" (should show Hash File) - - Press Escape to close - -4. **Hash Tool:** - - Press ⌘K, select "Hash File" - - Create test file: `echo "test" > test.txt` - - Drag test.txt into dropzone - - Wait for hash result - - Click download button - - Verify test.txt.sha256 downloaded - -5. **DevTools Check:** - - Open Network tab - - Reload page - - Verify: All requests to localhost - - Verify: No external domains - -**If all pass:** ✅ Phase 0 working locally! - ---- - -## 📝 Testing Notes - -- **Browser compatibility:** Test in Chrome/Edge (modern browsers only) -- **File size limits:** Hash demo tested with files up to 100MB -- **Worker support:** Requires modern browser with Web Worker support -- **localStorage:** Required for theme persistence - ---- - -## Next: Phase 1 Tools - -Once local testing passes, you're ready to add Phase 1 tools: -1. JSON Formatter -2. Base64 Encoder -3. URL Encoder -4. And more... - -Each new tool follows the same pattern as Hash Demo. diff --git a/PERFORMANCE.md b/PERFORMANCE.md deleted file mode 100644 index 199d0d8..0000000 --- a/PERFORMANCE.md +++ /dev/null @@ -1,140 +0,0 @@ -# Performance Verification Report - -**Date:** 2026-07-12 -**Phase:** Phase 0 Foundation -**Status:** ✅ PASSING - -## Performance Budget - -| Metric | Budget | Actual | Status | -|--------|--------|--------|--------| -| Initial Shell (gzipped) | <120 KB | ~60 KB | ✅ 50% under budget | -| First Contentful Paint | <1.5s | ~0.8s (estimated) | ✅ Projected | -| Time to Interactive | <3s | ~1.2s (estimated) | ✅ Projected | - -## Bundle Analysis - -### Core Shell (loaded on every page) -- **ShellIsland.js**: 46.65 KB → **16.45 KB gzipped** -- **React Vendor**: 133.95 KB → **43.14 KB gzipped** -- **Combined Initial**: ~**60 KB gzipped** ✅ - -### Additional Components (lazy loaded) -- **HashDemo Island**: 8.45 KB → 3.83 KB gzipped -- **Comlink Worker**: 7.22 KB → 2.91 KB gzipped - -### Service Worker & PWA -- **sw.js**: 2.0 KB -- **workbox**: Lazy loaded runtime -- **manifest.webmanifest**: 0.39 KB - -## Optimization Strategies Applied - -1. **Code Splitting** - - React vendor bundle separated - - Tool islands load on-demand - - Workers lazy loaded per tool - -2. **Asset Optimization** - - Vite automatic minification - - Brotli compression (Cloudflare) - - Tree-shaking enabled - -3. **Caching Strategy** - - Service worker precaches shell - - Runtime caching for assets - - 30-day cache TTL for large assets - -4. **Loading Performance** - - View Transitions API (instant navigation) - - Persistent shell (no re-mount) - - Progressive enhancement - -## Modern Browser Optimizations - -- **ES2022 target** - Native features, less polyfills -- **Native Web APIs** - File System Access, Web Workers, OPFS -- **No legacy support** - Smaller bundles, better performance - -## Lighthouse Score Projections - -Based on bundle sizes and architecture: - -- **Performance**: 95-100 (no external requests, optimized bundles) -- **Accessibility**: 100 (semantic HTML, ARIA labels) -- **Best Practices**: 100 (HTTPS, no console errors, CSP headers) -- **SEO**: 90-95 (meta tags, semantic structure) -- **PWA**: 100 (manifest, service worker, installable) - -## Network Performance - -### First Load (no cache) -- HTML: ~2 KB -- CSS: ~5 KB -- JS (initial): ~60 KB gzipped -- **Total: ~67 KB** over HTTP/3 with Brotli - -### Subsequent Loads (cached) -- HTML: ~2 KB (dynamic) -- Everything else: From cache -- **Total: ~2 KB** - -### Tool Load (e.g., Hash Demo) -- Tool island: ~4 KB gzipped -- Worker: ~3 KB gzipped -- **Total: ~7 KB** additional - -## Privacy-First Performance - -**Zero External Requests:** -- ✅ No CDN dependencies -- ✅ No analytics scripts -- ✅ No tracking pixels -- ✅ No font downloads (system fonts) - -This eliminates: -- DNS lookup latency -- TLS handshake overhead -- Third-party script execution time -- Privacy policy complexity - -## Verification Steps - -1. **Build Verification** - ```bash - npm run build - # Check: dist/_astro/*.js gzip sizes - ``` - -2. **Runtime Verification** - ```bash - npm run preview - # Open DevTools Network tab - # Verify: No external requests - # Check: Total transfer size < 100 KB - ``` - -3. **Lighthouse Audit** - ```bash - npm run build - npx serve dist - # Run Lighthouse in Chrome DevTools - # Verify: Performance > 90 - ``` - -## Future Optimizations (Phase 1+) - -- **Image optimization** - When images added -- **Font subsetting** - If custom fonts needed -- **Critical CSS** - Inline above-fold styles -- **Preload hints** - For known tool transitions - -## Conclusion - -Phase 0 Foundation meets all performance budgets with significant margin. The architecture supports scaling to dozens of tools while maintaining fast load times through: -- Aggressive code splitting -- Lazy loading -- Efficient caching -- Modern web platform features - -**Ready for Phase 1 tool implementation** ✅ diff --git a/docs/recording-implementation-status.md b/docs/recording-implementation-status.md deleted file mode 100644 index 2a04144..0000000 --- a/docs/recording-implementation-status.md +++ /dev/null @@ -1,344 +0,0 @@ -# Screen Recording Implementation Status - -## Overview -Native screen recording for GoodWebTools desktop app (Tauri). - -**Goal:** Capture screen + audio → playable video file - ---- - -## Phase 1: Video Frame Capture ✅ COMPLETE - -**Status:** Fully working - -**Features:** -- ✅ Continuous frame capture at configurable FPS (default 30fps) -- ✅ Multi-display support (select which screen to record) -- ✅ Background thread recording -- ✅ Memory frame storage -- ✅ Clean start/stop handling - -**Backend:** -- `src-tauri/src/recording.rs` - Frame capture logic -- Uses existing `capture_screen_internal()` function -- Stores PNG frames in memory - -**Frontend:** -- `src/services/capture/tauri.ts` - Tauri command integration -- `src/islands/media/ScreenRecorder.tsx` - UI with display selector - -**Testing:** -```bash -# Start recording -# Stop after a few seconds -# Console shows: "[Recording] Captured 6 frames total" -``` - ---- - -## Phase 2: Video Encoding ✅ COMPLETE - -**Status:** Working (requires FFmpeg) - -**Features:** -- ✅ Encode frames to WebM video -- ✅ VP9 codec (libvpx-vp9) -- ✅ Configurable FPS -- ✅ 2Mbps bitrate -- ✅ Multi-threaded encoding -- ✅ Temp file cleanup - -**Implementation:** -- Writes frames to temp directory -- Invokes system FFmpeg -- Returns encoded video bytes -- Cleans up temp files - -**Requirements:** -- FFmpeg must be installed -- macOS: `brew install ffmpeg` -- Ubuntu: `sudo apt install ffmpeg` -- Windows: Download from ffmpeg.org - -**Fallback:** -- If FFmpeg not found: helpful error with install instructions -- If encoding fails: clear error message -- Frames still captured successfully - ---- - -## Phase 3: Audio Capture 📝 FOUNDATION COMPLETE - -**Status:** Structure ready, capture not yet implemented - -**Features Planned:** -- 📝 Microphone capture (include_audio option) -- 📝 System audio capture (system_audio option) -- 📝 Audio + video synchronization -- 📝 Muxing audio with video - -**Current Implementation:** -- ✅ Audio options wired through entire pipeline -- ✅ `src-tauri/src/audio.rs` module created -- ✅ Options passed from frontend → Rust -- ✅ Logging for audio requests -- ⏳ Actual capture not yet implemented - -**Microphone Capture (Next Step):** -- Use FFmpeg AVFoundation input -- Capture to separate audio file -- Mux with video at encoding step - -**System Audio (Complex):** -- **Option A:** BlackHole virtual audio device - - Install: `brew install blackhole-2ch` - - Configure Audio MIDI Setup - - Create Multi-Output Device -- **Option B:** ScreenCaptureKit (macOS 12.3+) - - Native system audio capture - - Requires Swift/Objective-C bindings - - More complex but better UX - ---- - -## Current User Experience - -### Working Flow: -1. Open Screen Recording tool -2. Select display from dropdown ✅ -3. Optionally check "Also record microphone" (no effect yet) -4. Click Start Recording ✅ -5. Record for a few seconds ✅ -6. Click Stop ✅ - -### What Happens: -- **With FFmpeg installed:** - - ✅ Frames captured - - ✅ Video encoded - - ✅ Playable WebM video returned - - ✅ Can download and play - -- **Without FFmpeg:** - - ✅ Frames captured - - ❌ Error: "FFmpeg not found. Captured X frames at Yfps. Install FFmpeg..." - - Clear installation instructions shown - -### What Doesn't Work Yet: -- ❌ Microphone capture (checkbox does nothing) -- ❌ System audio capture -- ❌ Audio + video synchronization - ---- - -## Testing - -### Phase 1 Test: -```bash -# Start recording, wait 5 seconds, stop -# Check logs: -[Recording] Starting recording: rec_XXX -[Recording] FPS: 30, Display: Some(1) -[Recording] Recording thread started -[Recording] Captured 150 frames -[Recording] Recording thread ended. Total frames: 150 -``` - -### Phase 2 Test (with FFmpeg): -```bash -# Same as Phase 1, but: -[Recording] Phase 2+3: Encoding 150 frames to video at 30fps -[Recording] Writing frames to: /tmp/gwt_recording_XXX -[Recording] Frames written, encoding with FFmpeg... -[Recording] FFmpeg encoding successful -[Recording] Video encoded: 245678 bytes -``` - -### Phase 2 Test (without FFmpeg): -```bash -[Recording] FFmpeg not available -# Error message with install instructions shown to user -``` - ---- - -## Architecture - -``` -User clicks Start Recording - ↓ -Frontend (ScreenRecorder.tsx) - ↓ -TauriCaptureService.startRecording({displayId, fps, includeAudio}) - ↓ -Tauri IPC (invoke 'start_recording') - ↓ -Rust commands.rs → recording.rs - ↓ -Spawn background thread - ↓ -Loop: capture_screen_internal() every 1/fps seconds - ↓ -Store frames in memory - ↓ -User clicks Stop Recording - ↓ -Set stop flag → thread ends - ↓ -encode_frames_to_video() - ↓ -Write frames to /tmp - ↓ -FFmpeg: frames → video.webm - ↓ -Return video bytes - ↓ -Frontend creates Blob → video player -``` - ---- - -## File Structure - -``` -src-tauri/src/ - ├── recording.rs # Phase 1 & 2: Frame capture + encoding - ├── audio.rs # Phase 3: Audio capture (foundation) - ├── commands.rs # Tauri IPC command handlers - └── main.rs # Module declarations - -src/services/capture/ - ├── tauri.ts # TauriCaptureService implementation - └── types.ts # TypeScript interfaces - -src/islands/media/ - └── ScreenRecorder.tsx # UI component -``` - ---- - -## Next Steps - -### Immediate (Phase 3 Completion): - -1. **Implement Microphone Capture** - - Use FFmpeg AVFoundation to capture microphone - - Run in parallel with video capture - - Save audio to temp file - -2. **Mux Audio + Video** - - After encoding video, mux with audio - - FFmpeg command: `ffmpeg -i video.webm -i audio.wav -c copy output.webm` - -3. **Audio Synchronization** - - Start audio and video at same time - - Use timestamps to align - - Handle drift - -### Advanced (Phase 3+): - -4. **System Audio Capture** - - Implement BlackHole approach (easier) - - Or ScreenCaptureKit approach (better UX) - -5. **Audio Format Options** - - Codec selection (Opus, AAC) - - Bitrate configuration - - Sample rate options - -### Polish: - -6. **Error Handling** - - Better error messages - - Permission checks - - Graceful degradation - -7. **Performance** - - Frame rate adaptation - - Memory management - - Compression settings - -8. **Testing** - - Unit tests for encoding - - Integration tests - - Edge case handling - ---- - -## Dependencies - -**Rust:** -- `chrono` - Timestamps -- `lazy_static` - Global state -- `image` - PNG encoding (already used) -- `core-graphics` - Screen capture (already used) - -**System:** -- `ffmpeg` - Video encoding (required for Phase 2) -- `blackhole-2ch` - System audio (optional for Phase 3) - -**Future:** -- `cpal` - Pure Rust audio (alternative to FFmpeg) -- `webm` crate - Direct WebM encoding (alternative to FFmpeg) - ---- - -## Known Issues - -1. **FFmpeg Dependency** - - Not bundled with app - - User must install manually - - Could bundle in future - -2. **Target/ in Git** - - Build artifacts were committed - - Fixed: Added to .gitignore - - Need to clean up remote - -3. **Push Failures** - - Pack size exceeds 2GB - - Due to target/ files - - Fixed locally, need force push - -4. **Audio Not Implemented** - - Checkbox exists but does nothing - - Need Phase 3 completion - ---- - -## Performance Notes - -**Frame Capture:** -- PNG encoding: ~10-20ms per frame at 1080p -- 30fps = ~33ms per frame (sustainable) -- Memory usage: ~5MB per frame × frame count - -**Video Encoding:** -- FFmpeg VP9: ~2-5 seconds for 150 frames -- Depends on CPU, resolution, bitrate -- Multi-threaded (4 threads) - -**Total Recording:** -- 5 seconds recording at 30fps = 150 frames -- Capture: 5 seconds -- Encoding: 2-5 seconds -- Total: 7-10 seconds from start to playable video - ---- - -## Conclusion - -**Phase 1 ✅** - Video capture working perfectly -**Phase 2 ✅** - Video encoding working (with FFmpeg) -**Phase 3 📝** - Audio foundation ready, capture next - -**Estimated completion:** -- Phase 3 microphone: 2-3 hours -- Phase 3 system audio: 4-6 hours -- Polish + testing: 2-3 hours - -**Current blocker:** FFmpeg must be installed by user - -**Recommended next:** -1. Complete microphone capture -2. Test end-to-end flow -3. Add system audio as advanced feature diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json index 69b98dd..c0c79ad 100644 --- a/src-tauri/tauri.conf.json +++ b/src-tauri/tauri.conf.json @@ -77,6 +77,7 @@ }, "bundle": { "active": true, + "createUpdaterArtifacts": true, "targets": ["nsis", "app", "dmg", "deb"], "resources": [], "category": "Utility",