feat: added telemetry page

apps/client/package.json

@@ -12,6 +12,8 @@
     "test": "vitest"
   },
   "dependencies": {
+    "@types/d3": "^7.4.3",
+    "d3": "^7.9.0",
     "lucide-react": "^0.344.0",
     "moqtail-ts": "^0.3.2",
     "posthog-js": "^1.255.1",

apps/client/src/App.tsx

@@ -18,6 +18,7 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
 import JoinPage from './pages/JoinPage'
 import SessionPage from './pages/SessionPage'
 import Arch from './pages/Arch'
+import Telemetry from './pages/Telemetry'
 import { SessionProvider } from './contexts/SessionContext'
 import { SocketProvider } from './sockets/SocketContext'
 
@@ -30,6 +31,7 @@ export default function App() {
             <Route path="/" element={<JoinPage />} />
             <Route path="/session" element={<SessionPage />} />
             <Route path="/arch" element={<Arch />} />
+            <Route path="/telemetry" element={<Telemetry />} />
             <Route path="*" element={<Navigate to="/" />} />
           </Routes>
         </BrowserRouter>

apps/client/src/components/InfoTooltip.tsx

@@ -0,0 +1,80 @@
+/**
+ * Copyright 2025 The MOQtail Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useState, useRef, useEffect } from 'react'
+
+interface InfoTooltipProps {
+  title: string
+  children: React.ReactNode
+}
+
+const InfoTooltip: React.FC<InfoTooltipProps> = ({ title, children }) => {
+  const [showTooltip, setShowTooltip] = useState(false)
+  const [isClickedOpen, setIsClickedOpen] = useState(false)
+  const tooltipRef = useRef<HTMLDivElement>(null)
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    setIsClickedOpen(!isClickedOpen)
+  }
+
+  const handleMouseEnter = () => {
+    if (!isClickedOpen) {
+      setShowTooltip(true)
+    }
+  }
+
+  const handleMouseLeave = () => {
+    if (!isClickedOpen) {
+      setShowTooltip(false)
+    }
+  }
+
+  useEffect(() => {
+    const handleOutsideClick = (e: MouseEvent) => {
+      if (tooltipRef.current && !tooltipRef.current.contains(e.target as Node)) {
+        setIsClickedOpen(false)
+      }
+    }
+
+    if (isClickedOpen) {
+      document.addEventListener('click', handleOutsideClick)
+      return () => document.removeEventListener('click', handleOutsideClick)
+    }
+  }, [isClickedOpen])
+
+  return (
+    <div className="relative inline-block ml-2" ref={tooltipRef}>
+      <button
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onClick={handleClick}
+        className="text-gray-400 hover:text-gray-300 transition-colors cursor-help"
+        title="Click or hover for more information"
+      >
+        <span className="text-xl">*</span>
+      </button>
+      {(showTooltip || isClickedOpen) && (
+        <div className="absolute top-full left-1/2 transform -translate-x-1/2 mt-2 w-64 bg-gray-700 text-gray-100 text-sm rounded-lg shadow-lg p-3 z-50">
+          <p className="mb-2 font-semibold">{title}</p>
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default InfoTooltip

apps/client/src/components/TelemetryChart.tsx

@@ -0,0 +1,133 @@
+/**
+ * Copyright 2025 The MOQtail Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useEffect, useRef } from 'react'
+import * as d3 from 'd3'
+import { TelemetryEntry, TelemetryStreamType } from '@/util/telemetryDB'
+
+interface TelemetryChartProps {
+  data: TelemetryEntry[]
+  streamType: TelemetryStreamType
+  color: string
+  maxValue: number
+  timeWindow: number | null
+  label: string
+}
+
+const TelemetryChart: React.FC<TelemetryChartProps> = ({ data, streamType, color, maxValue, timeWindow, label }) => {
+  const svgRef = useRef<SVGSVGElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!svgRef.current || data.length === 0) return
+
+    const now = Date.now()
+    const margin = { top: 20, right: 20, bottom: 30, left: 50 }
+    const width = containerRef.current?.clientWidth ?? 800
+    const height = 250
+
+    const innerWidth = width - margin.left - margin.right
+    const innerHeight = height - margin.top - margin.bottom
+
+    // Determine time domain based on timeWindow
+    const xDomain =
+      timeWindow === null
+        ? [data[0]?.timestamp || now - 60000, data[data.length - 1]?.timestamp || now]
+        : [now - timeWindow, now]
+
+    // Create scales
+    const xScale = d3.scaleTime().domain(xDomain).range([0, innerWidth])
+
+    const yScale = d3.scaleLinear().domain([0, maxValue]).range([innerHeight, 0])
+
+    // Create line generator
+    const line = d3
+      .line<TelemetryEntry>()
+      .x((d) => xScale(d.timestamp))
+      .y((d) => yScale(d.value))
+
+    // Clear previous content
+    const svg = d3.select(svgRef.current)
+    svg.selectAll('*').remove()
+
+    // Create main group
+    const g = svg
+      .attr('width', width)
+      .attr('height', height)
+      .append('g')
+      .attr('transform', `translate(${margin.left},${margin.top})`)
+
+    // Add background grid
+    g.append('g')
+      .attr('class', 'grid')
+      .attr('opacity', 0.1)
+      .call(
+        d3
+          .axisLeft(yScale)
+          .tickSize(-innerWidth)
+          .tickFormat(() => ''),
+      )
+
+    // Add path
+    g.append('path')
+      .attr('d', line(data))
+      .attr('fill', 'none')
+      .attr('stroke', color)
+      .attr('stroke-width', 2.5)
+      .attr('stroke-linecap', 'round')
+      .attr('stroke-linejoin', 'round')
+
+    // Add X axis
+    g.append('g')
+      .attr('transform', `translate(0,${innerHeight})`)
+      .call(
+        d3
+          .axisBottom(xScale)
+          .ticks(4)
+          .tickFormat((d) => {
+            const date = d as Date
+            return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+          }),
+      )
+      .attr('class', 'text-xs text-gray-500')
+
+    // Add Y axis
+    g.append('g').call(d3.axisLeft(yScale).ticks(5)).attr('class', 'text-xs text-gray-500')
+
+    // Add Y axis label
+    g.append('text')
+      .attr('transform', 'rotate(-90)')
+      .attr('y', 0 - margin.left)
+      .attr('x', 0 - innerHeight / 2)
+      .attr('dy', '1em')
+      .attr('class', 'text-xs text-gray-500')
+      .style('text-anchor', 'middle')
+      .text(label.split('(')[1]?.replace(')', '').trim() || '')
+
+    // Style axes
+    svg.selectAll('.tick line').attr('stroke', '#d1d5db').attr('stroke-width', 0.5)
+    svg.selectAll('.tick text').attr('fill', '#6b7280')
+    svg.selectAll('.domain').attr('stroke', '#d1d5db').attr('stroke-width', 1)
+  }, [data, color, maxValue, timeWindow, label])
+
+  return (
+    <div ref={containerRef} className="w-full">
+      <svg ref={svgRef} className="w-full" style={{ backgroundColor: '#f9fafb', borderRadius: '0.5rem' }}></svg>
+    </div>
+  )
+}
+
+export default TelemetryChart

apps/client/src/pages/JoinPage.tsx

@@ -342,8 +342,8 @@ export default function JoinPage() {
           {roomLimits.sessionDurationMinutes !== 1 ? 's' : ''} and session size is limited to{' '}
           {roomLimits.maxUsersPerRoom} participants.
           {commitHash && (
-            <>
-              Commit:{' '}
+            <span>
+              Commit:
               <a
                 href={`https://github.com/moqtail/demo-timetravel/commit/${commitHash}`}
                 target="_blank"
@@ -352,7 +352,7 @@ export default function JoinPage() {
               >
                 {commitHash}
               </a>
-            </>
+            </span>
           )}
         </div>
         {error && <div className="error-message">{error}</div>}