1 files changed, 12 insertions, 2 deletions
diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index 153d7cb..73b7d30 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -90,6 +90,8 @@
   .legend .node.silent::before { background: var(--panel); }
   .legend .node.self::before { border-color: var(--self); background: var(--self); }
   .legend .node.dormant-node::before { border: 2.5px solid var(--bad); }
+  .legend .node.clock-off::before { width: 14px; height: 14px; background: none;
+    border: 1.5px dashed var(--warn); }
   .legend .node.focus::before { width: 14px; height: 14px; background: var(--self);
     border: none; opacity: .35; }
   .scroll { overflow: auto; min-height: 0; }
@@ -150,6 +152,7 @@
         <span class="node">reports its links</span>
         <span class="node silent">reports none (no LINKS_REPLY)</span>
         <span class="node dormant-node">dormant (to this node)</span>
+        <span class="node clock-off">clock off the swarm's</span>
         <span class="node focus">in focus (click a node)</span>
       </div>
       <div class="legend" id="legend"></div>
@@ -649,16 +652,23 @@ function renderGraph() {
       element.addEventListener("dblclick", () => unpin(id));
       hoverable(element, id);
     };
+    // A clock off the swarm's: a dashed orange ring.
+    if (((state.graph.clocks || {})[id] || {}).off) {
+      children.push(drawing("clock " + id, "circle", { cx: p.x, cy: p.y, r: 11, fill: "none",
+        stroke: "var(--warn)", "stroke-width": 1.5, "stroke-dasharray": "3 2" }));
+    }
     // Dormant as this node sees it (`/peers`): a red outline.
     const dormant = (state.peers.peers[id] || {}).status === "dormant";
     const circle = drawing("node " + id, "circle", { cx: p.x, cy: p.y, r: member.self ? 8 : 6,
       fill: member.self ? "var(--self)" : reported ? "var(--fg)" : "var(--panel)",
       stroke: member.self ? "var(--self)" : dormant ? "var(--bad)" : "var(--fg)",
       "stroke-width": dormant ? 2.5 : 1.5 }, pressed);
-    const clock = (state.peers.peers[id] || {}).clock;
+    // Its clock against the swarm's, as the members' reports chain it (the node's).
+    const clock = ((state.graph.clocks || {})[id]);
     tooltip(circle, id + (reported ? "" : " (no links reported)") +
       (dormant ? " (dormant)" : "") +
-      (clockOff(clock) ? " (clock " + seconds(clock.offsetMs) + " off this node's)" : ""));
+      (clock && clock.off ? " (clock " + seconds(clock.offsetMs) + " off the swarm's, ±" +
+        clock.withinMs + " ms)" : ""));
     const label = drawing("name " + id, "text", upright({ x: p.x + 10, y: p.y + 4,
       "font-size": 12, fill: "var(--fg)", cursor: "pointer" }), pressed);
     text(label, name(id));