--- a/src/main.ts	Sun Jan 28 16:51:36 2024 -0800
+++ b/src/main.ts	Sun Jan 28 16:53:08 2024 -0800
@@ -26,12 +26,21 @@
         margin: 3px;
         vertical-align: middle;
       }
+      .col-group-1 {
+        background: #e0ecf4;
+      }
+      .col-group-2 {
+        background: #e0f3db;
+      }
+      .col-group-3 {
+        background: #fee8c8;
+      }
     `,
   ];
 
   // bug https://github.com/lit/lit/issues/4305
-  @(state as any)() lights: object[] = [];
-  @(state as any)() reportTime: Date = new Date(0);
+  @((state as any)()) lights: object[] = [];
+  @((state as any)()) reportTime: Date = new Date(0);
 
   connectedCallback(): void {
     super.connectedCallback();
@@ -48,27 +57,27 @@
 
       <table>
         <tr>
-          <th>light</th>
-          <th>address</th>
-          <th>online</th>
-          <th>color request</th>
-          <th>color message</th>
-          <th>color current</th>
-          <th>latency</th>
+          <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: any) => html`
             <tr>
-              <td>${d.light.name}</td>
-              <td><code>${d.light.address}</code></td>
-              <td>${d.light.online ? "✔" : ""}</td>
-              <td>
-                <code>${d.light.colorRequest}</code>
-                <input type="color" @input=${this.onColorRequest.bind(this, d.light.name)} value="${d.light.colorRequest}" />
+              <td class="col-group-1">${d.light.name}</td>
+              <td class="col-group-1"><code>${d.light.address}</code></td>
+              <td class="col-group-2">
+                <code>${d.light.requestingColor}</code>
+                <input type="color" @input=${this.onRequestingColor.bind(this, d.light.name)} .value="${d.light.requestingColor}" />
               </td>
-              <td><code>${JSON.stringify(d.light.colorMessage)}</code></td>
-              <td>${d.light.colorCurrent} <span class="color" style="background: ${d.light.colorCurrent}"></span></td>
-              <td>${d.light.latencyMs} ms</td>
+              <td class="col-group-2"><code>${JSON.stringify(d.light.requestingDeviceColor)}</code></td>
+              <td class="col-group-3">${d.light.emittingColor} <span class="color" style="background: ${d.light.emittingColor}"></span></td>
+              <td class="col-group-3">${d.light.online ? "✔" : ""}</td>
+              <td class="col-group-3">${d.light.latencyMs} ms</td>
             </tr>
           `
         )}
@@ -81,7 +90,7 @@
       <bigast-loginbar></bigast-loginbar>
     `;
   }
-  onColorRequest(lightName: string, ev: InputEvent) {
+  onRequestingColor(lightName: string, ev: InputEvent) {
     const value = (ev.target as HTMLInputElement).value;
     const url = new URL("api/output", location as any);
     url.searchParams.append("light", lightName);