--- a/light.py	Sun Jan 28 17:31:06 2024 -0800
+++ b/light.py	Sun Jan 28 20:02:34 2024 -0800
@@ -68,7 +68,6 @@
 
 class Lights:
     _d: dict[str, Light] = {}
-    _changeSleepTask: asyncio.Task | None = None
 
     def __init__(self):
         self.add(Light('do-desk', 'topic1'))
@@ -83,6 +82,12 @@
     def byName(self, name: str) -> Light:
         return self._d[name]
 
+    def to_dict(self):
+        return {'lights': [d.to_dict() for d in sorted(self._d.values(), key=lambda r: r.name)]}
+
+    # the following is bad. Get a better events lib.
+    _changeSleepTask: asyncio.Task | None = None
+
     async def changes(self):  # yields None on any data change
         while True:
             log.info('Lights has a change')
@@ -101,6 +106,3 @@
         log.info('Lights.notifyChanged()')
         if self._changeSleepTask is not None:
             self._changeSleepTask.cancel()
-
-    def to_dict(self):
-        return {'lights': [d.to_dict() for d in sorted(self._d.values(), key=lambda r: r.name)]}

--- a/src/main.ts	Sun Jan 28 17:31:06 2024 -0800
+++ b/src/main.ts	Sun Jan 28 20:02:34 2024 -0800
@@ -75,15 +75,6 @@
       <h1>Light-bridge</h1>
 
       <table>
-        <tr>
-          <th class="col-group-1">light</th>
-          <th class="col-group-1">address</th>
-          <th class="col-group-2">requested color</th>
-          <th class="col-group-2">requested device color</th>
-          <th class="col-group-3">emitting color</th>
-          <th class="col-group-3">online</th>
-          <th class="col-group-3">latency</th>
-        </tr>
         ${this.lights.map(
           (d: Light) => html`
             <tr>
@@ -100,6 +91,7 @@
             </tr>
           `
         )}
+        ${this.renderLightHeaders()} ${this.lights.map(this.renderLightRow.bind(this))}
       </table>
       <p>Updated ${this.reportTime.toLocaleString("sv")}</p>
       <p>
@@ -109,6 +101,18 @@
       <bigast-loginbar></bigast-loginbar>
     `;
   }
+
+  renderLightHeaders() {
+    return html`<tr>
+      <th class="col-group-1">light</th>
+      <th class="col-group-1">address</th>
+      <th class="col-group-2">requested color</th>
+      <th class="col-group-2">requested device color</th>
+      <th class="col-group-3">emitting color</th>
+      <th class="col-group-3">online</th>
+      <th class="col-group-3">latency</th>
+    </tr>`;
+  }
   async onRequestingColor(lightName: string, ev: InputEvent) {
     const currentRequest = this.lightByName.get(lightName)!.requestingColor;
     const value = (ev.target as HTMLInputElement).value;