From 7a9185eadb3609de596e3d150090af19225fdab6 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Wed, 31 Dec 2025 22:35:34 -0600
Subject: [PATCH] fix(vision): hide flip camera button when only one camera
 available
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Only show camera controls section when there's something to display:
- Flip button: only if multiple cameras
- Torch button: only if torch available
- Whole section: only if either button would be shown

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/vision/AbacusVisionBridge.tsx  | 53 ++++++++++---------
 1 file changed, 28 insertions(+), 25 deletions(-)

diff --git a/apps/web/src/components/vision/AbacusVisionBridge.tsx b/apps/web/src/components/vision/AbacusVisionBridge.tsx
index 83b11cfd..5343903a 100644
--- a/apps/web/src/components/vision/AbacusVisionBridge.tsx
+++ b/apps/web/src/components/vision/AbacusVisionBridge.tsx
@@ -415,8 +415,9 @@ export function AbacusVisionBridge({
         </button>
       </div>
 
-      {/* Camera controls (local camera) */}
-      {cameraSource === 'local' && vision.availableDevices.length > 0 && (
+      {/* Camera controls (local camera) - only show if there's something to display */}
+      {cameraSource === 'local' &&
+        (vision.availableDevices.length > 1 || vision.isTorchAvailable) && (
         <div
           data-element="camera-controls"
           className={css({
@@ -452,29 +453,31 @@ export function AbacusVisionBridge({
             </select>
           )}
 
-          {/* Flip camera button */}
-          <button
-            type="button"
-            onClick={() => vision.flipCamera()}
-            data-action="flip-camera"
-            className={css({
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              width: '40px',
-              height: '40px',
-              bg: 'gray.700',
-              color: 'white',
-              border: 'none',
-              borderRadius: 'md',
-              cursor: 'pointer',
-              fontSize: 'lg',
-              _hover: { bg: 'gray.600' },
-            })}
-            title={`Switch to ${vision.facingMode === 'environment' ? 'front' : 'back'} camera`}
-          >
-            🔄
-          </button>
+          {/* Flip camera button - only show if multiple cameras available */}
+          {vision.availableDevices.length > 1 && (
+            <button
+              type="button"
+              onClick={() => vision.flipCamera()}
+              data-action="flip-camera"
+              className={css({
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: '40px',
+                height: '40px',
+                bg: 'gray.700',
+                color: 'white',
+                border: 'none',
+                borderRadius: 'md',
+                cursor: 'pointer',
+                fontSize: 'lg',
+                _hover: { bg: 'gray.600' },
+              })}
+              title={`Switch to ${vision.facingMode === 'environment' ? 'front' : 'back'} camera`}
+            >
+              🔄
+            </button>
+          )}
 
           {/* Torch toggle button (only if available) */}
           {vision.isTorchAvailable && (