diff --git a/src/App.svelte b/src/App.svelte
index d5e8550..03af48d 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -213,14 +213,23 @@
         lastLeafId = id;
         setActive(id);
       }
-      // Unconditionally re-assert the DOM state every tick — if Svelte
-      // re-renders and reverts our class change, the next tick puts it back.
+      // Active-border DOM sync (same workaround as below).
       if (id) {
         document.querySelectorAll("[data-leaf-id].leaf").forEach((el) => {
           if (el.getAttribute("data-leaf-id") === id) el.classList.add("active");
           else el.classList.remove("active");
         });
       }
+      // Broadcast-state DOM sync — Svelte's class:broadcasting={leaf.broadcast}
+      // and class:on={leaf.broadcast} bindings in LeafPane don't propagate
+      // either. Walk the tree and force the classes to match leaf.broadcast.
+      for (const leaf of walkLeaves(tree)) {
+        const leafEl = document.querySelector(`[data-leaf-id="${leaf.id}"]`);
+        if (!leafEl) continue;
+        leafEl.classList.toggle("broadcasting", !!leaf.broadcast);
+        const chip = leafEl.querySelector(".bcast-chip");
+        if (chip) chip.classList.toggle("on", !!leaf.broadcast);
+      }
     }, 250);
     return () => clearInterval(interval);
   });