feat: add measurement UI components and measure page with phase machine

frontend/src/components/BPMDisplay.tsx

@@ -0,0 +1,61 @@
+import { motion, AnimatePresence } from "framer-motion";
+import { type MeasurementStatus } from "../lib/constants";
+import { useState, useEffect, useRef } from "react";
+
+interface BPMDisplayProps {
+  bpm: number;
+  status: MeasurementStatus;
+}
+
+function useStableBpm(bpm: number): number {
+  const [stable, setStable] = useState(0);
+  const pendingRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    const rounded = Math.round(bpm);
+    if (rounded === stable) {
+      pendingRef.current = null;
+      return;
+    }
+    if (pendingRef.current === rounded) {
+      setStable(rounded);
+      pendingRef.current = null;
+    } else {
+      pendingRef.current = rounded;
+    }
+  }, [bpm, stable]);
+
+  return stable;
+}
+
+export default function BPMDisplay({ bpm, status }: BPMDisplayProps) {
+  const isActive = status === "measuring" || status === "calibrating";
+  const displayedBpm = useStableBpm(bpm);
+
+  return (
+    <div className="flex flex-col items-center">
+      <AnimatePresence mode="popLayout">
+        <motion.div
+          key={displayedBpm}
+          initial={{ opacity: 0, scale: 0.8, y: 10 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          exit={{ opacity: 0, scale: 0.8, y: -10 }}
+          transition={{ type: "spring", stiffness: 300, damping: 25 }}
+          className="text-8xl md:text-9xl font-bold leading-none"
+          style={{
+            fontFamily: "var(--font-mono)",
+            color: isActive ? "var(--color-accent)" : "rgba(255, 255, 255, 0.3)",
+          }}
+        >
+          {displayedBpm > 0 ? displayedBpm : "—"}
+        </motion.div>
+      </AnimatePresence>
+      <span
+        className="mt-2 text-lg text-text-secondary uppercase tracking-widest"
+        style={{ fontFamily: "var(--font-mono)" }}
+      >
+        BPM
+      </span>
+    </div>
+  );
+}

frontend/src/components/InfoDialog.tsx

@@ -0,0 +1,63 @@
+import * as Dialog from "@radix-ui/react-dialog";
+import { Info } from "lucide-react";
+
+const TIPS = [
+  "Stay still — motion artifacts are the #1 enemy",
+  "Face the camera directly — consistent ROI = stable signal",
+  "Avoid backlighting — don't sit with a bright window behind you",
+  "Decent indoor lighting — not too dim, not flickering fluorescent",
+  "Clean forehead — hair, glasses, or glare can distort the reading",
+  "Wait for calibration — 10-15 seconds for accurate results",
+];
+
+export default function InfoDialog() {
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger asChild>
+        <button
+          className="fixed bottom-6 right-6 p-2 rounded-full bg-bg-card/60 text-text-secondary hover:text-text-primary transition-colors cursor-pointer"
+          style={{ zIndex: 10 }}
+          aria-label="Tips for accurate reading"
+        >
+          <Info size={20} />
+        </button>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/60" style={{ zIndex: 50 }} />
+        <Dialog.Content
+          className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md rounded-[24px] p-6"
+          style={{
+            zIndex: 51,
+            background: "rgba(0, 0, 0, 0.75)",
+            backdropFilter: "blur(12px)",
+            border: "1px solid rgba(255, 255, 255, 0.15)",
+            boxShadow: "0 8px 24px rgba(0, 0, 0, 0.4)",
+          }}
+        >
+          <Dialog.Title
+            className="text-lg font-semibold text-text mb-4"
+            style={{ fontFamily: "var(--font-sans)" }}
+          >
+            Tips for Accurate Reading
+          </Dialog.Title>
+          <ul className="space-y-3">
+            {TIPS.map((tip, i) => (
+              <li key={i} className="flex gap-3 text-sm text-text-secondary">
+                <span className="text-accent mt-0.5">•</span>
+                <span>{tip}</span>
+              </li>
+            ))}
+          </ul>
+          <Dialog.Close asChild>
+            <button
+              className="mt-6 w-full py-2 rounded-full text-sm cursor-pointer"
+              style={{ background: "rgba(255, 255, 255, 0.03)", border: "1px solid rgba(255, 255, 255, 0.08)", color: "rgba(255, 255, 255, 0.7)", fontFamily: "var(--font-sans)" }}
+            >
+              Got it
+            </button>
+          </Dialog.Close>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}

frontend/src/components/ProgressBar.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+
+interface ProgressBarProps {
+  estimatedSeconds: number;
+}
+
+export default function ProgressBar({ estimatedSeconds }: ProgressBarProps) {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    setProgress(0);
+    const interval = setInterval(() => {
+      setProgress((prev) => {
+        if (prev >= 100) return 100;
+        return prev + 100 / (estimatedSeconds * 10);
+      });
+    }, 100);
+    return () => clearInterval(interval);
+  }, [estimatedSeconds]);
+
+  return (
+    <div className="w-64 h-1.5 rounded-full bg-bg-card overflow-hidden">
+      <div
+        className="h-full rounded-full bg-accent transition-all duration-100"
+        style={{ width: `${Math.min(progress, 100)}%` }}
+      />
+    </div>
+  );
+}

frontend/src/components/PulseRing.tsx

@@ -0,0 +1,19 @@
+import { motion } from "framer-motion";
+
+export default function PulseRing() {
+  return (
+    <div className="relative flex items-center justify-center w-32 h-32">
+      <motion.div
+        animate={{ scale: [1, 1.2, 1], opacity: [0.6, 0.2, 0.6] }}
+        transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
+        className="absolute w-full h-full rounded-full border-2 border-accent"
+      />
+      <motion.div
+        animate={{ scale: [1, 1.35, 1], opacity: [0.4, 0.1, 0.4] }}
+        transition={{ duration: 2, repeat: Infinity, ease: "easeInOut", delay: 0.3 }}
+        className="absolute w-full h-full rounded-full border border-accent-glow"
+      />
+      <div className="w-4 h-4 rounded-full bg-accent" />
+    </div>
+  );
+}

frontend/src/components/ROIOverlay.tsx

@@ -0,0 +1,30 @@
+interface ROIOverlayProps {
+  roi: { x: number; y: number; width: number; height: number } | null;
+  videoWidth: number;
+  videoHeight: number;
+}
+
+export default function ROIOverlay({ roi, videoWidth, videoHeight }: ROIOverlayProps) {
+  if (!roi || videoWidth === 0 || videoHeight === 0) return null;
+
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const coverScale = Math.max(vw / videoWidth, vh / videoHeight);
+  const offsetX = (vw - videoWidth * coverScale) / 2;
+  const offsetY = (vh - videoHeight * coverScale) / 2;
+
+  return (
+    <div
+      className="fixed border-2 rounded-md pointer-events-none"
+      style={{
+        left: roi.x * coverScale + offsetX,
+        top: roi.y * coverScale + offsetY,
+        width: roi.width * coverScale,
+        height: roi.height * coverScale,
+        borderColor: "rgba(16, 185, 129, 0.4)",
+        backgroundColor: "rgba(16, 185, 129, 0.05)",
+        zIndex: 1,
+      }}
+    />
+  );
+}

frontend/src/components/StartButton.tsx

@@ -0,0 +1,46 @@
+import { motion } from "framer-motion";
+
+interface StartButtonProps {
+  onStart: () => void;
+  onStop: () => void;
+  isMeasuring: boolean;
+}
+
+export default function StartButton({ onStart, onStop, isMeasuring }: StartButtonProps) {
+  if (isMeasuring) {
+    return (
+      <button
+        onClick={onStop}
+        className="fixed top-6 right-6 px-4 py-2 text-xs tracking-wide cursor-pointer"
+        style={{
+          background: "rgba(255, 255, 255, 0.03)",
+          border: "1px solid rgba(255, 255, 255, 0.08)",
+          borderRadius: "9999px",
+          color: "rgba(255, 255, 255, 0.5)",
+          fontFamily: "var(--font-mono)",
+          letterSpacing: "0.1em",
+          textTransform: "uppercase",
+          zIndex: 10,
+          transition: "all 150ms ease",
+        }}
+      >
+        Stop
+      </button>
+    );
+  }
+
+  return (
+    <motion.button
+      initial={{ scale: 0.9, opacity: 0 }}
+      animate={{ scale: 1, opacity: 1 }}
+      transition={{ type: "spring", stiffness: 200 }}
+      whileHover={{ scale: 1.02 }}
+      whileTap={{ scale: 0.98 }}
+      onClick={onStart}
+      className="px-10 py-4 bg-accent text-white font-semibold text-sm tracking-wide cursor-pointer"
+      style={{ fontFamily: "var(--font-sans)", borderRadius: "9999px" }}
+    >
+      Start Measurement
+    </motion.button>
+  );
+}

frontend/src/components/StatusPill.tsx

@@ -0,0 +1,45 @@
+import { motion } from "framer-motion";
+import { type MeasurementStatus } from "../lib/constants";
+
+interface StatusPillProps {
+  status: MeasurementStatus;
+}
+
+const STATUS_CONFIG: Record<MeasurementStatus, { label: string; color: string; bg: string; border: string }> = {
+  buffering: { label: "Buffering...", color: "text-warning", bg: "rgba(245, 158, 11, 0.08)", border: "rgba(245, 158, 11, 0.2)" },
+  calibrating: { label: "Calibrating...", color: "text-warning", bg: "rgba(245, 158, 11, 0.08)", border: "rgba(245, 158, 11, 0.2)" },
+  measuring: { label: "Measuring", color: "text-accent", bg: "rgba(16, 185, 129, 0.08)", border: "rgba(16, 185, 129, 0.2)" },
+  poor_signal: { label: "Stay still", color: "text-danger", bg: "rgba(239, 68, 68, 0.08)", border: "rgba(239, 68, 68, 0.2)" },
+  error: { label: "Error", color: "text-danger", bg: "rgba(239, 68, 68, 0.08)", border: "rgba(239, 68, 68, 0.2)" },
+};
+
+export default function StatusPill({ status }: StatusPillProps) {
+  const config = STATUS_CONFIG[status] || STATUS_CONFIG.error;
+
+  return (
+    <motion.div
+      layout
+      className={`inline-flex items-center gap-2 px-4 py-1.5 rounded-full`}
+      style={{ background: config.bg, border: `1px solid ${config.border}` }}
+    >
+      <span
+        className="w-2 h-2 rounded-full"
+        style={{
+          backgroundColor:
+            status === "measuring"
+              ? "var(--color-accent)"
+              : status === "poor_signal" || status === "error"
+                ? "var(--color-danger)"
+                : "var(--color-warning)",
+          animation: status === "measuring" ? "pulse 1.5s ease-in-out infinite" : "none",
+        }}
+      />
+      <span
+        className={`text-sm font-medium ${config.color}`}
+        style={{ fontFamily: "var(--font-mono)" }}
+      >
+        {config.label}
+      </span>
+    </motion.div>
+  );
+}

frontend/src/components/WaveformChart.tsx

@@ -0,0 +1,35 @@
+import { useId } from "react";
+import { AreaChart, Area, YAxis, ResponsiveContainer } from "recharts";
+
+interface WaveformChartProps {
+  data: number[];
+}
+
+export default function WaveformChart({ data }: WaveformChartProps) {
+  const gradientId = useId();
+  const chartData = data.map((value, index) => ({ index, value }));
+
+  return (
+    <div className="w-full h-32 opacity-80">
+      <ResponsiveContainer width="100%" height="100%">
+        <AreaChart data={chartData} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
+          <defs>
+            <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor="#10b981" stopOpacity={0.6} />
+              <stop offset="100%" stopColor="#10b981" stopOpacity={0} />
+            </linearGradient>
+          </defs>
+          <YAxis domain={["auto", "auto"]} hide />
+          <Area
+            type="monotone"
+            dataKey="value"
+            stroke="#10b981"
+            strokeWidth={1.5}
+            fill={`url(#${gradientId})`}
+            isAnimationActive={false}
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

frontend/src/components/WebcamFeed.tsx

@@ -7,9 +7,10 @@ interface WebcamFeedProps {
   onFrame: (r: number, g: number, b: number) => void;
   onFaceDetected: (roi: { x: number; y: number; width: number; height: number } | null) => void;
   onCameraError: (error: string) => void;
+  onVideoSize?: (width: number, height: number) => void;
 }
 
-export default function WebcamFeed({ onFrame, onFaceDetected, onCameraError }: WebcamFeedProps) {
+export default function WebcamFeed({ onFrame, onFaceDetected, onCameraError, onVideoSize }: WebcamFeedProps) {
   const videoRef = useRef<HTMLVideoElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const { detectFace, loading: detectorLoading } = useFaceDetection();
@@ -54,6 +55,9 @@ export default function WebcamFeed({ onFrame, onFaceDetected, onCameraError }: W
 
       canvas.width = video.videoWidth;
       canvas.height = video.videoHeight;
+      if (canvas.width > 0 && canvas.height > 0) {
+        onVideoSize?.(canvas.width, canvas.height);
+      }
       ctx.drawImage(video, 0, 0);
 
       const now = performance.now();

frontend/src/pages/MeasurePage.tsx

@@ -1,3 +1,191 @@
+import { useNavigate } from "react-router-dom";
+import { motion, AnimatePresence } from "framer-motion";
+import { usePulseCam } from "../hooks/usePulseCam";
+import WebcamFeed from "../components/WebcamFeed";
+import BPMDisplay from "../components/BPMDisplay";
+import WaveformChart from "../components/WaveformChart";
+import StatusPill from "../components/StatusPill";
+import PulseRing from "../components/PulseRing";
+import StartButton from "../components/StartButton";
+import InfoDialog from "../components/InfoDialog";
+import ROIOverlay from "../components/ROIOverlay";
+import { useState, useCallback } from "react";
+
 export default function MeasurePage() {
-  return <div>MeasurePage</div>;
+  const navigate = useNavigate();
+  const { phase, bpm, confidence, waveform, status, sendFrame, start, stop } = usePulseCam();
+  const [cameraError, setCameraError] = useState<string | null>(null);
+  const [roi, setRoi] = useState<{ x: number; y: number; width: number; height: number } | null>(null);
+  const [videoSize, setVideoSize] = useState<{ w: number; h: number } | null>(null);
+
+  const handleFrame = useCallback(
+    (r: number, g: number, b: number) => {
+      sendFrame(r, g, b);
+    },
+    [sendFrame]
+  );
+
+  const handleFaceDetected = useCallback(
+    (newRoi: { x: number; y: number; width: number; height: number } | null) => {
+      setRoi(newRoi);
+    },
+    []
+  );
+
+  const handleCameraError = useCallback((error: string) => {
+    setCameraError(error);
+  }, []);
+
+  const handleVideoSize = useCallback((w: number, h: number) => {
+    setVideoSize((prev) => (prev && prev.w === w && prev.h === h) ? prev : { w, h });
+  }, []);
+
+  const isMeasuring = phase === "measuring";
+
+  return (
+    <div className="relative w-screen h-screen overflow-hidden bg-bg-primary">
+      {isMeasuring && !cameraError && (
+        <WebcamFeed
+          onFrame={handleFrame}
+          onFaceDetected={handleFaceDetected}
+          onCameraError={handleCameraError}
+          onVideoSize={handleVideoSize}
+        />
+      )}
+
+      {isMeasuring && roi && videoSize && (
+        <ROIOverlay roi={roi} videoWidth={videoSize.w} videoHeight={videoSize.h} />
+      )}
+
+      <AnimatePresence mode="wait">
+        {phase === "idle" && !cameraError && (
+          <motion.div
+            key="idle"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="relative z-10 flex flex-col items-center justify-center h-full"
+          >
+            <StartButton onStart={start} onStop={stop} isMeasuring={false} />
+          </motion.div>
+        )}
+
+        {phase === "checking" && (
+          <motion.div
+            key="checking"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="relative z-10 flex flex-col items-center justify-center h-full"
+          >
+            <PulseRing />
+            <p className="mt-6 text-text-secondary" style={{ fontFamily: "var(--font-mono)", fontSize: "11px", letterSpacing: "0.1em", textTransform: "uppercase" }}>
+              Checking server...
+            </p>
+          </motion.div>
+        )}
+
+        {phase === "connecting" && (
+          <motion.div
+            key="connecting"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="relative z-10 flex flex-col items-center justify-center h-full"
+          >
+            <PulseRing />
+            <p className="mt-6 text-text-secondary" style={{ fontFamily: "var(--font-mono)", fontSize: "11px", letterSpacing: "0.1em", textTransform: "uppercase" }}>
+              Connecting...
+            </p>
+          </motion.div>
+        )}
+
+        {phase === "measuring" && !cameraError && (
+          <motion.div
+            key="measuring"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="relative z-10 flex flex-col items-center justify-center h-full pointer-events-none"
+          >
+            <BPMDisplay bpm={bpm} status={status} />
+            <div className="mt-4">
+              <StatusPill status={status} />
+            </div>
+            {confidence > 0 && (
+              <p
+                className="mt-2"
+                style={{ fontFamily: "var(--font-mono)", fontSize: "10px", letterSpacing: "0.1em", color: "rgba(255, 255, 255, 0.4)" }}
+              >
+                Confidence: {Math.round(confidence * 100)}%
+              </p>
+            )}
+          </motion.div>
+        )}
+
+        {phase === "error" && (
+          <motion.div
+            key="error"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="relative z-10 flex flex-col items-center justify-center h-full"
+          >
+            <p className="text-danger text-lg font-medium" style={{ fontFamily: "var(--font-sans)" }}>
+              Something went wrong
+            </p>
+            <p className="mt-2 text-text-secondary text-sm text-center max-w-sm px-4">
+              The server could not be reached. Please try again.
+            </p>
+            <button
+              onClick={() => navigate("/")}
+              className="mt-6 px-6 py-2 cursor-pointer"
+              style={{ background: "rgba(255, 255, 255, 0.03)", border: "1px solid rgba(255, 255, 255, 0.08)", borderRadius: "9999px", color: "rgba(255, 255, 255, 0.7)", fontFamily: "var(--font-sans)", transition: "all 150ms ease" }}
+            >
+              Back to Home
+            </button>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {isMeasuring && waveform.length > 0 && (
+        <div className="fixed bottom-0 left-0 right-0 z-10 px-4 pb-4">
+          <WaveformChart data={waveform} />
+        </div>
+      )}
+
+      {isMeasuring && (
+        <>
+          <StartButton onStart={start} onStop={stop} isMeasuring={true} />
+          <InfoDialog />
+        </>
+      )}
+
+      <button
+        onClick={() => navigate("/")}
+        className="fixed top-6 left-6 text-sm font-semibold cursor-pointer z-10"
+        style={{ fontFamily: "var(--font-sans)", color: "rgba(255, 255, 255, 0.5)", transition: "all 150ms ease" }}
+      >
+        PulseCam
+      </button>
+
+      {cameraError && (
+        <div className="relative z-10 flex flex-col items-center justify-center h-full">
+          <p className="text-danger text-lg font-medium" style={{ fontFamily: "var(--font-sans)" }}>
+            Camera access required
+          </p>
+          <p className="mt-2 text-text-secondary text-sm text-center max-w-sm px-4">
+            {cameraError}. Please allow camera permission and try again.
+          </p>
+          <button
+            onClick={() => { setCameraError(null); start(); }}
+            className="mt-6 px-6 py-2 cursor-pointer"
+            style={{ background: "rgba(16, 185, 129, 0.1)", border: "1px solid rgba(16, 185, 129, 0.3)", borderRadius: "9999px", color: "#10b981", fontFamily: "var(--font-sans)", transition: "all 150ms ease" }}
+          >
+            Retry
+          </button>
+        </div>
+      )}
+    </div>
+  );
 }