feat: add CameraOverlay bounding box for live camera feed

Author: jpdevhub

src/components/CameraOverlay.tsx

@@ -0,0 +1,43 @@
+import React, { useRef, useEffect } from 'react';
+
+interface Props {
+  active: boolean;
+}
+
+export default function CameraOverlay({ active }: Props) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    if (!active) return;
+
+    const w = canvas.width;
+    const h = canvas.height;
+    const x = w * 0.1;
+    const y = h * 0.15;
+    const bw = w * 0.8;
+    const bh = h * 0.7;
+
+    ctx.strokeStyle = 'rgba(0, 255, 180, 0.75)';
+    ctx.lineWidth = 2;
+    ctx.setLineDash([8, 4]);
+    ctx.strokeRect(x, y, bw, bh);
+
+    ctx.fillStyle = 'rgba(0, 255, 180, 0.15)';
+    ctx.fillRect(x, y, bw, bh);
+  }, [active]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      width={640}
+      height={480}
+      className="absolute inset-0 w-full h-full z-30 pointer-events-none"
+    />
+  );
+}

src/pages/ScannerPage.tsx

@@ -10,6 +10,7 @@ import {
   Upload,
 } from "lucide-react";
 import StatusTerminal from "../components/StatusTerminal";
+import CameraOverlay from "../components/CameraOverlay";
 import { api, isAuthenticated } from "../lib/api";
 import { FishFreshnessInference } from "../fusionInference.js";
 import type { ScanResult } from "../lib/types";
@@ -470,6 +471,9 @@ export default function ScannerPage() {
             />
           )}
 
+          {/* Camera Overlay Bounding Box */}
+          <CameraOverlay active={scanPhase === "idle"} />
+
           {/* Grid overlay */}
           <div
             className="absolute inset-0 opacity-[0.2] mix-blend-screen pointer-events-none z-10"