From 5e166380ee71de22ec79b6dcb8dae0c2d697f45d Mon Sep 17 00:00:00 2001
From: Karan Singh <karan1093579@gmail.com>
Date: Thu, 18 Jun 2026 22:23:44 +0530
Subject: [PATCH 1/2] feat: add CameraOverlay bounding box for live camera feed

---
 src/components/CameraOverlay.tsx | 43 ++++++++++++++++++++++++++++++++
 src/pages/ScannerPage.tsx        |  4 +++
 2 files changed, 47 insertions(+)
 create mode 100644 src/components/CameraOverlay.tsx

diff --git a/src/components/CameraOverlay.tsx b/src/components/CameraOverlay.tsx
new file mode 100644
index 0000000..232fb5c
--- /dev/null
+++ b/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"
+    />
+  );
+}
diff --git a/src/pages/ScannerPage.tsx b/src/pages/ScannerPage.tsx
index 4f5e4e3..af78763 100644
--- a/src/pages/ScannerPage.tsx
+++ b/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"

From 82479a168f4ac13f1e7e38ed29c9e8cc9215ca9a Mon Sep 17 00:00:00 2001
From: Karan Singh <karan1093579@gmail.com>
Date: Thu, 18 Jun 2026 22:30:42 +0530
Subject: [PATCH 2/2] fix: remove unused React import to fix CI build

---
 src/components/CameraOverlay.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CameraOverlay.tsx b/src/components/CameraOverlay.tsx
index 232fb5c..f5bd40a 100644
--- a/src/components/CameraOverlay.tsx
+++ b/src/components/CameraOverlay.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 
 interface Props {
   active: boolean;