diff --git a/lib/mound_hunters/mound_parser.ex b/lib/mound_hunters/mound_parser.ex
index c236c3d..f905c3c 100644
--- a/lib/mound_hunters/mound_parser.ex
+++ b/lib/mound_hunters/mound_parser.ex
@@ -266,4 +266,70 @@ defmodule MoundHunters.MoundParser do
       end
     end
   end
+
+  @doc """
+  Converts Web Mercator coordinates (EPSG:3857) to WGS84 lat/lng (EPSG:4326).
+
+  Web Mercator uses meters from origin, this converts back to decimal degrees.
+
+  ## Examples
+
+      iex> MoundHunters.MoundParser.web_mercator_to_latlon(0, 0)
+      {0.0, 0.0}
+      
+      iex> MoundHunters.MoundParser.web_mercator_to_latlon(1113194.91, 5009377.09)
+      {10.0, 40.0}
+  """
+  @spec web_mercator_to_latlon(float(), float()) :: {lat :: float(), lon :: float()}
+  def web_mercator_to_latlon(x, y) do
+    # Web Mercator origin offset (meters)
+    origin_shift = :math.pi() * 6_378_137.0
+
+    # Convert x to longitude
+    lon = x / origin_shift * 180.0
+
+    # Convert y to latitude
+    lat = y / origin_shift * 180.0
+
+    lat =
+      180.0 / :math.pi() *
+        (2.0 * :math.atan(:math.exp(lat * :math.pi() / 180.0)) - :math.pi() / 2.0)
+
+    {lat, lon}
+  end
+
+  @doc """
+  Converts a bounding box from Web Mercator to lat/lng.
+
+  Returns a map with min/max lat/lng values.
+
+  ## Examples
+
+      iex> MoundHunters.MoundParser.bounds_web_mercator_to_latlon(
+      ...>   %{min_x: -9_000_000, max_x: -8_900_000, min_y: 4_900_000, max_y: 5_000_000}
+      ...> )
+      %{min_lat: ..., max_lat: ..., min_lng: ..., max_lng: ...}
+  """
+  @spec bounds_web_mercator_to_latlon(%{
+          min_x: float(),
+          max_x: float(),
+          min_y: float(),
+          max_y: float()
+        }) :: %{
+          min_lat: float(),
+          max_lat: float(),
+          min_lng: float(),
+          max_lng: float()
+        }
+  def bounds_web_mercator_to_latlon(%{min_x: min_x, max_x: max_x, min_y: min_y, max_y: max_y}) do
+    {min_lat, min_lng} = web_mercator_to_latlon(min_x, min_y)
+    {max_lat, max_lng} = web_mercator_to_latlon(max_x, max_y)
+
+    %{
+      min_lat: min_lat,
+      max_lat: max_lat,
+      min_lng: min_lng,
+      max_lng: max_lng
+    }
+  end
 end
diff --git a/lib/mound_hunters/repo.ex b/lib/mound_hunters/repo.ex
index a9930e3..eba382f 100644
--- a/lib/mound_hunters/repo.ex
+++ b/lib/mound_hunters/repo.ex
@@ -185,6 +185,8 @@ defmodule MoundHunters.Repo do
   def update_tile_availability do
     tile_dir = Application.get_env(:mound_hunters, :tile_output_dir)
     mound_dir = Path.join(tile_dir, "MOUND")
+    png_dir = Path.join(tile_dir, "PNG")
+    jpg_dir = Path.join(tile_dir, "JPG")
 
     Logger.info("Scanning tile availability in: #{mound_dir}")
 
@@ -199,8 +201,8 @@ defmodule MoundHunters.Repo do
             tile = tile_to_map(tile_record)
             tile_id = tile.id
 
-            jpg_path = Path.join(mound_dir, "#{tile_id}.jpg")
-            png_path = Path.join(mound_dir, "#{tile_id}.png")
+            jpg_path = Path.join(jpg_dir, "#{tile_id}.jpg")
+            png_path = Path.join(png_dir, "#{tile_id}.png")
 
             jpg_available = File.exists?(jpg_path)
             png_available = File.exists?(png_path)
@@ -263,10 +265,13 @@ defmodule MoundHunters.Repo do
         case MoundHunters.MoundParser.parse_header(file_path) do
           {:ok, header} ->
             # Convert Web Mercator coordinates to lat/lng
-            min_lng = header.min_x
-            max_lng = header.max_x
-            min_lat = header.min_y
-            max_lat = header.max_y
+            bounds =
+              MoundHunters.MoundParser.bounds_web_mercator_to_latlon(%{
+                min_x: header.min_x,
+                max_x: header.max_x,
+                min_y: header.min_y,
+                max_y: header.max_y
+              })
 
             # Check for jpg and png availability
             tile_dir = Application.get_env(:mound_hunters, :tile_output_dir)
@@ -276,10 +281,10 @@ defmodule MoundHunters.Repo do
 
             attrs = %{
               id: tile_id,
-              min_lat: min_lat,
-              max_lat: max_lat,
-              min_lng: min_lng,
-              max_lng: max_lng,
+              min_lat: bounds.min_lat,
+              max_lat: bounds.max_lat,
+              min_lng: bounds.min_lng,
+              max_lng: bounds.max_lng,
               status: :ready,
               error_message: nil,
               jpg_available: jpg_available,
diff --git a/lib/mound_hunters/tile_processor.ex b/lib/mound_hunters/tile_processor.ex
index 76ceaee..5421026 100644
--- a/lib/mound_hunters/tile_processor.ex
+++ b/lib/mound_hunters/tile_processor.ex
@@ -1,7 +1,7 @@
 defmodule MoundHunters.TileProcessor do
   @moduledoc """
   GenServer that processes tile requests: lookup tile IDs and download/convert tiles.
-  
+
   Processing pipeline:
   1. :looking_up - Query ArcGIS for tile metadata
   2. :downloading - Download ZIP from OGRIP
@@ -76,10 +76,12 @@ defmodule MoundHunters.TileProcessor do
     # Ensure temp directory exists
     temp_dir = Application.get_env(:mound_hunters, :tile_temp_dir)
     File.mkdir_p!(temp_dir)
+    root_output_dir = Application.get_env(:mound_hunters, :tile_output_dir)
+    mound_dir = Path.join(root_output_dir, "MOUND")
 
     state = %{
       las2mound_script: Application.get_env(:mound_hunters, :las2mound_script_path),
-      tile_output_dir: Application.get_env(:mound_hunters, :tile_output_dir),
+      tile_output_dir: mound_dir,
       tile_temp_dir: temp_dir,
       processing_queue: :queue.new(),
       current_job: nil
@@ -113,35 +115,38 @@ defmodule MoundHunters.TileProcessor do
   def handle_info({:lookup_tile, lookup_id, lat, lng}, state) do
     Logger.info("Looking up tile for coordinates (#{lat}, #{lng})")
 
-    case OhioLidar.query_tile_info(lng, lat) do
-      {:ok, tile_info} ->
-        tile_name = tile_info.tile_name
-        Logger.info("Found tile: #{tile_name} in #{tile_info.county} county")
+    # First, check Mnesia to see if we already have a tile at these coordinates
+    case MoundHunters.Repo.get_tile_at_coords(lat, lng) do
+      {:ok, tile} ->
+        # Found in Mnesia - use cached tile_id
+        tile_name = tile.id
+        Logger.info("Found tile #{tile_name} in Mnesia (cached), skipping ArcGIS query")
 
         # Update lookup table with success
         :ets.insert(:tile_lookups, {lookup_id, {:ok, tile_name}})
 
-        # Check if tile already exists
+        # Check if tile file still exists
         output_file = Path.join(state.tile_output_dir, "#{tile_name}.mound")
 
         if File.exists?(output_file) do
           Logger.info("Tile #{tile_name} already processed, marking as done")
-          :ets.insert(:tile_processing, {tile_name, :done, %{tile_info: tile_info}})
-        else
-          # Queue for processing
-          state = queue_tile_for_processing(state, tile_name, tile_info)
+          :ets.insert(:tile_processing, {tile_name, :done, %{tile_info: tile}})
           {:noreply, state}
+        else
+          # Tile in DB but file missing - this shouldn't happen, but handle it
+          Logger.warning("Tile #{tile_name} in Mnesia but file missing, re-querying ArcGIS")
+          query_arcgis_and_process(lookup_id, lat, lng, state)
         end
 
-      {:error, :no_tile_found} ->
-        Logger.warning("No tile found for coordinates (#{lat}, #{lng})")
-        :ets.insert(:tile_lookups, {lookup_id, {:error, "No tile found at coordinates"}})
-        {:noreply, state}
+      {:error, :not_found} ->
+        # Not in Mnesia - query ArcGIS
+        Logger.debug("Tile not in Mnesia, querying ArcGIS")
+        query_arcgis_and_process(lookup_id, lat, lng, state)
 
       {:error, reason} ->
-        Logger.error("Failed to lookup tile: #{inspect(reason)}")
-        :ets.insert(:tile_lookups, {lookup_id, {:error, "Lookup failed: #{inspect(reason)}"}})
-        {:noreply, state}
+        Logger.error("Failed to query Mnesia: #{inspect(reason)}")
+        # Fall back to ArcGIS query
+        query_arcgis_and_process(lookup_id, lat, lng, state)
     end
   end
 
@@ -162,11 +167,15 @@ defmodule MoundHunters.TileProcessor do
 
       {:error, reason} ->
         Logger.error("Failed to download tile #{tile_name}: #{inspect(reason)}")
-        :ets.insert(:tile_processing, {tile_name, {:error, "Download failed: #{inspect(reason)}"}, %{}})
-        
+
+        :ets.insert(
+          :tile_processing,
+          {tile_name, {:error, "Download failed: #{inspect(reason)}"}, %{}}
+        )
+
         # Clean up
         File.rm(temp_zip)
-        
+
         # Process next in queue
         state = process_next_in_queue(state)
         {:noreply, state}
@@ -192,23 +201,27 @@ defmodule MoundHunters.TileProcessor do
           {:error, reason} ->
             Logger.error("Failed to find LAS file in #{extract_dir}: #{reason}")
             :ets.insert(:tile_processing, {tile_name, {:error, "No LAS file found"}, %{}})
-            
+
             # Clean up
             File.rm_rf!(extract_dir)
             File.rm(zip_path)
-            
+
             state = process_next_in_queue(state)
             {:noreply, state}
         end
 
       {:error, reason} ->
         Logger.error("Failed to extract #{zip_path}: #{inspect(reason)}")
-        :ets.insert(:tile_processing, {tile_name, {:error, "Extraction failed: #{inspect(reason)}"}, %{}})
-        
+
+        :ets.insert(
+          :tile_processing,
+          {tile_name, {:error, "Extraction failed: #{inspect(reason)}"}, %{}}
+        )
+
         # Clean up
         File.rm_rf!(extract_dir)
         File.rm(zip_path)
-        
+
         state = process_next_in_queue(state)
         {:noreply, state}
     end
@@ -225,28 +238,69 @@ defmodule MoundHunters.TileProcessor do
     case run_las2mound(state.las2mound_script, las_file, output_file) do
       :ok ->
         Logger.info("Successfully converted #{tile_name}")
-        :ets.insert(:tile_processing, {tile_name, :done, %{tile_info: tile_info}})
 
-        # Update Mnesia
-        MoundHunters.Repo.upsert_tile(%{
-          id: tile_name,
-          status: :ready,
-          min_lat: nil,  # TODO: Extract from tile_info or LAS bounds
-          max_lat: nil,
-          min_lng: nil,
-          max_lng: nil
-        })
+        # Parse header to extract bounds
+        case MoundHunters.MoundParser.parse_header(output_file) do
+          {:ok, header} ->
+            # Convert Web Mercator coordinates to lat/lng
+            bounds =
+              MoundHunters.MoundParser.bounds_web_mercator_to_latlon(%{
+                min_x: header.min_x,
+                max_x: header.max_x,
+                min_y: header.min_y,
+                max_y: header.max_y
+              })
 
-        # Clean up temp files
-        File.rm_rf!(temp_dir)
-        File.rm(Path.join(state.tile_temp_dir, "#{tile_name}.zip"))
+            Logger.debug(
+              "Tile #{tile_name} bounds: lat [#{bounds.min_lat}, #{bounds.max_lat}], " <>
+                "lng [#{bounds.min_lng}, #{bounds.max_lng}]"
+            )
 
-        state = process_next_in_queue(state)
-        {:noreply, state}
+            :ets.insert(
+              :tile_processing,
+              {tile_name, :done, %{tile_info: tile_info, header: header}}
+            )
+
+            # Update Mnesia with extracted bounds
+            MoundHunters.Repo.upsert_tile(%{
+              id: tile_name,
+              status: :ready,
+              min_lat: bounds.min_lat,
+              max_lat: bounds.max_lat,
+              min_lng: bounds.min_lng,
+              max_lng: bounds.max_lng
+            })
+
+            # Clean up temp files
+            File.rm_rf!(temp_dir)
+            File.rm(Path.join(state.tile_temp_dir, "#{tile_name}.zip"))
+
+            state = process_next_in_queue(state)
+            {:noreply, state}
+
+          {:error, reason} ->
+            Logger.error("Failed to parse header for #{tile_name}: #{inspect(reason)}")
+
+            :ets.insert(
+              :tile_processing,
+              {tile_name, {:error, "Header parsing failed: #{inspect(reason)}"}, %{}}
+            )
+
+            # Keep the .mound file for debugging, but clean up temp files
+            File.rm_rf!(temp_dir)
+            File.rm(Path.join(state.tile_temp_dir, "#{tile_name}.zip"))
+
+            state = process_next_in_queue(state)
+            {:noreply, state}
+        end
 
       {:error, reason} ->
         Logger.error("Failed to convert #{tile_name}: #{inspect(reason)}")
-        :ets.insert(:tile_processing, {tile_name, {:error, "Conversion failed: #{inspect(reason)}"}, %{}})
+
+        :ets.insert(
+          :tile_processing,
+          {tile_name, {:error, "Conversion failed: #{inspect(reason)}"}, %{}}
+        )
 
         # Clean up
         File.rm_rf!(temp_dir)
@@ -259,6 +313,40 @@ defmodule MoundHunters.TileProcessor do
 
   # Helper functions
 
+  defp query_arcgis_and_process(lookup_id, lat, lng, state) do
+    case OhioLidar.query_tile_info(lng, lat) do
+      {:ok, tile_info} ->
+        tile_name = tile_info.tile_name
+        Logger.info("Found tile: #{tile_name} in #{tile_info.county} county")
+
+        # Update lookup table with success
+        :ets.insert(:tile_lookups, {lookup_id, {:ok, tile_name}})
+
+        # Check if tile already exists
+        output_file = Path.join(state.tile_output_dir, "#{tile_name}.mound")
+
+        if File.exists?(output_file) do
+          Logger.info("Tile #{tile_name} already processed, marking as done")
+          :ets.insert(:tile_processing, {tile_name, :done, %{tile_info: tile_info}})
+          {:noreply, state}
+        else
+          # Queue for processing
+          state = queue_tile_for_processing(state, tile_name, tile_info)
+          {:noreply, state}
+        end
+
+      {:error, :no_tile_found} ->
+        Logger.warning("No tile found for coordinates (#{lat}, #{lng})")
+        :ets.insert(:tile_lookups, {lookup_id, {:error, "No tile found at coordinates"}})
+        {:noreply, state}
+
+      {:error, reason} ->
+        Logger.error("Failed to lookup tile: #{inspect(reason)}")
+        :ets.insert(:tile_lookups, {lookup_id, {:error, "Lookup failed: #{inspect(reason)}"}})
+        {:noreply, state}
+    end
+  end
+
   defp queue_tile_for_processing(state, tile_name, tile_info) do
     # Check if already in queue or processing
     case :ets.lookup(:tile_processing, tile_name) do
diff --git a/lib/mound_hunters_web/controllers/tile_controller.ex b/lib/mound_hunters_web/controllers/tile_controller.ex
index 8762b0b..1a3244d 100644
--- a/lib/mound_hunters_web/controllers/tile_controller.ex
+++ b/lib/mound_hunters_web/controllers/tile_controller.ex
@@ -60,10 +60,9 @@ defmodule MoundHuntersWeb.TileController do
 
   @doc """
   Serve a tile file.
-  GET /tiles/MOUND/:tile_id.mound
-  GET /tiles/JPG/:tile_id.jpg
-  GET /tiles/PNG/:tile_id.jpng
-  GET /tiles/JSON/:tile_id.json
+  GET /tiles/mound/:tile_id.mound
+  GET /tiles/jpg/:tile_id.jpg
+  GET /tiles/png/:tile_id.jpng
   """
   def serve(conn) do
     raw_tile_id = conn.path_params["tile_id"]
@@ -81,10 +80,9 @@ defmodule MoundHuntersWeb.TileController do
 
     file_path =
       case format do
-        "MOUND" -> Path.join(tile_dir, "MOUND/#{tile_id}.mound")
-        "JSON" -> Path.join(tile_dir, "JSON/#{tile_id}.json")
-        "JPG" -> Path.join(tile_dir, "JPG/#{tile_id}.jpg")
-        "PNG" -> Path.join(tile_dir, "PNG/#{tile_id}.png")
+        "mound" -> Path.join(tile_dir, "MOUND/#{tile_id}.mound")
+        "jpg" -> Path.join(tile_dir, "JPG/#{tile_id}.jpg")
+        "png" -> Path.join(tile_dir, "PNG/#{tile_id}.png")
       end
 
     Logger.info("Tile request started for #{file_path}")
diff --git a/ui/src/App.vue b/ui/src/App.vue
index 19fc7ad..75a5761 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -1,7 +1,13 @@
 <template>
   <div id="app">
+    <!-- ============================================= -->
+    <!-- MAP CONTAINER -->
+    <!-- ============================================= -->
     <div ref="mapContainer" class="map-container"></div>
     
+    <!-- ============================================= -->
+    <!-- SHADING SANDBOX -->
+    <!-- ============================================= -->
     <ShadingSandbox 
       :visible="sandboxVisible"
       :offscreen="sandboxOffscreen"
@@ -12,145 +18,128 @@
       @error="onRenderError"
     />
     
-    <div class="layer-controls">
-      <div class="control-section">
-        <label>Base Map:</label>
-        <label><input type="radio" value="osm" v-model="baseLayer" @change="updateBaseLayer"> Street</label>
-        <label><input type="radio" value="satellite" v-model="baseLayer" @change="updateBaseLayer"> Satellite</label>
-      </div>
-      
-      <div class="control-section">
-        <label class="section-header" @click="historicMarkersExpanded = !historicMarkersExpanded" style="cursor: pointer;">
-          {{ historicMarkersExpanded ? '▼' : '▶' }} Historic Markers
-        </label>
-        <div v-if="historicMarkersExpanded" class="subsection">
-          <button class="hide-all-btn" @click="hideAllHistoricMarkers">
-            {{ allHistoricMarkersHidden ? 'Show All' : 'Hide All' }}
-          </button>
-          <div v-for="site in KNOWN_SITES" :key="site.name" class="site-control">
-            <label>
-              <input type="checkbox" v-model="visibleSites[site.name]" @change="toggleSite(site.name)">
-              {{ site.name }}
-            </label>
-            <button class="jump-btn" @click="jumpToSite(site)" title="Jump to location">📍</button>
-          </div>
-        </div>
-      </div>
-      
-      <div class="control-section">
-        <label>
-          <input type="checkbox" v-model="showLidar" @change="toggleLidar">
-          Show Lidar
-        </label>
-        <div v-if="showLidar" class="slider-control">
-          <label>Opacity: {{ Math.round(lidarOpacity) }}%</label>
-          <input 
-            type="range" 
-            min="0" 
-            max="100" 
-            v-model.number="lidarOpacity" 
-            @input="updateLidarOpacity"
-            class="opacity-slider"
-          >
-        </div>
-      </div>
-      
-      <div class="control-section">
-        <label>
-          <input type="checkbox" v-model="showGeometry" @change="toggleGeometry">
-          Show Geometry
-        </label>
-        <label>
-          <input type="checkbox" v-model="imperialUnits">
-          Imperial Units
-        </label>
-      </div>
-      
-      <div class="control-section">
-        <button class="sandbox-btn" @click="openSandbox">Open Shading Sandbox</button>
-      </div>
-    </div>
+    <!-- ============================================= -->
+    <!-- MAP CONTROLS (Left Sidebar) -->
+    <!-- ============================================= -->
+    <MapControls
+      v-model:baseLayer="baseLayer"
+      v-model:historicMarkersExpanded="historicMarkersExpanded"
+      v-model:showLidar="showLidar"
+      v-model:lidarOpacity="lidarOpacity"
+      v-model:showGeometry="showGeometry"
+      v-model:imperialUnits="imperialUnits"
+      :visibleSites="visibleSites"
+      :allHistoricMarkersHidden="allHistoricMarkersHidden"
+      :tileRequests="tileRequests"
+      @toggleSite="toggleSite"
+      @jumpToSite="jumpToSite"
+      @toggleAllSites="hideAllHistoricMarkers"
+      @openSandbox="openSandbox"
+      @update:baseLayer="updateBaseLayer"
+      @update:lidarOpacity="updateLidarOpacity"
+      @update:showLidar="toggleLidar"
+      @update:showGeometry="toggleGeometry"
+      @dismissRequest="dismissTileRequest"
+    />
     
-    <div class="geometry-toolbar">
-      <button 
-        :class="['tool-btn', { active: drawMode === 'line' }]"
-        @click="setDrawMode('line')"
-        title="Draw Line"
-      >
-        📏 Line
-      </button>
-      <button 
-        :class="['tool-btn', { active: drawMode === 'ray' }]"
-        @click="setDrawMode('ray')"
-        title="Draw Ray"
-      >
-        ➡️ Ray
-      </button>
-      <button 
-        class="tool-btn danger"
-        @click="clearAllGeometry"
-        title="Clear All Geometry"
-      >
-        🗑️ Clear
-      </button>
-    </div>
+    <!-- ============================================= -->
+    <!-- GEOMETRY TOOLBAR (Right Side) -->
+    <!-- ============================================= -->
+    <GeometryToolbar
+      :drawMode="drawMode"
+      :showGeometry="showGeometry"
+      @setDrawMode="setDrawMode"
+      @clearAll="clearAllGeometry"
+    />
     
-    <div 
-      v-if="contextMenu.visible" 
-      class="context-menu"
-      :style="{ left: contextMenu.x + 'px', top: contextMenu.y + 'px' }"
-    >
-      <div class="context-menu-header">
-        {{ formatCoordinate(contextMenu.lngLat.lng, 'lng') }}, {{ formatCoordinate(contextMenu.lngLat.lat, 'lat') }}
-        <span v-if="contextMenu.tileName" class="tile-name">{{ contextMenu.tileName }}</span>
-      </div>
-      <button @click="dropPin" class="context-menu-item">📍 Drop Pin</button>
-      <button @click="startMeasure" class="context-menu-item">📏 Measure from here</button>
-      <button v-if="!contextMenu.hasTile" @click="requestTile" class="context-menu-item">📥 Request Tile</button>
-      <button v-if="contextMenu.hasTile && !contextMenu.hasMound" @click="loadTileFromContextMenu" class="context-menu-item">📦 Load Tile Data</button>
-      <button v-if="contextMenu.hasMound" @click="openSandboxFromContextMenu" class="context-menu-item">🔬 Open in Shading Sandbox</button>
-    </div>
+    <!-- ============================================= -->
+    <!-- CONTEXT MENU -->
+    <!-- ============================================= -->
+    <ContextMenu
+      :visible="contextMenu.visible"
+      :x="contextMenu.x"
+      :y="contextMenu.y"
+      :lngLat="contextMenu.lngLat || { lng: 0, lat: 0 }"
+      :tileData="contextMenu.tileData"
+      :imagesLoaded="contextMenu.imagesLoaded"
+      :moundLoaded="contextMenu.moundLoaded"
+      :apiError="contextMenu.apiError"
+      @dropPin="dropPin"
+      @startMeasure="startMeasure"
+      @requestTile="requestTileFromContextMenu"
+      @loadImages="loadImagesFromContextMenu"
+      @loadMound="loadMoundFromContextMenu"
+      @openSandbox="openSandboxFromContextMenu"
+    />
     
-    <div 
-      v-if="popup.visible"
-      class="popup"
-      :style="{ left: popup.x + 'px', top: popup.y + 'px' }"
-    >
-      <div class="popup-content">
-        <div v-if="popup.type === 'pin'">
-          <strong>Pin #{{ popup.feature.properties.number }}</strong>
-          <div>{{ formatCoordinate(popup.feature.geometry.coordinates[0], 'lng') }}, {{ formatCoordinate(popup.feature.geometry.coordinates[1], 'lat') }}</div>
-          <button @click="deleteFeature(popup.feature.id)" class="popup-btn danger">Delete</button>
-        </div>
-        <div v-else-if="popup.type === 'line' || popup.type === 'ray'">
-          <strong>{{ popup.type === 'line' ? 'Line' : 'Ray' }}</strong>
-          <div>Length: {{ formatDistance(popup.feature.properties.length) }}</div>
-          <div>Bearing: {{ popup.feature.properties.bearing.toFixed(1) }}°</div>
-          <button @click="deleteFeature(popup.feature.id)" class="popup-btn danger">Delete</button>
-        </div>
-        <div v-else-if="popup.type === 'site'" class="site-popup">
-          <strong>{{ popup.feature.properties.name }}</strong>
-          <div class="site-type">{{ popup.feature.properties.type === 'road_confirmed' ? 'Confirmed Road Segment' : 'Earthwork' }}</div>
-          <div class="site-description">{{ popup.feature.properties.description }}</div>
-        </div>
-      </div>
-      <button @click="popup.visible = false" class="popup-close">×</button>
-    </div>
+    <!-- ============================================= -->
+    <!-- FEATURE POPUP -->
+    <!-- ============================================= -->
+    <FeaturePopup
+      :visible="popup.visible"
+      :x="popup.x"
+      :y="popup.y"
+      :type="popup.type"
+      :feature="popup.feature"
+      :imperialUnits="imperialUnits"
+      @close="popup.visible = false"
+      @delete="deleteFeature"
+      @showBibliography="showBibliography"
+    />
+    
+    <!-- ============================================= -->
+    <!-- BIBLIOGRAPHY MODAL -->
+    <!-- ============================================= -->
+    <Bibliography
+      :visible="bibliographyVisible"
+      :highlightedKey="highlightedCitation"
+      @close="bibliographyVisible = false"
+    />
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted, onUnmounted } from 'vue';
-
-// Devmode rendering
-//import { batchRenderTiles } from './batch-renderer.js';
-//<button @click="batchRenderTiles(sandboxRef, tileCache, TEST_TILES)">SPAM</button>
-
 import maplibregl from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
-import ShadingSandbox from './ShadingSandbox.vue';
 
-// Default render settings - used everywhere
+// ============================================================================
+// COMPONENTS
+// ============================================================================
+import ShadingSandbox from './components/ShadingSandbox.vue';
+import MapControls from './components/MapControls.vue';
+import GeometryToolbar from './components/GeometryToolbar.vue';
+import ContextMenu from './components/ContextMenu.vue';
+import FeaturePopup from './components/FeaturePopup.vue';
+import Bibliography from './components/Bibliography.vue';
+
+// ============================================================================
+// DATA
+// ============================================================================
+import { KNOWN_SITES } from './data/historicSites.js';
+
+// ============================================================================
+// UTILITIES
+// ============================================================================
+import { calculateDistance, calculateBearing, extendRay } from './utils/geometry.js';
+import { getTileByCoordinates, getTileById, getTileMoundData, requestTileProcessing } from './utils/api.js';
+import { 
+  getMetadata, setMetadata, findTileByCoords, hasMetadata,
+  getMoundData, setMoundData, hasMoundData,
+  getImageUrl, setImagesOnMap, areImagesOnMap, removeImagesFromMap,
+  setLoading, isMetadataLoading, isMoundLoading, isImageLoading,
+  isMetadataLoaded, isMoundLoaded, isReadyToRender, getImageAvailability,
+  getAllTileIdsWithImages, getAllTileIdsWithMounds
+} from './utils/tileCache.js';
+
+// For generating the pre-baked tiles:
+// import { batchRenderTiles } from './utils/batch-renderer.js';
+// batchRenderTiles(sandboxRef, tileCache, tileNames) {
+
+// ============================================================================
+// CONSTANTS
+// ============================================================================
+
 const DEFAULT_RENDER_SETTINGS = {
   azimuth: 90,
   altitude: 60,
@@ -159,7 +148,21 @@ const DEFAULT_RENDER_SETTINGS = {
   terrainColor: 0x9A9996
 };
 
-// Refs
+const octagonCenter = [-82.44383, 40.05469];
+
+const TILE_NAMES = (() => {
+  const allTiles = new Set();
+  KNOWN_SITES.forEach(site => {
+    if (site.tiles) {
+      site.tiles.forEach(tile => allTiles.add(tile));
+    }
+  });
+  return Array.from(allTiles);
+})();
+
+// ============================================================================
+// REFS - UI State
+// ============================================================================
 const mapContainer = ref(null);
 const sandboxRef = ref(null);
 const sandboxVisible = ref(false);
@@ -172,501 +175,87 @@ const showLidar = ref(true);
 const showGeometry = ref(true);
 const imperialUnits = ref(false);
 const lidarOpacity = ref(80);
-const tileCache = ref({});  // Cached .mound data (for shading sandbox)
-const loadedPngTiles = ref(new Set());  // Track which PNG tiles are displayed on map
+
+// ============================================================================
+// REFS - Core Data
+// ============================================================================
 const currentTileData = ref(null);
 
-const loadingState = ref({}); // {"-82.448446,40.051780": 'pending'} 
-// Values: 'looking_up' | 'found' | 'processing' | 'complete' | 'failed'
+// Tile request tracking: { requestId: { lat, lng, status, message, tileId } }
+const tileRequests = ref({});
+let nextRequestId = 1;
 
-// Geometry state
-const drawMode = ref(null); // 'line', 'ray', or null
+// ============================================================================
+// REFS - Geometry State
+// ============================================================================
+const drawMode = ref(null);
 const drawPoints = ref([]);
 const geometryFeatures = ref({ type: 'FeatureCollection', features: [] });
 const nextPinNumber = ref(1);
 const nextFeatureId = ref(1);
 
-// UI state
+// ============================================================================
+// REFS - UI Overlays
+// ============================================================================
 const contextMenu = ref({ 
   visible: false, 
   x: 0, 
   y: 0, 
-  lngLat: null, 
-  hasTile: false,      // Has PNG tile displayed
-  hasMound: false,     // Has .mound data cached
-  tileName: null       // The tile name at this location
+  lngLat: null,
+  tileData: null,      // API tile metadata
+  imagesLoaded: false, // JPG/PNG loaded on map
+  moundLoaded: false,  // .mound data in cache
+  apiError: false      // Failed to fetch tile info
 });
-const popup = ref({ visible: false, x: 0, y: 0, type: null, feature: null, lngLat: null });
 
-// Map instance
+const popup = ref({ 
+  visible: false, 
+  x: 0, 
+  y: 0, 
+  type: null, 
+  feature: null, 
+  lngLat: null 
+});
+
+const bibliographyVisible = ref(false);
+const highlightedCitation = ref(null);
+
+// ============================================================================
+// MAP INSTANCE
+// ============================================================================
 let map = null;
 let drawingHandler = null;
 
-// BIBLIOGRAPHY
-// BibTeX-inspired JSON format for Hopewell archaeological references
+// ============================================================================
+// COORDINATE UTILITIES
+// ============================================================================
 
-const BIBLIOGRAPHY = {
-  "hively_horn_1982": {
-    "type": "article",
-    "author": ["Hively, Ray", "Horn, Robert"],
-    "title": "Geometry and Astronomy in Prehistoric Ohio",
-    "journal": "Archaeoastronomy",
-    "volume": "4",
-    "pages": "S1-S20",
-    "year": 1982,
-    "note": "Foundational paper demonstrating lunar alignments at Newark Octagon Earthworks"
-  },
-  "hively_horn_1984": {
-    "type": "article",
-    "author": ["Hively, Ray", "Horn, Robert"],
-    "title": "Hopewellian Geometry and Astronomy at High Bank",
-    "journal": "Archaeoastronomy",
-    "volume": "7",
-    "pages": "S85-S100",
-    "year": 1984,
-    "note": "Extended lunar alignment analysis to High Bank Works"
-  },
-  "hively_horn_2006": {
-    "type": "article",
-    "author": ["Hively, Ray", "Horn, Robert"],
-    "title": "A Statistical Study of Lunar Alignments at the Newark Earthworks",
-    "journal": "Midcontinental Journal of Archaeology",
-    "year": 2006,
-    "note": "Monte Carlo analysis showing odds of chance alignments at 1 in 40 million"
-  },
-  "squier_davis_1848": {
-    "type": "book",
-    "author": ["Squier, Ephraim George", "Davis, Edwin Hamilton"],
-    "title": "Ancient Monuments of the Mississippi Valley",
-    "publisher": "Smithsonian Institution",
-    "series": "Smithsonian Contributions to Knowledge",
-    "volume": "1",
-    "year": 1848,
-    "note": "First comprehensive survey of Ohio earthworks; first Smithsonian publication"
-  },
-  "salisbury_salisbury_1862": {
-    "type": "article",
-    "author": ["Salisbury, James", "Salisbury, Charles"],
-    "title": "Accurate Surveys and Descriptions of the Ancient Earthworks at Newark, Ohio",
-    "journal": "American Journal of Science and Arts",
-    "series": "2nd series",
-    "volume": "34",
-    "pages": "61-71",
-    "year": 1862,
-    "note": "First documentation tracing the Great Hopewell Road 6 miles south from Newark"
-  },
-  "lepper_1995": {
-    "type": "article",
-    "author": ["Lepper, Bradley T."],
-    "title": "Tracking Ohio's Great Hopewell Road",
-    "journal": "Archaeology",
-    "volume": "48",
-    "number": "6",
-    "pages": "52-56",
-    "year": 1995,
-    "note": "Modern investigation of the Great Hopewell Road hypothesis"
-  },
-  "lepper_2006": {
-    "type": "incollection",
-    "author": ["Lepper, Bradley T."],
-    "title": "The Great Hopewell Road and the Role of Pilgrimage in the Hopewell Interaction Sphere",
-    "booktitle": "Recreating Hopewell",
-    "editor": ["Charles, Douglas K.", "Buikstra, Jane E."],
-    "publisher": "University Press of Florida",
-    "year": 2006
-  },
-  "lepper_2024": {
-    "type": "article",
-    "author": ["Lepper, Bradley T."],
-    "title": "The Great Hopewell Road: A Biased Assessment Thirty Years On",
-    "journal": "Journal of Ohio Archaeology",
-    "volume": "10",
-    "year": 2024
-  },
-  "magli_lepper_2025": {
-    "type": "article",
-    "author": ["Magli, Giulio", "Lepper, Bradley T."],
-    "title": "Going Straight in a Sacred Landscape: The Great Hopewell Road",
-    "journal": "Studies in Digital Heritage",
-    "volume": "9",
-    "number": "1",
-    "pages": "37-54",
-    "year": 2025
-  },
-  "schwarz_2016": {
-    "type": "article",
-    "author": ["Schwarz, Kevin R."],
-    "title": "The Great Hopewell Road: New Data, Analysis, and Future Research Prospects",
-    "journal": "Journal of Ohio Archaeology",
-    "volume": "4",
-    "pages": "12-38",
-    "year": 2016
-  },
-  "romain_burks_2008": {
-    "type": "article",
-    "author": ["Romain, William F.", "Burks, Jarrod"],
-    "title": "LiDAR Imaging of the Great Hopewell Road",
-    "journal": "Ohio Archaeology",
-    "year": 2008,
-    "note": "Early application of LiDAR to Van Voorhis Walls analysis"
-  },
-  "mickelson_lepper_2007": {
-    "type": "article",
-    "author": ["Mickelson, Mark E.", "Lepper, Bradley T."],
-    "title": "Observational Archaeoastronomy at the Newark Earthworks",
-    "journal": "Mediterranean Archaeology and Archaeometry",
-    "volume": "6",
-    "number": "3",
-    "pages": "173-179",
-    "year": 2007,
-    "note": "Direct observations confirming lunar alignments during 2004-2007 standstill cycle"
-  },
-  "romain_2000": {
-    "type": "book",
-    "author": ["Romain, William F."],
-    "title": "Mysteries of the Hopewell: Astronomers, Geometers, and Magicians of the Eastern Woodlands",
-    "publisher": "University of Akron Press",
-    "year": 2000
-  },
-  "lynott_2015": {
-    "type": "book",
-    "author": ["Lynott, Mark J."],
-    "title": "Hopewell Ceremonial Landscapes of Ohio: More than Mounds and Geometric Earthworks",
-    "series": "American Landscapes Series",
-    "publisher": "Oxbow Books",
-    "year": 2015
-  },
-  "moorehead_1892": {
-    "type": "book",
-    "author": ["Moorehead, Warren K."],
-    "title": "Primitive Man in Ohio",
-    "publisher": "G.P. Putnam's Sons",
-    "year": 1892,
-    "note": "Excavations at Hopewell Mound Group that gave the culture its name"
-  },
-  "shetrone_greenman_1931": {
-    "type": "article",
-    "author": ["Shetrone, Henry C.", "Greenman, Emerson F."],
-    "title": "Explorations of the Seip Group of Prehistoric Earthworks",
-    "journal": "Ohio State Archaeological and Historical Quarterly",
-    "volume": "40",
-    "pages": "343-509",
-    "year": 1931
-  },
-  "mills_1909": {
-    "type": "article",
-    "author": ["Mills, William C."],
-    "title": "Explorations of the Seip Mound",
-    "journal": "Ohio State Archaeological and Historical Quarterly",
-    "volume": "18",
-    "pages": "269-321",
-    "year": 1909
-  },
-  "atwater_1820": {
-    "type": "book",
-    "author": ["Atwater, Caleb"],
-    "title": "Descriptions of the Antiquities Discovered in the State of Ohio and Other Western States",
-    "publisher": "American Antiquarian Society",
-    "year": 1820,
-    "note": "Early speculation that southwesterly road extended at least 30 miles"
-  },
-  "nps_hocu": {
-    "type": "misc",
-    "author": ["National Park Service"],
-    "title": "Hopewell Culture National Historical Park",
-    "url": "https://www.nps.gov/hocu/",
-    "note": "Official NPS documentation for park sites"
-  },
-  "unesco_2023": {
-    "type": "misc",
-    "author": ["UNESCO"],
-    "title": "Hopewell Ceremonial Earthworks",
-    "url": "https://whc.unesco.org/en/list/1689/",
-    "year": 2023,
-    "note": "World Heritage Site inscription documentation"
-  },
-  "ohc_newark": {
-    "type": "misc",
-    "author": ["Ohio History Connection"],
-    "title": "Newark Earthworks",
-    "url": "https://www.ohiohistory.org/visit/browse-historical-sites/newark-earthworks/",
-    "note": "Official Ohio History Connection site documentation"
-  }
-};
-
-// KNOWN_SITES with citations added to descriptions
-// Citations use \cite{key} format for easy parsing
-const KNOWN_SITES = [
-  {
-    "name": "Newark Octagon Earthworks",
-    "coordinates": [[-82.444270, 40.054705]],
-    "description": "Part of the Newark Earthworks complex, the Octagon is precisely aligned to the 18.6-year lunar cycle \\cite{hively_horn_1982}. Connected to a 20-acre Observatory Circle, this geometric earthwork demonstrates sophisticated astronomical knowledge. The walls and gateways encode all eight lunar standstill rise and set points \\cite{mickelson_lepper_2007}. The Octagon's eight walls (each approximately 550 feet long) and Observatory Circle form one of only two known circle-octagon pairs in the Hopewell world, the other being High Bank Works \\cite{hively_horn_1984}. First comprehensively surveyed by Squier and Davis in the 1840s \\cite{squier_davis_1848}. Inscribed as a UNESCO World Heritage Site in September 2023 \\cite{unesco_2023}.",
-    "type": "earthwork",
-    "tiles": [
-      'BS19820747', 
-      'BS19820748', 
-      'BS19830747', 
-      'BS19830748', 
-      'BS19820746', 
-      'BS19810747', 
-      'BS19810746', 
-      'BS19860742', 
-      'BS19870743', 
-      'BS19860743', 
-      'BS19880743', 
-      'BS19880742',
-      'BS19830746'
-    ],
-
-    "overlay": [
-      {
-        "type": 'polygon',
-        "coordinates": [
-          [-82.44123, 40.05443],
-          [-82.44260, 40.05309],
-          [-82.44464, 40.05237],
-          [-82.44631, 40.05342],
-          [-82.44728, 40.05500],
-          [-82.44589, 40.05633],
-          [-82.44389, 40.05698],
-          [-82.44216, 40.05595],
-          [-82.44123, 40.05443]
-        ]
-      }
-    ]
-  },
-  {
-    "name": "Great Circle Earthworks",
-    "coordinates": [[-82.4277555, 40.0402671]],
-    "description": "A nearly perfect circle 1,200 feet in diameter, enclosing approximately 30 acres \\cite{squier_davis_1848}. The earthen wall is lined by a deep interior ditch, a design typical of earlier Adena earthworks \\cite{lynott_2015}. Located in Heath, Ohio, this is one of the largest circular earthworks in the Americas. Eagle Mound at the center covers the remains of a large ceremonial structure \\cite{ohc_newark}. The walls vary from 4 to 14 feet in height at the monumental gateway. Unlike the Octagon, no solar alignments have been confirmed at the Great Circle \\cite{hively_horn_1982}. Part of the Hopewell Ceremonial Earthworks UNESCO World Heritage Site \\cite{unesco_2023}.",
-    "type": "earthwork",
-    "tiles": ["BS19870742", 'BS19870743', 'BS19880743']
-  },
-  {
-    "name": "Van Voorhis Walls",
-    "coordinates": [[ -82.459139,40.028334]],
-    "description": "The best-preserved section of the Great Hopewell Road, extending 2.5 miles south from the Newark Octagon to Ramp Creek \\cite{lepper_1995}. This confirmed earthwork consists of parallel walls approximately 60 meters (200 feet) apart, aligned on an azimuth of approximately 212° toward Chillicothe \\cite{schwarz_2016}. First documented by James and Charles Salisbury in 1862, who followed the walls for 6 miles through 'tangled swamps and over hills, still keeping their undeviating course' \\cite{salisbury_salisbury_1862}. LiDAR analysis suggests the road was sunken between the walls \\cite{romain_burks_2008}. Test excavations in 2009 revealed a thin layer of white limestone that may have paved the road \\cite{lepper_2024}. Still visible above ground in woodland areas too swampy to farm.",
-    "type": "road_confirmed",
-    "tiles": ['BS19820746', 'BS19820745', 'BS19820743', 'BS19820742', 'BS19860742', 'BS19880742']
-  },
-  {
-    "name": "Mound City Group",
-    "coordinates": [[-83.0065767, 39.3744923]],
-    "description": "The headquarters of Hopewell Culture National Historical Park \\cite{nps_hocu}. Contains 23 burial mounds within a nearly square earthen enclosure (walls approximately 3-4 feet high) along the Scioto River, enclosing over 13 acres \\cite{squier_davis_1848}. Each mound covered a charnel house where the dead were cremated. Excavations by Squier and Davis in the 1840s, and later Ohio Historical Society work (1920-1922), revealed spectacular artifacts including effigy smoking pipes, mica sheets, copper figures, and obsidian from Yellowstone \\cite{lynott_2015}. Much was damaged during Camp Sherman construction in WWI; mounds were reconstructed in the 1920s. Part of the Hopewell Ceremonial Earthworks UNESCO World Heritage Site \\cite{unesco_2023}.",
-    "type": "earthwork",
-    "tiles": ['BS18250500', 'BS18250501', 'BS18260501', 'BS18260500']
-  },
-  {
-    "name": "Hopeton Earthworks",
-    "coordinates": [[-82.9809185, 39.3790743]],
-    "description": "A geometric earthwork complex featuring a circle (320m/1,050 ft diameter) and square of similar area, connected by parallel earthen walls \\cite{squier_davis_1848}. The circle has the same diameter as those at four other Hopewell sites, including Newark and High Bank \\cite{hively_horn_1984}. The parallel walls (extending nearly half a mile toward the Scioto River) align with the winter solstice sunset, and the diagonal of the square aligns with the summer solstice sunset \\cite{nps_hocu}. Located on a terrace east of the Scioto River, across from Mound City \\cite{lynott_2015}. Recent magnetometry revealed evidence of a monumental 'woodhenge' with giant posts spaced at 20-foot intervals around the circle. Part of the Hopewell Ceremonial Earthworks UNESCO World Heritage Site \\cite{unesco_2023}.",
-    "type": "earthwork",
-    "tiles": ['BS18320502', 'BS18320503', 'BS18320505', 'BS18330505', 'BS18330503']
-  },
-  {
-    "name": "Hopewell Mound Group",
-    "coordinates": [[-83.0844809, 39.3608166]],
-    "description": "The type site for the Hopewell culture, named after former landowner Mordecai Cloud Hopewell \\cite{moorehead_1892}. This 300-acre site contains 29 mounds within a parallelogram enclosure of approximately 111 acres \\cite{squier_davis_1848}. Includes the largest known Hopewell mound—originally 500 feet long, 180 feet wide, and 30 feet tall, consisting of three conjoined mounds within a D-shaped enclosure \\cite{nps_hocu}. More Hopewell artifacts of the highest quality were found here than at any other site, including mica cutouts, copper effigies, and obsidian blades \\cite{lynott_2015}. First excavated by Warren Moorehead in 1891-1892. Part of the Hopewell Ceremonial Earthworks UNESCO World Heritage Site \\cite{unesco_2023}.",
-    "type": "earthwork",
-    "tiles": ['BS18020495', 'BS18020496', 'BS18010496', 'BS18010495', 'BS18000496', 'BS18000495', 'BS17980496', 'BS17980495']
-  },
-  {
-    "name": "Seip Earthworks",
-    "coordinates": [[-83.2214086, 39.2416867]],
-    "description": "One of the largest Hopewell complexes, featuring two circles and a square enclosing approximately 121 acres with over 10,000 feet of embankment walls \\cite{squier_davis_1848}. The Seip-Pricer Mound stands 30 feet high (240 feet long, 160 feet wide), one of the largest burial mounds in the Middle Ohio Valley \\cite{shetrone_greenman_1931}. The square measures exactly 27 acres, matching four other nearby Hopewell sites, suggesting a common unit of measurement \\cite{romain_2000}. Excavations (1925-1928) revealed over 100 burials with artifacts including thousands of freshwater pearls, Isle Royale copper, Carolina mica, and Tennessee River Valley effigy pipes \\cite{mills_1909}. Part of the Hopewell Ceremonial Earthworks UNESCO World Heritage Site \\cite{unesco_2023}.",
-    "type": "earthwork",
-    "tiles": ['BS17630452', 'BS17630451', 'BS17650451', 'BS17620451', 'BS17620450']
-  },
-  // There is something in this area, but I can't confirm it's the 'high banks works'
-  // Google maps and some facebook boomer do claim so, "highbank park earthworks"
-  // A historical map puts it near the Scioto river, but that's on the other side of columbus
-  {
-    "name": "High Bank Works",
-    "coordinates": [[-83.028353, 40.139853]],
-    "description": "Features a circle-octagon pair with the same design principles as Newark Earthworks—both circles are exactly 1,054 feet in diameter \\cite{hively_horn_1984}. Located approximately 60 miles from Newark on a terrace 75-80 feet above the Scioto River. The octagon is aligned to the lunar standstill cycle, with its main axis rotated exactly 90° from Newark's orientation \\cite{hively_horn_2006}. Encodes all eight lunar standstill points plus the four solstices \\cite{romain_2000}. The only other circle-octagon combination built by the Hopewell culture, suggesting intentional pairing with Newark \\cite{magli_lepper_2025}. Currently a research preserve within Hopewell Culture National Historical Park, not routinely open to the public \\cite{nps_hocu}. Part of the Hopewell Ceremonial Earthworks UNESCO World Heritage Site \\cite{unesco_2023}.",
-    "type": "earthwork",
-    "tiles": [
-      "BS821780",
-      "BS820780",
-      "BS18210778",
-      "BS18200778",
-      "N1820175"
-    ]
-  }
-];
-
-const TEST_TILES = KNOWN_SITES.flatMap(i=>i.tiles);
-
-// Export for use in application
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = { KNOWN_SITES, BIBLIOGRAPHY };
-}
-
-// Tile names to load - merged from all KNOWN_SITES
-const TILE_NAMES = (() => {
-  const allTiles = new Set();
-  KNOWN_SITES.forEach(site => {
-    if (site.tiles) {
-      site.tiles.forEach(tile => allTiles.add(tile));
-    }
-  });
-  return Array.from(allTiles);
-})();
-
-const octagonCenter = [-82.44383, 40.05469];
-
-// Coordinate conversion utilities
 function webMercatorToLonLat(x, y) {
-  const R = 6378137; // Earth's radius in meters
+  const R = 6378137;
   const lon = (x / R) * (180 / Math.PI);
   const lat = (2 * Math.atan(Math.exp(y / R)) - Math.PI / 2) * (180 / Math.PI);
   return [lon, lat];
 }
 
-// Calculate distance between two points in meters (Haversine formula)
-function calculateDistance(lng1, lat1, lng2, lat2) {
-  const R = 6371000; // Earth's radius in meters
-  const φ1 = lat1 * Math.PI / 180;
-  const φ2 = lat2 * Math.PI / 180;
-  const Δφ = (lat2 - lat1) * Math.PI / 180;
-  const Δλ = (lng2 - lng1) * Math.PI / 180;
+// ============================================================================
+// TILE UTILITIES
+// ============================================================================
 
-  const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
-            Math.cos(φ1) * Math.cos(φ2) *
-            Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
-  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-
-  return R * c; // Distance in meters
+// Check if tile images are loaded on map
+function areTileImagesLoaded(tileId) {
+  return areImagesOnMap(tileId);
 }
 
-// Calculate bearing between two points in degrees
-function calculateBearing(lng1, lat1, lng2, lat2) {
-  const φ1 = lat1 * Math.PI / 180;
-  const φ2 = lat2 * Math.PI / 180;
-  const Δλ = (lng2 - lng1) * Math.PI / 180;
-
-  const y = Math.sin(Δλ) * Math.cos(φ2);
-  const x = Math.cos(φ1) * Math.sin(φ2) -
-            Math.sin(φ1) * Math.cos(φ2) * Math.cos(Δλ);
-  const θ = Math.atan2(y, x);
-
-  return (θ * 180 / Math.PI + 360) % 360; // Bearing in degrees
+// Check if mound data is cached
+function isMoundDataCached(tileId) {
+  return hasMoundData(tileId);
 }
 
-// Check if a point has a loaded lidar tile, return tile info
-function getTileInfoAtPoint(lng, lat) {
-  if (!map) return { hasTile: false, hasMound: false, tileName: null };
-  
-  // Check all loaded PNG tile layers
-  for (const tileName of loadedPngTiles.value) {
-    const layerId = `png-tile-layer-${tileName}`;
-    if (!map.getLayer(layerId)) continue;
-    
-    const source = map.getSource(`png-tile-${tileName}`);
-    if (!source) continue;
-    
-    // Get the bounds from the image source coordinates
-    // coordinates are: [[topLeft], [topRight], [bottomRight], [bottomLeft]]
-    const coords = source.coordinates;
-    if (!coords || coords.length !== 4) continue;
-    
-    const [topLeft, topRight, bottomRight, bottomLeft] = coords;
-    const minLng = Math.min(topLeft[0], bottomLeft[0]);
-    const maxLng = Math.max(topRight[0], bottomRight[0]);
-    const minLat = Math.min(bottomLeft[1], bottomRight[1]);
-    const maxLat = Math.max(topLeft[1], topRight[1]);
-    
-    // Check if point is within bounds
-    if (lng >= minLng && lng <= maxLng && lat >= minLat && lat <= maxLat) {
-      return {
-        hasTile: true,
-        hasMound: !!tileCache.value[tileName],
-        tileName: tileName
-      };
-    }
-  }
-  
-  return { hasTile: false, hasMound: false, tileName: null };
-}
+// ============================================================================
+// FILE PARSING
+// ============================================================================
 
-// Legacy wrapper for compatibility
-function hasLidarAtPoint(lng, lat) {
-  return getTileInfoAtPoint(lng, lat).hasTile;
-}
-
-// Extend a line from point1 through point2 to map bounds
-function extendRay(lng1, lat1, lng2, lat2, bounds) {
-  const bearing = calculateBearing(lng1, lat1, lng2, lat2);
-  const bearingRad = bearing * Math.PI / 180;
-  
-  // Calculate a far point (100km away)
-  const R = 6371000; // Earth's radius in meters
-  const d = 100000; // 100km
-  const φ1 = lat1 * Math.PI / 180;
-  const λ1 = lng1 * Math.PI / 180;
-  
-  const φ2 = Math.asin(Math.sin(φ1) * Math.cos(d / R) +
-                       Math.cos(φ1) * Math.sin(d / R) * Math.cos(bearingRad));
-  const λ2 = λ1 + Math.atan2(Math.sin(bearingRad) * Math.sin(d / R) * Math.cos(φ1),
-                             Math.cos(d / R) - Math.sin(φ1) * Math.sin(φ2));
-  
-  return [λ2 * 180 / Math.PI, φ2 * 180 / Math.PI];
-}
-
-// Format coordinate based on imperial units setting
-function formatCoordinate(value, type) {
-  return value.toFixed(6) + (type === 'lng' ? '° E' : '° N');
-}
-
-// Format distance based on imperial units setting
-function formatDistance(meters) {
-  if (imperialUnits.value) {
-    const feet = meters * 3.28084;
-    if (feet > 5280) {
-      return (feet / 5280).toFixed(2) + ' mi';
-    }
-    return feet.toFixed(1) + ' ft';
-  } else {
-    if (meters > 1000) {
-      return (meters / 1000).toFixed(2) + ' km';
-    }
-    return meters.toFixed(1) + ' m';
-  }
-}
-
-// localStorage helpers
-function saveGeometry() {
-  localStorage.setItem('hopewellGeometry', JSON.stringify(geometryFeatures.value));
-  localStorage.setItem('hopewellNextPinNumber', nextPinNumber.value.toString());
-  localStorage.setItem('hopewellNextFeatureId', nextFeatureId.value.toString());
-}
-
-function loadGeometry() {
-  const saved = localStorage.getItem('hopewellGeometry');
-  if (saved) {
-    try {
-      geometryFeatures.value = JSON.parse(saved);
-    } catch (e) {
-      console.error('Failed to load geometry:', e);
-    }
-  }
-  
-  const savedPinNumber = localStorage.getItem('hopewellNextPinNumber');
-  if (savedPinNumber) {
-    nextPinNumber.value = parseInt(savedPinNumber);
-  }
-  
-  const savedFeatureId = localStorage.getItem('hopewellNextFeatureId');
-  if (savedFeatureId) {
-    nextFeatureId.value = parseInt(savedFeatureId);
-  }
-}
-
-// Parse .mound binary file
-async function parseMoundFile(url) {
-  const response = await fetch(url);
-  const buffer = await response.arrayBuffer();
-  
+function parseMoundBuffer(buffer) {
   const view = new DataView(buffer);
   let offset = 0;
   
@@ -690,7 +279,7 @@ async function parseMoundFile(url) {
   const maxX = view.getFloat32(offset, true); offset += 4;
   const maxY = view.getFloat32(offset, true); offset += 4;
   const maxZ = view.getFloat32(offset, true); offset += 4;
-  offset += 24; // Skip reserved bytes
+  offset += 24;
   
   const positions = new Float32Array(buffer, offset, pointCount * 3);
   offset += pointCount * 3 * 4;
@@ -707,91 +296,272 @@ async function parseMoundFile(url) {
   };
 }
 
-// Load PNG tiles (pre-rendered hillshade images)
-async function loadPngTiles() {
-  console.log('Loading PNG tiles...');
-  
-  for (const tileName of TILE_NAMES) {
-    try {
-      // Fetch metadata JSON for bounds
-      const metaResponse = await fetch(`/tiles/JSON/${tileName}.json`);
-      if (!metaResponse.ok) {
-        console.warn(`No metadata for ${tileName}, skipping`);
-        continue;
-      }
-      const meta = await metaResponse.json();
-      
-      // Check PNG exists
-      const pngUrl = `/tiles/PNG/${tileName}.png`;
-      const pngResponse = await fetch(pngUrl, { method: 'HEAD' });
-      if (!pngResponse.ok) {
-        console.warn(`No PNG for ${tileName}, skipping`);
-        continue;
-      }
-      
-      // Convert bounds to lat/lon (assuming meta has bounds in web mercator)
-      const sw = webMercatorToLonLat(meta.bounds.minX, meta.bounds.minY);
-      const ne = webMercatorToLonLat(meta.bounds.maxX, meta.bounds.maxY);
-      
-      // Add image source to map
-      map.addSource(`png-tile-${tileName}`, {
-        type: 'image',
-        url: pngUrl,
-        coordinates: [
-          [sw[0], ne[1]], // top-left
-          [ne[0], ne[1]], // top-right
-          [ne[0], sw[1]], // bottom-right
-          [sw[0], sw[1]]  // bottom-left
-        ]
-      });
-      
-      // Add layer
-      map.addLayer({
-        id: `png-tile-layer-${tileName}`,
-        type: 'raster',
-        source: `png-tile-${tileName}`,
-        paint: {
-          'raster-opacity': lidarOpacity.value / 100
-        }
-      }, 'lidar-datum'); // Insert before datum layer
-      
-      loadedPngTiles.value.add(tileName);
-      console.log(`Loaded PNG tile ${tileName} at [${sw[0].toFixed(5)}, ${sw[1].toFixed(5)}] - [${ne[0].toFixed(5)}, ${ne[1].toFixed(5)}]`);
-      
-    } catch (err) {
-      console.error(`Failed to load PNG tile ${tileName}:`, err);
-    }
-  }
-  
-  console.log(`Loaded ${loadedPngTiles.value.size} PNG tiles`);
-}
+// ============================================================================
+// TILE LOADING
+// ============================================================================
 
-// Load .mound data for a specific tile (for shading sandbox)
-async function loadMoundData(tileName) {
-  if (tileCache.value[tileName]) {
-    console.log(`Mound data for ${tileName} already cached`);
-    return tileCache.value[tileName];
+async function loadTileImages(tileId, tileMetadata, imageUrl = null) {
+  // If no explicit imageUrl provided (loading from server), skip if already loaded
+  if (!imageUrl && areTileImagesLoaded(tileId)) {
+    console.log(`Images for ${tileId} already loaded`);
+    return;
   }
   
-  console.log(`Loading mound data for ${tileName}...`);
+  // If imageUrl is provided (sandbox render), allow overwriting
+  const isOverwriting = imageUrl && areTileImagesLoaded(tileId);
   
-  try {
-    const data = await parseMoundFile(`/tiles/mound/${tileName}.mound`);
-    tileCache.value[tileName] = data;
-    console.log(`Cached mound data for ${tileName}`);
-    return data;
+  try {    
+    // Determine which format to load (prefer PNG over JPG)
+    if (!imageUrl) {
+      imageUrl = tileMetadata.png_available 
+            ? getImageUrl(tileId, 'png')
+            : getImageUrl(tileId, 'jpg');
+    }
+    
+    // Remove old source/layer if overwriting
+    if (isOverwriting) {
+      const layerId = `tile-image-layer-${tileId}`;
+      const sourceId = `tile-image-${tileId}`;
+      
+      if (map.getLayer(layerId)) {
+        map.removeLayer(layerId);
+      }
+      if (map.getSource(sourceId)) {
+        map.removeSource(sourceId);
+      }
+      
+      console.log(`Overwriting existing image for ${tileId}`);
+    }
+    
+    // Add image source to map
+    map.addSource(`tile-image-${tileId}`, {
+      type: 'image',
+      url: imageUrl,
+      coordinates: [
+        [tileMetadata.min_lng, tileMetadata.max_lat], // top-left
+        [tileMetadata.max_lng, tileMetadata.max_lat], // top-right
+        [tileMetadata.max_lng, tileMetadata.min_lat], // bottom-right
+        [tileMetadata.min_lng, tileMetadata.min_lat]  // bottom-left
+      ]
+    });
+    
+    // Add layer
+    map.addLayer({
+      id: `tile-image-layer-${tileId}`,
+      type: 'raster',
+      source: `tile-image-${tileId}`,
+      paint: {
+        'raster-opacity': lidarOpacity.value / 100,
+        'raster-fade-duration': 0
+      }
+    }, 'lidar-datum');
+    
+    setImagesOnMap(tileId);
+    
+    // Also cache the metadata if we received it
+    if (tileMetadata) {
+      setMetadata(tileId, tileMetadata);
+    }
   } catch (err) {
-    console.error(`Failed to load mound data for ${tileName}:`, err);
+    console.error(`Failed to load images for ${tileId}:`, err);
     throw err;
   }
 }
 
-// Legacy function - now loads PNG tiles
-async function loadLidarTiles() {
-  await loadPngTiles();
+// Load initial tiles for KNOWN_SITES
+async function loadInitialTiles() {
+  console.log('Loading initial tiles for known sites...');
+  
+  for (const tileName of TILE_NAMES) {
+    try {
+
+      // Fetch tile metadata by ID
+      const tileMetadata = await getTileById(tileName);
+      
+      // Cache the metadata
+      setMetadata(tileName, tileMetadata);
+      
+      // Only load if tile is ready and has images available
+      if (tileMetadata.status === 'ready' && (tileMetadata.png_available || tileMetadata.jpg_available)) {
+        await loadTileImages(tileName, tileMetadata);
+      } else {
+        console.warn(`Tile ${tileName} not ready or no images available`);
+      }
+    } catch (err) {
+      console.error(`Failed to load initial tile ${tileName}:`, err);
+      // Continue with other tiles even if one fails
+    }
+  }
+  
+  console.log(`Loaded ${getAllTileIdsWithImages().length} initial tiles`);
 }
 
-// UI handlers
+async function loadMoundData(tileId) {
+  if (isMoundDataCached(tileId)) {
+    console.log(`Mound data for ${tileId} already cached`);
+    return;
+  }
+  
+  setLoading(tileId, 'mound', true);
+  
+  try {
+    const buffer = await getTileMoundData(tileId);
+    const data = parseMoundBuffer(buffer);
+    setMoundData(tileId, data);
+    console.log(`Loaded mound data for ${tileId}`);
+  } catch (err) {
+    console.error(`Failed to load mound data for ${tileId}:`, err);
+    throw err;
+  } finally {
+    setLoading(tileId, 'mound', false);
+  }
+}
+
+// ============================================================================
+// CONTEXT MENU HANDLERS
+// ============================================================================
+
+async function handleContextMenu(e) {
+  e.preventDefault();
+  
+  const lng = e.lngLat.lng;
+  const lat = e.lngLat.lat;
+  
+  // Reset context menu state
+  contextMenu.value = {
+    visible: false,
+    x: e.point.x,
+    y: e.point.y,
+    lngLat: { lng, lat },
+    tileData: null,
+    imagesLoaded: false,
+    moundLoaded: false,
+    apiError: false
+  };
+  
+  // Try to fetch tile metadata from API
+  try {
+    const tileData = await getTileByCoordinates(lat, lng);
+    
+    if (tileData) {
+      // Cache the metadata
+      setMetadata(tileData.id, tileData);
+      
+      contextMenu.value.tileData = tileData;
+      contextMenu.value.imagesLoaded = areTileImagesLoaded(tileData.id);
+      contextMenu.value.moundLoaded = isMoundDataCached(tileData.id);
+    }
+  } catch (err) {
+    console.error('Failed to fetch tile info:', err);
+    contextMenu.value.apiError = true;
+  }
+  
+  // Show context menu
+  contextMenu.value.visible = true;
+}
+
+async function requestTileFromContextMenu() {
+  const { lng, lat } = contextMenu.value.lngLat;
+  contextMenu.value.visible = false;
+  
+  const requestId = `req-${nextRequestId++}`;
+  
+  // Initialize request tracking
+  tileRequests.value[requestId] = {
+    lat,
+    lng,
+    status: 'looking_up',
+    message: null,
+    tileId: null
+  };
+  
+  // Start SSE request
+  requestTileProcessing(
+    lat,
+    lng,
+    async (data) => {
+      // Update request status
+      tileRequests.value[requestId].status = data.status;
+      tileRequests.value[requestId].message = data.message || null;
+      
+      if (data.tile_id) {
+        tileRequests.value[requestId].tileId = data.tile_id;
+      }
+      
+      // On ready: load mound and open sandbox
+      if (data.status === 'ready' && data.tile_id) {
+        try {
+          await loadMoundData(data.tile_id);
+          await openSandboxWithTile(data.tile_id);
+        } catch (err) {
+          console.error('Failed to load mound after request:', err);
+          tileRequests.value[requestId].status = 'error';
+          tileRequests.value[requestId].message = 'Failed to load data';
+        }
+      }
+      
+      // Auto-dismiss after 10 seconds if complete
+      if (data.status === 'ready' || data.status === 'error') {
+        setTimeout(() => {
+          delete tileRequests.value[requestId];
+        }, 10000);
+      }
+    },
+    (error) => {
+      console.error('Request tile error:', error);
+      tileRequests.value[requestId].status = 'error';
+      tileRequests.value[requestId].message = 'Connection failed';
+      
+      setTimeout(() => {
+        delete tileRequests.value[requestId];
+      }, 10000);
+    }
+  );
+}
+
+async function loadImagesFromContextMenu() {
+  const tileData = contextMenu.value.tileData;
+  contextMenu.value.visible = false;
+  
+  if (tileData) {
+    try {
+      await loadTileImages(tileData.id, tileData);
+    } catch (err) {
+      console.error('Failed to load images:', err);
+    }
+  }
+}
+
+async function loadMoundFromContextMenu() {
+  const tileData = contextMenu.value.tileData;
+  contextMenu.value.visible = false;
+  
+  if (tileData) {
+    try {
+      await loadMoundData(tileData.id);
+    } catch (err) {
+      console.error('Failed to load mound data:', err);
+    }
+  }
+}
+
+async function openSandboxFromContextMenu() {
+  const tileData = contextMenu.value.tileData;
+  contextMenu.value.visible = false;
+  
+  if (tileData) {
+    await openSandboxWithTile(tileData.id);
+  }
+}
+
+function dismissTileRequest(requestId) {
+  delete tileRequests.value[requestId];
+}
+
+// ============================================================================
+// MAP LAYER CONTROLS
+// ============================================================================
+
 function updateBaseLayer() {
   if (!map) return;
   
@@ -825,25 +595,26 @@ function toggleSite(siteName) {
   const visible = visibleSites.value[siteName];
   const visibility = visible ? 'visible' : 'none';
   
-  // Toggle marker
   const markerLayerId = `site-marker-${siteName}`;
   if (map.getLayer(markerLayerId)) {
     map.setLayoutProperty(markerLayerId, 'visibility', visibility);
   }
   
-  // Toggle all overlay geometries for this site (could be multiple with different indices)
   const allLayers = map.getStyle().layers;
   allLayers.forEach(layer => {
-    // Match overlay fill layers: site-overlay-${siteName}-${idx}
     if (layer.id.startsWith(`site-overlay-${siteName}-`) && 
         !layer.id.includes('-outline-')) {
       map.setLayoutProperty(layer.id, 'visibility', visibility);
     }
-    // Match overlay outline layers: site-overlay-outline-${siteName}-${idx}
     if (layer.id.startsWith(`site-overlay-outline-${siteName}-`)) {
       map.setLayoutProperty(layer.id, 'visibility', visibility);
     }
   });
+  
+  const polylineLayerId = `site-polyline-${siteName}`;
+  if (map.getLayer(polylineLayerId)) {
+    map.setLayoutProperty(polylineLayerId, 'visibility', visibility);
+  }
 }
 
 function jumpToSite(site) {
@@ -870,8 +641,8 @@ function toggleLidar() {
   if (!map) return;
   
   const visibility = showLidar.value ? 'visible' : 'none';
-  for (const tileName of loadedPngTiles.value) {
-    const layerId = `png-tile-layer-${tileName}`;
+  for (const tileId of getAllTileIdsWithImages()) {
+    const layerId = `tile-image-layer-${tileId}`;
     if (map.getLayer(layerId)) {
       map.setLayoutProperty(layerId, 'visibility', visibility);
     }
@@ -882,61 +653,74 @@ function updateLidarOpacity() {
   if (!map) return;
   
   const opacity = lidarOpacity.value / 100;
-  for (const tileName of loadedPngTiles.value) {
-    const layerId = `png-tile-layer-${tileName}`;
+  for (const tileId of getAllTileIdsWithImages()) {
+    const layerId = `tile-image-layer-${tileId}`;
     if (map.getLayer(layerId)) {
       map.setPaintProperty(layerId, 'raster-opacity', opacity);
     }
   }
 }
 
+// ============================================================================
+// SANDBOX CONTROLS
+// ============================================================================
+
 function openSandbox() {
   sandboxVisible.value = true;
   
-  // If we have cached tile data, load it after sandbox mounts
   setTimeout(() => {
-    if (sandboxRef.value && Object.keys(tileCache.value).length > 0) {
-      const firstTile = Object.keys(tileCache.value)[0];
-      sandboxRef.value.loadTileData(tileCache.value[firstTile]);
+    const tilesWithMounds = getAllTileIdsWithMounds();
+    if (sandboxRef.value && tilesWithMounds.length > 0) {
+      const firstTileId = tilesWithMounds[0];
+      const firstTile = getMoundData(firstTileId);
+      if (firstTile) {
+        sandboxRef.value.loadTileData(firstTile);
+      }
     }
   }, 100);
 }
 
-// Open sandbox with a specific tile
-async function openSandboxWithTile(tileName) {
-  // Load mound data if not cached
-  if (!tileCache.value[tileName]) {
-    try {
-      await loadMoundData(tileName);
-    } catch (err) {
-      console.error('Failed to load tile for sandbox:', err);
-      return;
-    }
+async function openSandboxWithTile(tileId) {
+  if (!isMoundDataCached(tileId)) {
+    await loadMoundData(tileId);
   }
   
   sandboxVisible.value = true;
   
   setTimeout(() => {
-    if (sandboxRef.value) {
-      sandboxRef.value.loadTileData(tileCache.value[tileName]);
-      sandboxRef.value.setAvailableTiles(tileCache.value);
+    const moundData = getMoundData(tileId);
+    if (sandboxRef.value && moundData) {
+      sandboxRef.value.loadTileData(moundData, tileId);
     }
   }, 100);
 }
 
-function onRenderComplete(data) {
-  console.log('Render complete:', {
-    size: `${data.width}x${data.height}`,
-    renderTime: data.renderTime,
-    settings: data.settings
-  });
+function onRenderComplete(result) {
+  console.log('Render complete:', result);
+  currentTileData.value = result;
+  
+  // Result should contain: { dataURL, tileId, ... }
+  if (result.tileId && result.dataURL) {
+    const metadata = getMetadata(result.tileId);
+    if (metadata) {
+      // Load the sandbox-rendered image onto the map
+      loadTileImages(result.tileId, metadata, result.dataURL);
+    } else {
+      console.error('No metadata for rendered tile:', result.tileId);
+    }
+  } else {
+    console.error('Render complete but missing tileId or dataURL:', result);
+  }
 }
 
 function onRenderError(err) {
   console.error('Renderer error:', err);
 }
 
-// Geometry functions
+// ============================================================================
+// GEOMETRY DRAWING
+// ============================================================================
+
 function setDrawMode(mode) {
   if (drawMode.value === mode) {
     drawMode.value = null;
@@ -949,14 +733,12 @@ function setDrawMode(mode) {
     drawMode.value = mode;
     drawPoints.value = [];
     
-    // Remove old handler
     if (drawingHandler) {
       map.off('click', drawingHandler);
     }
     
-    // Add new handler
     drawingHandler = (e) => {
-      if (contextMenu.value.visible) return; // Ignore clicks while context menu is open
+      if (contextMenu.value.visible) return;
       
       drawPoints.value.push([e.lngLat.lng, e.lngLat.lat]);
       
@@ -996,7 +778,6 @@ function completeDrawing() {
   updateGeometryLayer();
   saveGeometry();
   
-  // Reset
   drawPoints.value = [];
   setDrawMode(null);
 }
@@ -1048,108 +829,22 @@ function clearAllGeometry() {
   }
 }
 
-// Request a tile for a specific location
-async function requestTile() {
-  const { lng, lat } = contextMenu.value.lngLat;
-  const stateKey = `${lat},${lng}`;
-  
-  // Initialize loading state
-  loadingState.value[stateKey] = 'looking_up';
-  
-  // Open SSE connection
-  const eventSource = new EventSource(`/tiles/request?lat=${lat}&lng=${lng}`);
-  
-  eventSource.onmessage = (event) => {
-    const data = JSON.parse(event.data);
-    
-    switch (data.status) {
-      case 'looking_up':
-        loadingState.value[stateKey] = 'looking_up';
-        break;
-        
-      case 'found':
-        loadingState.value[stateKey] = 'found';
-        break;
-        
-      case 'processing':
-        loadingState.value[stateKey] = 'processing';
-        break;
-        
-      case 'ready':
-        loadingState.value[stateKey] = 'complete';
-        // Load the tile data into cache
-        loadMoundData(data.tile_id);
-        eventSource.close();
-        // Clean up loading state after 10 seconds
-        setTimeout(() => {
-          delete loadingState.value[stateKey];
-        }, 10000);
-        break;
-        
-      case 'error':
-        loadingState.value[stateKey] = 'failed';
-        console.error('Tile request failed:', data.message);
-        // TODO: Show toast notification with error message
-        eventSource.close();
-        // Clean up loading state after 10 seconds
-        setTimeout(() => {
-          delete loadingState.value[stateKey];
-        }, 10000);
-        break;
-    }
-  };
-  
-  eventSource.onerror = (error) => {
-    loadingState.value[stateKey] = 'failed';
-    console.error('SSE connection error:', error);
-    // TODO: Show toast notification with error message
-    eventSource.close();
-    // Clean up loading state after 10 seconds
-    setTimeout(() => {
-      delete loadingState.value[stateKey];
-    }, 10000);
-  };
-  
-  // Close the context menu
-  contextMenu.value.visible = false;
+// ============================================================================
+// BIBLIOGRAPHY
+// ============================================================================
+
+function showBibliography(citationKey) {
+  highlightedCitation.value = citationKey;
+  bibliographyVisible.value = true;
 }
 
-// Load mound data for interactive shading
-async function loadTileFromContextMenu() {
-  const tileName = contextMenu.value.tileName;
-  contextMenu.value.visible = false;
-  
-  if (!tileName) {
-    console.error('No tile name available');
-    return;
-  }
-  
-  try {
-    await loadMoundData(tileName);
-    console.log(`Mound data loaded for ${tileName}, ready for shading sandbox`);
-  } catch (err) {
-    console.error('Failed to load mound data:', err);
-    // TODO: Show error toast
-  }
-}
-
-// Open shading sandbox for the tile at context menu location
-async function openSandboxFromContextMenu() {
-  const tileName = contextMenu.value.tileName;
-  contextMenu.value.visible = false;
-  
-  if (!tileName) {
-    console.error('No tile name available');
-    return;
-  }
-  
-  await openSandboxWithTile(tileName);
-}
+// ============================================================================
+// GEOMETRY LAYER UPDATES
+// ============================================================================
 
 function updateGeometryLayer() {
   if (!map || !map.getSource('geometry')) return;
   
-  // Add id property to each feature for MapLibre
   const dataWithIds = {
     ...geometryFeatures.value,
     features: geometryFeatures.value.features.map(f => ({
@@ -1164,9 +859,42 @@ function updateGeometryLayer() {
   map.getSource('geometry').setData(dataWithIds);
 }
 
-// Lifecycle
+// ============================================================================
+// LOCALSTORAGE PERSISTENCE
+// ============================================================================
+
+function saveGeometry() {
+  localStorage.setItem('hopewellGeometry', JSON.stringify(geometryFeatures.value));
+  localStorage.setItem('hopewellNextPinNumber', nextPinNumber.value.toString());
+  localStorage.setItem('hopewellNextFeatureId', nextFeatureId.value.toString());
+}
+
+function loadGeometry() {
+  const saved = localStorage.getItem('hopewellGeometry');
+  if (saved) {
+    try {
+      geometryFeatures.value = JSON.parse(saved);
+    } catch (e) {
+      console.error('Failed to load geometry:', e);
+    }
+  }
+  
+  const savedPinNumber = localStorage.getItem('hopewellNextPinNumber');
+  if (savedPinNumber) {
+    nextPinNumber.value = parseInt(savedPinNumber);
+  }
+  
+  const savedFeatureId = localStorage.getItem('hopewellNextFeatureId');
+  if (savedFeatureId) {
+    nextFeatureId.value = parseInt(savedFeatureId);
+  }
+}
+
+// ============================================================================
+// LIFECYCLE HOOKS
+// ============================================================================
+
 onMounted(() => {
-  // Load saved geometry
   loadGeometry();
   
   map = new maplibregl.Map({
@@ -1174,27 +902,26 @@ onMounted(() => {
     style: {
       version: 8,
       sources: {
-        'osm': {
+        osm: {
           type: 'raster',
           tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
           tileSize: 256,
           attribution: '© OpenStreetMap contributors'
         },
-        'satellite': {
+        satellite: {
           type: 'raster',
           tiles: [
             'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
           ],
           tileSize: 256,
-          attribution: 'Esri, Maxar, Earthstar Geographics'
+          attribution: '© Esri'
         }
       },
       layers: [
         {
           id: 'osm-layer',
           type: 'raster',
-          source: 'osm',
-          layout: { visibility: 'visible' }
+          source: 'osm'
         },
         {
           id: 'satellite-layer',
@@ -1213,24 +940,9 @@ onMounted(() => {
     zoom: 15
   });
 
-  // Context menu handler
-  map.on('contextmenu', (e) => {
-    e.preventDefault();
-    const tileInfo = getTileInfoAtPoint(e.lngLat.lng, e.lngLat.lat);
-    contextMenu.value = {
-      visible: true,
-      x: e.point.x,
-      y: e.point.y,
-      lngLat: e.lngLat,
-      hasTile: tileInfo.hasTile,
-      hasMound: tileInfo.hasMound,
-      tileName: tileInfo.tileName
-    };
-  });
+  map.on('contextmenu', handleContextMenu);
 
-  // Close context menu on regular click
   map.on('click', (e) => {
-    // Check if clicking on geometry features first
     const features = map.queryRenderedFeatures(e.point, {
       layers: ['geometry-pins', 'geometry-lines']
     });
@@ -1242,7 +954,7 @@ onMounted(() => {
       if (featureData) {
         const coords = featureData.geometry.type === 'Point' 
           ? featureData.geometry.coordinates 
-          : featureData.geometry.coordinates[0]; // Use first point of line
+          : featureData.geometry.coordinates[0];
           
         popup.value = {
           visible: true,
@@ -1260,18 +972,17 @@ onMounted(() => {
     contextMenu.value.visible = false;
   });
 
-  // Close menus on ESC
   document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape') {
       contextMenu.value.visible = false;
       popup.value.visible = false;
+      bibliographyVisible.value = false;
       if (drawMode.value) {
         setDrawMode(null);
       }
     }
   });
 
-  // Change cursor for clickable geometry
   map.on('mouseenter', 'geometry-pins', () => {
     map.getCanvas().style.cursor = 'pointer';
   });
@@ -1289,14 +1000,11 @@ onMounted(() => {
   });
 
   map.on('load', async () => {
-    // Initialize visibility state for all sites
     KNOWN_SITES.forEach(site => {
       visibleSites.value[site.name] = true;
     });
     
-    // Add historic site markers and overlays
     KNOWN_SITES.forEach(site => {
-      // Add marker
       const markerCoords = site.coordinates[0];
       map.addSource(`site-marker-${site.name}`, {
         type: 'geojson',
@@ -1326,7 +1034,6 @@ onMounted(() => {
         }
       });
       
-      // Add overlay geometry if present
       if (site.overlay) {
         site.overlay.forEach((geom, idx) => {
           map.addSource(`site-overlay-${site.name}-${idx}`, {
@@ -1356,13 +1063,12 @@ onMounted(() => {
             source: `site-overlay-${site.name}-${idx}`,
             paint: {
               'line-color': site.type === 'road_confirmed' ? '#4A9EFF' : '#ff6b6b',
-              'line-width': 2
+              'line-width': 4
             }
           });
         });
       }
       
-      // Add polyline for multi-coordinate sites
       if (site.coordinates.length > 1) {
         map.addSource(`site-polyline-${site.name}`, {
           type: 'geojson',
@@ -1387,7 +1093,6 @@ onMounted(() => {
         });
       }
       
-      // Add click handler for marker popups
       map.on('click', `site-marker-${site.name}`, (e) => {
         e.preventDefault();
         popup.value = {
@@ -1406,7 +1111,6 @@ onMounted(() => {
         };
       });
       
-      // Cursor pointer on hover
       map.on('mouseenter', `site-marker-${site.name}`, () => {
         map.getCanvas().style.cursor = 'pointer';
       });
@@ -1416,7 +1120,6 @@ onMounted(() => {
       });
     });
     
-    // Update popup position when map moves or zooms
     const updatePopupPosition = () => {
       if (popup.value.visible && popup.value.lngLat) {
         const point = map.project(popup.value.lngLat);
@@ -1428,13 +1131,11 @@ onMounted(() => {
     map.on('move', updatePopupPosition);
     map.on('zoom', updatePopupPosition);
 
-    // Add geometry source and layers
     map.addSource('geometry', {
       type: 'geojson',
       data: geometryFeatures.value
     });
 
-    // Lines and rays
     map.addLayer({
       id: 'geometry-lines',
       type: 'line',
@@ -1446,7 +1147,6 @@ onMounted(() => {
       }
     });
 
-    // Pins
     map.addLayer({
       id: 'geometry-pins',
       type: 'circle',
@@ -1454,13 +1154,12 @@ onMounted(() => {
       filter: ['==', ['get', 'type'], 'pin'],
       paint: {
         'circle-radius': 8,
-        'circle-color': '#ff0000',
+        'circle-color': '#ff0080',
         'circle-stroke-width': 2,
         'circle-stroke-color': '#ffffff'
       }
     });
 
-    // Pin labels
     map.addLayer({
       id: 'geometry-labels',
       type: 'symbol',
@@ -1469,16 +1168,15 @@ onMounted(() => {
       layout: {
         'text-field': ['get', 'number'],
         'text-size': 12,
-        'text-offset': [0, 0],
-        'text-anchor': 'center'
+        'text-offset': [0, 0]
       },
       paint: {
         'text-color': '#ffffff'
       }
     });
 
-    // Load PNG tiles (no sandbox needed for initial display)
-    await loadPngTiles();
+    // Load initial tiles for known sites
+    await loadInitialTiles();
   });
 });
 
@@ -1507,321 +1205,4 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
 }
-
-.layer-controls {
-  position: absolute;
-  bottom: 20px;
-  left: 20px;
-  background: white;
-  padding: 15px;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
-  font-family: Arial, sans-serif;
-  font-size: 14px;
-}
-
-.control-section {
-  margin-bottom: 10px;
-}
-
-.control-section:last-child {
-  margin-bottom: 0;
-}
-
-.control-section label {
-  display: block;
-  margin: 5px 0;
-  cursor: pointer;
-}
-
-.control-section label:first-child {
-  font-weight: bold;
-  margin-bottom: 8px;
-  cursor: default;
-}
-
-.control-section .section-header {
-  font-weight: bold;
-  margin-bottom: 8px;
-  user-select: none;
-}
-
-.subsection {
-  margin-left: 10px;
-  padding-left: 10px;
-  border-left: 2px solid #ddd;
-}
-
-.hide-all-btn {
-  width: 100%;
-  padding: 6px 10px;
-  margin: 8px 0;
-  background: #f5f5f5;
-  border: 1px solid #ddd;
-  border-radius: 3px;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.hide-all-btn:hover {
-  background: #e8e8e8;
-  border-color: #999;
-}
-
-.site-control {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 4px 0;
-}
-
-.site-control label {
-  flex: 1;
-  margin: 0 !important;
-  font-weight: normal !important;
-}
-
-.jump-btn {
-  padding: 4px 8px;
-  background: #4A9EFF;
-  color: white;
-  border: none;
-  border-radius: 3px;
-  font-size: 12px;
-  cursor: pointer;
-  transition: all 0.2s;
-  margin-left: 8px;
-}
-
-.jump-btn:hover {
-  background: #2E8FE3;
-}
-
-.jump-btn:active {
-  transform: scale(0.95);
-}
-
-.control-section input[type="radio"],
-.control-section input[type="checkbox"] {
-  margin-right: 8px;
-  cursor: pointer;
-}
-
-.sandbox-btn {
-  width: 100%;
-  padding: 10px;
-  margin-top: 10px;
-  background: #4A9EFF;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.sandbox-btn:hover {
-  background: #2E8FE3;
-}
-
-.sandbox-btn:active {
-  transform: scale(0.98);
-}
-
-.slider-control {
-  margin-top: 10px;
-  margin-left: 20px;
-}
-
-.slider-control label {
-  font-weight: normal !important;
-  margin-bottom: 5px !important;
-}
-
-.opacity-slider {
-  width: 100%;
-  cursor: pointer;
-}
-
-.geometry-toolbar {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  background: white;
-  padding: 10px;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.tool-btn {
-  padding: 10px 15px;
-  background: white;
-  border: 2px solid #ddd;
-  border-radius: 4px;
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s;
-  white-space: nowrap;
-}
-
-.tool-btn:hover {
-  background: #f5f5f5;
-  border-color: #999;
-}
-
-.tool-btn.active {
-  background: #4A9EFF;
-  color: white;
-  border-color: #4A9EFF;
-}
-
-.tool-btn.danger {
-  color: #d32f2f;
-}
-
-.tool-btn.danger:hover {
-  background: #ffebee;
-  border-color: #d32f2f;
-}
-
-.context-menu {
-  position: absolute;
-  background: white;
-  border-radius: 4px;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
-  z-index: 1000;
-  min-width: 200px;
-  overflow: hidden;
-}
-
-.context-menu-header {
-  padding: 10px 12px;
-  background: #f5f5f5;
-  font-size: 12px;
-  font-family: monospace;
-  border-bottom: 1px solid #ddd;
-  color: #666;
-}
-
-.context-menu-header .tile-name {
-  display: block;
-  margin-top: 4px;
-  font-size: 11px;
-  color: #999;
-}
-
-.context-menu-item {
-  display: block;
-  width: 100%;
-  padding: 10px 12px;
-  background: white;
-  border: none;
-  text-align: left;
-  font-size: 14px;
-  cursor: pointer;
-  transition: background 0.2s;
-}
-
-.context-menu-item:hover {
-  background: #f0f0f0;
-}
-
-.popup {
-  position: absolute;
-  background: white;
-  border-radius: 4px;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
-  z-index: 1000;
-  min-width: 180px;
-  max-width: 350px;
-  overflow: hidden;
-}
-
-.popup-content {
-  padding: 12px;
-  font-size: 14px;
-}
-
-.popup-content strong {
-  display: block;
-  margin-bottom: 8px;
-  color: #333;
-}
-
-.popup-content div {
-  margin: 4px 0;
-  font-size: 13px;
-  color: #666;
-}
-
-.site-popup {
-  max-width: 320px;
-}
-
-.site-type {
-  font-size: 11px !important;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: #999 !important;
-  margin-bottom: 8px !important;
-}
-
-.site-description {
-  line-height: 1.5;
-  color: #333 !important;
-  font-size: 13px !important;
-}
-
-.popup-btn {
-  display: block;
-  width: 100%;
-  padding: 8px;
-  margin-top: 10px;
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 3px;
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.popup-btn:hover {
-  background: #f5f5f5;
-}
-
-.popup-btn.danger {
-  color: #d32f2f;
-  border-color: #d32f2f;
-}
-
-.popup-btn.danger:hover {
-  background: #ffebee;
-}
-
-.popup-close {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  width: 24px;
-  height: 24px;
-  background: none;
-  border: none;
-  font-size: 20px;
-  line-height: 1;
-  cursor: pointer;
-  color: #999;
-  transition: color 0.2s;
-}
-
-.popup-close:hover {
-  color: #333;
-}
 </style>
\ No newline at end of file
diff --git a/ui/src/components/Bibliography.vue b/ui/src/components/Bibliography.vue
new file mode 100644
index 0000000..4953bb9
--- /dev/null
+++ b/ui/src/components/Bibliography.vue
@@ -0,0 +1,279 @@
+<template>
+  <div v-if="visible" class="bibliography-overlay" @click="handleOverlayClick">
+    <div class="bibliography-modal" @click.stop>
+      <!-- ============================================= -->
+      <!-- HEADER -->
+      <!-- ============================================= -->
+      <div class="bibliography-header">
+        <h2>Bibliography</h2>
+        <button class="close-btn" @click="$emit('close')" title="Close">×</button>
+      </div>
+      
+      <!-- ============================================= -->
+      <!-- CONTENT -->
+      <!-- ============================================= -->
+      <div class="bibliography-content">
+        <div 
+          v-for="(entry, key) in bibliography" 
+          :key="key" 
+          :class="['bibliography-entry', { highlighted: key === highlightedKey }]"
+          :id="`bib-${key}`"
+        >
+          <div class="citation-key">[{{ key }}]</div>
+          <div class="citation-text">
+            <template v-if="entry.type === 'article'">
+              <span class="authors">{{ formatAuthors(entry.author) }}</span>
+              ({{ entry.year }}).
+              <br/>
+              "{{ entry.title }}."
+              <em>{{ entry.journal }}</em><template v-if="entry.volume">, {{ entry.volume }}</template><template v-if="entry.number">({{ entry.number }})</template><template v-if="entry.pages">: {{ entry.pages }}</template>.
+            </template>
+            
+            <template v-else-if="entry.type === 'book'">
+              <span class="authors">{{ formatAuthors(entry.author) }}</span>
+              ({{ entry.year }}).
+              <br/>
+              <em>{{ entry.title }}</em>.
+              <template v-if="entry.series">{{ entry.series }}. </template>
+              {{ entry.publisher }}.
+            </template>
+            
+            <template v-else-if="entry.type === 'incollection'">
+              <span class="authors">{{ formatAuthors(entry.author) }}</span>
+              ({{ entry.year }}).
+              <br/>
+              "{{ entry.title }}."
+              In <em>{{ entry.booktitle }}</em><template v-if="entry.editor">, edited by {{ formatAuthors(entry.editor) }}</template>.
+              {{ entry.publisher }}.
+            </template>
+            
+            <template v-else-if="entry.type === 'misc'">
+              <span class="authors">{{ formatAuthors(entry.author) }}</span><template v-if="entry.year"> ({{ entry.year }})</template>.
+              <br/>
+              <template v-if="entry.url">
+                <a :href="entry.url" target="_blank" rel="noopener">{{ entry.title }}</a>
+              </template>
+              <template v-else>
+                <em>{{ entry.title }}</em>
+              </template>.
+            </template>
+            
+            <div v-if="entry.note" class="citation-note">{{ entry.note }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { watch, nextTick } from 'vue';
+import { BIBLIOGRAPHY } from '../data/bibliography.js';
+
+// ============================================================================
+// INTERFACE
+// ============================================================================
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true
+  },
+  highlightedKey: {
+    type: String,
+    default: null
+  }
+});
+
+const emit = defineEmits(['close']);
+
+// ============================================================================
+// DATA
+// ============================================================================
+
+const bibliography = BIBLIOGRAPHY;
+
+// ============================================================================
+// METHODS
+// ============================================================================
+
+function formatAuthors(authors) {
+  if (!authors || authors.length === 0) return '';
+  
+  if (authors.length === 1) {
+    return authors[0];
+  } else if (authors.length === 2) {
+    return `${authors[0]} and ${authors[1]}`;
+  } else {
+    return `${authors[0]} et al.`;
+  }
+}
+
+function handleOverlayClick() {
+  emit('close');
+}
+
+// ============================================================================
+// LIFECYCLE
+// ============================================================================
+
+// Scroll to highlighted entry when it changes
+watch(() => props.highlightedKey, (newKey) => {
+  if (newKey && props.visible) {
+    nextTick(() => {
+      const element = document.getElementById(`bib-${newKey}`);
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }
+    });
+  }
+});
+
+// Scroll to highlighted entry when modal opens
+watch(() => props.visible, (newVisible) => {
+  if (newVisible && props.highlightedKey) {
+    nextTick(() => {
+      const element = document.getElementById(`bib-${props.highlightedKey}`);
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }
+    });
+  }
+});
+</script>
+
+<style scoped>
+/* ============================================= */
+/* OVERLAY */
+/* ============================================= */
+
+.bibliography-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+  padding: 20px;
+}
+
+/* ============================================= */
+/* MODAL */
+/* ============================================= */
+
+.bibliography-modal {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+  max-width: 900px;
+  width: 100%;
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ============================================= */
+/* HEADER */
+/* ============================================= */
+
+.bibliography-header {
+  padding: 20px 24px;
+  border-bottom: 2px solid #eee;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.bibliography-header h2 {
+  margin: 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: #333;
+}
+
+.close-btn {
+  width: 32px;
+  height: 32px;
+  background: none;
+  border: none;
+  font-size: 28px;
+  line-height: 1;
+  cursor: pointer;
+  color: #999;
+  transition: color 0.2s;
+  padding: 0;
+}
+
+.close-btn:hover {
+  color: #333;
+}
+
+/* ============================================= */
+/* CONTENT */
+/* ============================================= */
+
+.bibliography-content {
+  padding: 24px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.bibliography-entry {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 4px;
+  padding: 12px;
+  border-radius: 4px;
+  transition: background-color 0.3s;
+}
+
+.bibliography-entry.highlighted {
+  background-color: #FFF9C4;
+  border-left: 4px solid #FBC02D;
+  padding-left: 8px;
+}
+
+.citation-key {
+  font-family: monospace;
+  font-size: 12px;
+  color: #666;
+  flex-shrink: 0;
+  min-width: 12rem;
+}
+
+.citation-text {
+  font-size: 14px;
+  line-height: 1.6;
+  color: #333;
+}
+
+.authors {
+  font-weight: 600;
+}
+
+.citation-note {
+  margin-top: 8px;
+  font-size: 13px;
+  color: #666;
+  font-style: italic;
+  padding-left: 16px;
+  border-left: 2px solid #ddd;
+}
+
+.citation-text a {
+  color: #4A9EFF;
+  text-decoration: none;
+}
+
+.citation-text a:hover {
+  text-decoration: underline;
+}
+
+.citation-text em {
+  font-style: italic;
+}
+</style>
\ No newline at end of file
diff --git a/ui/src/components/ContextMenu.vue b/ui/src/components/ContextMenu.vue
new file mode 100644
index 0000000..f3a5f96
--- /dev/null
+++ b/ui/src/components/ContextMenu.vue
@@ -0,0 +1,169 @@
+<template>
+  <div 
+    v-if="visible" 
+    class="context-menu"
+    :style="{ left: x + 'px', top: y + 'px' }"
+  >
+    <!-- ============================================= -->
+    <!-- HEADER - COORDINATES -->
+    <!-- ============================================= -->
+    <div class="context-menu-header">
+      {{ formatCoordinate(lngLat.lng, 'lng') }}, {{ formatCoordinate(lngLat.lat, 'lat') }}
+      <span v-if="tileData?.id" class="tile-name">{{ tileData.id }}</span>
+      <span v-if="apiError" class="tile-error">⚠️ Lookup failed</span>
+    </div>
+    
+    <!-- ============================================= -->
+    <!-- MENU ITEMS -->
+    <!-- ============================================= -->
+    
+    <!-- Always available -->
+    <button @click="$emit('dropPin')" class="context-menu-item">📍 Drop Pin</button>
+    <button @click="$emit('startMeasure')" class="context-menu-item">📏 Measure from here</button>
+    
+    <!-- State A: No tile exists (or error checking) -->
+    <button 
+      v-if="!tileData && !apiError" 
+      @click="$emit('requestTile')" 
+      class="context-menu-item"
+    >
+      📥 Request Tile
+    </button>
+    
+    <!-- State B: Tile exists but images not loaded -->
+    <button 
+      v-if="tileData && !imagesLoaded && (tileData.jpg_available || tileData.png_available)" 
+      @click="$emit('loadImages')" 
+      class="context-menu-item"
+    >
+      📦 Load Tile Images
+    </button>
+    
+    <!-- State C: Images loaded, but mound not loaded -->
+    <button 
+      v-if="tileData && !moundLoaded" 
+      @click="$emit('loadMound')" 
+      class="context-menu-item"
+    >
+      🔬 Load Interactive Data
+    </button>
+    
+    <!-- State D: Mound loaded, ready to open sandbox -->
+    <button 
+      v-if="moundLoaded" 
+      @click="$emit('openSandbox')" 
+      class="context-menu-item"
+    >
+      🔬 Open in Shading Sandbox
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { formatCoordinate } from '../utils/coordinates.js';
+
+// ============================================================================
+// INTERFACE
+// ============================================================================
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true
+  },
+  x: {
+    type: Number,
+    required: true
+  },
+  y: {
+    type: Number,
+    required: true
+  },
+  lngLat: {
+    type: Object, // { lng, lat }
+    required: true
+  },
+  tileData: {
+    type: Object, // Tile metadata from API
+    default: null
+  },
+  imagesLoaded: {
+    type: Boolean,
+    default: false
+  },
+  moundLoaded: {
+    type: Boolean,
+    default: false
+  },
+  apiError: {
+    type: Boolean,
+    default: false
+  }
+});
+
+defineEmits(['dropPin', 'startMeasure', 'requestTile', 'loadImages', 'loadMound', 'openSandbox']);
+</script>
+
+<style scoped>
+/* ============================================= */
+/* CONTEXT MENU CONTAINER */
+/* ============================================= */
+
+.context-menu {
+  position: absolute;
+  background: white;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
+  z-index: 1000;
+  min-width: 200px;
+  overflow: hidden;
+}
+
+/* ============================================= */
+/* HEADER */
+/* ============================================= */
+
+.context-menu-header {
+  padding: 10px 12px;
+  background: #f5f5f5;
+  font-size: 12px;
+  font-family: monospace;
+  border-bottom: 1px solid #ddd;
+  color: #666;
+}
+
+.context-menu-header .tile-name {
+  display: block;
+  margin-top: 4px;
+  font-size: 11px;
+  color: #999;
+}
+
+.context-menu-header .tile-error {
+  display: block;
+  margin-top: 4px;
+  font-size: 11px;
+  color: #f44336;
+  font-weight: 600;
+}
+
+/* ============================================= */
+/* MENU ITEMS */
+/* ============================================= */
+
+.context-menu-item {
+  display: block;
+  width: 100%;
+  padding: 10px 12px;
+  background: white;
+  border: none;
+  text-align: left;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.context-menu-item:hover {
+  background: #f0f0f0;
+}
+</style>
\ No newline at end of file
diff --git a/ui/src/components/FeaturePopup.vue b/ui/src/components/FeaturePopup.vue
new file mode 100644
index 0000000..3a0d9d8
--- /dev/null
+++ b/ui/src/components/FeaturePopup.vue
@@ -0,0 +1,230 @@
+<template>
+  <div 
+    v-if="visible"
+    class="popup"
+    :style="{ left: x + 'px', top: y + 'px' }"
+  >
+    <!-- ============================================= -->
+    <!-- POPUP CONTENT -->
+    <!-- ============================================= -->
+    <div class="popup-content">
+      <!-- PIN -->
+      <div v-if="type === 'pin'">
+        <strong>Pin #{{ feature.properties.number }}</strong>
+        <div>{{ formatCoordinate(feature.geometry.coordinates[0], 'lng') }}, {{ formatCoordinate(feature.geometry.coordinates[1], 'lat') }}</div>
+        <button @click="$emit('delete', feature.id)" class="popup-btn danger">Delete</button>
+      </div>
+      
+      <!-- LINE or RAY -->
+      <div v-else-if="type === 'line' || type === 'ray'">
+        <strong>{{ type === 'line' ? 'Line' : 'Ray' }}</strong>
+        <div>Length: {{ formatDistance(feature.properties.length, imperialUnits) }}</div>
+        <div>Bearing: {{ formatBearing(feature.properties.bearing) }}</div>
+        <button @click="$emit('delete', feature.id)" class="popup-btn danger">Delete</button>
+      </div>
+      
+      <!-- HISTORIC SITE -->
+      <div v-else-if="type === 'site'" class="site-popup">
+        <strong>{{ feature.properties.name }}</strong>
+        <div class="site-type">{{ feature.properties.type === 'road_confirmed' ? 'Confirmed Road Segment' : 'Earthwork' }}</div>
+        <div class="site-description">
+          <template v-for="(segment, idx) in parsedDescription" :key="idx">
+            <template v-if="segment.type === 'text'">{{ segment.content }}</template>
+            <a 
+              v-else-if="segment.type === 'citation'"
+              href="#"
+              @click.prevent="$emit('showBibliography', segment.key)"
+              class="citation-link"
+              :title="`View ${segment.key} in bibliography`"
+            >[{{ segment.key }}]</a>
+          </template>
+        </div>
+      </div>
+    </div>
+    
+    <!-- ============================================= -->
+    <!-- CLOSE BUTTON -->
+    <!-- ============================================= -->
+    <button @click="$emit('close')" class="popup-close">×</button>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { formatCoordinate, formatDistance, formatBearing } from '../utils/coordinates.js';
+import { parseCitations } from '../utils/citations.js';
+
+// ============================================================================
+// INTERFACE
+// ============================================================================
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true
+  },
+  x: {
+    type: Number,
+    required: true
+  },
+  y: {
+    type: Number,
+    required: true
+  },
+  type: {
+    type: String, // 'pin', 'line', 'ray', 'site'
+    default: null
+  },
+  feature: {
+    type: Object,
+    default: null
+  },
+  imperialUnits: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['close', 'delete', 'showBibliography']);
+
+// ============================================================================
+// COMPUTED
+// ============================================================================
+
+const parsedDescription = computed(() => {
+  if (props.type === 'site' && props.feature?.properties?.description) {
+    return parseCitations(props.feature.properties.description);
+  }
+  return [];
+});
+</script>
+
+<style scoped>
+/* ============================================= */
+/* POPUP CONTAINER */
+/* ============================================= */
+
+.popup {
+  position: absolute;
+  background: white;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
+  z-index: 1000;
+  min-width: 180px;
+  max-width: 350px;
+  overflow: hidden;
+}
+
+/* ============================================= */
+/* POPUP CONTENT */
+/* ============================================= */
+
+.popup-content {
+  padding: 12px;
+  font-size: 14px;
+}
+
+.popup-content strong {
+  display: block;
+  margin-bottom: 8px;
+  color: #333;
+}
+
+.popup-content div {
+  margin: 4px 0;
+  font-size: 13px;
+  color: #666;
+}
+
+/* ============================================= */
+/* SITE-SPECIFIC STYLING */
+/* ============================================= */
+
+.site-popup {
+  max-width: 320px;
+}
+
+.site-type {
+  font-size: 11px !important;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #999 !important;
+  margin-bottom: 8px !important;
+}
+
+.site-description {
+  line-height: 1.5;
+  color: #333 !important;
+  font-size: 13px !important;
+}
+
+.citation-link {
+  color: #4A9EFF;
+  text-decoration: none;
+  font-family: monospace;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+}
+
+.citation-link:hover {
+  color: #2E8FE3;
+  text-decoration: underline;
+}
+
+/* ============================================= */
+/* POPUP BUTTONS */
+/* ============================================= */
+
+.popup-btn {
+  display: block;
+  width: 100%;
+  padding: 8px;
+  margin-top: 10px;
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.popup-btn:hover {
+  background: #f5f5f5;
+}
+
+.popup-btn.danger {
+  color: #d32f2f;
+  border-color: #d32f2f;
+}
+
+.popup-btn.danger:hover {
+  background: #ffebee;
+}
+
+/* ============================================= */
+/* CLOSE BUTTON */
+/* ============================================= */
+
+.popup-close {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 24px;
+  height: 24px;
+  background: none;
+  border: none;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  color: #999;
+  transition: color 0.2s;
+}
+
+.popup-close:hover {
+  color: #333;
+}
+</style>
\ No newline at end of file
diff --git a/ui/src/components/GeometryToolbar.vue b/ui/src/components/GeometryToolbar.vue
new file mode 100644
index 0000000..d7354e1
--- /dev/null
+++ b/ui/src/components/GeometryToolbar.vue
@@ -0,0 +1,108 @@
+<template>
+  <div v-if="showGeometry" class="geometry-toolbar">
+    <!-- ============================================= -->
+    <!-- DRAWING TOOLS -->
+    <!-- ============================================= -->
+    <button 
+      :class="['tool-btn', { active: drawMode === 'line' }]"
+      @click="$emit('setDrawMode', 'line')"
+      title="Draw Line"
+    >
+      📏 Line
+    </button>
+    
+    <button 
+      :class="['tool-btn', { active: drawMode === 'ray' }]"
+      @click="$emit('setDrawMode', 'ray')"
+      title="Draw Ray"
+    >
+      ➡️ Ray
+    </button>
+    
+    <!-- ============================================= -->
+    <!-- CLEAR BUTTON -->
+    <!-- ============================================= -->
+    <button 
+      class="tool-btn danger"
+      @click="$emit('clearAll')"
+      title="Clear All Geometry"
+    >
+      🗑️ Clear
+    </button>
+  </div>
+</template>
+
+<script setup>
+// ============================================================================
+// INTERFACE
+// ============================================================================
+
+defineProps({
+  drawMode: {
+    type: String, // 'line', 'ray', or null
+    default: null
+  },
+  showGeometry: {
+    type: Boolean,
+    default: true
+  }
+});
+
+defineEmits(['setDrawMode', 'clearAll']);
+</script>
+
+<style scoped>
+/* ============================================= */
+/* TOOLBAR CONTAINER */
+/* ============================================= */
+
+.geometry-toolbar {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  background: white;
+  padding: 10px;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 100;
+}
+
+/* ============================================= */
+/* TOOL BUTTONS */
+/* ============================================= */
+
+.tool-btn {
+  padding: 10px 15px;
+  background: white;
+  border: 2px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+}
+
+.tool-btn:hover {
+  background: #f5f5f5;
+  border-color: #999;
+}
+
+.tool-btn.active {
+  background: #4A9EFF;
+  color: white;
+  border-color: #4A9EFF;
+}
+
+.tool-btn.danger {
+  color: #d32f2f;
+}
+
+.tool-btn.danger:hover {
+  background: #ffebee;
+  border-color: #d32f2f;
+}
+</style>
\ No newline at end of file
diff --git a/ui/src/components/MapControls.vue b/ui/src/components/MapControls.vue
new file mode 100644
index 0000000..6f57252
--- /dev/null
+++ b/ui/src/components/MapControls.vue
@@ -0,0 +1,356 @@
+<template>
+  <div class="layer-controls">
+    <!-- ============================================= -->
+    <!-- BASE MAP SELECTION -->
+    <!-- ============================================= -->
+    <div class="control-section">
+      <label>Base Map:</label>
+      <label>
+        <input 
+          type="radio" 
+          value="osm" 
+          :checked="baseLayer === 'osm'" 
+          @change="$emit('update:baseLayer', 'osm')"
+        > 
+        Street
+      </label>
+      <label>
+        <input 
+          type="radio" 
+          value="satellite" 
+          :checked="baseLayer === 'satellite'"
+          @change="$emit('update:baseLayer', 'satellite')"
+        > 
+        Satellite
+      </label>
+    </div>
+    
+    <!-- ============================================= -->
+    <!-- HISTORIC MARKERS -->
+    <!-- ============================================= -->
+    <div class="control-section">
+      <label 
+        class="section-header" 
+        @click="$emit('update:historicMarkersExpanded', !historicMarkersExpanded)"
+        style="cursor: pointer;"
+      >
+        {{ historicMarkersExpanded ? '▼' : '▶' }} Historic Markers
+      </label>
+      <div v-if="historicMarkersExpanded" class="subsection">
+        <button class="hide-all-btn" @click="$emit('toggleAllSites')">
+          {{ allHistoricMarkersHidden ? 'Show All' : 'Hide All' }}
+        </button>
+        <div v-for="site in sites" :key="site.name" class="site-control">
+          <label>
+            <input 
+              type="checkbox" 
+              :checked="visibleSites[site.name]"
+              @change="$emit('toggleSite', site.name)"
+            >
+            {{ site.name }}
+          </label>
+          <button 
+            class="jump-btn" 
+            @click="$emit('jumpToSite', site)" 
+            title="Jump to location"
+          >
+            📍
+          </button>
+        </div>
+      </div>
+    </div>
+    
+    <!-- ============================================= -->
+    <!-- LIDAR CONTROLS -->
+    <!-- ============================================= -->
+    <div class="control-section">
+      <label>
+        <input 
+          type="checkbox" 
+          :checked="showLidar"
+          @change="$emit('update:showLidar', !showLidar)"
+        >
+        Show Lidar
+      </label>
+      <div v-if="showLidar" class="slider-control">
+        <label>Opacity: {{ Math.round(lidarOpacity) }}%</label>
+        <input 
+          type="range" 
+          min="0" 
+          max="100" 
+          :value="lidarOpacity"
+          @input="$emit('update:lidarOpacity', $event.target.value)"
+          class="opacity-slider"
+        >
+      </div>
+    </div>
+    
+    <!-- ============================================= -->
+    <!-- GEOMETRY & UNITS -->
+    <!-- ============================================= -->
+    <div class="control-section">
+      <label>
+        <input 
+          type="checkbox" 
+          :checked="showGeometry"
+          @change="$emit('update:showGeometry', !showGeometry)"
+        >
+        Show Geometry
+      </label>
+      <label>
+        <input 
+          type="checkbox" 
+          :checked="imperialUnits"
+          @change="$emit('update:imperialUnits', !imperialUnits)"
+        >
+        Imperial Units
+      </label>
+    </div>
+    
+    <!-- ============================================= -->
+    <!-- SANDBOX BUTTON -->
+    <!-- ============================================= -->
+    <div class="control-section">
+      <button class="sandbox-btn" @click="$emit('openSandbox')">
+        Open Shading Sandbox
+      </button>
+    </div>
+    
+    <!-- ============================================= -->
+    <!-- TILE REQUEST NOTIFICATIONS -->
+    <!-- ============================================= -->
+    <TileRequestNotification
+      :requests="tileRequests"
+      @dismiss="(id) => $emit('dismissRequest', id)"
+    />
+  </div>
+</template>
+
+<script setup>
+import { KNOWN_SITES } from '../data/historicSites.js';
+import TileRequestNotification from './TileRequestNotification.vue';
+
+// ============================================================================
+// INTERFACE
+// ============================================================================
+
+defineProps({
+  baseLayer: {
+    type: String,
+    default: 'osm'
+  },
+  historicMarkersExpanded: {
+    type: Boolean,
+    default: true
+  },
+  visibleSites: {
+    type: Object,
+    required: true
+  },
+  allHistoricMarkersHidden: {
+    type: Boolean,
+    default: false
+  },
+  showLidar: {
+    type: Boolean,
+    default: true
+  },
+  lidarOpacity: {
+    type: Number,
+    default: 80
+  },
+  showGeometry: {
+    type: Boolean,
+    default: true
+  },
+  imperialUnits: {
+    type: Boolean,
+    default: false
+  },
+  tileRequests: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+defineEmits([
+  'update:baseLayer',
+  'update:historicMarkersExpanded',
+  'update:showLidar',
+  'update:lidarOpacity',
+  'update:showGeometry',
+  'update:imperialUnits',
+  'toggleSite',
+  'jumpToSite',
+  'toggleAllSites',
+  'openSandbox',
+  'dismissRequest'
+]);
+
+// ============================================================================
+// DATA
+// ============================================================================
+
+const sites = KNOWN_SITES;
+</script>
+
+<style scoped>
+/* ============================================= */
+/* CONTROLS CONTAINER */
+/* ============================================= */
+
+.layer-controls {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background: white;
+  padding: 15px;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+  z-index: 100;
+  max-width: 250px;
+  font-size: 14px;
+}
+
+/* ============================================= */
+/* CONTROL SECTIONS */
+/* ============================================= */
+
+.control-section {
+  margin-bottom: 10px;
+}
+
+.control-section:last-child {
+  margin-bottom: 0;
+}
+
+.control-section label {
+  display: block;
+  margin: 5px 0;
+  cursor: pointer;
+}
+
+.control-section label:first-child {
+  font-weight: bold;
+  margin-bottom: 8px;
+  cursor: default;
+}
+
+.control-section .section-header {
+  font-weight: bold;
+  margin-bottom: 8px;
+  user-select: none;
+}
+
+.control-section input[type="radio"],
+.control-section input[type="checkbox"] {
+  margin-right: 8px;
+  cursor: pointer;
+}
+
+/* ============================================= */
+/* SUBSECTIONS (Historic Markers) */
+/* ============================================= */
+
+.subsection {
+  margin-left: 10px;
+  padding-left: 10px;
+  border-left: 2px solid #ddd;
+}
+
+.hide-all-btn {
+  width: 100%;
+  padding: 6px 10px;
+  margin: 8px 0;
+  background: #f5f5f5;
+  border: 1px solid #ddd;
+  border-radius: 3px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.hide-all-btn:hover {
+  background: #e8e8e8;
+  border-color: #999;
+}
+
+.site-control {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 4px 0;
+}
+
+.site-control label {
+  flex: 1;
+  margin: 0 !important;
+  font-weight: normal !important;
+}
+
+.jump-btn {
+  padding: 4px 8px;
+  background: #4A9EFF;
+  color: white;
+  border: none;
+  border-radius: 3px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  margin-left: 8px;
+}
+
+.jump-btn:hover {
+  background: #2E8FE3;
+}
+
+.jump-btn:active {
+  transform: scale(0.95);
+}
+
+/* ============================================= */
+/* SLIDER CONTROLS */
+/* ============================================= */
+
+.slider-control {
+  margin-top: 10px;
+  margin-left: 20px;
+}
+
+.slider-control label {
+  font-weight: normal !important;
+  margin-bottom: 5px !important;
+}
+
+.opacity-slider {
+  width: 100%;
+  cursor: pointer;
+}
+
+/* ============================================= */
+/* SANDBOX BUTTON */
+/* ============================================= */
+
+.sandbox-btn {
+  width: 100%;
+  padding: 10px;
+  margin-top: 10px;
+  background: #4A9EFF;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.sandbox-btn:hover {
+  background: #2E8FE3;
+}
+
+.sandbox-btn:active {
+  transform: scale(0.98);
+}
+</style>
\ No newline at end of file
diff --git a/ui/src/ShadingSandbox.vue b/ui/src/components/ShadingSandbox.vue
similarity index 99%
rename from ui/src/ShadingSandbox.vue
rename to ui/src/components/ShadingSandbox.vue
index f934149..47ae5a1 100644
--- a/ui/src/ShadingSandbox.vue
+++ b/ui/src/components/ShadingSandbox.vue
@@ -162,6 +162,7 @@ const tileLoaded = ref(false);
 const isRendering = ref(false);
 const lastRenderedImage = ref(null);
 const selectedQuality = ref(1024);
+const tileId = ref(null);
 
 // Settings
 const settings = reactive({
@@ -304,11 +305,12 @@ const handleResize = () => {
 };
 
 // Load tile data
-const loadTileData = (tileData) => {
+const loadTileData = (tileData, newTileId) => {
   if (!scene) {
     console.error('Three.js not initialized');
     return false;
   }
+  tileId.value = newTileId;
 
   // Remove old mesh
   if (mesh) {
@@ -539,6 +541,7 @@ const renderTile = async () => {
     renderStats.value.lastRenderTime = renderTime;
 
     emit('renderComplete', {
+      tileId: tileId.value,
       dataURL,
       settings: { ...settings },
       size,
@@ -573,7 +576,7 @@ const renderTileWithSettings = async (tileData, renderSettings, resolution = 102
     Object.assign(settings, renderSettings);
 
     // Load tile
-    const loaded = loadTileData(tileData);
+    const loaded = loadTileData(tileData, null);
     if (!loaded) {
       return { success: false, error: 'Failed to load tile' };
     }
diff --git a/ui/src/components/TileRequestNotification.vue b/ui/src/components/TileRequestNotification.vue
new file mode 100644
index 0000000..9e0ac27
--- /dev/null
+++ b/ui/src/components/TileRequestNotification.vue
@@ -0,0 +1,224 @@
+<template>
+  <div v-if="activeRequests.length > 0" class="tile-notifications">
+    <!-- ============================================= -->
+    <!-- HEADER -->
+    <!-- ============================================= -->
+    <div class="notifications-header">
+      Tile Requests
+    </div>
+    
+    <!-- ============================================= -->
+    <!-- ACTIVE REQUESTS -->
+    <!-- ============================================= -->
+    <div 
+      v-for="request in activeRequests" 
+      :key="request.id"
+      :class="['notification-item', `status-${request.status}`]"
+    >
+      <div class="notification-content">
+        <div class="notification-location">
+          {{ formatLocation(request.lat, request.lng) }}
+        </div>
+        <div class="notification-status">
+          <span class="status-icon">{{ getStatusIcon(request.status) }}</span>
+          <span class="status-text">{{ getStatusText(request.status) }}</span>
+        </div>
+        <div v-if="request.message" class="notification-message">
+          {{ request.message }}
+        </div>
+      </div>
+      
+      <!-- Close button for completed/failed requests -->
+      <button 
+        v-if="request.status === 'ready' || request.status === 'error'"
+        @click="$emit('dismiss', request.id)"
+        class="dismiss-btn"
+        title="Dismiss"
+      >
+        ×
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+// ============================================================================
+// INTERFACE
+// ============================================================================
+
+const props = defineProps({
+  requests: {
+    type: Object, // { requestId: { lat, lng, status, message, tileId } }
+    required: true
+  }
+});
+
+defineEmits(['dismiss']);
+
+// ============================================================================
+// COMPUTED
+// ============================================================================
+
+const activeRequests = computed(() => {
+  return Object.entries(props.requests).map(([id, data]) => ({
+    id,
+    ...data
+  }));
+});
+
+// ============================================================================
+// METHODS
+// ============================================================================
+
+function formatLocation(lat, lng) {
+  return `${lat.toFixed(4)}, ${lng.toFixed(4)}`;
+}
+
+function getStatusIcon(status) {
+  switch (status) {
+    case 'looking_up': return '🔍';
+    case 'found': return '✓';
+    case 'processing': return '⚙️';
+    case 'ready': return '✅';
+    case 'error': return '❌';
+    default: return '•';
+  }
+}
+
+function getStatusText(status) {
+  switch (status) {
+    case 'looking_up': return 'Finding tile...';
+    case 'found': return 'Tile found';
+    case 'processing': return 'Processing...';
+    case 'ready': return 'Ready!';
+    case 'error': return 'Failed';
+    default: return status;
+  }
+}
+</script>
+
+<style scoped>
+/* ============================================= */
+/* NOTIFICATIONS CONTAINER */
+/* ============================================= */
+
+.tile-notifications {
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 2px solid #ddd;
+}
+
+/* ============================================= */
+/* HEADER */
+/* ============================================= */
+
+.notifications-header {
+  font-weight: 600;
+  font-size: 13px;
+  color: #666;
+  margin-bottom: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* ============================================= */
+/* NOTIFICATION ITEMS */
+/* ============================================= */
+
+.notification-item {
+  background: #f9f9f9;
+  border-radius: 4px;
+  padding: 10px;
+  margin-bottom: 8px;
+  border-left: 3px solid #ccc;
+  position: relative;
+  transition: all 0.3s;
+}
+
+.notification-item.status-looking_up {
+  border-left-color: #4A9EFF;
+  background: #f0f7ff;
+}
+
+.notification-item.status-found {
+  border-left-color: #4CAF50;
+  background: #f1f8f4;
+}
+
+.notification-item.status-processing {
+  border-left-color: #FF9800;
+  background: #fff8f0;
+}
+
+.notification-item.status-ready {
+  border-left-color: #4CAF50;
+  background: #f1f8f4;
+}
+
+.notification-item.status-error {
+  border-left-color: #f44336;
+  background: #fff0f0;
+}
+
+/* ============================================= */
+/* NOTIFICATION CONTENT */
+/* ============================================= */
+
+.notification-content {
+  padding-right: 24px; /* Space for dismiss button */
+}
+
+.notification-location {
+  font-family: monospace;
+  font-size: 11px;
+  color: #999;
+  margin-bottom: 4px;
+}
+
+.notification-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 2px;
+}
+
+.status-icon {
+  font-size: 14px;
+}
+
+.notification-message {
+  font-size: 12px;
+  color: #666;
+  margin-top: 4px;
+  font-style: italic;
+}
+
+/* ============================================= */
+/* DISMISS BUTTON */
+/* ============================================= */
+
+.dismiss-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 20px;
+  height: 20px;
+  background: none;
+  border: none;
+  font-size: 18px;
+  line-height: 1;
+  cursor: pointer;
+  color: #999;
+  transition: color 0.2s;
+  padding: 0;
+}
+
+.dismiss-btn:hover {
+  color: #333;
+}
+</style>
\ No newline at end of file
diff --git a/ui/src/utils/api.js b/ui/src/utils/api.js
new file mode 100644
index 0000000..980ede2
--- /dev/null
+++ b/ui/src/utils/api.js
@@ -0,0 +1,197 @@
+// ============================================================================
+// API UTILITIES
+// All backend API interactions for the Hopewell Road Lidar application
+// ============================================================================
+
+const API_BASE = ''; // Same origin
+
+// ============================================================================
+// TILE METADATA API
+// ============================================================================
+
+/**
+ * Get tile metadata by coordinates
+ * @param {number} lat - Latitude
+ * @param {number} lng - Longitude
+ * @returns {Promise<Object|null>} Tile metadata or null if not found
+ */
+export async function getTileByCoordinates(lat, lng) {
+  try {
+    const response = await fetch(`${API_BASE}/api/meta/tile?lat=${lat}&lng=${lng}`);
+    
+    if (response.status === 404) {
+      return null; // Tile doesn't exist
+    }
+    
+    if (!response.ok) {
+      throw new Error(`API error: ${response.status}`);
+    }
+    
+    return await response.json();
+  } catch (err) {
+    console.error('Failed to fetch tile metadata:', err);
+    throw err;
+  }
+}
+
+/**
+ * Get tile metadata by ID
+ * @param {string} tileId - Tile identifier
+ * @returns {Promise<Object>} Tile metadata
+ */
+export async function getTileById(tileId) {
+  try {
+    const response = await fetch(`${API_BASE}/api/meta/tile/${tileId}`);
+    
+    if (!response.ok) {
+      throw new Error(`API error: ${response.status}`);
+    }
+    
+    return await response.json();
+  } catch (err) {
+    console.error('Failed to fetch tile by ID:', err);
+    throw err;
+  }
+}
+
+// ============================================================================
+// TILE REQUEST API (SSE)
+// ============================================================================
+
+/**
+ * Request tile processing via Server-Sent Events
+ * @param {number} lat - Latitude
+ * @param {number} lng - Longitude
+ * @param {Function} onMessage - Callback for status updates
+ * @param {Function} onError - Callback for errors
+ * @returns {EventSource} The EventSource connection (call .close() to cancel)
+ */
+export function requestTileProcessing(lat, lng, onMessage, onError) {
+  const eventSource = new EventSource(`${API_BASE}/tiles/request?lat=${lat}&lng=${lng}`);
+  
+  eventSource.onmessage = (event) => {
+    try {
+      const data = JSON.parse(event.data);
+      onMessage(data);
+      
+      // Auto-close on terminal states
+      if (data.status === 'ready' || data.status === 'error') {
+        eventSource.close();
+      }
+    } catch (err) {
+      console.error('Failed to parse SSE message:', err);
+      onError(err);
+      eventSource.close();
+    }
+  };
+  
+  eventSource.onerror = (error) => {
+    console.error('SSE connection error:', error);
+    onError(error);
+    eventSource.close();
+  };
+  
+  return eventSource;
+}
+
+// ============================================================================
+// TILE FILE FETCHING
+// ============================================================================
+// NOTE: Image URL generation is now in tileCache.js via getImageUrl()
+// This keeps all cache-related logic in one place
+
+/**
+ * Fetch tile MOUND data (binary point cloud)
+ * @param {string} tileId - Tile identifier
+ * @returns {Promise<ArrayBuffer>} Binary mound data
+ */
+export async function getTileMoundData(tileId) {
+  try {
+    const response = await fetch(`${API_BASE}/tiles/mound/${tileId}.mound`);
+    
+    if (!response.ok) {
+      throw new Error(`Failed to fetch mound data: ${response.status}`);
+    }
+    
+    return await response.arrayBuffer();
+  } catch (err) {
+    console.error('Failed to fetch mound data:', err);
+    throw err;
+  }
+}
+
+// ============================================================================
+// GEOMETRY SHARING API
+// ============================================================================
+
+/**
+ * Share geometry (create shareable link)
+ * @param {Object} geojson - GeoJSON feature
+ * @returns {Promise<string>} Share ID
+ */
+export async function shareGeometry(geojson) {
+  try {
+    const response = await fetch(`${API_BASE}/api/share`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ geojson })
+    });
+    
+    if (!response.ok) {
+      throw new Error(`Failed to share geometry: ${response.status}`);
+    }
+    
+    const data = await response.json();
+    return data.id;
+  } catch (err) {
+    console.error('Failed to share geometry:', err);
+    throw err;
+  }
+}
+
+/**
+ * Get shared geometry by ID
+ * @param {string} shareId - Share identifier
+ * @returns {Promise<Object>} GeoJSON feature
+ */
+export async function getSharedGeometry(shareId) {
+  try {
+    const response = await fetch(`${API_BASE}/api/share/${shareId}`);
+    
+    if (!response.ok) {
+      throw new Error(`Failed to fetch shared geometry: ${response.status}`);
+    }
+    
+    const data = await response.json();
+    return data.geojson;
+  } catch (err) {
+    console.error('Failed to fetch shared geometry:', err);
+    throw err;
+  }
+}
+
+// ============================================================================
+// HEALTH CHECK
+// ============================================================================
+
+/**
+ * Check API health
+ * @returns {Promise<boolean>} True if API is healthy
+ */
+export async function checkHealth() {
+  try {
+    const response = await fetch(`${API_BASE}/health`);
+    
+    if (!response.ok) {
+      return false;
+    }
+    
+    const data = await response.json();
+    return data.status === 'ok';
+  } catch (err) {
+    console.error('Health check failed:', err);
+    return false;
+  }
+}
\ No newline at end of file
diff --git a/ui/src/batch-renderer.js b/ui/src/utils/batch-renderer.js
similarity index 100%
rename from ui/src/batch-renderer.js
rename to ui/src/utils/batch-renderer.js
diff --git a/ui/src/utils/citations.js b/ui/src/utils/citations.js
new file mode 100644
index 0000000..04c9120
--- /dev/null
+++ b/ui/src/utils/citations.js
@@ -0,0 +1,73 @@
+// ============================================================================
+// CITATION PARSING UTILITIES
+// ============================================================================
+
+/**
+ * Parse text containing \cite{key} citations and convert to structured format
+ * Returns array of text segments and citation keys for rendering
+ * 
+ * Example input: "This is text \\cite{lepper_1995} more text \\cite{schwarz_2016}."
+ * Example output: [
+ *   { type: 'text', content: 'This is text ' },
+ *   { type: 'citation', key: 'lepper_1995' },
+ *   { type: 'text', content: ' more text ' },
+ *   { type: 'citation', key: 'schwarz_2016' },
+ *   { type: 'text', content: '.' }
+ * ]
+ */
+export function parseCitations(text) {
+  if (!text) return [];
+  
+  const segments = [];
+  const citationRegex = /\\cite\{([^}]+)\}/g;
+  let lastIndex = 0;
+  let match;
+  
+  while ((match = citationRegex.exec(text)) !== null) {
+    // Add text before citation
+    if (match.index > lastIndex) {
+      segments.push({
+        type: 'text',
+        content: text.substring(lastIndex, match.index)
+      });
+    }
+    
+    // Add citation
+    segments.push({
+      type: 'citation',
+      key: match[1]
+    });
+    
+    lastIndex = match.index + match[0].length;
+  }
+  
+  // Add remaining text
+  if (lastIndex < text.length) {
+    segments.push({
+      type: 'text',
+      content: text.substring(lastIndex)
+    });
+  }
+  
+  return segments;
+}
+
+/**
+ * Extract all citation keys from text
+ * Returns array of unique citation keys
+ */
+export function extractCitationKeys(text) {
+  if (!text) return [];
+  
+  const citationRegex = /\\cite\{([^}]+)\}/g;
+  const keys = [];
+  let match;
+  
+  while ((match = citationRegex.exec(text)) !== null) {
+    if (!keys.includes(match[1])) {
+      keys.push(match[1]);
+    }
+  }
+  
+  return keys;
+}
\ No newline at end of file
diff --git a/ui/src/utils/coordinates.js b/ui/src/utils/coordinates.js
new file mode 100644
index 0000000..ebb4887
--- /dev/null
+++ b/ui/src/utils/coordinates.js
@@ -0,0 +1,42 @@
+// ============================================================================
+// COORDINATE & DISTANCE FORMATTING UTILITIES
+// ============================================================================
+
+/**
+ * Format coordinate to 6 decimal places (±11cm precision)
+ */
+export function formatCoordinate(value, type) {
+  const dir = type === 'lat' 
+    ? (value >= 0 ? 'N' : 'S')
+    : (value >= 0 ? 'E' : 'W');
+  return `${Math.abs(value).toFixed(6)}°${dir}`;
+}
+
+/**
+ * Format distance in meters or feet based on unit preference
+ */
+export function formatDistance(meters, useImperial = false) {
+  if (useImperial) {
+    const feet = meters * 3.28084;
+    if (feet < 5280) {
+      return `${feet.toFixed(1)} ft`;
+    } else {
+      const miles = feet / 5280;
+      return `${miles.toFixed(2)} mi`;
+    }
+  } else {
+    if (meters < 1000) {
+      return `${meters.toFixed(1)} m`;
+    } else {
+      const km = meters / 1000;
+      return `${km.toFixed(2)} km`;
+    }
+  }
+}
+
+/**
+ * Format bearing angle
+ */
+export function formatBearing(degrees) {
+  return `${degrees.toFixed(1)}°`;
+}
\ No newline at end of file
diff --git a/ui/src/utils/geometry.js b/ui/src/utils/geometry.js
new file mode 100644
index 0000000..0557c4e
--- /dev/null
+++ b/ui/src/utils/geometry.js
@@ -0,0 +1,59 @@
+// ============================================================================
+// GEOMETRY CALCULATION UTILITIES
+// ============================================================================
+
+/**
+ * Calculate distance between two points in meters using Haversine formula
+ */
+export function calculateDistance(lng1, lat1, lng2, lat2) {
+  const R = 6371000; // Earth's radius in meters
+  const phi_1 = lat1 * Math.PI / 180;
+  const phi_2 = lat2 * Math.PI / 180;
+  const delta_phi = (lat2 - lat1) * Math.PI / 180;
+  const delta_lambda = (lng2 - lng1) * Math.PI / 180;
+
+  const a = Math.sin(delta_phi / 2) * Math.sin(delta_phi / 2) +
+            Math.cos(phi_1) * Math.cos(phi_2) *
+            Math.sin(delta_lambda / 2) * Math.sin(delta_lambda / 2);
+  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+
+  return R * c; // Distance in meters
+}
+
+/**
+ * Calculate bearing between two points in degrees (0-360)
+ */
+export function calculateBearing(lng1, lat1, lng2, lat2) {
+  const phi_1 = lat1 * Math.PI / 180;
+  const phi_2 = lat2 * Math.PI / 180;
+  const delta_lambda = (lng2 - lng1) * Math.PI / 180;
+
+  const y = Math.sin(delta_lambda) * Math.cos(phi_2);
+  const x = Math.cos(phi_1) * Math.sin(phi_2) -
+            Math.sin(phi_1) * Math.cos(phi_2) * Math.cos(delta_lambda);
+  const theta = Math.atan2(y, x);
+
+  return (theta * 180 / Math.PI + 360) % 360; // Bearing in degrees
+}
+
+/**
+ * Extend a line from point1 through point2 to a far distance (100km)
+ * Used for ray drawing
+ */
+export function extendRay(lng1, lat1, lng2, lat2, bounds) {
+  const bearing = calculateBearing(lng1, lat1, lng2, lat2);
+  const bearingRad = bearing * Math.PI / 180;
+  
+  // Calculate a far point (100km away)
+  const R = 6371000; // Earth's radius in meters
+  const d = 100000; // 100km
+  const phi_1 = lat1 * Math.PI / 180;
+  const labmda_1 = lng1 * Math.PI / 180;
+  
+  const phi_2 = Math.asin(Math.sin(phi_1) * Math.cos(d / R) +
+                       Math.cos(phi_1) * Math.sin(d / R) * Math.cos(bearingRad));
+  const labmda_2 = labmda_1 + Math.atan2(Math.sin(bearingRad) * Math.sin(d / R) * Math.cos(phi_1),
+                             Math.cos(d / R) - Math.sin(phi_1) * Math.sin(phi_2));
+  
+  return [labmda_2 * 180 / Math.PI, phi_2 * 180 / Math.PI];
+}
\ No newline at end of file
diff --git a/ui/src/utils/tileCache.js b/ui/src/utils/tileCache.js
new file mode 100644
index 0000000..7d66bf4
--- /dev/null
+++ b/ui/src/utils/tileCache.js
@@ -0,0 +1,301 @@
+// ============================================================================
+// TILE CACHE SYSTEM
+// Centralized storage and lookup for all tile-related data
+// ============================================================================
+
+import { ref } from 'vue';
+
+// ============================================================================
+// CACHE STORAGE
+// ============================================================================
+
+// Metadata from API - keyed by tile ID
+// Entry: { id, status, min_lat, max_lat, min_lng, max_lng, error_message, 
+//          jpg_available, png_available, created_at, updated_at }
+const metadataCache = ref(new Map());
+
+// Mound data - keyed by tile ID
+// Entry: { positions: Float32Array, indices: Uint32Array, bounds: {...} }
+const moundCache = ref(new Map());
+
+// Loading state tracker - keyed by tile ID
+// Entry: { metadata: bool, mound: bool, jpg: bool, png: bool }
+const loadingState = ref(new Map());
+
+// Images loaded on map - keyed by tile ID
+// Simple Set tracking which tiles have their images rendered
+const imagesOnMap = ref(new Set());
+
+// ============================================================================
+// METADATA METHODS
+// ============================================================================
+
+/**
+ * Get tile metadata by ID
+ * @param {string} tileId 
+ * @returns {Object|null} Metadata object or null if not cached
+ */
+export function getMetadata(tileId) {
+  return metadataCache.value.get(tileId) || null;
+}
+
+/**
+ * Store tile metadata
+ * @param {string} tileId 
+ * @param {Object} metadata - API metadata object
+ */
+export function setMetadata(tileId, metadata) {
+  metadataCache.value.set(tileId, metadata);
+}
+
+/**
+ * Find tile ID by coordinates (linear scan with bounds check)
+ * @param {number} lat 
+ * @param {number} lng 
+ * @returns {string|null} Tile ID or null if no tile contains these coordinates
+ */
+export function findTileByCoords(lat, lng) {
+  for (const [tileId, meta] of metadataCache.value) {
+    if (lat >= meta.min_lat && lat <= meta.max_lat &&
+        lng >= meta.min_lng && lng <= meta.max_lng) {
+      return tileId;
+    }
+  }
+  return null;
+}
+
+/**
+ * Check if metadata is cached for a tile
+ * @param {string} tileId 
+ * @returns {boolean}
+ */
+export function hasMetadata(tileId) {
+  return metadataCache.value.has(tileId);
+}
+
+// ============================================================================
+// MOUND DATA METHODS
+// ============================================================================
+
+/**
+ * Get mound data for a tile
+ * @param {string} tileId 
+ * @returns {Object|null} Mound data object or null if not cached
+ */
+export function getMoundData(tileId) {
+  return moundCache.value.get(tileId) || null;
+}
+
+/**
+ * Store mound data for a tile
+ * @param {string} tileId 
+ * @param {Object} moundData - { positions, indices, bounds }
+ */
+export function setMoundData(tileId, moundData) {
+  moundCache.value.set(tileId, moundData);
+}
+
+/**
+ * Check if mound data is cached for a tile
+ * @param {string} tileId 
+ * @returns {boolean}
+ */
+export function hasMoundData(tileId) {
+  return moundCache.value.has(tileId);
+}
+
+// ============================================================================
+// IMAGE METHODS
+// ============================================================================
+
+/**
+ * Get image URL for a tile
+ * @param {string} tileId 
+ * @param {string} type - 'jpg' or 'png'
+ * @returns {string} Image URL
+ */
+export function getImageUrl(tileId, type) {
+  const API_BASE = ''; // Same origin
+  return `${API_BASE}/tiles/${type}/${tileId}.${type}`;
+}
+
+/**
+ * Mark tile images as loaded on map
+ * @param {string} tileId 
+ */
+export function setImagesOnMap(tileId) {
+  imagesOnMap.value.add(tileId);
+}
+
+/**
+ * Check if tile images are on the map
+ * @param {string} tileId 
+ * @returns {boolean}
+ */
+export function areImagesOnMap(tileId) {
+  return imagesOnMap.value.has(tileId);
+}
+
+/**
+ * Remove tile images from map tracking
+ * @param {string} tileId 
+ */
+export function removeImagesFromMap(tileId) {
+  imagesOnMap.value.delete(tileId);
+}
+
+// ============================================================================
+// LOADING STATE METHODS
+// ============================================================================
+
+/**
+ * Initialize loading state for a tile
+ * @param {string} tileId 
+ */
+function initLoadingState(tileId) {
+  if (!loadingState.value.has(tileId)) {
+    loadingState.value.set(tileId, {
+      metadata: false,
+      mound: false,
+      jpg: false,
+      png: false
+    });
+  }
+}
+
+/**
+ * Set loading state for a specific data type
+ * @param {string} tileId 
+ * @param {string} dataType - 'metadata' | 'mound' | 'jpg' | 'png'
+ * @param {boolean} isLoading 
+ */
+export function setLoading(tileId, dataType, isLoading) {
+  initLoadingState(tileId);
+  loadingState.value.get(tileId)[dataType] = isLoading;
+}
+
+/**
+ * Check if metadata is loading
+ * @param {string} tileId 
+ * @returns {boolean}
+ */
+export function isMetadataLoading(tileId) {
+  return loadingState.value.get(tileId)?.metadata || false;
+}
+
+/**
+ * Check if mound data is loading
+ * @param {string} tileId 
+ * @returns {boolean}
+ */
+export function isMoundLoading(tileId) {
+  return loadingState.value.get(tileId)?.mound || false;
+}
+
+/**
+ * Check if image is loading
+ * @param {string} tileId 
+ * @param {string} type - 'jpg' or 'png'
+ * @returns {boolean}
+ */
+export function isImageLoading(tileId, type) {
+  return loadingState.value.get(tileId)?.[type] || false;
+}
+
+// ============================================================================
+// STATUS CHECK METHODS
+// ============================================================================
+
+/**
+ * Check if tile has metadata loaded
+ * @param {string} tileId 
+ * @returns {boolean}
+ */
+export function isMetadataLoaded(tileId) {
+  return hasMetadata(tileId);
+}
+
+/**
+ * Check if tile has mound data loaded
+ * @param {string} tileId 
+ * @returns {boolean}
+ */
+export function isMoundLoaded(tileId) {
+  return hasMoundData(tileId);
+}
+
+/**
+ * Check if tile is ready to render (has both metadata and mound data)
+ * @param {string} tileId 
+ * @returns {boolean}
+ */
+export function isReadyToRender(tileId) {
+  return hasMetadata(tileId) && hasMoundData(tileId);
+}
+
+/**
+ * Check if images are available for a tile (from metadata)
+ * @param {string} tileId 
+ * @returns {{ jpg: boolean, png: boolean }}
+ */
+export function getImageAvailability(tileId) {
+  const meta = getMetadata(tileId);
+  if (!meta) {
+    return { jpg: false, png: false };
+  }
+  return {
+    jpg: meta.jpg_available || false,
+    png: meta.png_available || false
+  };
+}
+
+// ============================================================================
+// BULK OPERATIONS
+// ============================================================================
+
+/**
+ * Get all tile IDs that have images on the map
+ * @returns {string[]}
+ */
+export function getAllTileIdsWithImages() {
+  return Array.from(imagesOnMap.value);
+}
+
+/**
+ * Get all tile IDs that have mound data
+ * @returns {string[]}
+ */
+export function getAllTileIdsWithMounds() {
+  return Array.from(moundCache.value.keys());
+}
+
+/**
+ * Get all tile IDs that have metadata
+ * @returns {string[]}
+ */
+export function getAllTileIds() {
+  return Array.from(metadataCache.value.keys());
+}
+
+/**
+ * Clear all caches (useful for testing/debugging)
+ */
+export function clearAllCaches() {
+  metadataCache.value.clear();
+  moundCache.value.clear();
+  loadingState.value.clear();
+  imagesOnMap.value.clear();
+}
+
+/**
+ * Get cache statistics (useful for debugging)
+ * @returns {Object}
+ */
+export function getCacheStats() {
+  return {
+    metadataCount: metadataCache.value.size,
+    moundCount: moundCache.value.size,
+    imagesOnMapCount: imagesOnMap.value.size,
+    loadingCount: loadingState.value.size
+  };
+}
\ No newline at end of file