Frontend by tkogut · Pull Request #7 · tkogut/Bridge_ScaleCmd_Rust

tkogut · 2026-01-14T18:31:27Z

Adds MQTT status and history components to the dashboard, along with an API service, to fulfill frontend requirements F1-F4.

Task I1: Verified and enhanced Mosquitto configuration in Start-Mosquitto-Task.ps1 Changes: - Added persistence configuration (true with data directory) - Added file-based logging (error, warning, notice, information) - Added Windows Firewall rule creation for port 1883 (Private profile) - Created data and logs directories with SYSTEM account permissions - Updated uninstall to also remove firewall rule - Enhanced summary output with new configuration details The configuration now has feature parity with Install-Mosquitto.ps1. Co-authored-by: roostertk <roostertk@tutamail.com>

Co-authored-by: roostertk <roostertk@tutamail.com>

Frontend Agent initialized and monitoring backend progress: - B1 completed (mqtt/history.rs module) - Waiting for B2 (MQTT API endpoints) - Waiting for B3 (MQTT config endpoints) - F1-F4 tasks pending until B3 is complete Co-authored-by: roostertk <roostertk@tutamail.com>

Co-authored-by: roostertk <roostertk@tutamail.com>

…t B1 Co-authored-by: roostertk <roostertk@tutamail.com>

…B1 only Co-authored-by: roostertk <roostertk@tutamail.com>

…ackend still B1 only Co-authored-by: roostertk <roostertk@tutamail.com>

Frontend tasks F1-F4 completed for MQTT Release 0.2.0: F1: MqttStatusCard component - Displays MQTT connection status (enabled/disabled/connected) - Shows broker URL, client ID, topic prefix - Displays history statistics (devices, readings, updates) - Shows recent device activity with latest weight readings F2: MqttConfigPanel component - Device selector for devices with MQTT history - Latest weight reading display with real-time updates - Statistics view (readings count, status updates count) - History browser with recent weight readings - Delete history functionality with confirmation dialog F3: mqtt-api.ts service - API functions for all MQTT endpoints: - getMqttStatus, getMqttDevices - getMqttHistory, getMqttLatest - getMqttDeviceStatus, getMqttStats - deleteMqttHistory F4: Index.tsx integration - Added MqttStatusCard to dashboard grid - Added MqttConfigPanel for history management - Reorganized layout for better UX Files created: - src/services/mqtt-api.ts - src/components/MqttStatusCard.tsx - src/components/MqttConfigPanel.tsx Files modified: - src/pages/Index.tsx - coordination/frontend-status.json Co-authored-by: roostertk <roostertk@tutamail.com>

…anel Co-authored-by: roostertk <roostertk@tutamail.com>

Co-authored-by: roostertk <roostertk@tutamail.com>

cursor · 2026-01-14T18:31:29Z

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

vercel · 2026-01-14T18:31:32Z

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

Project	Deployment	Review	Updated (UTC)
bridge-scale-cmd-rust	Ready	Preview, Comment	Jan 18, 2026 4:20pm

…tatuses Created comprehensive release plan and updated coordination files: PLAN_MQTT_RELEASE_0.2.0.md: - Full architecture overview - All agent tasks (Backend B1-B6, Frontend F1-F7, Infra I1-I6, Testing T1-T5) - Phase 1 completed status - Phase 2 tasks with priorities - Dependencies between tasks - Acceptance criteria for release Updated status files: - coordination/backend-status.json - Phase 1 complete (B1-B3) - coordination/frontend-status.json - Phase 1 complete (F1-F4) - coordination/infra-status.json - Phase 2 tasks (I3-I6) ready - coordination/testing-status.json - Phase 2 tasks (T2-T5) ready Next steps: 1. Testing Agent: Start T2 (mqtt-api.test.ts) 2. Infrastructure Agent: Start I3 (installer update) Co-authored-by: roostertk <roostertk@tutamail.com>

Created comprehensive test suite for MQTT API service: Tests added (33 total): - getMqttStatus: success, disabled, server error, network error - getMqttDevices: success, empty list, server error - getMqttHistory: success, pagination, time filters, not found, errors - getMqttLatest: success, no data, server error - getMqttDeviceStatus: success, pagination, server error - getMqttStats: success, no history, server error - deleteMqttHistory: success, not found, server error - URL encoding for special characters - Query parameter construction - Response type validation Also updated test/setup.ts with MQTT mock handlers. Part of MQTT Release 0.2.0 - Task T2 completed. Co-authored-by: roostertk <roostertk@tutamail.com>

…l (T3) Created comprehensive component test suites: MqttStatusCard.test.tsx (14 tests): - Rendering: card title, loading state, connected/disconnected/disabled/error states - MQTT Details: broker URL, client ID, topic prefix, history statistics - Disabled State: instructions display - Refresh Button: presence and functionality - Error Handling: graceful degradation MqttConfigPanel.test.tsx (11 tests): - Rendering: card title, device selector, empty state message - Device Selection: device list display, auto-selection - Latest Reading: weight display - Statistics: readings/updates counts - Delete History: button visibility, confirmation dialog - Error Handling: error message display - Refresh Button: presence Total MQTT tests: 58 (33 API + 25 component) Part of MQTT Release 0.2.0 - Task T3 completed. Co-authored-by: roostertk <roostertk@tutamail.com>

Created comprehensive E2E test suite for MQTT functionality: e2e/mqtt.spec.ts (21 tests): MQTT Status Card (9 tests): - Display on dashboard - Connected/Disconnected/Disabled states - Broker URL, Client ID, Topic prefix display - History statistics - Refresh button functionality MQTT History Panel (8 tests): - Display on dashboard - Device selector with auto-selection - No devices message - Latest reading display - Statistics display - Delete history button and confirmation dialog - Cancel delete functionality MQTT API Error Handling (3 tests): - Status API error handling - Devices API error handling - Network timeout handling MQTT Integration with Dashboard (2 tests): - Coexistence with other dashboard elements - Independent status updates Total MQTT tests: 79 (33 unit + 25 component + 21 E2E) Part of MQTT Release 0.2.0 - Task T5 completed. Testing Agent Phase 2 Tasks Completed: - T2: Unit tests for mqtt-api.ts ✅ - T3: Component tests for MqttStatusCard/MqttConfigPanel ✅ - T5: E2E tests for MQTT UI flow ✅ - T4: Backend integration tests (pending - Backend Agent) Co-authored-by: roostertk <roostertk@tutamail.com>

Testing tasks completed: - T2: Unit tests (33 tests) ✅ - T3: Component tests (25 tests) ✅ - T5: E2E tests (21 tests) ✅ - T4: Backend integration (pending - Backend Agent) Total MQTT tests created: 79 Updated acceptance criteria to reflect completed testing. Phase 2 now shows Testing Agent tasks mostly done. Co-authored-by: roostertk <roostertk@tutamail.com>

Created detailed instructions for Phase 2 tasks: - I3: Update Inno Setup installer for MQTT - I4: Add MQTT to CI/CD pipeline - I5: Create Configure-MQTT-Service.ps1 script - I6: Update Windows installation documentation Files: - coordination/INSTRUCTIONS_INFRASTRUCTURE_AGENT.md - coordination/infra-status.json (updated) Co-authored-by: roostertk <roostertk@tutamail.com>

I3: Update Inno Setup Installer - Added 'mqttenable' checkbox for enabling MQTT on startup - Added Configure-MQTT-Service.ps1 to installer files - Added Run entry to configure MQTT when checkbox selected I4: Add MQTT to CI/CD pipeline - Added MQTT environment variables to global env section - Added Mosquitto installation for E2E tests - Configured MQTT_ENABLED for test environments I5: Create Configure-MQTT-Service.ps1 script - Full PowerShell script for MQTT configuration - Supports -Enable, -Disable, -Status operations - Configurable broker URL, client ID, topic prefix, auth, QoS - Uses NSSM for service environment management I6: Update Windows Installation Documentation - Added MQTT Configuration section - Added Mosquitto Installation section - Added MQTT Troubleshooting section - Updated table of contents Co-authored-by: roostertk <roostertk@tutamail.com>

Merged Infrastructure Agent Phase 2 work: - I3: Inno Setup installer with MQTT checkbox - I4: CI/CD pipeline with MQTT support - I5: Configure-MQTT-Service.ps1 script - I6: Updated Windows installation documentation Conflict resolved: kept Infrastructure Agent's infra-status.json (completed version) Co-authored-by: roostertk <roostertk@tutamail.com>

roomote · 2026-01-17T15:00:13Z

Rooviewer See task on Roo Cloud

Re-reviewed latest changes. The 5 previously identified API contract mismatches remain and need to be resolved before the frontend can work correctly with the backend.

Fix getMqttDevices endpoint to return detailed device objects instead of string array
Fix getMqttHistory endpoint to return wrapped response with metadata fields
Fix getMqttLatest endpoint to return complete response with device_id and latest_status
Fix getMqttDeviceStatus endpoint to return wrapped response with device_id and total_count
Fix getMqttStats endpoint to return metadata counts/timestamps instead of statistical analysis

Previous reviews

fdb212e: Review #1

_{Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues.}

roomote · 2026-01-17T15:05:33Z

src/services/mqtt-api.ts

+export async function getMqttDevices(): Promise<MqttDevicesResponse> {
+  const bridgeUrl = getBridgeUrl();
+  const response = await fetch(`${bridgeUrl}/api/mqtt/devices`);
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch MQTT devices (${response.status})`);
+  }
+
+  return response.json();


Critical API contract mismatch: This type expects MqttDevicesResponse with detailed device info objects containing weight_readings_count, status_updates_count, last_weight_reading, etc. However, the actual backend endpoint at /api/mqtt/devices returns { "devices": Vec<String> } - just an array of device ID strings. This will cause runtime failures when components try to access properties like device.weight_readings_count on the MqttStatusCard and MqttConfigPanel components. The backend needs to be updated to return the full device info structure, or the frontend needs to be adjusted to match the actual API.

_{Fix it with Roo Code or mention @roomote and request a fix.}

roomote · 2026-01-17T15:06:00Z

src/services/mqtt-api.ts

+export async function getMqttHistory(
+  deviceId: string,
+  options?: {
+    limit?: number;
+    offset?: number;
+    since?: number;
+    until?: number;
+  }
+): Promise<MqttHistoryResponse> {
+  const bridgeUrl = getBridgeUrl();
+  const params = new URLSearchParams();
+
+  if (options?.limit) params.append('limit', options.limit.toString());
+  if (options?.offset) params.append('offset', options.offset.toString());
+  if (options?.since) params.append('since', options.since.toString());
+  if (options?.until) params.append('until', options.until.toString());
+
+  const queryString = params.toString();
+  const url = `${bridgeUrl}/api/mqtt/history/${encodeURIComponent(deviceId)}${queryString ? `?${queryString}` : ''}`;
+
+  const response = await fetch(url);
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch MQTT history for ${deviceId} (${response.status})`);
+  }
+
+  return response.json();


Critical API contract mismatch: The frontend expects MqttHistoryResponse with fields device_id, weight_readings, status_updates, total_weight_readings, and total_status_updates. However, the backend endpoint /api/mqtt/history/{device_id} returns only Vec<WeightReadingEntry> directly (just an array). This will cause runtime errors when the component tries to access historyData.weight_readings or historyData.total_weight_readings because the response is an array, not an object. The backend needs to wrap the array in the expected response structure.

_{Fix it with Roo Code or mention @roomote and request a fix.}

roomote · 2026-01-17T15:06:43Z

src/services/mqtt-api.ts

+export async function getMqttLatest(deviceId: string): Promise<MqttLatestResponse> {
+  const bridgeUrl = getBridgeUrl();
+  const response = await fetch(`${bridgeUrl}/api/mqtt/history/${encodeURIComponent(deviceId)}/latest`);
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch latest MQTT data for ${deviceId} (${response.status})`);
+  }
+
+  return response.json();


Critical API contract mismatch: The frontend expects MqttLatestResponse with fields device_id, latest_weight, and latest_status. However, the backend endpoint /api/mqtt/history/{device_id}/latest returns only a single WeightReadingEntry object or 404 error - it doesn't include device_id at the response root level, and completely omits latest_status. This will cause the component to fail when accessing latestData.device_id or latestData.latest_status. The backend needs to return the complete response structure with both latest weight and status.

_{Fix it with Roo Code or mention @roomote and request a fix.}

roomote · 2026-01-17T15:07:09Z

src/services/mqtt-api.ts

+export async function getMqttDeviceStatus(
+  deviceId: string,
+  options?: {
+    limit?: number;
+    offset?: number;
+  }
+): Promise<MqttDeviceStatusResponse> {
+  const bridgeUrl = getBridgeUrl();
+  const params = new URLSearchParams();
+
+  if (options?.limit) params.append('limit', options.limit.toString());
+  if (options?.offset) params.append('offset', options.offset.toString());
+
+  const queryString = params.toString();
+  const url = `${bridgeUrl}/api/mqtt/history/${encodeURIComponent(deviceId)}/status${queryString ? `?${queryString}` : ''}`;
+
+  const response = await fetch(url);
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch MQTT status for ${deviceId} (${response.status})`);
+  }
+
+  return response.json();


Critical API contract mismatch: The frontend expects MqttDeviceStatusResponse with fields device_id, status_updates, and total_count. However, the backend endpoint /api/mqtt/history/{device_id}/status returns only Vec<DeviceStatusEntry> directly (just an array). This will cause runtime errors when trying to access result.device_id or result.total_count because the response is an array, not an object. The backend needs to wrap the array in the expected response structure with the device_id and total_count fields.

_{Fix it with Roo Code or mention @roomote and request a fix.}

roomote · 2026-01-17T15:07:38Z

src/services/mqtt-api.ts

+export async function getMqttStats(deviceId: string): Promise<MqttStatsResponse> {
+  const bridgeUrl = getBridgeUrl();
+  const response = await fetch(`${bridgeUrl}/api/mqtt/history/${encodeURIComponent(deviceId)}/stats`);
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch MQTT stats for ${deviceId} (${response.status})`);
+  }
+
+  return response.json();


Critical API contract mismatch: The frontend expects MqttStatsResponse with fields device_id, weight_readings_count, status_updates_count, and timestamp strings for first/last readings and status updates. However, the backend endpoint /api/mqtt/history/{device_id}/stats returns WeightStats which only has device_id, count, min_weight, max_weight, avg_weight, and unit - completely different fields focused on statistical analysis rather than metadata. This will cause the component to fail when accessing statsData.weight_readings_count or statsData.first_weight_reading. The backend needs to return the expected metadata structure.

_{Fix it with Roo Code or mention @roomote and request a fix.}

cursoragent and others added 12 commits January 14, 2026 15:35

chore(infra): Update status - I1 completed, ready for next task

7010919

Co-authored-by: roostertk <roostertk@tutamail.com>

chore(frontend): Update polling status - still waiting for B2/B3

cea4f53

Co-authored-by: roostertk <roostertk@tutamail.com>

chore(frontend): Update status - polling ~90 minutes, backend still a…

f1dc56b

…t B1 Co-authored-by: roostertk <roostertk@tutamail.com>

chore(frontend): Update status - polling ~110 minutes, backend still …

b6a30b2

…B1 only Co-authored-by: roostertk <roostertk@tutamail.com>

chore(frontend): Update status - polling ~130 minutes, backend still …

346876b

…B1 only Co-authored-by: roostertk <roostertk@tutamail.com>

chore(frontend): Update status - polling ~150 minutes, backend still …

6bce0fe

…B1 only Co-authored-by: roostertk <roostertk@tutamail.com>

chore(frontend): Update status - polling ~163 minutes (~2.7 hours), b…

57875a5

…ackend still B1 only Co-authored-by: roostertk <roostertk@tutamail.com>

fix(frontend): Fix React hooks exhaustive-deps warning in MqttConfigP…

2092819

…anel Co-authored-by: roostertk <roostertk@tutamail.com>

chore(frontend): Final status update - all F1-F4 tasks completed

41b62a0

Co-authored-by: roostertk <roostertk@tutamail.com>

vercel bot deployed to Preview January 14, 2026 19:18 View deployment

vercel bot deployed to Preview January 14, 2026 19:27 View deployment

vercel bot deployed to Preview January 14, 2026 19:36 View deployment

vercel bot deployed to Preview January 14, 2026 19:38 View deployment

vercel bot deployed to Preview January 14, 2026 19:39 View deployment

vercel bot deployed to Preview January 14, 2026 19:53 View deployment

cursoragent and others added 2 commits January 14, 2026 19:57

vercel bot deployed to Preview January 14, 2026 20:01 View deployment

iss

f987228

vercel bot deployed to Preview January 14, 2026 20:32 View deployment

feat: Complete MQTT Terminal implementation with real MQTT publishing

fdb212e

vercel bot deployed to Preview January 17, 2026 14:59 View deployment

roomote bot reviewed Jan 17, 2026

View reviewed changes

prawie gotowy UI, trzeba poprawek do uruchamiania mosquitto

2a4aa8d

vercel bot deployed to Preview January 18, 2026 16:20 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Frontend#7

Frontend#7
tkogut wants to merge 23 commits intofeature/network-access-enhancementfrom
cursor/frontend-3ccc

tkogut commented Jan 14, 2026

Uh oh!

cursor bot commented Jan 14, 2026

Uh oh!

vercel bot commented Jan 14, 2026 •

edited

Loading

Uh oh!

roomote bot commented Jan 17, 2026 •

edited

Loading

Uh oh!

roomote bot Jan 17, 2026

Uh oh!

roomote bot Jan 17, 2026

Uh oh!

roomote bot Jan 17, 2026

Uh oh!

roomote bot Jan 17, 2026

Uh oh!

roomote bot Jan 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

tkogut commented Jan 14, 2026

Uh oh!

cursor bot commented Jan 14, 2026

Uh oh!

vercel bot commented Jan 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

roomote bot commented Jan 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

roomote bot Jan 17, 2026

Choose a reason for hiding this comment

Uh oh!

roomote bot Jan 17, 2026

Choose a reason for hiding this comment

Uh oh!

roomote bot Jan 17, 2026

Choose a reason for hiding this comment

Uh oh!

roomote bot Jan 17, 2026

Choose a reason for hiding this comment

Uh oh!

roomote bot Jan 17, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Jan 14, 2026 •

edited

Loading

roomote bot commented Jan 17, 2026 •

edited

Loading