From 743f36c5db59dc70c5fbc506fdf1cc51974680ae Mon Sep 17 00:00:00 2001
From: Derek Deming <87205616+derekdeming@users.noreply.github.com>
Date: Fri, 16 May 2025 19:52:03 -0400
Subject: [PATCH] feat(web-ui): add telemetry table and api stub

---
 chimera/web-ui/app/api/telemetry/route.ts     | 15 ++++++++
 chimera/web-ui/app/page.tsx                   | 12 ++++++-
 chimera/web-ui/components/AuthProvider.tsx    | 18 ++++++++++
 chimera/web-ui/components/TelemetryClient.tsx | 27 ++++++++++++++
 chimera/web-ui/components/TelemetryTable.tsx  | 36 +++++++++++++++++++
 chimera/web-ui/tailwind.config.js             |  5 ++-
 6 files changed, 111 insertions(+), 2 deletions(-)
 create mode 100644 chimera/web-ui/app/api/telemetry/route.ts
 create mode 100644 chimera/web-ui/components/AuthProvider.tsx
 create mode 100644 chimera/web-ui/components/TelemetryClient.tsx
 create mode 100644 chimera/web-ui/components/TelemetryTable.tsx

diff --git a/chimera/web-ui/app/api/telemetry/route.ts b/chimera/web-ui/app/api/telemetry/route.ts
new file mode 100644
index 00000000..941009fc
--- /dev/null
+++ b/chimera/web-ui/app/api/telemetry/route.ts
@@ -0,0 +1,15 @@
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+  // Stub telemetry record until backend wiring is complete
+  const data = {
+    hash: 'demo-hash',
+    metrics: {
+      eccErrors: 0,
+      temperature: 70,
+      nvlinkErrors: 0,
+      migEvents: [],
+    },
+  };
+  return NextResponse.json(data);
+}
diff --git a/chimera/web-ui/app/page.tsx b/chimera/web-ui/app/page.tsx
index 3f82e933..73cad57a 100644
--- a/chimera/web-ui/app/page.tsx
+++ b/chimera/web-ui/app/page.tsx
@@ -1,3 +1,13 @@
+import AuthProvider from '../components/AuthProvider';
+import TelemetryClient from '../components/TelemetryClient';
+
 export default function Home() {
-  return <div className="p-4">Chimera Dashboard</div>;
+  return (
+    <AuthProvider>
+      <div className="p-4 space-y-4">
+        <h1 className="text-xl font-bold">Chimera Dashboard</h1>
+        <TelemetryClient />
+      </div>
+    </AuthProvider>
+  );
 }
diff --git a/chimera/web-ui/components/AuthProvider.tsx b/chimera/web-ui/components/AuthProvider.tsx
new file mode 100644
index 00000000..735ef4ed
--- /dev/null
+++ b/chimera/web-ui/components/AuthProvider.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+
+export interface User {
+  name: string;
+}
+
+const AuthContext = createContext<User | null>({ name: 'demo-user' });
+
+export function useUser() {
+  return useContext(AuthContext);
+}
+
+export default function AuthProvider({ children }: { children: React.ReactNode }) {
+  // TODO: replace with real OIDC integration
+  return <AuthContext.Provider value={{ name: 'demo-user' }}>{children}</AuthContext.Provider>;
+}
diff --git a/chimera/web-ui/components/TelemetryClient.tsx b/chimera/web-ui/components/TelemetryClient.tsx
new file mode 100644
index 00000000..697f6063
--- /dev/null
+++ b/chimera/web-ui/components/TelemetryClient.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import TelemetryTable, { TelemetryRecord } from './TelemetryTable';
+
+export default function TelemetryClient() {
+  const [records, setRecords] = useState<TelemetryRecord[]>([]);
+
+  useEffect(() => {
+    async function load() {
+      const res = await fetch('/api/telemetry');
+      if (res.ok) {
+        const data = await res.json();
+        setRecords([data]);
+      }
+    }
+    load();
+    const id = setInterval(load, 5000);
+    return () => clearInterval(id);
+  }, []);
+
+  return (
+    <div>
+      <TelemetryTable records={records} />
+    </div>
+  );
+}
diff --git a/chimera/web-ui/components/TelemetryTable.tsx b/chimera/web-ui/components/TelemetryTable.tsx
new file mode 100644
index 00000000..841f438f
--- /dev/null
+++ b/chimera/web-ui/components/TelemetryTable.tsx
@@ -0,0 +1,36 @@
+export interface TelemetryRecord {
+  hash: string;
+  metrics: {
+    eccErrors: number;
+    temperature: number;
+    nvlinkErrors: number;
+    migEvents: string[];
+  };
+}
+
+export default function TelemetryTable({ records }: { records: TelemetryRecord[] }) {
+  return (
+    <table className="min-w-full divide-y divide-gray-200">
+      <thead>
+        <tr>
+          <th className="px-4 py-2 text-left">Hash</th>
+          <th className="px-4 py-2 text-left">ECC Errors</th>
+          <th className="px-4 py-2 text-left">Temp (C)</th>
+          <th className="px-4 py-2 text-left">NVLink Errors</th>
+          <th className="px-4 py-2 text-left">MIG Events</th>
+        </tr>
+      </thead>
+      <tbody className="divide-y divide-gray-200">
+        {records.map((r, idx) => (
+          <tr key={idx} className="hover:bg-gray-50">
+            <td className="px-4 py-2 font-mono text-sm">{r.hash}</td>
+            <td className="px-4 py-2">{r.metrics.eccErrors}</td>
+            <td className="px-4 py-2">{r.metrics.temperature}</td>
+            <td className="px-4 py-2">{r.metrics.nvlinkErrors}</td>
+            <td className="px-4 py-2">{r.metrics.migEvents.join(', ')}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
diff --git a/chimera/web-ui/tailwind.config.js b/chimera/web-ui/tailwind.config.js
index 0ccd0260..49862c21 100644
--- a/chimera/web-ui/tailwind.config.js
+++ b/chimera/web-ui/tailwind.config.js
@@ -1,5 +1,8 @@
 module.exports = {
-  content: ["./app/**/*.{js,ts,jsx,tsx}"] ,
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
   theme: {
     extend: {},
   },