SplatMap

+ {/* Provide viewer to all children; only render children once viewer is ready */} + {viewer && ( + + {children} + + )} + + ) +} diff --git a/web/src/cesium/cesiumContext.ts b/web/src/cesium/cesiumContext.ts new file mode 100644 index 0000000..28d6ff9 --- /dev/null +++ b/web/src/cesium/cesiumContext.ts @@ -0,0 +1,14 @@ +import { createContext, useContext } from 'react' +import type * as CesiumType from 'cesium' + +type Viewer = InstanceType + +export const CesiumContext = createContext(null) + +export function useCesiumViewer(): Viewer { + const viewer = useContext(CesiumContext) + if (!viewer) { + throw new Error('useCesiumViewer must be used inside ') + } + return viewer +} diff --git a/web/src/cesium/geoUtils.ts b/web/src/cesium/geoUtils.ts new file mode 100644 index 0000000..a2ec58b --- /dev/null +++ b/web/src/cesium/geoUtils.ts @@ -0,0 +1,63 @@ +import * as Cesium from 'cesium' +import * as THREE from 'three' + +/** + * Build a Three.js Matrix4 that positions and orients a local scene + * at the given geographic coordinate. + * + * The returned matrix transforms from local ENU space (metres from the + * anchor point, X=East, Y=North, Z=Up) to Cesium ECEF space (metres + * from Earth centre). Apply it to a Three.js Object3D.matrixWorld and + * set matrixAutoUpdate = false. + * + * @param lon Longitude in degrees + * @param lat Latitude in degrees + * @param alt Altitude in metres above WGS-84 ellipsoid + * @param headingDeg Clockwise heading in degrees (0 = North, 90 = East) + */ +export function buildSplatWorldMatrix( + lon: number, + lat: number, + alt: number, + headingDeg: number, +): THREE.Matrix4 { + const position = Cesium.Cartesian3.fromDegrees(lon, lat, alt) + + // 4×4 column-major matrix: local ENU → ECEF + const enuToEcef = Cesium.Transforms.eastNorthUpToFixedFrame(position) + + // Apply a rotation around local Up (Z in ENU) for heading. + // Cesium heading is clockwise from North, which is –Z rotation in ENU. + const headingRad = Cesium.Math.toRadians(-headingDeg) + const headingRotation = Cesium.Matrix4.fromRotationTranslation( + Cesium.Matrix3.fromRotationZ(headingRad), + ) + const finalCesiumMatrix = new Cesium.Matrix4() + Cesium.Matrix4.multiply(enuToEcef, headingRotation, finalCesiumMatrix) + + // Cesium Matrix4 is a Float64Array in column-major order. + // Three.js Matrix4 uses Float32Array, also column-major. + // Direct cast works since both use the same element layout. + const threeMatrix = new THREE.Matrix4() + threeMatrix.set( + finalCesiumMatrix[0], finalCesiumMatrix[4], finalCesiumMatrix[8], finalCesiumMatrix[12], + finalCesiumMatrix[1], finalCesiumMatrix[5], finalCesiumMatrix[9], finalCesiumMatrix[13], + finalCesiumMatrix[2], finalCesiumMatrix[6], finalCesiumMatrix[10], finalCesiumMatrix[14], + finalCesiumMatrix[3], finalCesiumMatrix[7], finalCesiumMatrix[11], finalCesiumMatrix[15], + ) + return threeMatrix +} + +/** + * Convert a Cesium Rectangle (radians) to a bbox tuple (degrees). + */ +export function rectangleToBbox( + rect: Cesium.Rectangle, +): [number, number, number, number] { + return [ + Cesium.Math.toDegrees(rect.west), + Cesium.Math.toDegrees(rect.south), + Cesium.Math.toDegrees(rect.east), + Cesium.Math.toDegrees(rect.north), + ] +} diff --git a/web/src/cesium/useCesiumCamera.ts b/web/src/cesium/useCesiumCamera.ts new file mode 100644 index 0000000..b1ea1ad --- /dev/null +++ b/web/src/cesium/useCesiumCamera.ts @@ -0,0 +1,37 @@ +import { useEffect } from 'react' +import { useCesiumViewer } from './cesiumContext' +import { useMapStore } from '../store/mapStore' +import { rectangleToBbox } from './geoUtils' + +/** + * Attaches a scene.preUpdate listener that writes camera height and + * the current view bbox to mapStore on every frame. + * + * Throttled so the store update fires at most once per 200 ms to avoid + * triggering expensive API queries on every rendered frame. + */ +export function useCesiumCamera() { + const viewer = useCesiumViewer() + const setCameraState = useMapStore((s) => s.setCameraState) + + useEffect(() => { + let lastFired = 0 + const THROTTLE_MS = 200 + + const removeListener = viewer.scene.preUpdate.addEventListener(() => { + const now = Date.now() + if (now - lastFired < THROTTLE_MS) return + lastFired = now + + const height = viewer.camera.positionCartographic.height + const rect = viewer.camera.computeViewRectangle() + if (rect) { + setCameraState(height, rectangleToBbox(rect)) + } + }) + + return () => { + removeListener() + } + }, [viewer, setCameraState]) +} diff --git a/web/src/challenges/ChallengeCreator.module.css b/web/src/challenges/ChallengeCreator.module.css new file mode 100644 index 0000000..4bd3548 --- /dev/null +++ b/web/src/challenges/ChallengeCreator.module.css @@ -0,0 +1,76 @@ +.overlay { + position: fixed; + inset: 0; + background: rgba(0,0,0,0.6); + z-index: 50; + display: flex; + align-items: center; + justify-content: center; + padding: 20px; +} + +.modal { + background: #1a1a2e; + border: 1px solid rgba(255,255,255,0.12); + border-radius: 12px; + padding: 28px; + width: 100%; + max-width: 480px; + color: #fff; +} + +.heading { margin: 0 0 6px; font-size: 20px; } +.sub { margin: 0 0 20px; color: rgba(255,255,255,0.55); font-size: 14px; } + +.form { display: flex; flex-direction: column; gap: 16px; } + +.label { + display: flex; + flex-direction: column; + gap: 6px; + font-size: 14px; + color: rgba(255,255,255,0.7); +} + +.input { + padding: 9px 12px; + background: rgba(255,255,255,0.07); + border: 1px solid rgba(255,255,255,0.15); + border-radius: 6px; + color: #fff; + font-size: 15px; + outline: none; + resize: vertical; +} +.input:focus { border-color: #6366f1; } +.input::placeholder { color: rgba(255,255,255,0.3); } + +.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } + +.error { color: #f87171; font-size: 14px; margin: 0; } + +.actions { display: flex; gap: 10px; justify-content: flex-end; } + +.cancelBtn { + padding: 10px 18px; + background: none; + border: 1px solid rgba(255,255,255,0.2); + border-radius: 8px; + color: rgba(255,255,255,0.7); + cursor: pointer; + font-size: 14px; +} +.cancelBtn:hover { border-color: rgba(255,255,255,0.4); color: #fff; } + +.submitBtn { + padding: 10px 20px; + background: #6366f1; + border: none; + border-radius: 8px; + color: #fff; + font-weight: 600; + cursor: pointer; + font-size: 14px; +} +.submitBtn:hover:not(:disabled) { background: #4f46e5; } +.submitBtn:disabled { opacity: 0.5; cursor: default; } diff --git a/web/src/challenges/ChallengeCreator.tsx b/web/src/challenges/ChallengeCreator.tsx new file mode 100644 index 0000000..a8577a4 --- /dev/null +++ b/web/src/challenges/ChallengeCreator.tsx @@ -0,0 +1,118 @@ +import { useState } from 'react' +import { useChallengeStore } from '../store/challengeStore' +import { createChallenge } from '../api/challenges' +import styles from './ChallengeCreator.module.css' + +export function ChallengeCreator() { + const { draftPolygon, setDraftPolygon, setSelectedChallengeId } = useChallengeStore() + const [title, setTitle] = useState('') + const [description, setDescription] = useState('') + const [maxSubmissions, setMaxSubmissions] = useState('') + const [expiresAt, setExpiresAt] = useState('') + const [saving, setSaving] = useState(false) + const [error, setError] = useState('') + + if (!draftPolygon) return null + + async function handleSubmit(e: React.FormEvent) { + e.preventDefault() + if (!title.trim() || !draftPolygon) return + + setSaving(true) + setError('') + try { + const challenge = await createChallenge({ + title: title.trim(), + description: description.trim() || undefined, + region: draftPolygon, + max_submissions: maxSubmissions ? parseInt(maxSubmissions, 10) : null, + expires_at: expiresAt || null, + }) + setDraftPolygon(null) + setSelectedChallengeId(challenge.id) + setTitle('') + setDescription('') + setMaxSubmissions('') + setExpiresAt('') + } catch { + setError('Failed to create challenge. Please try again.') + } finally { + setSaving(false) + } + } + + return ( +

Create Challenge

+ Your polygon has been captured. Fill in the details below. +

+ +

+ + Title * + setTitle(e.target.value)} + placeholder="e.g. Capture the old library" + required + maxLength={255} + /> + + + + Description +

setDescription(e.target.value)}
+              placeholder="What should people capture here?"
+              rows={3}
+            />
+          </label>
+
+          <div className={styles.row}>
+            <label className={styles.label}>
+              Max submissions
+              <input
+                className={styles.input}
+                type="number"
+                min={1}
+                value={maxSubmissions}
+                onChange={(e) => setMaxSubmissions(e.target.value)}
+                placeholder="Unlimited"
+              />
+            </label>
+
+            <label className={styles.label}>
+              Expires at
+              <input
+                className={styles.input}
+                type="datetime-local"
+                value={expiresAt}
+                onChange={(e) => setExpiresAt(e.target.value)}
+              />
+            </label>
+          </div>
+
+          {error && <p className={styles.error}>{error}</p>}
+
+          <div className={styles.actions}>
+            <button
+              type="button"
+              className={styles.cancelBtn}
+              onClick={() => setDraftPolygon(null)}
+            >
+              Cancel
+            </button>
+            <button type="submit" className={styles.submitBtn} disabled={saving}>
+              {saving ? 'Creating…' : 'Create challenge'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
diff --git a/web/src/challenges/ChallengeLayer.tsx b/web/src/challenges/ChallengeLayer.tsx
new file mode 100644
index 0000000..e56f0f6
--- /dev/null
+++ b/web/src/challenges/ChallengeLayer.tsx
@@ -0,0 +1,142 @@
+import { useEffect, useRef } from 'react'
+import * as Cesium from 'cesium'
+import { useCesiumViewer } from '../cesium/cesiumContext'
+import { useMapStore } from '../store/mapStore'
+import { useChallengeStore } from '../store/challengeStore'
+import { usePolygonDraw } from './usePolygonDraw'
+import { fetchChallenges } from '../api/challenges'
+import type { BBox } from '../types/geo'
+import type { ChallengeMapProperties } from '../types/api'
+
+const CHALLENGE_VISIBLE_HEIGHT = 200_000
+
+export function ChallengeLayer() {
+  const viewer = useCesiumViewer()
+  usePolygonDraw()
+
+  const { bbox, cameraHeight, setLoadedChallenges } = useMapStore()
+  const { selectedChallengeId, setSelectedChallengeId } = useChallengeStore()
+
+  const entityMapRef = useRef<Map<string, Cesium.Entity>>(new Map())
+  const regionEntityRef = useRef<Cesium.Entity | null>(null)
+  const lastBboxRef = useRef<BBox | null>(null)
+
+  // Fetch and render challenge pins
+  useEffect(() => {
+    if (!bbox || cameraHeight > CHALLENGE_VISIBLE_HEIGHT) {
+      entityMapRef.current.forEach((e) => viewer.entities.remove(e))
+      entityMapRef.current.clear()
+      setLoadedChallenges([])
+      return
+    }
+
+    const last = lastBboxRef.current
+    if (last) {
+      const delta = Math.max(
+        Math.abs(bbox[0] - last[0]), Math.abs(bbox[1] - last[1]),
+        Math.abs(bbox[2] - last[2]), Math.abs(bbox[3] - last[3]),
+      )
+      if (delta < 0.05) return
+    }
+    lastBboxRef.current = bbox
+
+    fetchChallenges({ bbox }).then((fc) => {
+      const incoming = new Set(fc.features.map((f: GeoJSON.Feature<GeoJSON.Point, ChallengeMapProperties>) => f.properties.id))
+
+      entityMapRef.current.forEach((entity, id) => {
+        if (!incoming.has(id)) {
+          viewer.entities.remove(entity)
+          entityMapRef.current.delete(id)
+        }
+      })
+
+      fc.features.forEach((feature: GeoJSON.Feature<GeoJSON.Point, ChallengeMapProperties>) => {
+        const id = feature.properties.id
+        if (entityMapRef.current.has(id)) return
+
+        const [lon, lat] = feature.geometry.coordinates
+
+        const entity = viewer.entities.add({
+          id: `challenge-${id}`,
+          position: Cesium.Cartesian3.fromDegrees(lon, lat),
+          billboard: {
+            image: createChallengePinSvg(),
+            width: 36,
+            height: 36,
+            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+            disableDepthTestDistance: Number.POSITIVE_INFINITY,
+          },
+          properties: { challengeId: id },
+        })
+        entityMapRef.current.set(id, entity)
+      })
+
+      setLoadedChallenges(fc.features)
+    }).catch(console.error)
+  }, [bbox, cameraHeight]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Show region polygon for selected challenge
+  useEffect(() => {
+    if (regionEntityRef.current) {
+      viewer.entities.remove(regionEntityRef.current)
+      regionEntityRef.current = null
+    }
+
+    if (!selectedChallengeId) return
+
+    // We need the full detail to get the region polygon — ChallengePanel fetches
+    // it; we read from the DOM or re-fetch. For simplicity, re-fetch here.
+    import('../api/challenges').then(({ fetchChallengeDetail }) =>
+      fetchChallengeDetail(selectedChallengeId),
+    ).then((detail) => {
+      if (!detail.region) return
+      const coords = detail.region.coordinates[0]
+      const positions = coords.map((c) =>
+        Cesium.Cartesian3.fromDegrees(c[0], c[1]),
+      )
+
+      regionEntityRef.current = viewer.entities.add({
+        polygon: {
+          hierarchy: new Cesium.PolygonHierarchy(positions),
+          material: Cesium.Color.YELLOW.withAlpha(0.15),
+          outline: true,
+          outlineColor: Cesium.Color.YELLOW,
+          outlineWidth: 2,
+          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+        },
+      })
+    }).catch(console.error)
+  }, [selectedChallengeId, viewer])
+
+  // Wire up entity selection
+  useEffect(() => {
+    const remove = viewer.selectedEntityChanged.addEventListener((entity) => {
+      if (!entity) return
+      const challengeId = entity.properties?.challengeId?.getValue()
+      if (challengeId) setSelectedChallengeId(challengeId)
+    })
+    return () => remove()
+  }, [viewer, setSelectedChallengeId])
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      entityMapRef.current.forEach((e) => viewer.entities.remove(e))
+      entityMapRef.current.clear()
+      if (regionEntityRef.current) viewer.entities.remove(regionEntityRef.current)
+    }
+  }, [viewer])
+
+  return null
+}
+
+function createChallengePinSvg(): string {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
+      <circle cx="18" cy="16" r="12" fill="#f59e0b" stroke="#fff" stroke-width="2"/>
+      <polygon points="18,32 11,21 25,21" fill="#f59e0b"/>
+      <text x="18" y="20" text-anchor="middle" fill="#fff" font-size="11" font-weight="bold">!</text>
+    </svg>
+  `
+  return `data:image/svg+xml;base64,${btoa(svg)}`
+}
diff --git a/web/src/challenges/ChallengePanel.module.css b/web/src/challenges/ChallengePanel.module.css
new file mode 100644
index 0000000..7306b5c
--- /dev/null
+++ b/web/src/challenges/ChallengePanel.module.css
@@ -0,0 +1,55 @@
+.loading { color: rgba(255,255,255,0.5); }
+
+.content { display: flex; flex-direction: column; gap: 16px; }
+
+.description { margin: 0; line-height: 1.5; color: rgba(255,255,255,0.8); }
+
+.meta {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 6px 16px;
+  margin: 0;
+  font-size: 14px;
+}
+.meta dt { color: rgba(255,255,255,0.5); }
+.meta dd { margin: 0; }
+
+.participateBtn {
+  padding: 10px 20px;
+  background: #f59e0b;
+  color: #000;
+  border: none;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+  font-size: 15px;
+}
+.participateBtn:hover { background: #fbbf24; }
+
+.participating { color: #6ee7b7; font-size: 14px; margin: 0; }
+
+.previews h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
+
+.previewGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+
+.previewCard {
+  aspect-ratio: 1;
+  border-radius: 6px;
+  overflow: hidden;
+  background: rgba(255,255,255,0.05);
+}
+.previewCard img { width: 100%; height: 100%; object-fit: cover; }
+
+.previewPlaceholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255,255,255,0.3);
+  font-size: 12px;
+}
diff --git a/web/src/challenges/ChallengePanel.tsx b/web/src/challenges/ChallengePanel.tsx
new file mode 100644
index 0000000..c45519f
--- /dev/null
+++ b/web/src/challenges/ChallengePanel.tsx
@@ -0,0 +1,91 @@
+import { useEffect, useState } from 'react'
+import { Panel } from '../ui/Panel'
+import { useChallengeStore } from '../store/challengeStore'
+import { fetchChallengeDetail, participateInChallenge } from '../api/challenges'
+import type { ChallengeDetail } from '../types/api'
+import styles from './ChallengePanel.module.css'
+
+export function ChallengePanel() {
+  const { selectedChallengeId, setSelectedChallengeId } = useChallengeStore()
+  const [detail, setDetail] = useState<ChallengeDetail | null>(null)
+  const [participating, setParticipating] = useState(false)
+
+  useEffect(() => {
+    if (!selectedChallengeId) {
+      setDetail(null)
+      return
+    }
+    fetchChallengeDetail(selectedChallengeId)
+      .then((d) => {
+        setDetail(d)
+        setParticipating(d.is_participating)
+      })
+      .catch(console.error)
+  }, [selectedChallengeId])
+
+  async function handleParticipate() {
+    if (!selectedChallengeId) return
+    await participateInChallenge(selectedChallengeId)
+    setParticipating(true)
+  }
+
+  return (
+    <Panel
+      open={!!selectedChallengeId}
+      onClose={() => setSelectedChallengeId(null)}
+      title={detail?.title ?? 'Challenge'}
+    >
+      {!detail ? (
+        <p className={styles.loading}>Loading…</p>
+      ) : (
+        <div className={styles.content}>
+          {detail.description && (
+            <p className={styles.description}>{detail.description}</p>
+          )}
+
+          <dl className={styles.meta}>
+            <dt>Created by</dt>
+            <dd>{detail.creator_username}</dd>
+            <dt>Submissions</dt>
+            <dd>
+              {detail.submission_count}
+              {detail.max_submissions ? ` / ${detail.max_submissions}` : ''}
+            </dd>
+            {detail.expires_at && (
+              <>
+                <dt>Expires</dt>
+                <dd>{new Date(detail.expires_at).toLocaleDateString()}</dd>
+              </>
+            )}
+          </dl>
+
+          {detail.status === 'active' && !participating && (
+            <button className={styles.participateBtn} onClick={handleParticipate}>
+              Accept challenge
+            </button>
+          )}
+          {participating && (
+            <p className={styles.participating}>You've accepted this challenge</p>
+          )}
+
+          {detail.preview_splats.length > 0 && (
+            <section className={styles.previews}>
+              <h3>Submissions</h3>
+              <div className={styles.previewGrid}>
+                {detail.preview_splats.map((s) => (
+                  <div key={s.id} className={styles.previewCard}>
+                    {s.preview_url ? (
+                      <img src={s.preview_url} alt="Splat preview" />
+                    ) : (
+                      <div className={styles.previewPlaceholder}>3D</div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </section>
+          )}
+        </div>
+      )}
+    </Panel>
+  )
+}
diff --git a/web/src/challenges/usePolygonDraw.ts b/web/src/challenges/usePolygonDraw.ts
new file mode 100644
index 0000000..53aa572
--- /dev/null
+++ b/web/src/challenges/usePolygonDraw.ts
@@ -0,0 +1,96 @@
+import { useEffect, useRef } from 'react'
+import * as Cesium from 'cesium'
+import { useCesiumViewer } from '../cesium/cesiumContext'
+import { useChallengeStore } from '../store/challengeStore'
+
+/**
+ * When drawingMode is true, intercepts Cesium mouse events to let the user
+ * draw a polygon by clicking vertices on the globe.
+ *
+ * LEFT_CLICK  → add vertex
+ * RIGHT_CLICK → close polygon and write GeoJSON Polygon to challengeStore
+ */
+export function usePolygonDraw() {
+  const viewer = useCesiumViewer()
+  const { drawingMode, setDrawingMode, setDraftPolygon } = useChallengeStore()
+  const verticesRef = useRef<Cesium.Cartesian3[]>([])
+  const previewEntityRef = useRef<Cesium.Entity | null>(null)
+
+  useEffect(() => {
+    if (!drawingMode) {
+      cleanup()
+      return
+    }
+
+    verticesRef.current = []
+
+    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
+
+    handler.setInputAction((event: { position: Cesium.Cartesian2 }) => {
+      const ray = viewer.camera.getPickRay(event.position)
+      if (!ray) return
+      const intersection = viewer.scene.globe.pick(ray, viewer.scene)
+      if (!intersection) return
+
+      verticesRef.current.push(intersection.clone())
+      updatePreview()
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
+
+    handler.setInputAction(() => {
+      const verts = verticesRef.current
+      if (verts.length < 3) return
+
+      // Convert Cartesian3 vertices to [lon, lat] degree pairs
+      const coords: [number, number][] = verts.map((v) => {
+        const carto = Cesium.Cartographic.fromCartesian(v)
+        return [
+          Cesium.Math.toDegrees(carto.longitude),
+          Cesium.Math.toDegrees(carto.latitude),
+        ]
+      })
+      // Close the ring
+      coords.push(coords[0])
+
+      const polygon: GeoJSON.Polygon = {
+        type: 'Polygon',
+        coordinates: [coords],
+      }
+
+      cleanup()
+      setDraftPolygon(polygon)
+      setDrawingMode(false)
+    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
+
+    return () => {
+      handler.destroy()
+    }
+
+    function cleanup() {
+      verticesRef.current = []
+      if (previewEntityRef.current) {
+        viewer.entities.remove(previewEntityRef.current)
+        previewEntityRef.current = null
+      }
+    }
+
+    function updatePreview() {
+      if (previewEntityRef.current) {
+        viewer.entities.remove(previewEntityRef.current)
+      }
+
+      const verts = verticesRef.current
+      if (verts.length < 2) return
+
+      previewEntityRef.current = viewer.entities.add({
+        polyline: {
+          positions: [...verts, verts[0]], // close the preview ring
+          width: 2,
+          material: new Cesium.ColorMaterialProperty(
+            Cesium.Color.YELLOW.withAlpha(0.9),
+          ),
+          clampToGround: true,
+        },
+      })
+    }
+  }, [drawingMode, viewer, setDrawingMode, setDraftPolygon])
+}
diff --git a/web/src/env.d.ts b/web/src/env.d.ts
new file mode 100644
index 0000000..c62e2d5
--- /dev/null
+++ b/web/src/env.d.ts
@@ -0,0 +1,13 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_OIDC_AUTHORITY: string
+  readonly VITE_OIDC_CLIENT_ID: string
+  readonly VITE_API_BASE_URL: string
+  readonly VITE_CESIUM_ION_TOKEN: string
+  readonly VITE_DEV_SKIP_AUTH?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
diff --git a/web/src/main.tsx b/web/src/main.tsx
new file mode 100644
index 0000000..d010f4f
--- /dev/null
+++ b/web/src/main.tsx
@@ -0,0 +1,7 @@
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+// StrictMode is intentionally disabled.
+// Cesium's Viewer cannot survive React's double-invocation of useEffect
+// in StrictMode — it tries to mount on an already-destroyed canvas.
+createRoot(document.getElementById('root')!).render(<App />)
diff --git a/web/src/splat/SplatLayer.tsx b/web/src/splat/SplatLayer.tsx
new file mode 100644
index 0000000..bb039b0
--- /dev/null
+++ b/web/src/splat/SplatLayer.tsx
@@ -0,0 +1,117 @@
+import { useEffect, useRef } from 'react'
+import * as Cesium from 'cesium'
+import { useCesiumViewer } from '../cesium/cesiumContext'
+import { useCesiumCamera } from '../cesium/useCesiumCamera'
+import { useMapStore } from '../store/mapStore'
+import { fetchSplats } from '../api/splats'
+import type { BBox } from '../types/geo'
+import type { SplatMapProperties } from '../types/api'
+
+// Show splat pins when camera is below this altitude (metres)
+const SPLAT_VISIBLE_HEIGHT = 50_000
+
+export function SplatLayer() {
+  const viewer = useCesiumViewer()
+  useCesiumCamera()
+
+  const { bbox, cameraHeight, setLoadedSplats, setActiveSplatId } = useMapStore()
+  const entityMapRef = useRef<Map<string, Cesium.Entity>>(new Map())
+  const lastBboxRef = useRef<BBox | null>(null)
+
+  // Fetch and sync splat entities whenever the bbox changes meaningfully
+  useEffect(() => {
+    if (!bbox || cameraHeight > SPLAT_VISIBLE_HEIGHT) {
+      // Clear all splat pins when zoomed out
+      entityMapRef.current.forEach((e) => viewer.entities.remove(e))
+      entityMapRef.current.clear()
+      setLoadedSplats([])
+      return
+    }
+
+    // Avoid re-fetching if bbox moved less than 0.01° (noise reduction)
+    const last = lastBboxRef.current
+    if (last) {
+      const delta = Math.max(
+        Math.abs(bbox[0] - last[0]),
+        Math.abs(bbox[1] - last[1]),
+        Math.abs(bbox[2] - last[2]),
+        Math.abs(bbox[3] - last[3]),
+      )
+      if (delta < 0.01) return
+    }
+    lastBboxRef.current = bbox
+
+    fetchSplats(bbox).then((fc) => {
+      const incoming = new Set(fc.features.map((f: GeoJSON.Feature<GeoJSON.Point, SplatMapProperties>) => f.properties.id))
+
+      // Remove entities that are no longer in view
+      entityMapRef.current.forEach((entity, id) => {
+        if (!incoming.has(id)) {
+          viewer.entities.remove(entity)
+          entityMapRef.current.delete(id)
+        }
+      })
+
+      // Add new entities
+      fc.features.forEach((feature: GeoJSON.Feature<GeoJSON.Point, SplatMapProperties>) => {
+        const id = feature.properties.id
+        if (entityMapRef.current.has(id)) return
+
+        const [lon, lat] = feature.geometry.coordinates
+        const alt = feature.properties.altitude ?? 0
+
+        const entity = viewer.entities.add({
+          id: `splat-${id}`,
+          position: Cesium.Cartesian3.fromDegrees(lon, lat, alt),
+          billboard: {
+            image: createSplatPinSvg(),
+            width: 32,
+            height: 32,
+            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
+            disableDepthTestDistance: Number.POSITIVE_INFINITY,
+          },
+          properties: { splatId: id },
+        })
+        entityMapRef.current.set(id, entity)
+      })
+
+      setLoadedSplats(fc.features)
+    }).catch(console.error)
+  }, [bbox, cameraHeight]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Wire up entity selection → activeSplatId in store
+  useEffect(() => {
+    const remove = viewer.selectedEntityChanged.addEventListener((entity) => {
+      if (!entity) {
+        setActiveSplatId(null)
+        return
+      }
+      const splatId = entity.properties?.splatId?.getValue()
+      if (splatId) {
+        setActiveSplatId(splatId)
+      }
+    })
+    return () => remove()
+  }, [viewer, setActiveSplatId])
+
+  // Clean up all entities on unmount
+  useEffect(() => {
+    return () => {
+      entityMapRef.current.forEach((e) => viewer.entities.remove(e))
+      entityMapRef.current.clear()
+    }
+  }, [viewer])
+
+  return null // no DOM — everything is imperative Cesium entities
+}
+
+function createSplatPinSvg(): string {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+      <circle cx="16" cy="14" r="10" fill="#6366f1" stroke="#fff" stroke-width="2"/>
+      <polygon points="16,28 10,18 22,18" fill="#6366f1"/>
+      <text x="16" y="18" text-anchor="middle" fill="#fff" font-size="10" font-weight="bold">3D</text>
+    </svg>
+  `
+  return `data:image/svg+xml;base64,${btoa(svg)}`
+}
diff --git a/web/src/splat/SplatRenderer.tsx b/web/src/splat/SplatRenderer.tsx
new file mode 100644
index 0000000..07b7450
--- /dev/null
+++ b/web/src/splat/SplatRenderer.tsx
@@ -0,0 +1,161 @@
+import { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+import * as THREE from 'three'
+import { useCesiumViewer } from '../cesium/cesiumContext'
+import { useMapStore } from '../store/mapStore'
+import { useSplatStore } from '../store/splatStore'
+import { syncSplatCamera } from './useSplatCamera'
+import { getSplatDownloadUrl } from './splatLoader'
+import { buildSplatWorldMatrix } from '../cesium/geoUtils'
+import { fetchSplatDetail } from '../api/splats'
+
+// Only render the splat when the camera is below this altitude
+const RENDER_HEIGHT = 500
+
+export function SplatRenderer() {
+  const viewer = useCesiumViewer()
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const splatViewerRef = useRef<unknown>(null)
+  const camerRef = useRef<THREE.PerspectiveCamera>(new THREE.PerspectiveCamera())
+  const activeSplatId = useMapStore((s) => s.activeSplatId)
+  const cameraHeight = useMapStore((s) => s.cameraHeight)
+  const { setSplatDetail, splatCache } = useSplatStore()
+
+  // Keep canvas dimensions in sync with Cesium canvas
+  useEffect(() => {
+    const cesiumCanvas = viewer.canvas
+    const overlayCanvas = canvasRef.current
+    if (!overlayCanvas) return
+
+    function syncSize() {
+      overlayCanvas!.width = cesiumCanvas.width
+      overlayCanvas!.height = cesiumCanvas.height
+      camerRef.current.aspect = cesiumCanvas.width / cesiumCanvas.height
+      camerRef.current.updateProjectionMatrix()
+    }
+
+    syncSize()
+    const observer = new ResizeObserver(syncSize)
+    observer.observe(cesiumCanvas)
+    return () => observer.disconnect()
+  }, [viewer])
+
+  // Load / unload splat when activeSplatId changes
+  useEffect(() => {
+    if (!activeSplatId) {
+      disposeSplatViewer()
+      return
+    }
+
+    let cancelled = false
+
+    async function loadSplat() {
+      if (!activeSplatId) return
+
+      // Fetch detail if not cached
+      let detail = splatCache.get(activeSplatId)
+      if (!detail) {
+        detail = await fetchSplatDetail(activeSplatId)
+        if (cancelled) return
+        setSplatDetail(activeSplatId, detail)
+      }
+
+      if (!detail.location || !detail.is_published) return
+
+      const url = await getSplatDownloadUrl(activeSplatId)
+      if (cancelled) return
+
+      // Dynamically import the library to keep initial bundle lean
+      const { Viewer: GaussianViewer } = await import('@mkkellogg/gaussian-splats-3d')
+      if (cancelled) return
+
+      const canvas = canvasRef.current
+      if (!canvas) return
+
+      disposeSplatViewer()
+
+      const gViewer = new GaussianViewer({
+        selfDrivenMode: false,
+        useBuiltInControls: false,
+        renderer: new THREE.WebGLRenderer({ canvas, alpha: true }),
+        camera: camerRef.current,
+      })
+
+      // Geo-anchor the splat
+      const [lon, lat] = detail.location.coordinates
+      const alt = detail.altitude ?? 0
+      const heading = detail.heading ?? 0
+      const worldMatrix = buildSplatWorldMatrix(lon, lat, alt, heading)
+
+      await gViewer.addSplatScene(url, {
+        progressiveLoad: true,
+        onProgress: () => { /* optional: update progress UI */ },
+      })
+
+      if (cancelled) {
+        gViewer.dispose()
+        return
+      }
+
+      // Apply geo-anchor transform to the loaded scene
+      const scene = gViewer.splatMesh
+      if (scene) {
+        scene.matrixAutoUpdate = false
+        scene.matrix.copy(worldMatrix)
+        scene.matrixWorld.copy(worldMatrix)
+      }
+
+      splatViewerRef.current = gViewer
+    }
+
+    loadSplat().catch(console.error)
+
+    return () => {
+      cancelled = true
+    }
+  }, [activeSplatId]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Drive the splat render loop from Cesium's postRender event
+  useEffect(() => {
+    const remove = viewer.scene.postRender.addEventListener(() => {
+      const gViewer = splatViewerRef.current as import('@mkkellogg/gaussian-splats-3d').Viewer | null
+      if (!gViewer || cameraHeight > RENDER_HEIGHT) return
+
+      const canvas = canvasRef.current
+      if (!canvas) return
+
+      syncSplatCamera(viewer, camerRef.current, canvas)
+      gViewer.update()
+      gViewer.render()
+    })
+    return () => remove()
+  }, [viewer, cameraHeight])
+
+  function disposeSplatViewer() {
+    const gViewer = splatViewerRef.current as { dispose?: () => void } | null
+    if (gViewer?.dispose) gViewer.dispose()
+    splatViewerRef.current = null
+
+    // Clear the overlay canvas
+    const canvas = canvasRef.current
+    if (canvas) {
+      const ctx = canvas.getContext('2d')
+      ctx?.clearRect(0, 0, canvas.width, canvas.height)
+    }
+  }
+
+  // Overlay canvas portal — sits above the Cesium canvas, no pointer events
+  const overlayCanvas = (
+    <canvas
+      ref={canvasRef}
+      style={{
+        position: 'fixed',
+        inset: 0,
+        pointerEvents: 'none',
+        zIndex: 10,
+      }}
+    />
+  )
+
+  return createPortal(overlayCanvas, document.body)
+}
diff --git a/web/src/splat/splatLoader.ts b/web/src/splat/splatLoader.ts
new file mode 100644
index 0000000..27e838a
--- /dev/null
+++ b/web/src/splat/splatLoader.ts
@@ -0,0 +1,16 @@
+import { fetchSplatDownloadUrl } from '../api/splats'
+import { useSplatStore } from '../store/splatStore'
+
+/**
+ * Returns a valid presigned download URL for the given splat ID.
+ * Checks the cache first; fetches a fresh URL if missing or expired.
+ */
+export async function getSplatDownloadUrl(splatId: string): Promise<string> {
+  const store = useSplatStore.getState()
+  const cached = store.getValidDownloadUrl(splatId)
+  if (cached) return cached
+
+  const result = await fetchSplatDownloadUrl(splatId)
+  store.setDownloadUrl(splatId, result)
+  return result.url
+}
diff --git a/web/src/splat/useSplatCamera.ts b/web/src/splat/useSplatCamera.ts
new file mode 100644
index 0000000..7b85f93
--- /dev/null
+++ b/web/src/splat/useSplatCamera.ts
@@ -0,0 +1,41 @@
+import * as Cesium from 'cesium'
+import * as THREE from 'three'
+
+/**
+ * Synchronise a Three.js PerspectiveCamera to the current Cesium camera.
+ *
+ * Both cameras work in ECEF space (metres from Earth centre).
+ * The splat scene's Object3D has its matrixWorld set to the ECEF transform
+ * of the capture point (see geoUtils.buildSplatWorldMatrix), so the camera
+ * and the scene are in the same coordinate space.
+ *
+ * Call this inside a Cesium scene.postRender listener, before splatViewer.render().
+ */
+export function syncSplatCamera(
+  cesiumViewer: Cesium.Viewer,
+  threeCamera: THREE.PerspectiveCamera,
+  canvas: HTMLCanvasElement,
+) {
+  const cam = cesiumViewer.camera
+
+  // Position (ECEF, metres)
+  const pos = cam.positionWC
+  threeCamera.position.set(pos.x, pos.y, pos.z)
+
+  // LookAt target: position + direction
+  const dir = cam.directionWC
+  const target = new THREE.Vector3(pos.x + dir.x, pos.y + dir.y, pos.z + dir.z)
+
+  // Up vector
+  const up = cam.upWC
+  threeCamera.up.set(up.x, up.y, up.z)
+  threeCamera.lookAt(target)
+
+  // FOV and aspect
+  const frustum = cam.frustum as Cesium.PerspectiveFrustum
+  if (frustum.fovy != null) {
+    threeCamera.fov = Cesium.Math.toDegrees(frustum.fovy)
+  }
+  threeCamera.aspect = canvas.width / canvas.height
+  threeCamera.updateProjectionMatrix()
+}
diff --git a/web/src/store/authStore.ts b/web/src/store/authStore.ts
new file mode 100644
index 0000000..bdca5f2
--- /dev/null
+++ b/web/src/store/authStore.ts
@@ -0,0 +1,21 @@
+import { create } from 'zustand'
+import type { User } from 'oidc-client-ts'
+
+interface AuthState {
+  user: User | null
+  isLoading: boolean
+  setUser: (user: User | null) => void
+  setLoading: (loading: boolean) => void
+  logout: () => Promise<void>
+}
+
+export const useAuthStore = create<AuthState>((set) => ({
+  user: null,
+  isLoading: true,
+  setUser: (user) => set({ user }),
+  setLoading: (isLoading) => set({ isLoading }),
+  logout: async () => {
+    const { userManager } = await import('../auth/userManager')
+    await userManager.signoutRedirect()
+  },
+}))
diff --git a/web/src/store/challengeStore.ts b/web/src/store/challengeStore.ts
new file mode 100644
index 0000000..fefc04f
--- /dev/null
+++ b/web/src/store/challengeStore.ts
@@ -0,0 +1,23 @@
+import { create } from 'zustand'
+
+interface ChallengeState {
+  selectedChallengeId: string | null
+  setSelectedChallengeId: (id: string | null) => void
+
+  drawingMode: boolean
+  setDrawingMode: (active: boolean) => void
+
+  draftPolygon: GeoJSON.Polygon | null
+  setDraftPolygon: (polygon: GeoJSON.Polygon | null) => void
+}
+
+export const useChallengeStore = create<ChallengeState>((set) => ({
+  selectedChallengeId: null,
+  setSelectedChallengeId: (selectedChallengeId) => set({ selectedChallengeId }),
+
+  drawingMode: false,
+  setDrawingMode: (drawingMode) => set({ drawingMode }),
+
+  draftPolygon: null,
+  setDraftPolygon: (draftPolygon) => set({ draftPolygon }),
+}))
diff --git a/web/src/store/mapStore.ts b/web/src/store/mapStore.ts
new file mode 100644
index 0000000..21eba8d
--- /dev/null
+++ b/web/src/store/mapStore.ts
@@ -0,0 +1,33 @@
+import { create } from 'zustand'
+import type { BBox } from '../types/geo'
+import type { SplatMapProperties, ChallengeMapProperties } from '../types/api'
+
+interface MapState {
+  cameraHeight: number
+  bbox: BBox | null
+  setCameraState: (height: number, bbox: BBox) => void
+
+  activeSplatId: string | null
+  setActiveSplatId: (id: string | null) => void
+
+  loadedSplats: GeoJSON.Feature<GeoJSON.Point, SplatMapProperties>[]
+  setLoadedSplats: (splats: GeoJSON.Feature<GeoJSON.Point, SplatMapProperties>[]) => void
+
+  loadedChallenges: GeoJSON.Feature<GeoJSON.Point, ChallengeMapProperties>[]
+  setLoadedChallenges: (challenges: GeoJSON.Feature<GeoJSON.Point, ChallengeMapProperties>[]) => void
+}
+
+export const useMapStore = create<MapState>((set) => ({
+  cameraHeight: 10_000_000, // start high (whole-earth view)
+  bbox: null,
+  setCameraState: (cameraHeight, bbox) => set({ cameraHeight, bbox }),
+
+  activeSplatId: null,
+  setActiveSplatId: (activeSplatId) => set({ activeSplatId }),
+
+  loadedSplats: [],
+  setLoadedSplats: (loadedSplats) => set({ loadedSplats }),
+
+  loadedChallenges: [],
+  setLoadedChallenges: (loadedChallenges) => set({ loadedChallenges }),
+}))
diff --git a/web/src/store/splatStore.ts b/web/src/store/splatStore.ts
new file mode 100644
index 0000000..74c28e8
--- /dev/null
+++ b/web/src/store/splatStore.ts
@@ -0,0 +1,38 @@
+import { create } from 'zustand'
+import type { SplatDetail, SplatDownloadUrl } from '../types/api'
+
+interface CachedDownloadUrl extends SplatDownloadUrl {
+  cachedAt: number // Date.now()
+}
+
+interface SplatState {
+  splatCache: Map<string, SplatDetail>
+  setSplatDetail: (id: string, detail: SplatDetail) => void
+
+  downloadUrlCache: Map<string, CachedDownloadUrl>
+  setDownloadUrl: (id: string, data: SplatDownloadUrl) => void
+  getValidDownloadUrl: (id: string) => string | null
+}
+
+export const useSplatStore = create<SplatState>((set, get) => ({
+  splatCache: new Map(),
+  setSplatDetail: (id, detail) =>
+    set((s) => ({ splatCache: new Map(s.splatCache).set(id, detail) })),
+
+  downloadUrlCache: new Map(),
+  setDownloadUrl: (id, data) =>
+    set((s) => ({
+      downloadUrlCache: new Map(s.downloadUrlCache).set(id, {
+        ...data,
+        cachedAt: Date.now(),
+      }),
+    })),
+  getValidDownloadUrl: (id) => {
+    const entry = get().downloadUrlCache.get(id)
+    if (!entry) return null
+    // Expire 5 minutes before the server-reported expiry to avoid edge cases
+    const expiresAt = new Date(entry.expires_at).getTime() - 5 * 60 * 1000
+    if (Date.now() > expiresAt) return null
+    return entry.url
+  },
+}))
diff --git a/web/src/types/api.ts b/web/src/types/api.ts
new file mode 100644
index 0000000..0461443
--- /dev/null
+++ b/web/src/types/api.ts
@@ -0,0 +1,123 @@
+// TypeScript mirrors of the Django backend serializers.
+// Keep in sync with apps/splats/serializers.py, apps/challenges/serializers.py, etc.
+
+export type SplatStatus = 'pending' | 'processing' | 'ready' | 'failed'
+export type ChallengeStatus = 'active' | 'closed'
+export type JobStatus = 'queued' | 'running' | 'succeeded' | 'failed'
+
+// ---------- Splats ----------
+
+export interface SplatMapProperties {
+  id: string
+  heading: number | null
+  altitude: number | null
+  preview_url: string | null
+  splat_file_size: number | null
+  created_at: string
+}
+
+export interface SplatDetail {
+  id: string
+  owner_username: string
+  challenge_id: string | null
+  status: SplatStatus
+  is_published: boolean
+  location: GeoJSON.Point | null
+  coverage: GeoJSON.Polygon | null
+  heading: number | null
+  altitude: number | null
+  preview_url: string | null
+  splat_file_size: number | null
+  quality_score: number | null
+  frame_count: number | null
+  created_at: string
+  updated_at: string
+}
+
+export interface SplatDownloadUrl {
+  url: string
+  expires_at: string
+}
+
+export interface SplatJob {
+  id: string
+  status: JobStatus
+  current_step: string
+  progress: number
+  retry_count: number
+  error_message: string
+  queued_at: string
+  started_at: string | null
+  finished_at: string | null
+}
+
+export interface MineSplat {
+  id: string
+  status: SplatStatus
+  is_published: boolean
+  challenge_id: string | null
+  preview_url: string | null
+  quality_score: number | null
+  frame_count: number | null
+  created_at: string
+  updated_at: string
+  job: SplatJob | null
+}
+
+// ---------- Challenges ----------
+
+export interface ChallengeMapProperties {
+  id: string
+  title: string
+  status: ChallengeStatus
+  submission_count: number
+  max_submissions: number | null
+  expires_at: string | null
+  created_at: string
+}
+
+export interface PreviewSplat {
+  id: string
+  preview_url: string | null
+  created_at: string
+}
+
+export interface ChallengeDetail {
+  id: string
+  title: string
+  description: string
+  status: ChallengeStatus
+  creator_username: string
+  region: GeoJSON.Polygon
+  region_centroid: GeoJSON.Point
+  max_submissions: number | null
+  submission_count: number
+  participant_count: number
+  is_participating: boolean
+  preview_splats: PreviewSplat[]
+  expires_at: string | null
+  created_at: string
+  updated_at: string
+}
+
+export interface ChallengeParticipant {
+  id: string
+  joined_at: string
+}
+
+export interface ChallengeCreateBody {
+  title: string
+  description?: string
+  region: GeoJSON.Polygon
+  max_submissions?: number | null
+  expires_at?: string | null
+}
+
+// ---------- Users ----------
+
+export interface UserProfile {
+  id: string
+  username: string
+  avatar_url: string
+  created_at: string
+}
diff --git a/web/src/types/gaussian-splats-3d.d.ts b/web/src/types/gaussian-splats-3d.d.ts
new file mode 100644
index 0000000..5016ccd
--- /dev/null
+++ b/web/src/types/gaussian-splats-3d.d.ts
@@ -0,0 +1,28 @@
+// Type stub for @mkkellogg/gaussian-splats-3d — no official @types package exists.
+declare module '@mkkellogg/gaussian-splats-3d' {
+  import type * as THREE from 'three'
+
+  interface ViewerOptions {
+    selfDrivenMode?: boolean
+    useBuiltInControls?: boolean
+    renderer?: THREE.WebGLRenderer
+    camera?: THREE.PerspectiveCamera
+  }
+
+  interface AddSplatSceneOptions {
+    progressiveLoad?: boolean
+    onProgress?: (progress: number) => void
+    position?: [number, number, number]
+    rotation?: [number, number, number, number]
+    scale?: [number, number, number]
+  }
+
+  export class Viewer {
+    splatMesh: THREE.Object3D | null
+    constructor(options?: ViewerOptions)
+    addSplatScene(url: string, options?: AddSplatSceneOptions): Promise<void>
+    update(): void
+    render(): void
+    dispose(): void
+  }
+}
diff --git a/web/src/types/geo.ts b/web/src/types/geo.ts
new file mode 100644
index 0000000..5ba02a8
--- /dev/null
+++ b/web/src/types/geo.ts
@@ -0,0 +1,17 @@
+// Lightweight GeoJSON type helpers. The full GeoJSON namespace comes from
+// TypeScript's built-in DOM lib — no extra @types package needed.
+
+export type BBox = [minLon: number, minLat: number, maxLon: number, maxLat: number]
+
+export function bboxToString(bbox: BBox): string {
+  return bbox.join(',')
+}
+
+export function bboxFromRectangle(west: number, south: number, east: number, north: number): BBox {
+  return [
+    (west * 180) / Math.PI,
+    (south * 180) / Math.PI,
+    (east * 180) / Math.PI,
+    (north * 180) / Math.PI,
+  ]
+}
diff --git a/web/src/ui/MapOverlay.module.css b/web/src/ui/MapOverlay.module.css
new file mode 100644
index 0000000..ff18bc4
--- /dev/null
+++ b/web/src/ui/MapOverlay.module.css
@@ -0,0 +1,46 @@
+.toolbar {
+  position: fixed;
+  top: 16px;
+  left: 16px;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-start;
+}
+
+.btn {
+  padding: 9px 16px;
+  background: rgba(15, 15, 20, 0.85);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255,255,255,0.15);
+  border-radius: 8px;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.btn:hover { background: rgba(40, 40, 55, 0.9); }
+
+.btn.active {
+  background: rgba(99, 102, 241, 0.8);
+  border-color: #6366f1;
+}
+
+.logout {
+  margin-top: 4px;
+  font-size: 13px;
+  color: rgba(255,255,255,0.6);
+}
+.logout:hover { color: #fff; }
+
+.hint {
+  margin: 0;
+  padding: 8px 12px;
+  background: rgba(245, 158, 11, 0.15);
+  border: 1px solid rgba(245, 158, 11, 0.4);
+  border-radius: 6px;
+  color: #fbbf24;
+  font-size: 13px;
+}
diff --git a/web/src/ui/MapOverlay.tsx b/web/src/ui/MapOverlay.tsx
new file mode 100644
index 0000000..4efcc5c
--- /dev/null
+++ b/web/src/ui/MapOverlay.tsx
@@ -0,0 +1,43 @@
+import { useChallengeStore } from '../store/challengeStore'
+import { useAuthStore } from '../store/authStore'
+import styles from './MapOverlay.module.css'
+
+export function MapOverlay() {
+  const { drawingMode, setDrawingMode, setDraftPolygon } = useChallengeStore()
+  const { logout } = useAuthStore()
+
+  function handleDrawToggle() {
+    if (drawingMode) {
+      setDrawingMode(false)
+      setDraftPolygon(null)
+    } else {
+      setDrawingMode(true)
+    }
+  }
+
+  return (
+    <div className={styles.toolbar}>
+      <button
+        className={`${styles.btn} ${drawingMode ? styles.active : ''}`}
+        onClick={handleDrawToggle}
+        title={drawingMode ? 'Cancel drawing' : 'Create challenge (draw region)'}
+      >
+        {drawingMode ? '✕ Cancel' : '+ Challenge'}
+      </button>
+
+      {drawingMode && (
+        <p className={styles.hint}>
+          Click to place vertices · Right-click to close polygon
+        </p>
+      )}
+
+      <button
+        className={`${styles.btn} ${styles.logout}`}
+        onClick={() => logout()}
+        title="Sign out"
+      >
+        Sign out
+      </button>
+    </div>
+  )
+}
diff --git a/web/src/ui/Panel.module.css b/web/src/ui/Panel.module.css
new file mode 100644
index 0000000..8c3e09b
--- /dev/null
+++ b/web/src/ui/Panel.module.css
@@ -0,0 +1,58 @@
+.panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 380px;
+  background: rgba(15, 15, 20, 0.92);
+  backdrop-filter: blur(12px);
+  color: #fff;
+  z-index: 20;
+  transform: translateX(100%);
+  transition: transform 0.25s ease;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-left: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.panel.open {
+  transform: translateX(0);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  flex-shrink: 0;
+}
+
+.title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.closeBtn {
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 18px;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  line-height: 1;
+}
+
+.closeBtn:hover {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+}
diff --git a/web/src/ui/Panel.tsx b/web/src/ui/Panel.tsx
new file mode 100644
index 0000000..a9285ad
--- /dev/null
+++ b/web/src/ui/Panel.tsx
@@ -0,0 +1,20 @@
+import styles from './Panel.module.css'
+
+interface Props {
+  open: boolean
+  onClose: () => void
+  title?: string
+  children: React.ReactNode
+}
+
+export function Panel({ open, onClose, title, children }: Props) {
+  return (
+    <div className={`${styles.panel} ${open ? styles.open : ''}`}>
+      <div className={styles.header}>
+        {title && <h2 className={styles.title}>{title}</h2>}
+        <button className={styles.closeBtn} onClick={onClose} aria-label="Close">✕</button>
+      </div>
+      <div className={styles.body}>{children}</div>
+    </div>
+  )
+}
diff --git a/web/tsconfig.app.json b/web/tsconfig.app.json
new file mode 100644
index 0000000..0306259
--- /dev/null
+++ b/web/tsconfig.app.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "types": ["geojson"],
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/web/tsconfig.json b/web/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/web/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/web/tsconfig.node.json b/web/tsconfig.node.json
new file mode 100644
index 0000000..59e73c8
--- /dev/null
+++ b/web/tsconfig.node.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/web/vite.config.ts b/web/vite.config.ts
new file mode 100644
index 0000000..52c3209
--- /dev/null
+++ b/web/vite.config.ts
@@ -0,0 +1,63 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import cesium from 'vite-plugin-cesium'
+
+export default defineConfig({
+  plugins: [react(), cesium()],
+
+  optimizeDeps: {
+    // Prevent Vite from pre-bundling Cesium — it ships its own worker scripts
+    // that must be loaded from a specific public path, not inlined.
+    exclude: ['cesium'],
+    // Force pre-bundling of @mkkellogg/gaussian-splats-3d and all its CJS
+    // transitive dependencies. The 'pkg > dep' syntax tells Vite's esbuild
+    // step to convert each dep to ESM when reached through that package.
+    // All CJS transitive dependencies of cesium and @mkkellogg/gaussian-splats-3d.
+    // Because cesium is in exclude, Vite won't crawl its deps automatically —
+    // every CJS package it touches must be listed here for ESM conversion.
+    // List generated via: node -e "..." (see vite.config.ts comments above)
+    include: [
+      '@mkkellogg/gaussian-splats-3d',
+      '@mkkellogg/gaussian-splats-3d > mersenne-twister',
+      '@mkkellogg/gaussian-splats-3d > urijs',
+      'autolinker',
+      'bitmap-sdf',
+      'dompurify',
+      'draco3d',
+      'grapheme-splitter',
+      'lerc',
+      'mersenne-twister',
+      'meshoptimizer',
+      'nosleep.js',
+      'pako',
+      'protobufjs',
+      'topojson-client',
+      'urijs',
+    ],
+  },
+
+  build: {
+    chunkSizeWarningLimit: 4000,
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          // cesium is handled by vite-plugin-cesium (served from /Cesium/ public path)
+          // and must NOT appear here.
+          splat: ['@mkkellogg/gaussian-splats-3d', 'three'],
+        },
+      },
+    },
+  },
+
+  server: {
+    port: 5173,
+    proxy: {
+      // Proxy API calls to Django — avoids CORS in development.
+      // Django dev server runs on the host at :8000.
+      '/api': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+    },
+  },
+})