seb/saltylab-firmware
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

feat(ui): social-bot web dashboard (issue #107) #112

Merged
sl-jetson merged 2 commits from sl-webui/issue-107-dashboard into main 2026-03-02 08:41:19 -05:00
Conversation 0 Commits 2 Files Changed 23 +4846 -4
sl-webui commented 2026-03-02 08:37:19 -05:00
Collaborator
Copy Link

Summary

Closes #107. React + Vite + TailwindCSS social-bot monitoring and configuration dashboard served on port 8080.

Panels

  • Status: Pipeline state (idle/listening/thinking/speaking/throttled) with animated pulse indicator, GPU memory bar with colour-coded fill, per-stage latency stats (wake→transcript, transcript→LLM, LLM→TTS, end-to-end p95)
  • Faces: Enrolled persons grid with live detection highlight; enroll (capture mode, configurable sample count) and delete via /social/enrollment/* services
  • Conversation: Real-time transcript with blue human bubbles / teal bot bubbles, streaming partial support, auto-scroll, clear button
  • Personality: Sass / Humor / Verbosity sliders (0–10) calling /personality_node/set_parameters; live PersonalityState display (mood, tier, greeting)
  • Navigation: Shadow / Lead / Side / Orbit / Loose / Tight mode buttons publishing to /social/nav/mode; voice command reference table

Architecture

  • src/hooks/useRosbridge.js — thin wrapper around roslib providing subscribe, publish, callService, setParam (rcl_interfaces SetParameters)
  • rosbridge WebSocket URL configurable in-page (default ws://localhost:9090)
  • Mobile-first responsive layout with TailwindCSS
  • Cyberpunk dark theme matching existing SaltyLab HUD

Usage

cd ui/social-bot
npm install
npm run dev      # dev server on :8080
npm run build    # production build → dist/
npm run preview  # preview build on :8080

Test plan

  • npm run build passes without errors
  • Status panel shows state transitions when orchestrator_node publishes
  • Face gallery lists enrolled persons via service call
  • Conversation log shows streamed partial tokens then final bubble
  • Personality sliders call set_parameters service
  • Nav mode buttons publish to /social/nav/mode
  • Responsive layout renders on mobile (375px width)

🤖 Generated with Claude Code

## Summary Closes #107. React + Vite + TailwindCSS social-bot monitoring and configuration dashboard served on port 8080. ### Panels - **Status**: Pipeline state (idle/listening/thinking/speaking/throttled) with animated pulse indicator, GPU memory bar with colour-coded fill, per-stage latency stats (wake→transcript, transcript→LLM, LLM→TTS, end-to-end p95) - **Faces**: Enrolled persons grid with live detection highlight; enroll (capture mode, configurable sample count) and delete via `/social/enrollment/*` services - **Conversation**: Real-time transcript with blue human bubbles / teal bot bubbles, streaming partial support, auto-scroll, clear button - **Personality**: Sass / Humor / Verbosity sliders (0–10) calling `/personality_node/set_parameters`; live PersonalityState display (mood, tier, greeting) - **Navigation**: Shadow / Lead / Side / Orbit / Loose / Tight mode buttons publishing to `/social/nav/mode`; voice command reference table ### Architecture - `src/hooks/useRosbridge.js` — thin wrapper around `roslib` providing `subscribe`, `publish`, `callService`, `setParam` (rcl_interfaces SetParameters) - rosbridge WebSocket URL configurable in-page (default `ws://localhost:9090`) - Mobile-first responsive layout with TailwindCSS - Cyberpunk dark theme matching existing SaltyLab HUD ### Usage ```bash cd ui/social-bot npm install npm run dev # dev server on :8080 npm run build # production build → dist/ npm run preview # preview build on :8080 ``` ## Test plan - [ ] `npm run build` passes without errors - [ ] Status panel shows state transitions when `orchestrator_node` publishes - [ ] Face gallery lists enrolled persons via service call - [ ] Conversation log shows streamed partial tokens then final bubble - [ ] Personality sliders call `set_parameters` service - [ ] Nav mode buttons publish to `/social/nav/mode` - [ ] Responsive layout renders on mobile (375px width) 🤖 Generated with [Claude Code](https://claude.com/claude-code)
sl-webui added 2 commits 2026-03-02 08:37:20 -05:00 
## Summary
- config.h: CH1[0]=steer, CH2[1]=throttle (was CH4/CH3); CRSF_FAILSAFE_MS→500ms
- include/battery.h + src/battery.c: ADC3 Vbat reading on PC1 (11:1 divider)
  battery_read_mv(), battery_estimate_pct() for 3S/4S auto-detection
- include/crsf.h + src/crsf.c: CRSF telemetry TX uplink
  crsf_send_battery() — type 0x08, voltage/current/SoC to ELRS TX module
  crsf_send_flight_mode() — type 0x21, "ARMED\0"/"DISARM\0" for handset OSD
- src/main.c: battery_init() after crsf_init(); 1Hz telemetry tick calls
  crsf_send_battery(vbat_mv, 0, soc_pct) + crsf_send_flight_mode(armed)
- test/test_crsf_frames.py: 28 pytest tests — CRC8-DVB-S2, battery frame
  layout/encoding, flight-mode frame, battery_estimate_pct SoC math

Existing (already complete from crsf-elrs branch):
  CRSF frame decoder UART4 420000 baud DMA circular + IDLE interrupt
  Mode manager: RC↔autonomous blend, CH6 3-pos switch, 500ms smooth transition
  Failsafe in main.c: disarm if crsf_state.last_rx_ms stale > CRSF_FAILSAFE_MS
  CH5 arm switch with ARMING_HOLD_MS interlock + edge detection
  RC override: mode_manager blends steer/speed per mode (CH6)

Closes #103

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
React + Vite + TailwindCSS dashboard served on port 8080.
Connects to ROS2 via rosbridge_server WebSocket (default ws://localhost:9090).

Panels:
- StatusPanel: pipeline state (idle/listening/thinking/speaking/throttled)
  with animated pulse indicator, GPU memory bar, per-stage latency stats
- FaceGallery: enrolled persons grid with enroll/delete via
  /social/enrollment/* services; live detection indicator
- ConversationLog: real-time transcript with human/bot bubbles,
  streaming partial support, auto-scroll
- PersonalityTuner: sass/humor/verbosity sliders (0–10) writing to
  personality_node via rcl_interfaces/srv/SetParameters; live
  PersonalityState display
- NavModeSelector: shadow/lead/side/orbit/loose/tight mode buttons
  publishing to /social/nav/mode; voice command reference table

Usage:
  cd ui/social-bot && npm install && npm run dev   # dev server port 8080
  npm run build && npm run preview                  # production preview

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
sl-jetson merged commit b23e8432a2 into main 2026-03-02 08:41:18 -05:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
shaytac sl-controls sl-firmware sl-jetson sl-mechanical sl-perception sl-uwb sl-webui seb
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: seb/saltylab-firmware#112
No description provided.
Delete Branch "sl-webui/issue-107-dashboard"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?