feat(websocket-connection): add isolated online/offline state machine [WPB-23826]

[screendriver]

WPB-23826 [Web] Optimize websocket implementation

Pull Request

Summary

---

Security Checklist (required)

• External inputs are validated & sanitized on client and/or server where applicable.
• API responses are validated; unexpected shapes are handled safely (fallbacks or errors).
• No unsafe HTML is rendered; if unavoidable, sanitization is applied and documented where it happens.
• Injection risks (XSS/SQL/command) are prevented via safe APIs and/or escaping.

Accessibility (required)

• I have read and this PR upholds our Accessibility Best Practices.

Standards Acknowledgement (required)

• I have read and this PR upholds our Coding Standards and Tech Radar Choices.

---

Screenshots or demo (if the user interface changed)

Notes for reviewers

• Trade-offs:
• Follow-ups (linked issues):
• Linked PRs (e.g. web-packages):

[github-actions]

🔗 Download Full Report Artifact

🧪 Playwright Test Summary

• ✅ Passed: 11
• ❌ Failed: 0
• ⏭ Skipped: 3
• 🔁 Flaky: 0
• 📊 Total: 14
• ⏱ Total Runtime: 86.7s (~ 1 min 27 sec)

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 45.58%. Comparing base (48d14dc) to head (9500c50).
⚠️ Report is 1 commits behind head on dev.

Additional details and impacted files

@@           Coverage Diff           @@
##              dev   #20588   +/-   ##
=======================================
  Coverage   45.58%   45.58%           
=======================================
  Files        1641     1642    +1     
  Lines       40496    40499    +3     
  Branches     8354     8354           
=======================================
+ Hits        18461    18463    +2     
  Misses      20097    20097           
- Partials     1938     1939    +1     

Flag	Coverage Δ
app_webapp	43.78% <100.00%> (+<0.01%)	⬆️
lib_api_client	50.17% <ø> (ø)
lib_core	59.34% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
...ocketConnection/webSocketConnectionStateMachine.ts	100.00% <100.00%> (ø)

... and 1 file with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[thomasuebel]

Did you consider weblegions ts-fsm over xstate? Recently read about ts-fsm and thought it was probably a good way to to go. Either way big fan of FSMs, so, this should serve as a great example on how ensure strict state transitions moving forward. +1

[screendriver]

ts-fsm

Yes, I know ts-fsm but the last release is 8 years ago 🙈

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud