feat(portal): live WebSocket connection badge in portal header by jaeko44 · Pull Request #449 · virtengine/bosun

jaeko44 · 2026-03-26T03:08:49Z

Task-ID: b3364ece-da27-43ce-b950-6e15d057a33d\n\nAutomated PR for task b3364ece-da27-43ce-b950-6e15d057a33d\n\n---\n\nBosun-Origin: created

github-actions · 2026-03-26T03:09:00Z

Bosun CI signal: Bosun-created PR currently has failing checks.

Automation scope: Bosun-created
Workflow: CI
Conclusion: failure
Run: https://github.com/virtengine/bosun/actions/runs/23598683258
Head SHA: 24870c7
Failed jobs: Build + Tests

site/ui/app.js

 *  Header
 * ═══════════════════════════════════════════════ */
+function ConnectionBadge() {
+  const status = wsStatus.value;


site/ui/app.js

+function ConnectionBadge() {
+  const status = wsStatus.value;
+  const reconnectCount = wsReconnectCount.value;
+  const lastReconnectAt = wsLastReconnectAt.value;


Copilot

Pull request overview

Adds a live WebSocket connection status badge to the portal header, including styling and basic regression tests, with corresponding UI changes mirrored into site/ui/.

Changes:

Introduces WebSocket status signals (wsStatus, wsLastReconnectAt) and updates them during WS lifecycle events.
Renders a new ConnectionBadge component in the header showing WS state + reconnect metadata.
Adds badge CSS (colors + pulse animation) and a Vitest regression test.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
ui/styles.css	Adds connection badge styling, status colors, and pulse keyframes.
ui/modules/api.js	Adds reactive WS status signals and updates them on open/close/error/disconnect.
ui/app.js	Imports new WS signals and renders `ConnectionBadge` in the header.
tests/ui-connection-badge.test.mjs	Adds regression tests asserting badge wiring and CSS presence.
site/ui/styles.css	Mirrors the connection badge styling for the site UI.
site/ui/app.js	Mirrors header badge rendering/imports for the site UI.

Comments suppressed due to low confidence (1)

ui/modules/api.js:393

disconnectWebSocket() is documented as canceling reconnects, but calling ws.close() will still trigger the close handler which unconditionally sets wsStatus to "reconnecting" and schedules a reconnect timer. Add a guard (e.g., a manualClose/shouldReconnect flag set by disconnectWebSocket) so manual disconnects don’t flip the badge to reconnecting or restart the connection.

  socket.addEventListener("close", () => {
    wsConnected.value = false;
    wsLatency.value = null;
    wsStatus.value = "reconnecting";
    ws = null;
    stopPing();
    wsReconnectCount.value += 1;
    // Auto-reconnect with exponential backoff (max 15 s)
    if (reconnectTimer) clearTimeout(reconnectTimer);
    startCountdown(retryMs);
    reconnectTimer = setTimeout(() => {
      reconnectTimer = null;
      connectWebSocket();
    }, retryMs);
    retryMs = Math.min(15000, retryMs * 2);

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-26T03:13:39Z

site/ui/app.js

+  wsStatus,
+  wsLastReconnectAt,


site/ui/modules/api.js currently does not export wsStatus or wsLastReconnectAt, so this import will throw at module-evaluation time and break the site build. Mirror the new signals + connectWebSocket/disconnectWebSocket status updates into site/ui/modules/api.js (or stop importing these names here if the site bundle shouldn’t have the badge).

Suggested change

wsStatus,

wsLastReconnectAt,

Copilot · 2026-03-26T03:13:39Z

tests/ui-connection-badge.test.mjs

+    expect(apiSource).toContain("'connected'");
+    expect(apiSource).toContain("'reconnecting'");
+    expect(apiSource).toContain("'offline'");


These assertions won’t match the implementation: the source sets statuses with double quotes (e.g. "connected"), but the test looks for single-quoted strings ('connected', etc.), so it will fail. Update the expectations to match the actual quoting style or use a more resilient regex/assertion.

Suggested change

expect(apiSource).toContain("'connected'");

expect(apiSource).toContain("'reconnecting'");

expect(apiSource).toContain("'offline'");

expect(apiSource).toContain("\"connected\"");

expect(apiSource).toContain("\"reconnecting\"");

expect(apiSource).toContain("\"offline\"");

Copilot · 2026-03-26T03:13:40Z

tests/ui-connection-badge.test.mjs

+  it("tracks explicit websocket badge signals and reconnect metadata", () => {
+    const apiSource = readFileSync(resolve(process.cwd(), "ui/modules/api.js"), "utf8");
+
+    expect(apiSource).toContain("wsStatus = signal");
+    expect(apiSource).toContain("wsLastReconnectAt = signal");


This test only inspects ui/modules/api.js, but this PR also updates site/ui/app.js to use the new signals. Add coverage that site/ui/modules/api.js exports/updates the same badge signals so regressions like missing exports in the site bundle are caught.

Copilot · 2026-03-26T03:13:40Z

ui/styles.css

+  50% { transform: scale(1.35); opacity: 0.55; }
+  100% { transform: scale(1); opacity: 1; }
+}
+


The new pulsing animation should respect prefers-reduced-motion. There’s already a reduced-motion section in ui/styles/layout.css disabling other connection pulses; add a similar rule for .connection-badge-pulse to avoid continuous animation for users who prefer reduced motion.

Suggested change

@media (prefers-reduced-motion: reduce) {

.connection-badge-pulse {

animation: none;

}

}

Copilot · 2026-03-26T03:13:40Z

site/ui/styles.css

+  50% { transform: scale(1.35); opacity: 0.55; }
+  100% { transform: scale(1); opacity: 1; }
+}
+


The new pulsing animation should respect prefers-reduced-motion. There’s already a reduced-motion section in site/ui/styles/layout.css disabling other connection pulses; add a similar rule for .connection-badge-pulse to avoid continuous animation for users who prefer reduced motion.

Suggested change

@media (prefers-reduced-motion: reduce) {

.connection-badge-pulse {

animation: none;

}

}

Copilot · 2026-03-26T03:13:40Z

ui/modules/api.js

 export const wsReconnectCount = signal(0);
+/** Reactive signal: WebSocket badge status for portal header */
+export const wsStatus = signal("offline");
+/** Reactive signal: timestamp of the last successful reconnect */


The comment says wsLastReconnectAt is the “timestamp of the last successful reconnect”, but it’s set on every open (including the initial connection). Either adjust the wording (e.g. “last successful (re)connect”) or only set this timestamp when a reconnect actually occurred.

Suggested change

/** Reactive signal: timestamp of the last successful reconnect */

/** Reactive signal: timestamp of the last successful (re)connect */

…-connection-badge-in-p

github-actions · 2026-03-26T12:21:18Z

Bosun PR classification: Bosun-created.
This PR is tracked by Bosun attachment automation.

PR class label: bosun-pr-bosun-created
Attach label: bosun-attached (yes, because Bosun-created PRs remain attached regardless of human PR attach mode)
Attach mode policy: all
Trusted author: no
Bosun-created label present: yes
Automation scope: Eligible for Bosun repair and merge automation (Bosun-created PR).
CI failure signal label: bosun-needs-fix
CI failure marker:
Trigger: pull_request_target / synchronize

Co-authored-by: bosun-ve[bot] <262908237+bosun-ve[bot]@users.noreply.github.com>

chore: auto-commit agent work (b3364ece-da2)

b1e724c

jaeko44 added the bosun-attached Bosun PR attachment marker label Mar 26, 2026

Copilot AI review requested due to automatic review settings March 26, 2026 03:08

github-actions bot added the bosun-pr-public PR observed by Bosun but not trusted for high-risk automation label Mar 26, 2026

Copilot started reviewing on behalf of jaeko44 March 26, 2026 03:09 View session

github-code-quality bot found potential problems Mar 26, 2026

View reviewed changes

Copilot AI reviewed Mar 26, 2026

View reviewed changes

jaeko44 added bosun-needs-fix Attached PR with failing CI that Bosun should pick up for repair bosun-pr-bosun-created PR created by Bosun and eligible for Bosun automation and removed bosun-pr-public PR observed by Bosun but not trusted for high-risk automation labels Mar 26, 2026

jaeko44 added 2 commits March 26, 2026 22:46

Merge branch 'main' into task/b3364eceda27-feat-portal-live-websocket…

9a05243

…-connection-badge-in-p

Merge branch 'main' into task/b3364eceda27-feat-portal-live-websocket…

a76604a

…-connection-badge-in-p

jaeko44 added 2 commits March 26, 2026 23:44

Merge remote-tracking branch 'origin/main' into HEAD

3264aae

Co-authored-by: bosun-ve[bot] <262908237+bosun-ve[bot]@users.noreply.github.com>

Merge remote-tracking branch 'origin/main' into HEAD

24870c7

Co-authored-by: bosun-ve[bot] <262908237+bosun-ve[bot]@users.noreply.github.com>

jaeko44 added bosun-needs-fix Attached PR with failing CI that Bosun should pick up for repair and removed bosun-needs-fix Attached PR with failing CI that Bosun should pick up for repair labels Mar 26, 2026

jaeko44 added bosun-needs-fix Attached PR with failing CI that Bosun should pick up for repair and removed bosun-needs-fix Attached PR with failing CI that Bosun should pick up for repair labels Mar 27, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(portal): live WebSocket connection badge in portal header#449

feat(portal): live WebSocket connection badge in portal header#449
jaeko44 wants to merge 5 commits intomainfrom
task/b3364eceda27-feat-portal-live-websocket-connection-badge-in-p

jaeko44 commented Mar 26, 2026

Uh oh!

github-actions bot commented Mar 26, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

Copilot AI Mar 26, 2026

Uh oh!

github-actions bot commented Mar 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

+@media (prefers-reduced-motion: reduce) {
+  .connection-badge-pulse {
+    animation: none;
+  }
+}

	/** Reactive signal: timestamp of the last successful reconnect */
	/** Reactive signal: timestamp of the last successful (re)connect */

Conversation

jaeko44 commented Mar 26, 2026

Uh oh!

github-actions bot commented Mar 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 26, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Mar 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions bot commented Mar 26, 2026 •

edited

Loading