Use turbo streams for the bout board instead of auto refreshing every 30 seconds.

app/assets/javascripts/application.js

@@ -19,12 +19,14 @@ import WrestlerColorController from "controllers/wrestler_color_controller";
 import MatchScoreController from "controllers/match_score_controller";
 import MatchDataController from "controllers/match_data_controller";
 import MatchSpectateController from "controllers/match_spectate_controller";
+import UpMatchesConnectionController from "controllers/up_matches_connection_controller";
 
 // Register controllers
 application.register("wrestler-color", WrestlerColorController);
 application.register("match-score", MatchScoreController);
 application.register("match-data", MatchDataController);
 application.register("match-spectate", MatchSpectateController);
+application.register("up-matches-connection", UpMatchesConnectionController);
 
 // Your existing Action Cable consumer setup
 (function() {

app/assets/javascripts/controllers/up_matches_connection_controller.js

@@ -0,0 +1,70 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["stream", "statusIndicator"]
+
+  connect() {
+    this.setupSubscription()
+  }
+
+  disconnect() {
+    this.cleanupSubscription()
+  }
+
+  setupSubscription() {
+    this.cleanupSubscription()
+    this.setStatus("Connecting to server for real-time bout board updates...", "info")
+
+    if (!this.hasStreamTarget) {
+      this.setStatus("Error: Stream source not found.", "danger")
+      return
+    }
+
+    const signedStreamName = this.streamTarget.getAttribute("signed-stream-name")
+    if (!signedStreamName) {
+      this.setStatus("Error: Invalid stream source.", "danger")
+      return
+    }
+
+    if (!window.App || !window.App.cable) {
+      this.setStatus("Error: WebSockets unavailable. Bout board won't update in real-time. Refresh the page to update.", "danger")
+      return
+    }
+
+    this.subscription = App.cable.subscriptions.create(
+      {
+        channel: "Turbo::StreamsChannel",
+        signed_stream_name: signedStreamName
+      },
+      {
+        connected: () => {
+          this.setStatus("Connected: Bout board updating in real-time.", "success")
+        },
+        disconnected: () => {
+          this.setStatus("Disconnected: Live bout board updates paused.", "warning")
+        },
+        rejected: () => {
+          this.setStatus("Error: Live bout board connection rejected.", "danger")
+        }
+      }
+    )
+  }
+
+  cleanupSubscription() {
+    if (!this.subscription) return
+    this.subscription.unsubscribe()
+    this.subscription = null
+  }
+
+  setStatus(message, type) {
+    if (!this.hasStatusIndicatorTarget) return
+
+    this.statusIndicatorTarget.innerText = message
+    this.statusIndicatorTarget.classList.remove("alert-secondary", "alert-info", "alert-success", "alert-warning", "alert-danger")
+
+    if (type === "success") this.statusIndicatorTarget.classList.add("alert-success")
+    else if (type === "warning") this.statusIndicatorTarget.classList.add("alert-warning")
+    else if (type === "danger") this.statusIndicatorTarget.classList.add("alert-danger")
+    else this.statusIndicatorTarget.classList.add("alert-info")
+  }
+}