feat(large): Enable VRT for WorkoutTableHeader and Refactor Workout Table Model

[arii]

Description

This PR enables visual regression testing for the WorkoutTableHeader component and completes a broader refactoring of the workout table logic. The table now follows a simplified 'headers-only' model as per recent requirements. Additionally, several over-engineered elements like the useTestPageReady hook and RefreshIconButton were removed or inlined to streamline the codebase. Testing reliability was improved by using data-connection-status attributes and replacing animated skeletons with static placeholders where appropriate for VRT stability.

Fixes #8946

Change Type: ✨ New feature (non-breaking change adding functionality)

Changes Made

• Refactored the workout table logic to follow a simplified 'headers-only' model.
• Removed or inlined over-engineered elements (e.g., useTestPageReady hook, RefreshIconButton) to streamline the codebase.
• Improved testing reliability by utilizing data-connection-status attributes.
• Replaced animated skeletons with static placeholders to enhance VRT stability.

Testing

• Enabled visual regression testing (VRT) for the WorkoutTableHeader component.
• Adjustments were made to improve VRT stability, including the use of data-connection-status attributes and static placeholders.

Related Issues

Closes #8946

Original PR Body

This PR enables visual regression testing for the WorkoutTableHeader component and completes a broader refactoring of the workout table logic. The table now follows a simplified 'headers-only' model as per recent requirements. Additionally, several over-engineered elements like the useTestPageReady hook and RefreshIconButton were removed or inlined to streamline the codebase. Testing reliability was improved by using data-connection-status attributes and replacing animated skeletons with static placeholders where appropriate for VRT stability.

Fixes #8946

---

PR created automatically by Jules for task 10284807142810124706 started by @arii

[google-labs-jules]

👋 Jules, reporting for duty! I'm here to lend a hand with this pull request.

When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down.

I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job!

For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[arii]

📋 Quality Gate Results

Check	Status
Knip	✅ success
Lint	❌ failure
Slop	✅ success
Type Check	✅ success
Build	✅ success
Infra Tests	❌ skipped
Unit Tests	❌ skipped
Component Tests	❌ skipped
Perf Tests	❌ skipped
Visual Tests	❌ skipped

❌ Lint Failure Details

> hrm@0.30.0 lint /home/runner/work/hrm/hrm
> eslint app/ components/ constants/ context/ hooks/ lib/ services/ tests/ types/ utils/ server.ts proxy.ts --cache


/home/runner/work/hrm/hrm/app/client/connect/ConnectView.tsx
  206:17  error  Replace `⏎········maxWidth="sm"⏎········sx={{·py:·3,·pb:·10·}}⏎······` with `·maxWidth="sm"·sx={{·py:·3,·pb:·10·}}`  prettier/prettier

/home/runner/work/hrm/hrm/app/client/experimental/components/ExperimentalAnalyticsPage.tsx
  202:15  error  Replace `⏎······maxWidth="lg"⏎······sx={{·mt:·4,·mb:·4·}}⏎······data-testid="dashboard"⏎····` with `·maxWidth="lg"·sx={{·mt:·4,·mb:·4·}}·data-testid="dashboard"`  prettier/prettier

/home/runner/work/hrm/hrm/app/client/mock/page.tsx
  128:17  error  Replace `⏎········maxWidth="sm"⏎········sx={{·py:·3,·pb:·10·}}⏎······` with `·maxWidth="sm"·sx={{·py:·3,·pb:·10·}}`  prettier/prettier

/home/runner/work/hrm/hrm/app/client/spotify-selection/page.tsx
  50:15  error  Replace `⏎······maxWidth="sm"⏎······sx={{·py:·3·}}⏎····` with `·maxWidth="sm"·sx={{·py:·3·}}`  prettier/prettier

✖ 4 problems (4 errors, 0 warnings)
  4 errors and 0 warnings potentially fixable with the `--fix` option.

 ELIFECYCLE  Command failed with exit code 1.

❌ Infrastructure Test Failure Details

Log file not found.

❌ Unit Test Failure Details

Log file not found.

❌ Component Test Failure Details

Log file not found.

❌ Visual Test Failure Details

Log file not found.

💡 Tip: Download the visual-test-logs-8956 artifact to view the full interactive Playwright report.

❌ Performance Test Failure Details

Log file not found.

⚠️ Some checks failed. Full logs available in workflow artifacts.

---

Report generated for commit: bee9862b8a8b0b1be1b8ae53ae19cdf1c447e2bc

[arii]

Reviewed commit: 5bf7da27800d2b002f861fcd6378805d82f6e6b8

This PR introduces significant refactoring to the workout table display and improves the Visual Regression Testing (VRT) setup. The removal of the useTestPageReady hook and data-ready attributes, in favor of a more robust Playwright wait strategy (waiting for fonts and skeleton detachment), is a positive change that simplifies the client-side code and makes tests more reliable. The googleDocParser has been appropriately simplified to only extract table headers, aligning with the new WorkoutTableHeader component.

However, a key concern is the duplication of the RefreshIconButton component's logic and styling. The original RefreshIconButton.tsx was deleted, but its implementation was copied verbatim into both components/GoogleDocViewer.tsx and the new components/WorkoutTableHeader.tsx. This violates the "Don't Repeat Yourself (DRY)" principle and the project's "Code Conciseness & Redundancy Prevention" guidelines (as outlined in docs/CODE_REVIEW_GUIDELINES.md and .github/copilot-instructions.md).

Specific Feedback:

• components/GoogleDocViewer.tsx & components/WorkoutTableHeader.tsx: The IconButton with RefreshIcon and its associated sx styling is identical in both files. This should be extracted into a reusable component.
• app/page.tsx: The logic for useNativeTable is clear and correctly uses environment variables with a query parameter override for testing.
• services/googleDocParser.ts: The simplification to only parse headers is appropriate given the new WorkoutTableHeader component.
• context/WebSocketContext.tsx: Adding document.body.dataset.connectionStatus for VRT is a good approach for testability.
• tests/playwright/lib/setup.ts: Mocking the /api/workout endpoint for VRT ensures stable snapshots, which is excellent.
• tests/playwright/lib/waits.ts: The updated waitForPageReady is more robust and less reliant on custom client-side flags, improving test reliability.

Overall, the direction of this PR is good, but the code duplication needs to be addressed before approval.

Reviewed at commit: 5bf7da27800d2b002f861fcd6378805d82f6e6b8

[arii]

Reviewed commit: f917ff58d90e231acaaa9b3f114694d03bec09f5

This PR introduces the new WorkoutTableHeader component, refactors the Google Doc parsing logic, and significantly improves the visual regression testing (VRT) setup. The changes to the VRT readiness checks are a notable improvement, moving away from custom data-ready attributes to more robust waits for font loading and skeleton detachment. The mocking of the workout API for VRT is also a crucial step for test stability.

However, there is a clear violation of the DRY principle regarding the RefreshIconButton. The dedicated RefreshIconButton component was deleted, but its styling and functionality were then duplicated in both GoogleDocViewer.tsx and the newly created WorkoutTableHeader.tsx. This reintroduces redundant code and makes future updates to the refresh button's appearance or behavior more cumbersome. The original component should have been retained and reused.

Given the scope, this PR is quite large, combining a new feature, a significant refactor of the workout table model/parser, and a refactor of the testing infrastructure. While the changes are interconnected, it pushes the boundaries of the "one logical change per PR" guideline. For future large changes, consider breaking them down into smaller, more focused PRs to ease review and reduce potential merge conflicts.

Reviewed at commit: f917ff58d90e231acaaa9b3f114694d03bec09f5

[arii]

Reviewed commit: d0ef08093c9816933aa56644b77b68c04787a601

This PR introduces significant refactoring and improvements, particularly around the workout table display and visual regression testing (VRT) readiness. The changes align well with our guiding principles of reducing lines of code, improving clarity, and enhancing test stability.

Key Improvements & Positive Changes

1. Reduced Codebase & Improved Clarity:

   • Deletion of Redundant Components/Hooks: The removal of RefreshIconButton.tsx, WorkoutTableViewer.tsx, and useTestPageReady.ts is excellent. These were either inlined where appropriate or replaced by more robust mechanisms, directly reducing the total lines of code and simplifying the project structure.
   • Simplified Google Doc Parser: The services/googleDocParser.ts has been significantly simplified to only extract table headers. This reduces complexity and potential error surface, aligning with the principle of "Less code, more clarity."
   • Optimized Placeholder: Replacing the Skeleton component with a simple Box with action.hover background in HrmConnectionPanel.tsx is a smart move to reduce dependencies and achieve the same visual effect more efficiently.

2. Enhanced VRT Stability & Readiness:

   • Robust Page Readiness Checks: The `waitFor

Reviewed at commit: d0ef08093c9816933aa56644b77b68c04787a601

[arii]

Reviewed commit: 9d23f2f2f5506f92e07f0331d46728191aef3464

This PR introduces significant improvements to the Visual Regression Testing (VRT) setup and refactors the workout table model. The removal of the useTestPageReady hook and data-ready attributes from various client pages is a positive step towards cleaner production code, as these were test-specific concerns.

The new Playwright waiting strategy in tests/playwright/lib/waits.ts, which now waits for fonts to load and skeletons to detach, is a robust and highly effective change that will greatly improve VRT stability and reliability. Mocking the /api/workout endpoint in Playwright setup is also excellent for consistent VRT snapshots.

The refactoring of services/googleDocParser.ts to focus solely on extracting table headers aligns well with the new WorkoutTableHeader component, which is a good step towards a more modular and performant native table view.

However, there is a notable regression in code hygiene regarding the refresh button. The RefreshIconButton component was deleted, and its logic and styling have been duplicated in both components/GoogleDocViewer.tsx and the new components/WorkoutTableHeader.tsx. This violates the "Don't Repeat Yourself (DRY)" principle and the "Code Conciseness & Redundancy Prevention" guideline outlined in docs/CODE_REVIEW_GUIDELINES.md.

To address this, the RefreshIconButton component should be reintroduced and reused in both places.

Reviewed at commit: 9d23f2f2f5506f92e07f0331d46728191aef3464

[arii]

Reviewed commit: 9ef69bb72e0d3b70dde5783655591f31e4b89ca6

This PR introduces significant changes, primarily refactoring the workout table model and enhancing visual regression testing (VRT) setup. Overall, the direction is positive, especially the improvements to VRT stability and the move away from intrusive data-ready attributes.

Positive Aspects:

1. VRT Stability Improvements: The removal of the useTestPageReady hook and data-ready attributes across multiple components (ConnectView, ConnectPage, ControlPanel, ExperimentalAnalyticsPage, MockPage, SpotifySelectionPage, SpotifyDebugPage, Dashboard) is a great step. Replacing the waitForPageReady logic in tests/playwright/lib/waits.ts with font loading and skeleton detachment checks makes the VRT more robust and less coupled to application-specific test flags. The mocking of the /api/workout endpoint in Playwright setup is also excellent for VRT consistency.
2. Workout Table Model Refactor: The introduction of WorkoutTableHeader and the deletion of WorkoutTableViewer, along with the simplified parseGoogleDocTable in services/googleDocParser.ts to only extract headers, aligns with the PR's stated goal of refactoring the workout table model. This simplifies the initial rendering for the native table approach.
3. Code Cleanup: Minor comment removals in app/api/workout/route.ts and the replacement of Skeleton with a simple Box in components/HrmConnectionPanel.tsx contribute to a leaner codebase.
4. Improved WebSocket Testing Signal: Changing window.__TEST_WEBSOCKET_READY__ to document.body.dataset.connectionStatus in context/WebSocketContext.tsx is a good practice for less intrusive testing signals.

Areas for Improvement / Changes Requested:

1. DRY Violation: Refresh Button Logic Duplication: The components/RefreshIconButton.tsx file was deleted, but its exact styling and functionality have been re-implemented in both components/GoogleDocViewer.tsx and the new components/WorkoutTableHeader.tsx. This is a clear violation of the "Don't Repeat Yourself (DRY)" principle outlined in docs/CODE_REVIEW_GUIDELINES.md. The RefreshIconButton component should be reinstated and reused in both locations to maintain consistency and reduce code duplication.
2. PR Scope: While related, the refactoring of the workout table model and the extensive VRT enablement/cleanup are two distinct logical changes. For future PRs of this size, consider splitting them into more focused units to facilitate easier review and reduce cognitive load, as per the "One Logical Change Per PR" guideline in docs/DEVELOPMENT.md.

Changes Requested: Please address the DRY violation regarding the refresh button by re-introducing a reusable component.

Reviewed at commit: 9ef69bb72e0d3b70dde5783655591f31e4b89ca6

[arii]

Reviewed commit: 2c83ac4c26cdb64499fcea5c90fdf6dbca6923e3

This PR introduces a significant refactor of the workout table display, moving from a full WorkoutTableViewer to a more focused WorkoutTableHeader that only displays headers. This is a positive step towards improved performance and control over the UI.

The removal of the useTestPageReady hook and the data-ready attribute, replaced by more robust Playwright waiting strategies (waiting for skeletons to detach and document.body.dataset.connectionStatus), is a commendable improvement for VRT stability and testability. The simplification of googleDocParser.ts to only extract headers is also a good change, reducing complexity.

However, there is one critical issue that needs to be

Reviewed at commit: 2c83ac4c26cdb64499fcea5c90fdf6dbca6923e3

[arii]

🤖 AI Technical Audit

Principal Code Review

This PR introduces critical errors that prevent merging and contains architectural issues regarding React hydration and server-side rendering patterns. Below is the detailed analysis.

🚫 CRITICAL BLOCKER: Merge Conflicts

File: tests/playwright/lib/waits.ts
The code contains active git merge conflict markers (<<<<<<< HEAD). This indicates a failed rebase or merge. The build will fail immediately.

<<<<<<< HEAD
  // Wait for fonts to be loaded
=======
  // Wait for fonts to be ready
>>>>>>> origin/leader

---

ANTI-AI-SLOP DIRECTIVES

1. OVERLY VERBOSE COMMENTS: The comment in components/RefreshIconButton.tsx ("Standardized refresh button used across...") adds little value over the code itself, specifically when the implementation actually removes the standardization logic (see below).
2. OVER-ENGINEERING: The logic in app/page.tsx attempts to polyfill environment variable checks with window.location inside a Server Component context, leading to hydration mismatches.
3. STALE FEATURES: The removal of WorkoutTableViewer.tsx and the cleaning of rows from the DTO is verified and correct.
4. CODE RATIO: The refactor in services/googleDocParser.ts successfully reduces code volume significantly (approx -40 lines). Good job on simplification.

---

ARCHITECTURAL & BEST PRACTICES

1. Hydration Mismatch Risk (app/page.tsx)

Problem: You are accessing window in the component body to determine useNativeTable. Since app/page.tsx is a Server Component (by default in Next.js App Router) or renders initially on the server, window is undefined during SSR. The server renders based on the ENV var. If the client has ?native=true but the ENV is false, the initial UI will mismatch (Hydration Error).

Implementation Sample:
Instead of window checks, utilize the searchParams prop provided by Next.js pages.

// app/page.tsx
interface DashboardProps {
  searchParams: { [key: string]: string | string[] | undefined }
}

const Dashboard = ({ searchParams }: DashboardProps) => {
  const nativeParam = searchParams?.native;
  const useNativeTable = nativeParam === 'true' || 
    (process.env.NEXT_PUBLIC_USE_NATIVE_TABLE === 'true' && nativeParam !== 'false');
  // ...
}

2. Accessibility Regression (components/RefreshIconButton.tsx)

Problem: You removed the explicit width: 48, height: 48 styling, but the comment claims it "Adheres to the 48px touch target requirement". The default MUI IconButton is typically 40x40px (medium size). Removing the override likely violates the accessibility requirement mentioned.

3. Data Parsing Reliability (services/googleDocParser.ts)

Problem: The simplified text extraction $(cellElement).text() might merge adjacent block elements without spacing. For example, <td><p>Set 1</p><p>Set 2</p></td> might result in Set 1Set 2 if there is no whitespace between the tags in the raw HTML. The previous implementation explicitly handled <p> tags.

Implementation Sample:
Ensure spacing is preserved:

// Quick fix to ensure block elements have spacing if needed
$('br').replaceWith(' ');
$('p').after(' '); 
// Then extract text

---

GITHUB CHECKS

• Status: Pending (Will Fail)
• Reason: Syntax error in tests/playwright/lib/waits.ts due to merge conflict markers.

Review automatically published via RepoAuditor.

[arii]

🤖 AI Technical Audit

Code Review: PR #8956

⚠️ CRITICAL BLOCKERS

1. Unresolved Merge Conflicts (Breaking Build)
File: tests/playwright/lib/waits.ts contains git conflict markers (<<<<<<< HEAD). This code is unparseable and breaks the build immediately. This indicates the PR was not tested locally or built before pushing.

2. Server Component Architecture Violation
File: app/page.tsx
The Dashboard component is an RSC (React Server Component) by default in the App Router. The useNativeTable logic checks typeof window !== 'undefined', which will always evaluate to false on the server. Consequently, the window.location.search override will never work during the initial server render, potentially causing hydration mismatches if the client later executes this logic. You must use the searchParams prop provided by Next.js pages.

⚠️ Major Logic Issues

3. Text Extraction Regression
File: services/googleDocParser.ts
The refactor uses $(cellElement).text() directly. In cheerio, this concatenates text nodes of children without whitespace. If a Google Doc cell contains multiple paragraphs (e.g., <p>Set 1</p><p>Set 2</p>), the output will be Set 1Set 2. The previous implementation correctly handled this by joining with newlines.

🚮 Anti-AI-Slop & Cleanup Directives

1. SLOPPY AUTOMATION: The presence of <<<<<<< HEAD in tests/playwright/lib/waits.ts is a clear sign of blind copy-pasting or automated conflict resolution failure.
2. OVER-ENGINEERING: In WorkoutTableHeader.tsx, the raw fetch inside useEffect with manual loading/error state is verbose boilerplate. A custom hook useFetch or similar (which likely exists in the codebase given the maturity) should be used.
3. STALE COMMENTS/TESTS: In components/RefreshIconButton.tsx, the JSDoc claims adherence to "48px touch target", but the styling width: 48 was removed. The default MUI IconButton is 40px. Additionally, the unit test checking for 48px was deleted in tests/unit/components/RefreshIconButton.test.tsx. The code contradicts the comment.
4. CODE RATIO: In WorkoutTableHeader.tsx, lines 56-60 (RefreshIconButton rendering) duplicate logic seen in the deleted WorkoutTableViewer. The error handling block (lines 42-44) is generic.

File-by-File Analysis

app/page.tsx

• Problem: window usage in RSC.
• Solution: Use props.searchParams.

services/googleDocParser.ts

• Problem: cheerio text concatenation.
• Solution: Explicitly add spaces or join children.

components/RefreshIconButton.tsx

• Problem: Removed sizing props but claimed compliance in comments.
• Solution: Re-add size="large" or explicit sx dimensions.

tests/playwright/lib/setup.ts

• Note: Good job mocking the API for VRT stability.

Review automatically published via RepoAuditor.

[arii]

Reviewed commit: fa9565a78b33f9e64d1c45b50afa1f38872f6862

This PR introduces significant and positive refactoring to the dashboard page, splitting it into a server component (app/page.tsx) and a client component (components/DashboardClient.tsx). This is a commendable step towards better separation of concerns and leveraging Next.js's server components effectively.

Key Improvements:

• Dashboard Refactor: Successfully moved client-side logic to DashboardClient.tsx, making app/page.tsx a lean server component. This improves initial load performance and aligns with Next.js best practices.
• Workout Table Model Refactor: The WorkoutTableViewer component has been replaced by WorkoutTableHeader,

Reviewed at commit: fa9565a78b33f9e64d1c45b50afa1f38872f6862

[arii]

🤖 AI Technical Audit

Code Review for PR #8956

⚠️ CRITICAL: Unresolved Merge Conflicts

This PR cannot be reviewed or merged in its current state.

The diff contains git conflict markers (<<<<<<< HEAD, =======, >>>>>>> origin/leader) in almost every file (e.g., app/api/workout/route.ts, app/page.tsx, components/RefreshIconButton.tsx). You must resolve these conflicts locally and push a clean commit before a functional review can be completed.

I have provided feedback based on the code visible in the HEAD sections, assuming that is your intended implementation.

Architectural Impact

• Server/Client Split: The refactoring of app/page.tsx into a Server Component that delegates to DashboardClient is a solid architectural move. It aligns with Next.js 13+ best practices, allowing for better initial page load performance and proper handling of asynchronous searchParams (critical for Next.js 15 compatibility).
• VRT Stability: Moving towards "header-only" parsing and removing animations (Skeleton) favors test stability, though potentially at the cost of user experience (perceived latency).

File-by-File Analysis

components/RefreshIconButton.tsx

Problem: Violates Component Reusability (Coupling).
The HEAD implementation hardcodes absolute positioning (top: 8, right: 8) and specific z-indexes inside the component. This transforms a generic RefreshIconButton into a specific DashboardTopRightButton, making it unusable in any other context without override hacks.

Implementation Sample (Suggested Fix):

// Pass positioning via sx prop from the parent, do not hardcode it here.
const RefreshIconButton = ({ onClick, sx, ...props }: RefreshIconButtonProps) => (
  <IconButton
    onClick={onClick}
    sx={{ ...sx }} // Allow parent to dictate position
    {...props}
  >
    <RefreshIcon fontSize="small" />
  </IconButton>
)

components/WorkoutTableHeader.tsx

Problem: Nested Ternary Rendering.
The render method has become a nested ternary soup: loading ? ... : error ? ... : !data ? ... : <Table>. This is hard to read and prone to bugs.

Refactor Suggestion:
Return early for loading and error states to keep the main render method clean.

app/page.tsx

Best Practice: Good handling of searchParams. In Next.js 15, searchParams is a Promise, and your await searchParams implementation correctly anticipates this change.

---

🚮 Anti-AI-Slop Directives

1. OVER-ENGINEERING:

   • File: components/RefreshIconButton.tsx
   • Issue: The usage of backdropFilter, alpha channels, and absolute positioning within a simple icon button component is excessive. It couples visual styling logic that belongs in the layout/parent with the atomic button component.

2. CODE RATIO (>100 lines added):

   • We can delete ~15 lines by simplifying RefreshIconButton. The styling logic (lines 22-34 in the diff) should be moved to the parent Box or simplified.
   • Delete: position: 'absolute', top: 8, right: 8, zIndex: 10. Pass these via sx prop from DashboardClient instead.

3. DUPLICATE HOOKS/TYPES:

   • No obvious duplicates found, but ensure DashboardProps in app/page.tsx doesn't conflict with Next.js built-in types for page props.

4. STALE FEATURES:

   • Verified: app/page.tsx correctly removes the old useAudio, HrmConnectionPanel, and TimerDisplay imports, replacing them with DashboardClient. This is a clean replacement.

Github Checks Simulation

• ❌ Build: FAIL. The compiler will fail immediately due to conflict markers (<<<<<<<) in TypeScript files.
• ❌ Lint: FAIL. Conflict markers are syntax errors.
• ❓ VRT: Unknown. Cannot run until conflicts are resolved.

Review automatically published via RepoAuditor.

[arii]

Reviewed commit: 8f23efd49ceda3c7b6c3ca932e81b58fbc09955c

This PR introduces a significant and positive refactoring by splitting the main app/page.tsx into a server component and a client component (DashboardClient.tsx). This improves the separation of concerns, aligning with Next.js best practices for server and client component boundaries, and should enhance initial load performance.

Key improvements include:

• Architectural Refactoring: Moving client-side logic to DashboardClient.tsx is a solid step forward.
• MUI Theme Consistency: Updates in GoogleDocViewer.tsx to use borderColor: 'divider' and the alpha utility for color manipulation align well with the project's DESIGN_GUIDELINES.md.
• Component Reusability: The RefreshIconButton has been refactored to be more generic, with its specific positioning and background styling now passed via the sx prop from parent components. Wrapping it in memo is also a good optimization.
• Data Parsing Enhancement: The googleDocParser.ts now handles <br> and <p> tags within table cells, which will improve the robustness and readability of extracted workout data.
• VRT Improvements: The Playwright Visual Regression Tests have been updated to correctly test the WorkoutTableHeader and GoogleDocViewer in their respective native/non-native modes, which is crucial for maintaining UI stability.
• Unit Test Alignment: Unit tests for DashboardClient and HrmConnectionPanel have been updated to reflect the component changes and prop-based configuration, improving test isolation.

Overall, this is a well-structured PR that enhances the codebase significantly. There are a few minor issues and potential areas for improvement identified below that warrant requesting changes.

Reviewed at commit: 8f23efd49ceda3c7b6c3ca932e81b58fbc09955c