--- 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;