feat(dashboard): shared UI primitives & display components

Core label/field/field_list, local_time + future-aware relative_time with JS-localized tooltips, JSON highlighter, DataTable label-idiom headers, and the shared LogLine / StepDetail components reused across tabs and the flow inspector.

Author: kasvith

durable_dashboard/assets/src/hooks/local_time.ts

@@ -0,0 +1,76 @@
+/**
+ * Local time rendering — show UTC timestamps in the viewer's own timezone.
+ *
+ * The server can only emit UTC (it has no idea where the viewer is), so a raw
+ * `2026-06-23T11:39:40.328499Z` is ambiguous and hard to read. The server
+ * renders `<time data-ts="<iso>" data-format="...">` with a UTC fallback as
+ * its text (legible even without JS); these helpers rewrite the text to the
+ * browser's locale + timezone and add a full-detail tooltip.
+ *
+ * Wired through LiveSocket's `dom` callbacks in `main.ts` rather than a
+ * per-element hook, so timestamps inside lists don't each need a unique id:
+ * one pass localizes the initial render, `onNodeAdded` catches streamed-in
+ * nodes, and `onBeforeElUpdated` re-localizes elements LiveView re-renders.
+ *
+ * Formats (via `data-format`):
+ *   - "time"      11:39:40.328           local time of day, ms precision
+ *   - "datetime"  Jun 23, 2026, 11:39:40 local date + time
+ *   - "date"      Jun 23, 2026
+ */
+
+type Fmt = "time" | "datetime" | "date";
+
+/** Localize a single `<time data-ts>` element in place. */
+export function localizeTime(el: HTMLElement): void {
+  const iso = el.dataset.ts;
+  if (!iso) return;
+
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return;
+
+  // Relative elements ("2m ago" / "in 2h") keep their server-computed text;
+  // only the hover tooltip is localized to the viewer's timezone so the exact
+  // moment is legible without exposing a confusing UTC string.
+  if (el.dataset.rel) {
+    el.setAttribute("title", format(d, "datetime"));
+    return;
+  }
+
+  el.textContent = format(d, (el.dataset.format as Fmt) || "datetime");
+  el.setAttribute("title", d.toString());
+}
+
+/** Localize every `<time data-ts>` under (and including) `root`. */
+export function localizeTimes(root: ParentNode | Element): void {
+  if (root instanceof HTMLElement && root.matches("time[data-ts]")) {
+    localizeTime(root);
+  }
+  for (const el of root.querySelectorAll<HTMLElement>("time[data-ts]")) {
+    localizeTime(el);
+  }
+}
+
+function format(d: Date, fmt: Fmt): string {
+  switch (fmt) {
+    case "time":
+      return d.toLocaleTimeString([], {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        fractionalSecondDigits: 3,
+        hour12: false,
+      });
+    case "date":
+      return d.toLocaleDateString([], { year: "numeric", month: "short", day: "numeric" });
+    default:
+      return d.toLocaleString([], {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: false,
+      });
+  }
+}

durable_dashboard/assets/src/main.ts

@@ -12,6 +12,7 @@ import { LiveSocket } from "phoenix_live_view";
 
 import { CommandPalette } from "./hooks/command_palette";
 import { FlowGraph } from "./hooks/flow_graph";
+import { localizeTime, localizeTimes } from "./hooks/local_time";
 
 const csrfToken = document.querySelector("meta[name='csrf-token']")?.getAttribute("content");
 
@@ -21,9 +22,25 @@ const liveSocketPath =
 const liveSocket = new LiveSocket(liveSocketPath, Socket, {
   hooks: { FlowGraph, CommandPalette },
   params: { _csrf_token: csrfToken },
+  dom: {
+    // Render UTC `<time data-ts>` elements in the viewer's timezone — once for
+    // streamed-in nodes, and again whenever LiveView re-renders one (which
+    // would otherwise reset the text back to the server's UTC fallback).
+    onNodeAdded(node: Node) {
+      if (node instanceof HTMLElement) localizeTimes(node);
+    },
+    onBeforeElUpdated(_from: Element, to: Element) {
+      if (to instanceof HTMLElement && to.matches("time[data-ts]")) localizeTime(to);
+    },
+  },
 });
 
 liveSocket.connect();
 
+// The initial server-rendered DOM is already in place before any patch, so
+// localize it directly.
+localizeTimes(document);
+document.addEventListener("phx:page-loading-stop", () => localizeTimes(document));
+
 // Expose for debugging.
 (window as unknown as Record<string, unknown>).liveSocket = liveSocket;