feat: add CameraOverlay bounding box for live camera feed (closes #58)

[dikshajangra12918-oss]

Description

Closes #58

Added a CameraOverlay component that draws a dashed green bounding box over the live camera feed to help users frame the fish correctly before capturing.

Changes

• New component: src/components/CameraOverlay.tsx
• Overlay is shown only during idle scan phase
• Uses HTML5 Canvas API for the framing guide

Checklist

• Branch is rebased on main, not merged

Summary by CodeRabbit

• New Features
  • Added a visual camera overlay to the scanner interface. The overlay appears when the scanner is idle, providing visual guidance to help users properly frame their camera for scanning.

[vercel]

@irfan-ansari-au28 is attempting to deploy a commit to the karan3431's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Warning

Review limit reached

@jpdevhub, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 4 minutes and 29 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: c663b058-6358-4bfb-8194-11e3f1646158

📥 Commits

Reviewing files that changed from the base of the PR and between 9139466 and 82479a1.

📒 Files selected for processing (2)

• src/components/CameraOverlay.tsx
• src/pages/ScannerPage.tsx

Warning

.coderabbit.yaml has a parsing error

The CodeRabbit configuration file in this repository has a parsing error and default settings were used instead. Please fix the error(s) in the configuration file. You can initialize chat with CodeRabbit to get help with the configuration file.

💥 Parsing errors (1)

Validation error: Invalid input: expected object, received boolean at "reviews.auto_review"

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

📝 Walkthrough

Walkthrough

A new CameraOverlay React component is added that renders a canvas-based dashed rectangle overlay, active only when its active prop is true. ScannerPage imports and renders this component, passing active={scanPhase === 'idle'} to show the overlay during the idle scan phase.

Changes

CameraOverlay Component and ScannerPage Integration

Layer / File(s)	Summary
CameraOverlay component implementation src/components/CameraOverlay.tsx	Defines Props { active: boolean }, renders an absolutely positioned <canvas> at 640×480 with pointer-events-none, and uses useEffect to conditionally draw a dashed/filled rectangle overlay, including canvas clearing and missing context guards.
ScannerPage wiring src/pages/ScannerPage.tsx	Imports CameraOverlay and inserts it into the viewport UI, wiring active={scanPhase === 'idle'} to show the overlay when the scanner is idle.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• jpdevhub/FreshScanAi#96: Refactors ScannerPage's scan-phase state and UI flow, directly overlapping with the scanPhase === 'idle' gating used to wire CameraOverlay in this PR.

Poem

🐇 A canvas appears, dashed lines take their place,
When scanning is idle, a box marks the space.
The overlay waits with a patient delight,
Proportioned in pixels, positioned just right.
Hop, hop — the fish framing guide is now live! 🎣

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main change: adding a CameraOverlay component with a bounding box for the live camera feed.
Linked Issues check	✅ Passed	The PR implements the bonus objective from #58 (framing guide with bounding box), but does not address the primary requirements (stream camera feed and capture functionality).
Out of Scope Changes check	✅ Passed	All changes are directly scoped to implementing the CameraOverlay component and integrating it into ScannerPage as specified in issue #58.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
fresh-scan-ai	Ready	Preview, Comment	Jun 18, 2026 5:01pm

[jpdevhub]

Thanks for contributing