ahoy_analytics 0.1.0

data/app/frontend/components/analytics/visitor-globe.tsx

@@ -0,0 +1,424 @@
+import { Canvas } from '@react-three/fiber'
+import { OrbitControls } from '@react-three/drei'
+import HexLandLayer from '@/components/analytics/hex-land-layer'
+import HexHighlights from '@/components/analytics/hex-highlights'
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import type React from 'react'
+import * as THREE from 'three'
+import type { OrbitControls as OrbitControlsImpl } from 'three-stdlib'
+
+export const VISITOR_GLOBE_MIN_DISTANCE = 1.8
+export const VISITOR_GLOBE_MAX_DISTANCE = 3.2
+const ZOOM_STEP = 0.35
+const INITIAL_LAT = 39 // continental US
+const INITIAL_LNG = -98
+const INITIAL_DISTANCE = VISITOR_GLOBE_MAX_DISTANCE // start at farthest zoom
+
+type VisitorDot = {
+  lat: number
+  lng: number
+  type: 'visitor'
+  ts?: number // epoch ms; used for fading
+}
+
+type VisitorGlobeProps = {
+  visitors: VisitorDot[]
+  autoRotate?: boolean
+  onZoomChange?: (state: VisitorGlobeZoomState) => void
+  onViewChange?: (view: { lat: number; lng: number; distance: number }) => void
+}
+
+export type VisitorGlobeZoomState = {
+  distance: number
+  minDistance: number
+  maxDistance: number
+}
+
+export type VisitorGlobeHandle = {
+  zoomIn: () => void
+  zoomOut: () => void
+  getDistance: () => number
+  focusOn: (lat: number, lng: number, distance?: number) => void
+  flyTo: (lat: number, lng: number, distance?: number, durationMs?: number) => void
+  getView: () => { lat: number; lng: number; distance: number }
+}
+
+export const VisitorGlobe = forwardRef(function VisitorGlobe(
+  { visitors, autoRotate = false, onZoomChange, onViewChange }: VisitorGlobeProps,
+  ref: React.Ref<VisitorGlobeHandle>
+) {
+  // Tooltip removed for hex highlight approach; can be re-added later
+  const controlsRef = useRef<OrbitControlsImpl>(null)
+  const directionRef = useRef(new THREE.Vector3())
+  const tempPositionRef = useRef(new THREE.Vector3())
+  const animationFrameRef = useRef<number | null>(null)
+  const animationStateRef = useRef<
+    | { kind: 'distance'; from: number; to: number; start: number | null; duration: number }
+    | { kind: 'fly'; fromDir: THREE.Vector3; toDir: THREE.Vector3; distance: number; start: number | null; duration: number }
+    | null
+  >(null)
+
+  const getDistance = () => {
+    const controls = controlsRef.current
+    if (!controls) return VISITOR_GLOBE_MAX_DISTANCE
+    return (controls.object as THREE.PerspectiveCamera).position.distanceTo(controls.target)
+  }
+
+  const cancelAnimation = () => {
+    if (animationFrameRef.current !== null) {
+      cancelAnimationFrame(animationFrameRef.current)
+      animationFrameRef.current = null
+    }
+    animationStateRef.current = null
+  }
+
+  const applyDistance = (distance: number, emit = true) => {
+    const controls = controlsRef.current
+    if (!controls) return
+
+    const camera = controls.object as THREE.PerspectiveCamera
+    directionRef.current
+      .copy(camera.position)
+      .sub(controls.target)
+      .normalize()
+
+    tempPositionRef.current
+      .copy(directionRef.current)
+      .multiplyScalar(distance)
+      .add(controls.target)
+
+    camera.position.copy(tempPositionRef.current)
+    camera.updateProjectionMatrix()
+    controls.update()
+    if (emit) emitZoomChange(distance)
+  }
+
+  const emitZoomChange = (distance?: number) => {
+    if (!onZoomChange) return
+    const currentDistance = distance ?? getDistance()
+    onZoomChange({
+      distance: currentDistance,
+      minDistance: VISITOR_GLOBE_MIN_DISTANCE,
+      maxDistance: VISITOR_GLOBE_MAX_DISTANCE
+    })
+  }
+
+  const emitViewChange = () => {
+    if (!onViewChange || !controlsRef.current) return
+    const controls = controlsRef.current
+    const distance = getDistance()
+    const camera = controls.object as THREE.PerspectiveCamera
+    const { lat, lng } = vector3ToLatLng(camera.position)
+    onViewChange({ lat, lng, distance })
+  }
+
+  const animateToDistance = (targetDistance: number) => {
+    const controls = controlsRef.current
+    if (!controls) return
+
+    const from = getDistance()
+    const to = THREE.MathUtils.clamp(
+      targetDistance,
+      VISITOR_GLOBE_MIN_DISTANCE,
+      VISITOR_GLOBE_MAX_DISTANCE
+    )
+
+    if (Math.abs(to - from) < 0.001) {
+      applyDistance(to)
+      return
+    }
+
+    cancelAnimation()
+
+    const duration = 280
+    animationStateRef.current = { kind: 'distance', from, to, start: null, duration }
+
+    const step = (timestamp: number) => {
+      const state = animationStateRef.current
+      if (!state) return
+
+      if (state.kind !== 'distance') return
+      if (state.start === null) state.start = timestamp
+      const progress = Math.min((timestamp - state.start) / state.duration, 1)
+      const eased = progress * progress * (3 - 2 * progress) // smoothstep easing
+      const distance = THREE.MathUtils.lerp(state.from, state.to, eased)
+
+      // Emit on each frame so UI stays in sync.
+      applyDistance(distance)
+
+      if (progress < 1) {
+        animationFrameRef.current = requestAnimationFrame(step)
+      } else {
+        animationFrameRef.current = null
+        animationStateRef.current = null
+      }
+    }
+
+    animationFrameRef.current = requestAnimationFrame(step)
+  }
+
+  const zoomBy = (delta: number) => {
+    animateToDistance(getDistance() + delta)
+  }
+
+  const focusOn = (lat: number, lng: number, distance?: number) => {
+    const controls = controlsRef.current
+    if (!controls) return
+    const camera = controls.object as THREE.PerspectiveCamera
+    // Keep target at origin so we orbit the globe, not a surface point
+    controls.target.set(0, 0, 0)
+    const d = distance ?? getDistance()
+    camera.position.copy(latLngToVector3(lat, lng, d))
+    camera.lookAt(0, 0, 0)
+    camera.updateProjectionMatrix()
+    controls.update()
+    emitZoomChange(d)
+    emitViewChange()
+  }
+
+  const flyTo = (lat: number, lng: number, distance?: number, durationMs?: number) => {
+    const controls = controlsRef.current
+    if (!controls) return
+    const camera = controls.object as THREE.PerspectiveCamera
+    controls.target.set(0, 0, 0)
+    const fromDir = camera.position.clone().normalize()
+    const toDir = latLngToVector3(lat, lng, 1).normalize()
+    const targetDistance = distance ?? getDistance() // equals camera radius when target at origin
+    // If duration not provided, scale it with angular distance (slower for long spins)
+    const angle = THREE.MathUtils.clamp(fromDir.dot(toDir), -1, 1)
+    const theta = Math.acos(angle) // [0..PI]
+    const minMs = 600
+    const maxMs = 1800
+    const autoDuration = minMs + (theta / Math.PI) * (maxMs - minMs)
+    const duration = Math.max(300, Math.min(maxMs, durationMs ?? autoDuration))
+
+    cancelAnimation()
+    animationStateRef.current = { kind: 'fly', fromDir, toDir, distance: targetDistance, start: null, duration }
+    const tmp = new THREE.Vector3()
+    const identityQ = new THREE.Quaternion()
+    const rotQ = new THREE.Quaternion().setFromUnitVectors(fromDir.clone().normalize(), toDir.clone().normalize())
+    const qTmp = new THREE.Quaternion()
+
+    const step = (timestamp: number) => {
+      const state = animationStateRef.current
+      if (!state) return
+      if (state.kind !== 'fly') return
+      if (state.start === null) state.start = timestamp
+      const t = Math.min((timestamp - state.start) / state.duration, 1)
+      // ease-in-out quad
+      const eased = t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
+      qTmp.copy(identityQ).slerp(rotQ, eased)
+      tmp.copy(state.fromDir).applyQuaternion(qTmp).normalize()
+      const cameraRadius = state.distance
+      camera.position.copy(tmp.clone().multiplyScalar(cameraRadius))
+      camera.updateProjectionMatrix()
+      controls.update()
+      emitZoomChange(state.distance)
+      emitViewChange()
+      if (t < 1) {
+        animationFrameRef.current = requestAnimationFrame(step)
+      } else {
+        animationFrameRef.current = null
+        animationStateRef.current = null
+      }
+    }
+
+    animationFrameRef.current = requestAnimationFrame(step)
+  }
+
+  useImperativeHandle(ref, () => ({
+    zoomIn: () => zoomBy(-ZOOM_STEP),
+    zoomOut: () => zoomBy(ZOOM_STEP),
+    getDistance,
+    focusOn,
+    flyTo,
+    getView: () => {
+      const controls = controlsRef.current
+      if (!controls) return { lat: INITIAL_LAT, lng: INITIAL_LNG, distance: INITIAL_DISTANCE }
+      const { lat, lng } = vector3ToLatLng(controls.target)
+      return { lat, lng, distance: getDistance() }
+    }
+  }))
+
+  useEffect(() => {
+    const controls = controlsRef.current
+    if (!controls) return
+
+    const handleStart = () => cancelAnimation()
+    const handleChange = () => { emitZoomChange(); emitViewChange() }
+    controls.addEventListener('change', handleChange)
+    controls.addEventListener('start', handleStart)
+
+    // Emit once on mount so parent syncs initial state
+    emitZoomChange()
+    emitViewChange()
+
+    return () => {
+      controls.removeEventListener('start', handleStart)
+      controls.removeEventListener('change', handleChange)
+    }
+  }, [onZoomChange])
+
+  useEffect(() => () => cancelAnimation(), [])
+
+  // Initial focus on the Americas, slightly closer, no auto-rotate by default
+  useEffect(() => {
+    if (controlsRef.current) {
+      focusOn(INITIAL_LAT, INITIAL_LNG, INITIAL_DISTANCE)
+    } else {
+      // Defer one frame in case controls ref isn't ready yet
+      const raf = requestAnimationFrame(() => focusOn(INITIAL_LAT, INITIAL_LNG, INITIAL_DISTANCE))
+      return () => cancelAnimationFrame(raf)
+    }
+  }, [])
+
+  const [tooltip, setTooltip] = useState<{ x: number; y: number; label: string } | null>(null as any)
+
+  return (
+    <div className="relative h-full w-full overflow-hidden rounded-xl bg-[radial-gradient(circle_at_top_left,rgba(226,252,255,0.3),transparent_60%),radial-gradient(circle_at_bottom_right,rgba(191,219,254,0.28),transparent_55%),#0f1118]">
+      <Canvas
+        className="relative z-10"
+        camera={{ position: [0, 0, VISITOR_GLOBE_MAX_DISTANCE], fov: 45 }}
+        gl={{ alpha: true, antialias: true }}
+        onCreated={({ gl, camera }) => {
+          gl.setClearColor(0x000000, 0)
+          // Pre-orient the camera so the US faces forward even before OrbitControls attaches
+          const dir = latLngToVector3(INITIAL_LAT, INITIAL_LNG, INITIAL_DISTANCE)
+          ;(camera as THREE.PerspectiveCamera).position.copy(dir)
+          ;(camera as THREE.PerspectiveCamera).lookAt(0, 0, 0)
+        }}
+      >
+        <ambientLight intensity={1.05} color={new THREE.Color('#f1faff')} />
+        <hemisphereLight args={["#c4f1f9", "#dbeafe", 0.9]} />
+
+        <Globe />
+        <Halo />
+        <HexLandLayer />
+        <HexHighlights data={visitors} onHover={setTooltip} />
+      
+        <OrbitControls
+          ref={controlsRef}
+          enableZoom
+          enablePan={false}
+          autoRotate={autoRotate}
+          autoRotateSpeed={0.3}
+          minDistance={VISITOR_GLOBE_MIN_DISTANCE}
+          maxDistance={VISITOR_GLOBE_MAX_DISTANCE}
+          zoomSpeed={0.45}
+        />
+      </Canvas>
+      {tooltip && (
+        <div className="pointer-events-none absolute z-20 rounded bg-black/70 px-2 py-1 text-xs text-white" style={{ left: tooltip.x, top: tooltip.y }}>
+          {tooltip.label}
+        </div>
+      )}
+    </div>
+  )
+})
+
+function Globe() {
+  const uniforms = useMemo(() => ({
+    uColorTop:    { value: new THREE.Color('#f3fbff') },
+    uColorBottom: { value: new THREE.Color('#bde5ff') },
+    uRimColor:    { value: new THREE.Color('#e0faff') },
+    uRimStrength: { value: 0.36 }
+  }), [])
+
+  return (
+    <mesh>
+      <sphereGeometry args={[1, 96, 96]} />
+      <shaderMaterial
+        transparent={false}
+        uniforms={uniforms}
+        vertexShader={`
+          varying vec3 vNormal;
+          varying vec3 vWorldPos;
+          void main(){
+            vNormal = normalize(normalMatrix * normal);
+            vec4 wp = modelMatrix * vec4(position,1.0);
+            vWorldPos = wp.xyz;
+            gl_Position = projectionMatrix * viewMatrix * wp;
+          }
+        `}
+        fragmentShader={`
+          uniform vec3 uColorTop;
+          uniform vec3 uColorBottom;
+          uniform vec3 uRimColor;
+          uniform float uRimStrength;
+          varying vec3 vNormal;
+          varying vec3 vWorldPos;
+          void main(){
+            float t = smoothstep(-0.25, 0.65, vNormal.y);
+            vec3 base = mix(uColorBottom, uColorTop, t);
+            float rim = pow(1.0 - max(dot(normalize(vNormal), vec3(0.0,0.0,1.0)), 0.0), 1.1);
+            vec3 color = mix(base, uRimColor, rim * uRimStrength);
+            gl_FragColor = vec4(color, 1.0);
+          }
+        `}
+      />
+    </mesh>
+  )
+}
+
+// Subtle rim lighting to hide the aliased edge (GitHub-style halo)
+function Halo() {
+  const materialRef = useRef<THREE.ShaderMaterial>(null)
+  return (
+    <mesh>
+      <sphereGeometry args={[1.01, 64, 64]} />
+      <shaderMaterial
+        ref={materialRef}
+        transparent
+        depthWrite={false}
+        blending={THREE.AdditiveBlending}
+        vertexShader={`
+          varying vec3 vNormal;
+          void main() {
+            vNormal = normalize(normalMatrix * normal);
+            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+          }
+        `}
+        fragmentShader={`
+          varying vec3 vNormal;
+          void main() {
+            float intensity = pow(1.0 - max(dot(vNormal, vec3(0.0, 0.0, 1.0)), 0.0), 1.05);
+            gl_FragColor = vec4(0.93, 0.99, 1.0, intensity * 0.32);
+          }
+        `}
+      />
+    </mesh>
+  )
+}
+
+// Removed sprite-based VisitorsPoints in favor of hex highlights
+
+// Match three-globe's polar2Cartesian so our points align with its hex grid
+// three-globe formula (before scaling):
+//   phi   = (90 - lat) * DEG2RAD
+//   theta = (90 - lng) * DEG2RAD
+//   x = r * sin(phi) * cos(theta)
+//   y = r * cos(phi)
+//   z = r * sin(phi) * sin(theta)
+function latLngToVector3(lat: number, lng: number, radius: number): THREE.Vector3 {
+  const phi = (90 - lat) * (Math.PI / 180)
+  const theta = (90 - lng) * (Math.PI / 180)
+  const sinPhi = Math.sin(phi)
+
+  return new THREE.Vector3(
+    radius * sinPhi * Math.cos(theta),
+    radius * Math.cos(phi),
+    radius * sinPhi * Math.sin(theta)
+  )
+}
+
+function vector3ToLatLng(v: THREE.Vector3): { lat: number; lng: number } {
+  const r = v.length()
+  if (r === 0) return { lat: 0, lng: 0 }
+  const y = v.y / r
+  const phi = Math.acos(THREE.MathUtils.clamp(y, -1, 1))
+  const theta = Math.atan2(v.z, v.x)
+  const lat = 90 - (phi * 180) / Math.PI
+  const lng = 90 - (theta * 180) / Math.PI
+  const normLng = ((lng + 180) % 360) - 180
+  return { lat, lng: normLng }
+}

data/app/frontend/components/ui/accordion.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

data/app/frontend/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

data/app/frontend/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

data/app/frontend/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }