feat: Live Vocal Stress Meter — real-time SVG gauge with needle, pitch/energy sub-metrics, and spectral analysis during recording

frontend/app/record/page.tsx

@@ -6,6 +6,7 @@ import { useDemoMode } from "@/hooks/useDemoMode";
 import { api, AnalyzeResult } from "@/lib/api";
 import { getGreeting, getMoodEmoji } from "@/lib/utils";
 import WaveformVisualizer from "@/components/WaveformVisualizer";
+import VocalStressMeter from "@/components/VocalStressMeter";
 import CircularProgress from "@/components/CircularProgress";
 import EmotionBadge from "@/components/EmotionBadge";
 
@@ -99,6 +100,13 @@ export default function RecordPage() {
               )}
             </div>
 
+            {/* Live Stress Meter — only during recording */}
+            {state === "recording" && (
+              <div className="flex justify-center">
+                <VocalStressMeter analyserNode={analyserNode} isActive={true} />
+              </div>
+            )}
+
             <div className="flex flex-col items-center gap-4">
               <button
                 onClick={state === "recording" ? handleStop : startRecording}

frontend/components/VocalStressMeter.tsx

@@ -0,0 +1,240 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+interface VocalStressMeterProps {
+  analyserNode: AnalyserNode | null;
+  isActive: boolean;
+}
+
+// ── Stress labels & theme at each level ──────────────────────────────────────
+const LEVELS = [
+  { max: 22,  label: "Calm",    sublabel: "Relaxed, grounded",    color: "#34d399", glow: "#34d39988" },
+  { max: 42,  label: "Ease",    sublabel: "Measured, composed",   color: "#6ee7b7", glow: "#6ee7b788" },
+  { max: 58,  label: "Focused", sublabel: "Engaged, present",     color: "#fbbf24", glow: "#fbbf2488" },
+  { max: 72,  label: "Tension", sublabel: "Slight stress detected", color: "#f97316", glow: "#f9731688" },
+  { max: 86,  label: "Stress",  sublabel: "Elevated vocal stress", color: "#ef4444", glow: "#ef444488" },
+  { max: 100, label: "High",    sublabel: "Strong stress signals",  color: "#dc2626", glow: "#dc262688" },
+];
+
+function getLevel(score: number) {
+  return LEVELS.find(l => score <= l.max) ?? LEVELS[LEVELS.length - 1];
+}
+
+// ── SVG Arc helpers ──────────────────────────────────────────────────────────
+const CX = 100, CY = 100, R = 80;
+const START_ANGLE = -210; // degrees from 3-o'clock (SVG convention)
+const SWEEP = 240;        // total arc sweep in degrees
+
+function polarToXY(angleDeg: number, r = R) {
+  const rad = ((angleDeg - 90) * Math.PI) / 180;
+  return { x: CX + r * Math.cos(rad), y: CY + r * Math.sin(rad) };
+}
+
+function arcPath(startDeg: number, endDeg: number, r = R) {
+  const s = polarToXY(startDeg, r);
+  const e = polarToXY(endDeg, r);
+  const large = endDeg - startDeg > 180 ? 1 : 0;
+  return `M ${s.x} ${s.y} A ${r} ${r} 0 ${large} 1 ${e.x} ${e.y}`;
+}
+
+export default function VocalStressMeter({ analyserNode, isActive }: VocalStressMeterProps) {
+  const rafRef = useRef<number>(0);
+  const smoothRef = useRef<number>(0);
+  const [score, setScore] = useState(0);
+  const [energy, setEnergy] = useState(0);
+  const [centroid, setCentroid] = useState(0);
+
+  useEffect(() => {
+    if (!analyserNode || !isActive) {
+      cancelAnimationFrame(rafRef.current);
+      // Decay to zero
+      const decay = () => {
+        setScore(prev => {
+          const next = prev * 0.92;
+          if (next > 0.5) rafRef.current = requestAnimationFrame(decay);
+          return next;
+        });
+      };
+      rafRef.current = requestAnimationFrame(decay);
+      return;
+    }
+
+    const bufLen = analyserNode.fftSize;
+    const freqLen = analyserNode.frequencyBinCount;
+    const timeDomain = new Uint8Array(bufLen);
+    const freqDomain = new Uint8Array(freqLen);
+    const sampleRate = analyserNode.context.sampleRate;
+
+    const tick = () => {
+      rafRef.current = requestAnimationFrame(tick);
+
+      analyserNode.getByteTimeDomainData(timeDomain);
+      analyserNode.getByteFrequencyData(freqDomain);
+
+      // ── RMS Energy ────────────────────────────────────────────────────────
+      let sumSq = 0;
+      for (let i = 0; i < bufLen; i++) {
+        const v = (timeDomain[i] - 128) / 128;
+        sumSq += v * v;
+      }
+      const rms = Math.sqrt(sumSq / bufLen);   // 0..1
+
+      // ── Spectral Centroid (proxy for pitch height) ─────────────────────────
+      let weightedSum = 0, totalMag = 0;
+      for (let i = 0; i < freqLen; i++) {
+        const mag = freqDomain[i] / 255;
+        const freq = (i * sampleRate) / (2 * freqLen);
+        weightedSum += freq * mag;
+        totalMag += mag;
+      }
+      const specCentroid = totalMag > 0 ? weightedSum / totalMag : 0; // Hz
+
+      // ── Spectral Flux (rate of change in spectrum — jitter/tremor) ────────
+      // Simple approximation: variance of frequency magnitudes
+      const meanMag = totalMag / freqLen;
+      let fluxSum = 0;
+      for (let i = 0; i < freqLen; i++) {
+        const diff = freqDomain[i] / 255 - meanMag;
+        fluxSum += diff * diff;
+      }
+      const flux = Math.sqrt(fluxSum / freqLen);
+
+      // ── Stress Score (0-100) ──────────────────────────────────────────────
+      // normalise each component
+      const normEnergy   = Math.min(1, rms * 6);          // 0..1
+      const normCentroid = Math.min(1, specCentroid / 4000); // 0..1 (0-4kHz range)
+      const normFlux     = Math.min(1, flux * 4);          // 0..1
+
+      const rawStress = (normEnergy * 0.45 + normCentroid * 0.35 + normFlux * 0.20) * 100;
+
+      // Exponential smoothing (α = 0.08 → slow, smooth animation)
+      smoothRef.current = smoothRef.current * 0.92 + rawStress * 0.08;
+      const s = Math.min(100, Math.max(0, smoothRef.current));
+
+      setScore(s);
+      setEnergy(Math.round(normEnergy * 100));
+      setCentroid(Math.round(specCentroid));
+    };
+
+    rafRef.current = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(rafRef.current);
+  }, [analyserNode, isActive]);
+
+  const level = getLevel(score);
+  const needleAngle = START_ANGLE + (score / 100) * SWEEP;
+  const arcEnd = START_ANGLE + (score / 100) * SWEEP;
+  const needleTip = polarToXY(needleAngle, 62);
+  const needleBase1 = polarToXY(needleAngle + 90, 6);
+  const needleBase2 = polarToXY(needleAngle - 90, 6);
+
+  return (
+    <div className="flex flex-col items-center gap-6 w-full">
+      {/* Gauge */}
+      <div className="relative">
+        <svg
+          viewBox="20 20 160 130"
+          className="w-56 h-44"
+          style={{ filter: isActive ? `drop-shadow(0 0 12px ${level.glow})` : "none", transition: "filter 0.4s" }}
+        >
+          {/* Track arc (background) */}
+          <path
+            d={arcPath(START_ANGLE, START_ANGLE + SWEEP)}
+            fill="none"
+            stroke="#ffffff12"
+            strokeWidth="10"
+            strokeLinecap="round"
+          />
+
+          {/* Colored fill arc */}
+          <motion.path
+            d={arcPath(START_ANGLE, score > 0 ? arcEnd : START_ANGLE)}
+            fill="none"
+            stroke={level.color}
+            strokeWidth="10"
+            strokeLinecap="round"
+            style={{ transition: "stroke 0.4s ease, d 0.1s" }}
+          />
+
+          {/* Tick marks */}
+          {[0, 20, 40, 60, 80, 100].map(v => {
+            const a = START_ANGLE + (v / 100) * SWEEP;
+            const outer = polarToXY(a, 92);
+            const inner = polarToXY(a, 84);
+            return (
+              <line
+                key={v}
+                x1={inner.x} y1={inner.y}
+                x2={outer.x} y2={outer.y}
+                stroke="#ffffff25"
+                strokeWidth="1.5"
+              />
+            );
+          })}
+
+          {/* Needle */}
+          <motion.polygon
+            points={`${needleTip.x},${needleTip.y} ${needleBase1.x},${needleBase1.y} ${needleBase2.x},${needleBase2.y}`}
+            fill={level.color}
+            style={{ filter: `drop-shadow(0 0 4px ${level.color})`, transition: "fill 0.4s ease" }}
+          />
+
+          {/* Center cap */}
+          <circle cx={CX} cy={CY} r="6" fill={level.color} style={{ transition: "fill 0.4s ease" }} />
+          <circle cx={CX} cy={CY} r="3" fill="#0a0a0f" />
+
+          {/* Score in center */}
+          <text
+            x={CX} y={CY + 22}
+            textAnchor="middle"
+            fill="white"
+            fontSize="18"
+            fontWeight="bold"
+            fontFamily="system-ui"
+          >
+            {Math.round(score)}
+          </text>
+        </svg>
+
+        {/* Level label badge */}
+        <div className="absolute bottom-0 left-1/2 -translate-x-1/2 flex flex-col items-center">
+          <motion.div
+            key={level.label}
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            className="text-sm font-bold tracking-wide"
+            style={{ color: level.color }}
+          >
+            {level.label}
+          </motion.div>
+          <div className="text-[10px] text-white/30 mt-0.5">{level.sublabel}</div>
+        </div>
+      </div>
+
+      {/* Sub-metrics */}
+      <div className="flex gap-8 text-center">
+        <div>
+          <div className="text-lg font-bold text-emerald-400">{energy}</div>
+          <div className="text-[10px] text-white/30 uppercase tracking-wider">Volume</div>
+        </div>
+        <div className="w-px bg-white/10" />
+        <div>
+          <div className="text-lg font-bold text-purple-400">{centroid} <span className="text-xs font-normal text-white/30">Hz</span></div>
+          <div className="text-[10px] text-white/30 uppercase tracking-wider">Pitch</div>
+        </div>
+        <div className="w-px bg-white/10" />
+        <div>
+          <div className="text-lg font-bold" style={{ color: level.color }}>{Math.round(score)}</div>
+          <div className="text-[10px] text-white/30 uppercase tracking-wider">Stress</div>
+        </div>
+      </div>
+
+      {/* Range labels */}
+      <div className="flex justify-between w-48 text-[10px] text-white/20">
+        <span>Calm</span>
+        <span>Focused</span>
+        <span>High</span>
+      </div>
+    </div>
+  );
+}