--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/CollectorState.ts	Fri Nov 25 20:32:05 2022 -0800
@@ -0,0 +1,132 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+export { StreamedGraph } from "@bigasterisk/streamed-graph";
+
+@customElement("collector-state")
+export class CollectorState extends LitElement {
+  @property() latestState: { graphClients: any } ;
+
+  constructor() {
+    super();
+    this.latestState = { graphClients: {} };
+    this.refresh();
+  }
+
+  delayedRefresh() {
+    setTimeout(() => {
+      requestAnimationFrame(() => {
+        this.refresh();
+      });
+    }, 5000);
+  }
+
+  refresh() {
+    fetch("state")
+      .then((response) => {
+        return response.json();
+      })
+      .then((newState) => {
+        this.latestState = newState;
+        this.delayedRefresh();
+      });
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+        border: 2px solid gray;
+        padding: 5px;
+      }
+    `;
+  }
+
+  render() {
+    const sourcesTable = (clients: Array<any>) => {
+      const clientRow = (client: any) => {
+        const d = client.reconnectedPatchSource;
+        const now = Date.now() / 1000;
+        const dispSec = (sec: number) =>
+          Math.abs(sec) > now - 1
+            ? "--"
+            : Math.abs(sec) > 3600
+            ? `${Math.round(sec / 3600)} hr`
+            : Math.abs(sec) > 60
+            ? `${Math.round(sec / 60)} min`
+            : `${Math.round(sec * 10) / 10} sec`;
+        return html`
+          <tr>
+            <td><a href="${d.url.replace("/events", "")}">[browse]</a> <a href="${d.url}">${d.url}</a></td>
+            <td>${d.fullGraphReceived}</td>
+            <td>${d.patchesReceived}</td>
+            <td>${dispSec(d.time.open - now)}</td>
+            <td>${dispSec(d.time.fullGraph - d.time.open)}</td>
+            <td>${dispSec(d.time.latestPatch - now)}</td>
+          </tr>
+        `;
+      };
+
+      return html`
+      rendered!
+        <table>
+          <thead>
+            <tr>
+              <th>patch source</th>
+              <th>full graph recv</th>
+              <th>patches recv</th>
+              <th>time open (rel)</th>
+              <th>time fullGraph (after open)</th>
+              <th>time latest patch (rel)</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${clients.map(clientRow)}
+          </tbody>
+        </table>
+      `;
+    };
+
+    const handlersTable = (handlers: Array<any>) => {
+      const handlerRow = (d: any) => {
+        return html`
+          <tr>
+            <td>${d.created}</td>
+            <td>${d.ageHours}</td>
+            <td><a href="graph/${d.streamId}">${d.streamId}</a></td>
+            <td>${d.foafAgent}</td>
+            <td>${d.userAgent}</td>
+          </tr>
+        `;
+      };
+
+      return html`
+        <table>
+          <thead>
+            <tr>
+              <th>created</th>
+              <th>age hours</th>
+              <th>stream</th>
+              <th>foaf agent</th>
+              <th>user agent</th>
+            </tr>
+          </thead>
+          <tbody>
+            ${handlers.map(handlerRow)}
+          </tbody>
+        </table>
+      `;
+    };
+
+    if (!this.latestState) {
+      return "loading...";
+    }
+    const d = this.latestState.graphClients;
+    return html` <div>
+      <p>Graph: ${d.statements ? d.statements.len : 0} statements</p>
+
+      <p>Sources: ${sourcesTable(d.clients || [])}</p>
+
+      <p>Listening clients: ${handlersTable(d.sseHandlers || [])}</p>
+    </div>`;
+  }
+}