From c0e32b060d84e0730b232085f9e1c77e7520fdac Mon Sep 17 00:00:00 2001
From: 0xaudacity <147813840+Bighero0122@users.noreply.github.com>
Date: Tue, 9 Dec 2025 15:15:01 -0500
Subject: [PATCH 1/2] Revert "Revert "Rob 53 extending robot capabilities""

---
 src/pages/Teleop.css    | 239 ++++++++++++++++++++++++++++++++++++++++
 src/pages/Teleop.tsx    | 100 ++++++++++++++++-
 src/pages/UserSetup.css |  50 +++++++--
 src/pages/UserSetup.tsx |   2 +
 tsconfig.tsbuildinfo    |   1 -
 5 files changed, 383 insertions(+), 9 deletions(-)
 delete mode 100644 tsconfig.tsbuildinfo

diff --git a/src/pages/Teleop.css b/src/pages/Teleop.css
index 177af59..9dbf7f3 100644
--- a/src/pages/Teleop.css
+++ b/src/pages/Teleop.css
@@ -618,6 +618,232 @@ html {
   font-size: 1rem;
 }
 
+/* Camera Control Section */
+
+.camera-controls-section {
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 12px;
+  padding: 1rem;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.camera-controls-section .section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+
+.camera-controls-section .section-header h4 {
+  margin: 0;
+  color: #fff;
+  font-size: 0.95rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.camera-controls-section .section-header h4 svg {
+  color: #ffc107;
+}
+
+.camera-mode-toggle {
+  display: flex;
+  gap: 0.25rem;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  padding: 0.2rem;
+}
+
+.mini-btn {
+  padding: 0.35rem 0.6rem;
+  font-size: 0.7rem;
+  font-weight: 600;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.mini-btn:hover {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.mini-btn.active {
+  background: rgba(255, 193, 7, 0.2);
+  color: #ffc107;
+}
+
+/* Camera D-Pad */
+.camera-manual-controls {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.camera-dpad {
+  display: grid;
+  grid-template-areas:
+    ". up ."
+    "left center right"
+    ". down .";
+  grid-template-columns: 48px 48px 48px;
+  grid-template-rows: 48px 48px 48px;
+  gap: 4px;
+}
+
+.dpad-btn {
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 8px;
+  color: rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  transition: all 0.15s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.9rem;
+}
+
+.dpad-btn:hover {
+  background: rgba(255, 193, 7, 0.15);
+  border-color: rgba(255, 193, 7, 0.3);
+  color: #ffc107;
+}
+
+.dpad-btn:active {
+  background: rgba(255, 193, 7, 0.3);
+  transform: scale(0.95);
+}
+
+.dpad-btn.up { grid-area: up; }
+.dpad-btn.down { grid-area: down; }
+.dpad-btn.left { grid-area: left; }
+.dpad-btn.right { grid-area: right; }
+
+.dpad-center {
+  grid-area: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 193, 7, 0.1);
+  border-radius: 50%;
+  color: rgba(255, 193, 7, 0.5);
+  font-size: 1rem;
+}
+
+/* Zoom Controls */
+.zoom-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 1rem;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 24px;
+}
+
+.zoom-btn {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  background: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.85rem;
+}
+
+.zoom-btn:hover:not(:disabled) {
+  background: rgba(255, 193, 7, 0.15);
+  border-color: rgba(255, 193, 7, 0.3);
+  color: #ffc107;
+}
+
+.zoom-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.zoom-indicator {
+  min-width: 50px;
+  text-align: center;
+  font-weight: 700;
+  font-size: 0.95rem;
+  color: #ffc107;
+}
+
+/* Camera Position Display */
+.camera-position {
+  display: flex;
+  gap: 1.5rem;
+}
+
+.position-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.2rem;
+}
+
+.pos-label {
+  font-size: 0.7rem;
+  color: rgba(255, 255, 255, 0.5);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.pos-value {
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #fff;
+}
+
+/* Camera Reset Button */
+.camera-reset-btn {
+  padding: 0.5rem 1rem;
+  font-size: 0.8rem;
+  font-weight: 600;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.05);
+  color: rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+
+.camera-reset-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+  color: #fff;
+}
+
+/* Auto-Follow Mode Info */
+.camera-follow-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 1.5rem;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 0.85rem;
+}
+
+.camera-follow-info svg {
+  color: #ffc107;
+  font-size: 1.2rem;
+}
+
 /* Responsive */
 @media (max-width: 768px) {
   .security-indicator-banner {
@@ -690,4 +916,17 @@ html {
     justify-content: center;
   }
 }
+
+@media (max-width: 768px) {
+  .camera-controls-section .section-header {
+    flex-direction: column;
+    gap: 0.75rem;
+    align-items: flex-start;
+  }
+  
+  .camera-dpad {
+    grid-template-columns: 44px 44px 44px;
+    grid-template-rows: 44px 44px 44px;
+  }
+}
   
\ No newline at end of file
diff --git a/src/pages/Teleop.tsx b/src/pages/Teleop.tsx
index fc40b67..7b9a410 100644
--- a/src/pages/Teleop.tsx
+++ b/src/pages/Teleop.tsx
@@ -14,7 +14,12 @@ import {
   faGamepad,
   faRightFromBracket,
   faCheckCircle,
-  faLock
+  faLock,
+  faCamera,
+  faSearchPlus,
+  faSearchMinus,
+  faExpand,
+  faRotate as faRotateBack
 } from '@fortawesome/free-solid-svg-icons';
 import "./Teleop.css";
 import { usePageTitle } from "../hooks/usePageTitle";
@@ -33,6 +38,11 @@ export default function Teleop() {
   const [gamepadDetected, setGamepadDetected] = useState(false);
   const sendIntervalMs = 100; // 10 Hz
 
+  const [cameraMode, setCameraMode] = useState<'manual' | 'follow'>('manual');
+  const [cameraPan, setCameraPan] = useState(0);  // -100 to 100
+  const [cameraTilt, setCameraTilt] = useState(0); // -100 to 100
+  const [cameraZoom, setCameraZoom] = useState(1); // 1x to 5x
+
   // Read WebSocket URL from amplify_outputs.json (AWS signaling server)
   // Falls back to local WebSocket for development
   const wsUrl = outputs?.custom?.signaling?.websocketUrl 
@@ -410,6 +420,94 @@ export default function Teleop() {
             </div>
           </div>
 
+          <div className="camera-controls-section">
+            <div className="section-header">
+              <h4>
+                <FontAwesomeIcon icon={faCamera} />
+                Camera Control
+              </h4>
+              <div className="camera-mode-toggle">
+                <button 
+                  className={`mini-btn ${cameraMode === 'manual' ? 'active' : ''}`}
+                  onClick={() => setCameraMode('manual')}
+                >
+                  Manual
+                </button>
+                <button 
+                  className={`mini-btn ${cameraMode === 'follow' ? 'active' : ''}`}
+                  onClick={() => setCameraMode('follow')}
+                >
+                  Auto-Follow
+                </button>
+              </div>
+            </div>
+
+            {cameraMode === 'manual' && (
+              <div className="camera-manual-controls">
+                <div className="camera-dpad">
+                  <button className="dpad-btn up" onMouseDown={() => setCameraTilt(50)} onMouseUp={() => setCameraTilt(0)}>
+                    <span>▲</span>
+                  </button>
+                  <button className="dpad-btn left" onMouseDown={() => setCameraPan(-50)} onMouseUp={() => setCameraPan(0)}>
+                    <span>◀</span>
+                  </button>
+                  <div className="dpad-center">
+                    <FontAwesomeIcon icon={faCamera} />
+                  </div>
+                  <button className="dpad-btn right" onMouseDown={() => setCameraPan(50)} onMouseUp={() => setCameraPan(0)}>
+                    <span>▶</span>
+                  </button>
+                  <button className="dpad-btn down" onMouseDown={() => setCameraTilt(-50)} onMouseUp={() => setCameraTilt(0)}>
+                    <span>▼</span>
+                  </button>
+                </div>
+
+                <div className="zoom-controls">
+                  <button 
+                    className="zoom-btn"
+                    onClick={() => setCameraZoom(z => Math.max(1, z - 0.5))}
+                    disabled={cameraZoom <= 1}
+                  >
+                    <FontAwesomeIcon icon={faSearchMinus} />
+                  </button>
+                  <div className="zoom-indicator">
+                    <span>{cameraZoom.toFixed(1)}x</span>
+                  </div>
+                  <button 
+                    className="zoom-btn"
+                    onClick={() => setCameraZoom(z => Math.min(5, z + 0.5))}
+                    disabled={cameraZoom >= 5}
+                  >
+                    <FontAwesomeIcon icon={faSearchPlus} />
+                  </button>
+                </div>
+
+                <div className="camera-position">
+                  <div className="position-item">
+                    <span className="pos-label">Pan</span>
+                    <span className="pos-value">{cameraPan}°</span>
+                  </div>
+                  <div className="position-item">
+                    <span className="pos-label">Tilt</span>
+                    <span className="pos-value">{cameraTilt}°</span>
+                  </div>
+                </div>
+
+                <button className="camera-reset-btn" onClick={() => { setCameraPan(0); setCameraTilt(0); setCameraZoom(1); }}>
+                  <FontAwesomeIcon icon={faRotateBack} />
+                  Reset Camera
+                </button>
+              </div>
+            )}
+
+            {cameraMode === 'follow' && (
+              <div className="camera-follow-info">
+                <FontAwesomeIcon icon={faExpand} />
+                <span>Camera follows robot movement direction</span>
+              </div>
+            )}
+          </div>
+
           <button 
             onClick={handleEndSession} 
             className="end-session-btn"
diff --git a/src/pages/UserSetup.css b/src/pages/UserSetup.css
index a2608e0..b0caf3e 100644
--- a/src/pages/UserSetup.css
+++ b/src/pages/UserSetup.css
@@ -55,7 +55,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 2rem;
+  gap: 0;
   margin-top: 2rem;
 }
 
@@ -73,8 +73,8 @@
 }
 
 .step-number {
-  width: 40px;
-  height: 40px;
+  width: 36px;
+  height: 36px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.1);
   border: 2px solid rgba(255, 255, 255, 0.3);
@@ -83,6 +83,7 @@
   justify-content: center;
   color: #fff;
   font-weight: 600;
+  font-size: 0.95rem;
   transition: all 0.3s;
 }
 
@@ -93,8 +94,27 @@
 }
 
 .step-label {
-  color: #aaa;
-  font-size: 0.85rem;
+  color: #888;
+  font-size: 0.75rem;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.step.active .step-label {
+  color: #ffcc00;
+}
+
+/* Connecting lines as separate elements */
+.step-connector {
+  width: 40px;
+  height: 2px;
+  background: rgba(255, 255, 255, 0.2);
+  margin: 0 0.5rem;
+  margin-bottom: 1.5rem; /* Align with circles, not labels */
+}
+
+.step-connector.active {
+  background: rgba(255, 204, 0, 0.6);
 }
 
 .setup-form {
@@ -356,10 +376,26 @@
   }
   
   .setup-steps {
-    gap: 1rem;
+    gap: 0;
+  }
+  
+  .step {
+    min-width: 60px;
+  }
+  
+  .step-number {
+    width: 36px;
+    height: 36px;
+    font-size: 0.9rem;
   }
   
   .step-label {
-    display: none;
+    font-size: 0.7rem;
+  }
+  
+  .step:not(:last-child)::after {
+    top: 18px;
+    left: calc(50% + 22px);
+    width: calc(100% - 4px);
   }
 }
\ No newline at end of file
diff --git a/src/pages/UserSetup.tsx b/src/pages/UserSetup.tsx
index d69fe7a..d204baf 100644
--- a/src/pages/UserSetup.tsx
+++ b/src/pages/UserSetup.tsx
@@ -144,10 +144,12 @@ export function UserSetup(_props: PrivateRouteProps) {
               <span className="step-number">1</span>
               <span className="step-label">Choose Type</span>
             </div>
+            <div className={`step-connector ${isPartner ? 'active' : ''}`} />
             <div className={`step ${isPartner ? 'active' : ''}`}>
               <span className="step-number">2</span>
               <span className="step-label">Details</span>
             </div>
+            <div className="step-connector" />
             <div className="step">
               <span className="step-number">3</span>
               <span className="step-label">Complete</span>
diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo
deleted file mode 100644
index afb00aa..0000000
--- a/tsconfig.tsbuildinfo
+++ /dev/null
@@ -1 +0,0 @@
-{"root":["./src/app.tsx","./src/navbar.tsx","./src/privateroute.tsx","./src/amplify-config.ts","./src/main.tsx","./src/vite-env.d.ts","./src/components/applayout.tsx","./src/components/cardgrid.tsx","./src/components/cardgriditem.tsx","./src/components/joystick.tsx","./src/components/loadingwheel.tsx","./src/components/robotmessagelogger.tsx","./src/components/underconstruction.tsx","./src/hooks/useauthstatus.ts","./src/hooks/usegamepad.ts","./src/hooks/usepagetitle.ts","./src/hooks/usewebrtc.ts","./src/pages/confirmsignin.tsx","./src/pages/createrobotlisting.tsx","./src/pages/dashboard.tsx","./src/pages/editrobot.tsx","./src/pages/endsession.tsx","./src/pages/home.tsx","./src/pages/myrobots.tsx","./src/pages/robotselect.tsx","./src/pages/robotsetup.tsx","./src/pages/serviceselect.tsx","./src/pages/sessionhistory.tsx","./src/pages/settings.tsx","./src/pages/signin.tsx","./src/pages/teleop.tsx","./src/pages/userprofile.tsx","./src/pages/usersetup.tsx","./src/utils/formatters.ts"],"version":"5.8.3"}
\ No newline at end of file

From bfbbc437ae208ddf745feabedf3cbee2fe9c11d2 Mon Sep 17 00:00:00 2001
From: kenneth <kenneth@modulr.cloud>
Date: Wed, 10 Dec 2025 15:27:23 -0500
Subject: [PATCH 2/2] feat: button action for arrow buttons in camera mode

---
 src/pages/Teleop.css |  7 ++++++
 src/pages/Teleop.tsx | 58 +++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 61 insertions(+), 4 deletions(-)

diff --git a/src/pages/Teleop.css b/src/pages/Teleop.css
index 9dbf7f3..60640bb 100644
--- a/src/pages/Teleop.css
+++ b/src/pages/Teleop.css
@@ -720,6 +720,13 @@ html {
   transform: scale(0.95);
 }
 
+.dpad-btn.pressed {
+  background: rgba(255, 193, 7, 0.3);
+  border-color: rgba(255, 193, 7, 0.5);
+  color: #ffc107;
+  transform: scale(0.95);
+}
+
 .dpad-btn.up { grid-area: up; }
 .dpad-btn.down { grid-area: down; }
 .dpad-btn.left { grid-area: left; }
diff --git a/src/pages/Teleop.tsx b/src/pages/Teleop.tsx
index 7b9a410..faecc5c 100644
--- a/src/pages/Teleop.tsx
+++ b/src/pages/Teleop.tsx
@@ -42,6 +42,56 @@ export default function Teleop() {
   const [cameraPan, setCameraPan] = useState(0);  // -100 to 100
   const [cameraTilt, setCameraTilt] = useState(0); // -100 to 100
   const [cameraZoom, setCameraZoom] = useState(1); // 1x to 5x
+  const [pressedKeys, setPressedKeys] = useState<Set<string>>(new Set());
+
+  // Keyboard controls for camera (arrow keys)
+  useEffect(() => {
+    if (cameraMode !== 'manual') return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) return;
+      
+      setPressedKeys(prev => new Set(prev).add(e.key));
+      
+      switch (e.key) {
+        case 'ArrowUp':
+          setCameraTilt(50);
+          break;
+        case 'ArrowDown':
+          setCameraTilt(-50);
+          break;
+        case 'ArrowLeft':
+          setCameraPan(-50);
+          break;
+        case 'ArrowRight':
+          setCameraPan(50);
+          break;
+      }
+    };
+
+    const handleKeyUp = (e: KeyboardEvent) => {
+      setPressedKeys(prev => {
+        const next = new Set(prev);
+        next.delete(e.key);
+        return next;
+      });
+      
+      if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
+        setCameraTilt(0);
+      }
+      if (['ArrowLeft', 'ArrowRight'].includes(e.key)) {
+        setCameraPan(0);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener('keyup', handleKeyUp);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener('keyup', handleKeyUp);
+    };
+  }, [cameraMode]);
 
   // Read WebSocket URL from amplify_outputs.json (AWS signaling server)
   // Falls back to local WebSocket for development
@@ -445,19 +495,19 @@ export default function Teleop() {
             {cameraMode === 'manual' && (
               <div className="camera-manual-controls">
                 <div className="camera-dpad">
-                  <button className="dpad-btn up" onMouseDown={() => setCameraTilt(50)} onMouseUp={() => setCameraTilt(0)}>
+                  <button className={`dpad-btn up ${pressedKeys.has('ArrowUp') ? 'pressed' : ''}`} onMouseDown={() => setCameraTilt(50)} onMouseUp={() => setCameraTilt(0)}>
                     <span>▲</span>
                   </button>
-                  <button className="dpad-btn left" onMouseDown={() => setCameraPan(-50)} onMouseUp={() => setCameraPan(0)}>
+                  <button className={`dpad-btn left ${pressedKeys.has('ArrowLeft') ? 'pressed' : ''}`} onMouseDown={() => setCameraPan(-50)} onMouseUp={() => setCameraPan(0)}>
                     <span>◀</span>
                   </button>
                   <div className="dpad-center">
                     <FontAwesomeIcon icon={faCamera} />
                   </div>
-                  <button className="dpad-btn right" onMouseDown={() => setCameraPan(50)} onMouseUp={() => setCameraPan(0)}>
+                  <button className={`dpad-btn right ${pressedKeys.has('ArrowRight') ? 'pressed' : ''}`} onMouseDown={() => setCameraPan(50)} onMouseUp={() => setCameraPan(0)}>
                     <span>▶</span>
                   </button>
-                  <button className="dpad-btn down" onMouseDown={() => setCameraTilt(-50)} onMouseUp={() => setCameraTilt(0)}>
+                  <button className={`dpad-btn down ${pressedKeys.has('ArrowDown') ? 'pressed' : ''}`} onMouseDown={() => setCameraTilt(-50)} onMouseUp={() => setCameraTilt(0)}>
                     <span>▼</span>
                   </button>
                 </div>