Restore working visualization demo

.ai/TASK.md

@@ -0,0 +1,43 @@
+Description
+
+  The visualization demo needs to be restored to working condition, specifically the Mapbox visualization showing vehicles traveling through zones with account debiting. The current implementation has tight coupling with Web3 services (IoTeX,  Arweave, Ethereum) which adds complexity to getting a demo running.
+
+  # Goal
+
+  Create a working demonstration primarily focused on the visualization aspect that can be used for teaching/demo purposes.
+
+  # Current Challenges
+
+  - Multiple blockchain dependencies (IoTeX, Ethereum, Arweave)
+  - Secure enclave dependencies for privacy calculations
+  - Complex API interactions for vehicle and zone data
+
+  # Requested Changes
+
+  Restore the dashboard visualization with minimal dependencies, focusing on:
+  1. Vehicle movement across map
+  2. Zone visualization
+  3. Zone entry/exit detection
+  4. Account debiting visualization
+
+  # Suggested Approach
+
+  One possible solution would be to:
+  - Replace blockchain interactions with mock services
+  - Use local JSON files instead of blockchain storage
+  - Simulate transactions and debiting locally
+  - Keep the Mapbox + D3 visualization components intact
+
+  # Acceptance Criteria
+
+  - Mapbox map displays correctly
+  - Zones are properly rendered
+  - Vehicles move along routes through zones
+  - Zone entry/exit events are detected and displayed
+  - Account debiting is simulated and shown in the UI
+  - Demo can be started with minimal setup
+
+  # Additional Notes
+
+  The primary value is in the visualization and demonstration of the concept, not the blockchain integration. Please choose
+  whatever implementation approach will get a working demo up and running with minimal complexity.

.dockerignore

@@ -0,0 +1,9 @@
+node_modules
+npm-debug.log
+yarn-debug.log
+yarn-error.log
+.git
+.gitignore
+.env
+.DS_Store
+build 

.python-version

@@ -0,0 +1 @@
+3.10.12

Dockerfile

@@ -0,0 +1,35 @@
+# Use Node 13.1.0 on Linux with Debian Buster
+FROM --platform=linux/amd64 node:13.1.0-buster
+
+# Install system dependencies for node-gyp and SGX
+RUN apt-get update && apt-get install -y \
+    python2.7 \
+    build-essential \
+    git \
+    libssl-dev \
+    libcurl4-openssl-dev \
+    protobuf-compiler \
+    && ln -sf /usr/bin/python2.7 /usr/bin/python
+
+# Create app directory
+WORKDIR /app
+
+# Copy package files
+COPY package.json yarn.lock ./
+
+# Install app dependencies and rebuild native modules
+RUN yarn install && \
+    cd node_modules/secureworker && npm rebuild && cd ../.. && \
+    cd node_modules/grpc && npm rebuild && cd ../..
+
+# Copy app source
+COPY . .
+
+# Build the app
+RUN yarn build
+
+# Expose ports
+EXPOSE 3000 3001
+
+# Start the app
+CMD ["yarn", "run", "dev"] 

README.md

@@ -1,27 +1,30 @@
-# Hyperaware
+# Hyperaware — Visualization Demo
 
-Ensure you are running Node version 13.1.0.
+> **This is an illustrative demo only.** The codebase is deprecated and exists solely to demonstrate the core concept of Hyperaware: real-time geospatial vehicle tracking with automated congestion zone detection and charging.
 
-To manage node versions, download nvm.
+## What This Shows
 
-    NVM Windows: https://github.com/coreybutler/nvm-windows
-    NVM MacOS/Linux: https://github.com/nvm-sh/nvm
+A single vehicle animates smoothly along a real London route (LineString), passing through congestion zones. When the vehicle enters a zone it activates (turns red), stays active while inside, and deactivates on exit. Toast notifications display on entry/exit events.
 
-Then run `nvm install 13.1.0` followed by `nvm use 13.1.0`
+This is the *concept* — the underlying code (IoTeX/Web3 contracts, socket architecture, React class components) is legacy and will be rebuilt on the [Astral SDK](https://github.com/AstralProtocol).
 
-Then `yarn` or `npm install` to install the packages
+## Running the Demo
 
-After installing node modules you may see some errors coming from the Secureworker module. This is because your system may not have
-Intel SGX configured, but they are fine to ignore because the app will run in 'Mock' mode.
+```
+npm install
+npm run dev-mock
+```
 
-In the project directory, you can then run:
+Open [http://localhost:3000](http://localhost:3000). Use **PLAY** to animate the vehicle through the route, **ADVANCE** to step through one segment at a time, and **PAUSE** to stop.
 
-`yarn run dev` or `npm run dev`
+## What You're Seeing
 
-To run the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-<hr>
+- **Map**: Mapbox GL rendering of London with congestion zone overlays
+- **Vehicle**: Blue dot animating along a LineString route using Turf.js interpolation
+- **Zone detection**: Client-side point-in-polygon check — dot turns red inside zones
+- **Notifications**: Ethereum-style toasts on zone entry/exit
+- **Panels**: Zone and vehicle statistics (placeholder data)
 
-The page will reload if you make edits.<br />
-You will also see any lint errors in the console.
+## Status
 
+This code is **not under active development**. It serves as a reference for the visualization pattern that will be re-implemented using Astral.

build/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

build/robots.txt

@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *