Skip to content

Feat/add endpoint teleop#9

Merged
damnthonyy merged 9 commits into
developfrom
feat/add-endpoint-teleop
May 22, 2026
Merged

Feat/add endpoint teleop#9
damnthonyy merged 9 commits into
developfrom
feat/add-endpoint-teleop

Conversation

@KelianHalleray

@KelianHalleray KelianHalleray commented May 22, 2026

Copy link
Copy Markdown

No description provided.

@KelianHalleray KelianHalleray requested a review from damnthonyy May 22, 2026 07:26
@qodo-code-review

Copy link
Copy Markdown

Review Summary by Qodo

Add teleoperation control and tablet interface with WebSocket integration

✨ Enhancement

Grey Divider

Walkthroughs

Description
• Add WebSocket-based teleoperation control to dashboard
  - Establish WebSocket connection to backend on port 8765
  - Send teleop.move commands with linear and angular velocities
  - Apply speed factor scaling to movement commands
• Implement manual control with directional buttons and state tracking
  - Add linear X/Y and angular velocity state management
  - Handle mouse events for button press/release control
  - Display real-time velocity values in manual control panel
• Create tablet interface with robot status monitoring
  - Build TabletDashboard component with mock data generation
  - Add RobotStatus, MissionCard, ArmStatus, and AlertBanner components
  - Display battery, mode, temperature, and emergency stop status
• Add tablet layout and routing structure
  - Create tablet page and layout components
  - Integrate tablet dashboard as main interface
Diagram
flowchart LR
  A["Dashboard Component"] -->|"WebSocket Connection"| B["Backend Port 8765"]
  A -->|"Teleop Commands"| B
  C["Manual Control"] -->|"Direction Input"| A
  C -->|"Display Velocity"| C
  D["Tablet Interface"] -->|"Mock Data"| E["Status Components"]
  E -->|"Display"| F["Robot Status"]
  E -->|"Display"| G["Mission Card"]
  E -->|"Display"| H["Arm Status"]
  E -->|"Display"| I["Alert Banner"]

Loading

File Changes

1. src/app/tablet/layout.tsx ✨ Enhancement +7/-0

Create tablet layout wrapper component

src/app/tablet/layout.tsx


2. src/app/tablet/page.tsx ✨ Enhancement +5/-0

Create tablet page with dashboard integration

src/app/tablet/page.tsx


3. src/components/dashboard/dashboard.tsx ✨ Enhancement +70/-2

Add WebSocket teleoperation and velocity state management

src/components/dashboard/dashboard.tsx


View more (8)
4. src/components/dashboard/manual-control.tsx ✨ Enhancement +99/-0

Implement directional buttons with teleop move handler

src/components/dashboard/manual-control.tsx


5. src/components/tablet/AlertBanner.tsx ✨ Enhancement +46/-0

Create alert banner component for status display

src/components/tablet/AlertBanner.tsx


6. src/components/tablet/ArmStatus.tsx ✨ Enhancement +116/-0

Create arm status component with joint and gripper info

src/components/tablet/ArmStatus.tsx


7. src/components/tablet/MissionCard.tsx ✨ Enhancement +62/-0

Create mission progress card with status tracking

src/components/tablet/MissionCard.tsx


8. src/components/tablet/RobotStatus.tsx ✨ Enhancement +81/-0

Create robot status card with battery and mode display

src/components/tablet/RobotStatus.tsx


9. src/components/tablet/TabletDashboard.tsx ✨ Enhancement +156/-0

Create main tablet dashboard with mock data generation

src/components/tablet/TabletDashboard.tsx


10. src/components/tablet/tablet.tsx ✨ Enhancement +67/-0

Create tablet component with layout and controls

src/components/tablet/tablet.tsx


11. src/components/dashboard/Header.tsx Additional files +0/-0

...

src/components/dashboard/Header.tsx


Grey Divider

ⓘ You are approaching your monthly quota for Qodo. Upgrade your plan

Qodo Logo

@qodo-code-review

qodo-code-review Bot commented May 22, 2026

Copy link
Copy Markdown

Code Review by Qodo

🐞 Bugs (2) 📘 Rule violations (0) 📎 Requirement gaps (0)

Grey Divider


Action required

1. Undefined vitalsData reference 🐞 Bug ≡ Correctness
Description
src/components/tablet/tablet.tsx renders ` but vitalsData` is never declared or imported, which
will fail TypeScript compilation (tsconfig includes all **/*.tsx).
Code

src/components/tablet/tablet.tsx[62]

Evidence
The Tablet component uses vitalsData but the module has no definition for it, and the repo
TypeScript configuration typechecks all TS/TSX files, making this a merge-blocking compile error.

tsconfig.json[25-33]
src/components/tablet/tablet.tsx[1-67]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`vitalsData` is referenced in `Tablet` but not defined/imported, causing a TS compile error.
## Issue Context
`tsconfig.json` includes all `**/*.ts`/`**/*.tsx`, so even if `Tablet` is not currently routed, the build/typecheck will still fail.
## Fix Focus Areas
- Add a local `vitalsData` constant (like `Dashboard` does), OR
- Refactor to accept `vitalsData` as a prop, OR
- Import it from a shared module (recommended: move the constant to a shared file).
### Fix Focus Areas (code pointers)
- src/components/tablet/tablet.tsx[1-67]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools



Remediation recommended

2. Disconnect toast on unmount 🐞 Bug ☼ Reliability
Description
Dashboard always shows toast.error('Robot déconnecté') on WebSocket onclose, but the effect
cleanup calls wsRef.current.close() on unmount, so normal navigation away can incorrectly display
a disconnect error.
Code

src/components/dashboard/dashboard.tsx[R55-63]

Evidence
The same useEffect registers an onclose handler that toasts an error and also closes the socket
in its cleanup; this ties a normal cleanup path to an error notification path.

src/components/dashboard/dashboard.tsx[28-65]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The WebSocket `onclose` handler unconditionally emits an error toast, but the component cleanup intentionally closes the socket, which can produce a misleading error toast during normal unmount/navigation.
## Issue Context
The `onclose` handler is registered inside the same effect that returns a cleanup calling `.close()`.
## Fix Focus Areas
- Track intentional close with a ref/flag set in cleanup (e.g., `isClosingRef.current = true`) and skip the toast if the close was intentional.
- Alternatively, set `wsRef.current.onclose = null` before calling `.close()` in cleanup.
### Fix Focus Areas (code pointers)
- src/components/dashboard/dashboard.tsx[31-65]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


3. Teleop uses mouse events ✓ Resolved 🐞 Bug ☼ Reliability
Description
Manual teleop buttons are wired only with onMouseDown/onMouseUp/onMouseLeave, which is unreliable
on touch-first devices and can prevent press-and-hold teleop behavior from working correctly on
tablets.
Code

src/components/dashboard/manual-control.tsx[R160-163]

Evidence
The teleop button grid uses only mouse event handlers for starting/stopping motion; there are no
pointer/touch handlers in this component.

src/components/dashboard/manual-control.tsx[154-205]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Teleop controls are implemented with mouse-only events. This can break expected behavior on touch/pointer devices and makes it harder to guarantee a matching "release" event.
## Issue Context
Buttons currently call `handleDirectionButton(...)` on `onMouseDown` and stop motion on `onMouseUp`/`onMouseLeave`.
## Fix Focus Areas
- Prefer `onPointerDown`/`onPointerUp`/`onPointerCancel` and call `e.currentTarget.setPointerCapture(e.pointerId)` on pointer down so the corresponding pointer up is reliably delivered.
- Optionally keep mouse handlers for backwards compatibility, but pointer handlers generally cover mouse too.
### Fix Focus Areas (code pointers)
- src/components/dashboard/manual-control.tsx[154-209]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


Grey Divider

Qodo Logo

</div>

<div className="lg:col-span-3 space-y-6">
<MetricsAndAlerts vitalsData={vitalsData} />

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Action required

1. Undefined vitalsdata reference 🐞 Bug ≡ Correctness

src/components/tablet/tablet.tsx renders <MetricsAndAlerts vitalsData={vitalsData} /> but
vitalsData is never declared or imported, which will fail TypeScript compilation (tsconfig
includes all **/*.tsx).
Agent Prompt
## Issue description
`vitalsData` is referenced in `Tablet` but not defined/imported, causing a TS compile error.

## Issue Context
`tsconfig.json` includes all `**/*.ts`/`**/*.tsx`, so even if `Tablet` is not currently routed, the build/typecheck will still fail.

## Fix Focus Areas
- Add a local `vitalsData` constant (like `Dashboard` does), OR
- Refactor to accept `vitalsData` as a prop, OR
- Import it from a shared module (recommended: move the constant to a shared file).

### Fix Focus Areas (code pointers)
- src/components/tablet/tablet.tsx[1-67]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

@damnthonyy damnthonyy left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

@damnthonyy damnthonyy merged commit 8237155 into develop May 22, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants