--- a/light.py	Sun Jan 28 20:02:34 2024 -0800
+++ b/light.py	Sun Jan 28 20:03:20 2024 -0800
@@ -1,6 +1,6 @@
 import asyncio
 import logging
-from dataclasses import dataclass, field
+from dataclasses import dataclass
 from typing import Callable
 
 from color import Color
@@ -22,10 +22,26 @@
         return dict([(k, round(v, 3)) for k, v in self.__dict__.items() if v > 0])
 
 
+class Address:
+
+    def linked(self):
+        return {'label': str(self)}
+
+
+class ZigbeeAddress(Address):
+
+    def __init__(self, name: str, ieee: str):
+        self.name = name
+        self.ieee = ieee
+
+    def linked(self):
+        return {'url': f'https://bigasterisk.com/zigbee/console/#/device/{self.ieee}/info', 'label': 'do-bar'}
+
+
 @dataclass
 class Light:
     name: str
-    address: str
+    address: Address
 
     requestingColor: Color = Color.fromHex('#000000')
     requestingDeviceColor: DeviceColor = DeviceColor()
@@ -42,7 +58,7 @@
     def to_dict(self):
         d = {
             'name': self.name,
-            'address': self.address,
+            'address': self.address.linked(),
             'requestingColor': self.requestingColor.hex(),
             'requestingDeviceColor': self.requestingDeviceColor.summary(),
             'emittingColor': self.emittingColor.hex(),
@@ -66,12 +82,15 @@
             self.notifyChanged()
 
 
+def makeZbBar(name: str, ieee: str) -> Light:
+    return Light(name=name, address=ZigbeeAddress(name, ieee))
+
+
 class Lights:
     _d: dict[str, Light] = {}
 
     def __init__(self):
-        self.add(Light('do-desk', 'topic1'))
-        self.add(Light('do-desk2', 'topic2'))
+        self.add(makeZbBar('do-bar', '0xa4c13844948d2da4'))
 
     def add(self, d: Light):
         d.notifyChanged = self.notifyChanged

--- a/src/main.ts	Sun Jan 28 20:02:34 2024 -0800
+++ b/src/main.ts	Sun Jan 28 20:03:20 2024 -0800
@@ -1,9 +1,9 @@
-import { LitElement, css, html } from "lit";
+import { LitElement, TemplateResult, css, html } from "lit";
 import { customElement, state } from "lit/decorators.js";
 
 interface Light {
   name: string;
-  address: string;
+  address: { url?: string; label: string };
   requestingColor: string;
   requestingDeviceColor: object;
   emittingColor: string;
@@ -57,6 +57,7 @@
     super.connectedCallback();
     const es = new EventSource("api/table");
     es.onmessage = (ev) => {
+      console.log("got table update");
       const body = JSON.parse(ev.data);
       this.lights = body.lights.map((wrappedLight: any) => wrappedLight.light as Light);
       this.rebuildLightByName();
@@ -75,22 +76,6 @@
       <h1>Light-bridge</h1>
 
       <table>
-        ${this.lights.map(
-          (d: Light) => html`
-            <tr>
-              <td class="col-group-1">${d.name}</td>
-              <td class="col-group-1"><code>${d.address}</code></td>
-              <td class="col-group-2">
-                <code>${d.requestingColor}</code>
-                <input type="color" @input=${this.onRequestingColor.bind(this, d.name)} .value="${d.requestingColor}" />
-              </td>
-              <td class="col-group-2"><code>${JSON.stringify(d.requestingDeviceColor)}</code></td>
-              <td class="col-group-3">${d.emittingColor} <span class="color" style="background: ${d.emittingColor}"></span></td>
-              <td class="col-group-3">${d.online ? "✔" : ""}</td>
-              <td class="col-group-3">${d.latencyMs} ms</td>
-            </tr>
-          `
-        )}
         ${this.renderLightHeaders()} ${this.lights.map(this.renderLightRow.bind(this))}
       </table>
       <p>Updated ${this.reportTime.toLocaleString("sv")}</p>
@@ -113,6 +98,32 @@
       <th class="col-group-3">latency</th>
     </tr>`;
   }
+
+  renderLightRow(d: Light) {
+    return html`
+      <tr>
+        <td class="col-group-1">${d.name}</td>
+        <td class="col-group-1"><code>${this.renderLinked(d.address)}</code></td>
+        <td class="col-group-2">
+          <code>${d.requestingColor}</code>
+          <input type="color" @input=${this.onRequestingColor.bind(this, d.name)} .value="${d.requestingColor}" />
+        </td>
+        <td class="col-group-2"><code>${JSON.stringify(d.requestingDeviceColor)}</code></td>
+        <td class="col-group-3">${d.emittingColor} <span class="color" style="background: ${d.emittingColor}"></span></td>
+        <td class="col-group-3">${d.online ? "✔" : ""}</td>
+        <td class="col-group-3">${d.latencyMs} ms</td>
+      </tr>
+    `;
+  }
+
+  private renderLinked(link: { url?: string; label: string }): TemplateResult {
+    var addr = html`${link.label}`;
+    if (link.url) {
+      addr = html`<a href="${link.url}">${addr}</a>`;
+    }
+    return addr;
+  }
+
   async onRequestingColor(lightName: string, ev: InputEvent) {
     const currentRequest = this.lightByName.get(lightName)!.requestingColor;
     const value = (ev.target as HTMLInputElement).value;