Live Examples: UI/UX improvements, detection fixes, and model progress updates

- Add warning below optimum zoom and dotted detections fix
- Enhance GeoAI worker init with provider checks
- Improve cursor styling, hover effects, and z-index to fix map tooltip overlap
- Fix zoom level thresholds, ship detection design, and MapProviderSelector width
- Add model loading progress to task pages
- Redact backend URL from errors
- Update README, examples, and live builds
- Unhide back button and add mask-generation to "coming soon"

Author: sabman

docs/pages/index.mdx

@@ -45,7 +45,7 @@ Create a new React app and install the required dependencies:
 ```bash
 npx create-react-app my-geoai-app --template typescript
 cd my-geoai-app
-npm install maplibre-gl geoai maplibre-gl-draw
+npm install maplibre-gl maplibre-gl-draw geoais
 ```
 
 #### Option B: Clone an Quickstart example

docs/pages/workers.mdx

@@ -17,7 +17,7 @@ Create a new React app and install the required dependencies:
 ```bash
 npx create-react-app my-geoai-app --template typescript
 cd my-geoai-app
-npm install maplibre-gl geoai maplibre-gl-draw
+npm install maplibre-gl maplibre-gl-draw geoais
 ```
 
 #### Option B: Clone an Quickstart example

examples/live-examples-nextjs/README.md

@@ -61,4 +61,4 @@ The easiest way to deploy your Next.js app is to use the [Vercel Platform](https
 
 Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
 
-<!-- trigger a build ping  -->
+<!-- trigger a build pong  -->

examples/live-examples-nextjs/docs/network-speed-estimation.md

@@ -0,0 +1,74 @@
+# Network Speed Estimation & Model Loading Progress
+
+This feature provides real-time network speed estimation and model loading progress tracking for AI model initialization across all tasks.
+
+## Features
+
+- **Network Speed Estimation**: Automatically measures network speed by downloading a small test file
+- **Model Loading Progress Simulation**: Shows estimated progress based on network speed and model size
+- **Real-time Updates**: Progress updates every 100ms during loading simulation
+- **Fallback Handling**: Uses fallback speed if network estimation fails
+
+## Implementation
+
+### NetworkSpeedEstimator Class
+
+Located in `src/utils/networkUtils.ts`, this utility class provides:
+
+- `estimateNetworkSpeed()`: Downloads a 1MB test file to measure network speed
+- `calculateModelDownloadInfo()`: Calculates estimated download time for a given model size
+- `simulateDownloadProgress()`: Simulates download progress over time
+
+### useModelDownloadProgress Hook
+
+A React hook that manages model loading progress state:
+
+```typescript
+const {
+  downloadInfo,
+  isEstimating,
+  progress,
+  startDownloadSimulation,
+  stopDownloadSimulation,
+} = useModelDownloadProgress(100); // 100MB model size
+```
+
+### ModelDownloadProgress Component
+
+A UI component that displays:
+- Model loading progress bar
+- Network speed information
+- Estimated time to load
+- Model size indicator
+
+## Usage
+
+The feature is automatically integrated into all task pages:
+
+1. When a user first loads a page or changes map providers
+2. The system estimates network speed by downloading a 1MB test file
+3. Based on the estimated speed and known model size, it calculates loading time
+4. A progress bar shows estimated model loading progress
+5. Progress simulation stops when the AI model is actually initialized
+
+## Configuration
+
+- **Test File Size**: 1MB (configurable in `TEST_FILE_SIZE_BYTES`)
+- **Test File URL**: https://httpbin.org/bytes/1048576
+- **Fallback Speed**: 10 Mbps (if estimation fails)
+- **Update Interval**: 100ms for progress updates
+- **Model Sizes**: Varies by task (9.22MB to 104MB)
+
+## Error Handling
+
+- If network speed estimation fails, falls back to 10 Mbps
+- Gracefully handles network errors and timeouts
+- Minimum speed of 0.1 Mbps to prevent division by zero
+- Automatic cleanup of intervals on component unmount
+
+## Future Enhancements
+
+- More accurate progress tracking with actual model loading events
+- Caching of network speed estimates
+- Support for different network conditions (WiFi vs mobile)
+- Real-time model loading status from the AI pipeline

examples/live-examples-nextjs/package.json

@@ -7,6 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "test": "vitest",
     "build:geoai": "cd ../../ && pnpm run build && cd examples/live-examples-nextjs && pnpm install",
     "build_dev": "pnpm build:geoai && pnpm dev"
   },
@@ -36,8 +37,10 @@
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "15.3.2",
+    "jsdom": "^26.1.0",
     "tailwindcss": "^4",
     "typescript": "^5",
+    "vitest": "^3.2.4",
     "workerize-loader": "^2.0.2"
   }
 }