OpenGradient · adambalogh · May 20, 2026 · May 19, 2026
diff --git a/lib/opengradient/contracts/teeRegistry.ts b/lib/opengradient/contracts/teeRegistry.ts
@@ -1,55 +1,14 @@
 import { ethers } from 'ethers';
 import type { Address } from 'viem';
 
+import type { TEENodeWithStatus, TEEInfo, TEERegistryOverview, TEETypeInfo, TEETypeSummary } from 'lib/opengradient/teeRegistry';
+import { TEE_REGISTRY_ADDRESS } from 'lib/opengradient/teeRegistry';
+
 import TEERegistryAbi from './abi/TEERegistry.json';
 import { ethDevnetProvider } from './providers';
 
-export const TEE_REGISTRY_ADDRESS = '0x4e72238852f3c918f4E4e57AeC9280dDB0c80248';
-
 const contract = new ethers.Contract(TEE_REGISTRY_ADDRESS, TEERegistryAbi, ethDevnetProvider);
 
-export interface TEETypeInfo {
-  typeId: number;
-  name: string;
-  addedAt: bigint;
-}
-
-export interface TEEInfo {
-  teeId: string;
-  owner: Address;
-  paymentAddress: Address;
-  endpoint: string;
-  publicKey: string;
-  tlsCertificate: string;
-  pcrHash: string;
-  teeType: number;
-  enabled: boolean;
-  registeredAt: bigint;
-  lastHeartbeatAt: bigint;
-}
-
-export interface TEENodeWithStatus extends TEEInfo {
-  isActive: boolean;
-}
-
-export interface TEETypeSummary {
-  typeId: number;
-  name: string;
-  totalNodes: number;
-  enabledNodes: number;
-  activeNodes: number;
-  approvedPCRs: number;
-  addedAt: bigint;
-}
-
-export interface TEERegistryStats {
-  totalTypes: number;
-  totalNodes: number;
-  activeNodes: number;
-  enabledNodes: number;
-  approvedPCRs: number;
-}
-
 export const getTEETypes = async(): Promise<Array<TEETypeInfo>> => {
   const [ typeIds, infos ] = await contract.getTEETypes();
 
@@ -109,11 +68,7 @@ export const getHeartbeatMaxAge = async(): Promise<bigint> => {
 /**
  * Fetch full registry overview: types, nodes per type with status, and global stats.
  */
-export const getTEERegistryOverview = async(): Promise<{
-  types: Array<TEETypeSummary>;
-  stats: TEERegistryStats;
-  nodesByType: Record<number, Array<TEENodeWithStatus>>;
-}> => {
+export const getTEERegistryOverviewFromContract = async(): Promise<TEERegistryOverview> => {
   // 1. Get all TEE types
   const types = await getTEETypes();
 
@@ -186,5 +141,3 @@ export const getTEERegistryOverview = async(): Promise<{
     nodesByType,
   };
 };
-
-export const TEE_REGISTRY_QUERY_KEY = [ 'opengradient', 'teeRegistry' ];
diff --git a/lib/opengradient/teeRegistry.ts b/lib/opengradient/teeRegistry.ts
@@ -0,0 +1,107 @@
+import type { Address } from 'viem';
+
+export const TEE_REGISTRY_ADDRESS = '0x4e72238852f3c918f4E4e57AeC9280dDB0c80248';
+
+export interface TEETypeInfo {
+  typeId: number;
+  name: string;
+  addedAt: bigint;
+}
+
+export interface TEEInfo {
+  teeId: string;
+  owner: Address;
+  paymentAddress: Address;
+  endpoint: string;
+  publicKey: string;
+  tlsCertificate: string;
+  pcrHash: string;
+  teeType: number;
+  enabled: boolean;
+  registeredAt: bigint;
+  lastHeartbeatAt: bigint;
+}
+
+export interface TEENodeWithStatus extends TEEInfo {
+  isActive: boolean;
+}
+
+export interface TEETypeSummary {
+  typeId: number;
+  name: string;
+  totalNodes: number;
+  enabledNodes: number;
+  activeNodes: number;
+  approvedPCRs: number;
+  addedAt: bigint;
+}
+
+export interface TEERegistryStats {
+  totalTypes: number;
+  totalNodes: number;
+  activeNodes: number;
+  enabledNodes: number;
+  approvedPCRs: number;
+}
+
+export type TEERegistryOverview = {
+  types: Array<TEETypeSummary>;
+  stats: TEERegistryStats;
+  nodesByType: Record<number, Array<TEENodeWithStatus>>;
+};
+
+export type SerializedTEERegistryOverview = {
+  types: Array<Omit<TEETypeSummary, 'addedAt'> & { addedAt: string }>;
+  stats: TEERegistryStats;
+  nodesByType: Record<string, Array<Omit<TEENodeWithStatus, 'registeredAt' | 'lastHeartbeatAt'> & {
+    registeredAt: string;
+    lastHeartbeatAt: string;
+  }>>;
+};
+
+export const serializeTEERegistryOverview = (overview: TEERegistryOverview): SerializedTEERegistryOverview => ({
+  types: overview.types.map((type) => ({
+    ...type,
+    addedAt: type.addedAt.toString(),
+  })),
+  stats: overview.stats,
+  nodesByType: Object.fromEntries(
+    Object.entries(overview.nodesByType).map(([ typeId, nodes ]) => [
+      typeId,
+      nodes.map((node) => ({
+        ...node,
+        registeredAt: node.registeredAt.toString(),
+        lastHeartbeatAt: node.lastHeartbeatAt.toString(),
+      })),
+    ]),
+  ),
+});
+
+export const parseTEERegistryOverview = (overview: SerializedTEERegistryOverview): TEERegistryOverview => ({
+  types: overview.types.map((type) => ({
+    ...type,
+    addedAt: BigInt(type.addedAt),
+  })),
+  stats: overview.stats,
+  nodesByType: Object.fromEntries(
+    Object.entries(overview.nodesByType).map(([ typeId, nodes ]) => [
+      Number(typeId),
+      nodes.map((node) => ({
+        ...node,
+        registeredAt: BigInt(node.registeredAt),
+        lastHeartbeatAt: BigInt(node.lastHeartbeatAt),
+      })),
+    ]),
+  ),
+});
+
+export const getTEERegistryOverview = async(): Promise<TEERegistryOverview> => {
+  const response = await fetch('/api/opengradient/tee-registry');
+  if (!response.ok) {
+    throw new Error(`Failed to load TEE registry overview: ${ response.status }`);
+  }
+
+  return parseTEERegistryOverview(await response.json() as SerializedTEERegistryOverview);
+};
+
+export const TEE_REGISTRY_QUERY_KEY = [ 'opengradient', 'teeRegistry' ];
diff --git a/pages/api/opengradient/tee-registry.ts b/pages/api/opengradient/tee-registry.ts
@@ -0,0 +1,15 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { getTEERegistryOverviewFromContract } from 'lib/opengradient/contracts/teeRegistry';
+import { serializeTEERegistryOverview } from 'lib/opengradient/teeRegistry';
+
+export default async function handler(_req: NextApiRequest, res: NextApiResponse) {
+  try {
+    const overview = await getTEERegistryOverviewFromContract();
+    res.status(200).json(serializeTEERegistryOverview(overview));
+  } catch (error) {
+    res.status(500).json({
+      error: error instanceof Error ? error.message : 'Failed to load TEE registry overview',
+    });
+  }
+}
diff --git a/ui/home/HeroBanner.tsx b/ui/home/HeroBanner.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 import { route } from 'nextjs-routes';
 
 import useApiQuery from 'lib/api/useApiQuery';
-import { getTEERegistryOverview, TEE_REGISTRY_QUERY_KEY } from 'lib/opengradient/contracts/teeRegistry';
+import { getTEERegistryOverview, TEE_REGISTRY_QUERY_KEY } from 'lib/opengradient/teeRegistry';
 import { HOMEPAGE_STATS, HOMEPAGE_STATS_MICROSERVICE } from 'stubs/stats';
 import { LinkBox, LinkOverlay } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
@@ -319,7 +319,7 @@ const HeroBanner = () => {
                   label="TEE Operators"
                   iconName="nft_shield"
                   loading={ teeRegistryQuery.isPlaceholderData }
-                  value={ `${ teeStats.activeNodes }/${ teeStats.enabledNodes }` }
+                  value={ teeStats.activeNodes.toLocaleString() }
                 />
                 <MetricCard
                   href={ route({ pathname: '/address/[hash]', query: { hash: settlementContractAddress } }) }

diff --git a/ui/home/TrustedExecution.tsx b/ui/home/TrustedExecution.tsx
@@ -5,7 +5,7 @@ import React from 'react';
 import { route } from 'nextjs-routes';
 
 import dayjs from 'lib/date/dayjs';
-import { getTEERegistryOverview, TEE_REGISTRY_QUERY_KEY, TEE_REGISTRY_ADDRESS, type TEENodeWithStatus } from 'lib/opengradient/contracts/teeRegistry';
+import { getTEERegistryOverview, TEE_REGISTRY_QUERY_KEY, TEE_REGISTRY_ADDRESS, type TEENodeWithStatus } from 'lib/opengradient/teeRegistry';
 import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { PLACEHOLDER_TEE_REGISTRY_STATS, PLACEHOLDER_TEE_TYPES } from 'ui/opengradient/teeRegistry/placeholders';
@@ -138,10 +138,11 @@ const TrustedExecution = () => {
   const types = query.data?.types ?? PLACEHOLDER_TEE_TYPES;
   const nodes = React.useMemo(() => {
     const nodesByType = query.data?.nodesByType ?? {};
-    return Object.values(nodesByType).flat().sort((a, b) => Number(b.lastHeartbeatAt - a.lastHeartbeatAt));
+    return Object.values(nodesByType).flat()
+      .filter((node) => node.isActive)
+      .sort((a, b) => Number(b.lastHeartbeatAt - a.lastHeartbeatAt));
   }, [ query.data?.nodesByType ]);
-  const primaryType = types[0] ?? PLACEHOLDER_TEE_TYPES[0];
-  const visibleNodes = nodes.slice(0, 3);
+  const primaryType = types[0];
   const isLoading = query.isPlaceholderData;
 
   return (
@@ -239,13 +240,13 @@ const TrustedExecution = () => {
           <Grid templateColumns={{ base: '1fr', md: 'repeat(3, minmax(0, 1fr))' }} gap={ 3 } mb={ 4 }>
             <RegistryMetric
               label="Active TEEs"
-              value={ `${ stats.activeNodes }/${ stats.enabledNodes }` }
+              value={ stats.activeNodes.toLocaleString() }
               helper="Heartbeat-valid operators"
               loading={ isLoading }
             />
             <RegistryMetric
               label="Execution type"
-              value={ primaryType.name }
+              value={ primaryType?.name ?? 'Loading' }
               helper="Registered AI workload class"
               loading={ isLoading }
             />
@@ -270,32 +271,23 @@ const TrustedExecution = () => {
               </Text>
               <Skeleton loading={ isLoading } w="fit-content">
                 <Text mt={ 3 } fontFamily={ fonts.sans } fontSize="18px" fontWeight={ 600 } color={ text.primary }>
-                  { primaryType.name }
+                  { primaryType?.name ?? 'Loading' }
                 </Text>
               </Skeleton>
               <Grid templateColumns="repeat(3, minmax(0, 1fr))" gap={ 3 } mt={ 4 }>
                 <Box>
                   <Text fontFamily={ fonts.mono } fontSize="9px" color={ text.muted } textTransform="uppercase" letterSpacing="0.08em">Active</Text>
-                  <Text mt={ 1 } fontFamily={ fonts.mono } fontSize="14px" color={ text.primary }>{ primaryType.activeNodes }/{ primaryType.totalNodes }</Text>
+                  <Text mt={ 1 } fontFamily={ fonts.mono } fontSize="14px" color={ text.primary }>{ primaryType?.activeNodes.toLocaleString() ?? '0' }</Text>
                 </Box>
                 <Box>
                   <Text fontFamily={ fonts.mono } fontSize="9px" color={ text.muted } textTransform="uppercase" letterSpacing="0.08em">Enabled</Text>
-                  <Text mt={ 1 } fontFamily={ fonts.mono } fontSize="14px" color={ text.primary }>{ primaryType.enabledNodes }</Text>
+                  <Text mt={ 1 } fontFamily={ fonts.mono } fontSize="14px" color={ text.primary }>{ primaryType?.enabledNodes.toLocaleString() ?? '0' }</Text>
                 </Box>
                 <Box>
                   <Text fontFamily={ fonts.mono } fontSize="9px" color={ text.muted } textTransform="uppercase" letterSpacing="0.08em">PCRs</Text>
-                  <Text mt={ 1 } fontFamily={ fonts.mono } fontSize="14px" color={ text.primary }>{ primaryType.approvedPCRs }</Text>
+                  <Text mt={ 1 } fontFamily={ fonts.mono } fontSize="14px" color={ text.primary }>{ primaryType?.approvedPCRs.toLocaleString() ?? '0' }</Text>
                 </Box>
               </Grid>
-              <Box mt={ 4 } h="3px" borderRadius="2px" bg={{ _light: 'rgba(36, 188, 227, 0.12)', _dark: 'rgba(36, 188, 227, 0.12)' }} overflow="hidden">
-                <Box
-                  h="100%"
-                  w={ primaryType.totalNodes > 0 ? `${ Math.round((primaryType.activeNodes / primaryType.totalNodes) * 100) }%` : '0' }
-                  minW={ primaryType.activeNodes > 0 ? '18px' : '0' }
-                  bg={ colors.cyan }
-                  borderRadius="2px"
-                />
-              </Box>
             </Box>
 
             <Box
@@ -316,7 +308,7 @@ const TrustedExecution = () => {
                 </Text>
               </Flex>
               <VStack align="stretch" gap={ 0 }>
-                { visibleNodes.length > 0 ? visibleNodes.map((node) => (
+                { nodes.length > 0 ? nodes.map((node) => (
                   <NodePreview key={ node.teeId } node={ node } loading={ isLoading }/>
                 )) : (
                   <Text py={ 5 } fontSize="13px" color={ text.muted }>

diff --git a/ui/opengradient/teeRegistry/TEENodeDetailDrawer.tsx b/ui/opengradient/teeRegistry/TEENodeDetailDrawer.tsx
@@ -2,7 +2,7 @@ import { Box, Flex, Text, VStack } from '@chakra-ui/react';
 import React from 'react';
 
 import dayjs from 'lib/date/dayjs';
-import type { TEENodeWithStatus } from 'lib/opengradient/contracts/teeRegistry';
+import type { TEENodeWithStatus } from 'lib/opengradient/teeRegistry';
 import { DrawerBackdrop, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerHeader, DrawerRoot, DrawerTitle } from 'toolkit/chakra/drawer';
 import { OPENGRADIENT_BRAND } from 'ui/opengradient/brand';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';

diff --git a/ui/opengradient/teeRegistry/TEENodesTable.tsx b/ui/opengradient/teeRegistry/TEENodesTable.tsx
@@ -2,7 +2,7 @@ import { Box, Flex, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import dayjs from 'lib/date/dayjs';
-import type { TEENodeWithStatus, TEETypeSummary } from 'lib/opengradient/contracts/teeRegistry';
+import type { TEENodeWithStatus, TEETypeSummary } from 'lib/opengradient/teeRegistry';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { TableBody, TableCell, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import { OPENGRADIENT_BRAND } from 'ui/opengradient/brand';

diff --git a/ui/opengradient/teeRegistry/TEETypeCard.tsx b/ui/opengradient/teeRegistry/TEETypeCard.tsx
@@ -1,7 +1,7 @@
 import { Box, Flex, Grid, Text } from '@chakra-ui/react';
 import React from 'react';
 
-import type { TEETypeSummary } from 'lib/opengradient/contracts/teeRegistry';
+import type { TEETypeSummary } from 'lib/opengradient/teeRegistry';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { OPENGRADIENT_BRAND } from 'ui/opengradient/brand';
 
@@ -46,8 +46,6 @@ const TEETypeCard = ({ type, isSelected, isLoading, onClick }: Props) => {
     onClick(type.typeId);
   }, [ onClick, type.typeId ]);
 
-  const activePct = type.totalNodes > 0 ? Math.round((type.activeNodes / type.totalNodes) * 100) : 0;
-
   return (
     <Flex
       as="button"
@@ -101,26 +99,10 @@ const TEETypeCard = ({ type, isSelected, isLoading, onClick }: Props) => {
       </Flex>
 
       <Grid templateColumns="repeat(3, minmax(0, 1fr))" gap={ 3 } mb={ 3 }>
-        <Metric label="Active" value={ `${ type.activeNodes }/${ type.totalNodes }` } isLoading={ isLoading }/>
+        <Metric label="Active" value={ type.activeNodes.toLocaleString() } isLoading={ isLoading }/>
         <Metric label="Enabled" value={ type.enabledNodes.toLocaleString() } isLoading={ isLoading }/>
         <Metric label="PCRs" value={ type.approvedPCRs.toLocaleString() } isLoading={ isLoading }/>
       </Grid>
-
-      <Box
-        h="3px"
-        borderRadius="2px"
-        bg={{ _light: 'rgba(36, 188, 227, 0.12)', _dark: 'rgba(36, 188, 227, 0.12)' }}
-        overflow="hidden"
-      >
-        <Box
-          h="100%"
-          w={ `${ activePct }%` }
-          minW={ activePct > 0 ? '18px' : '0' }
-          bg={ colors.cyan }
-          borderRadius="2px"
-          transition="width 0.2s ease"
-        />
-      </Box>
     </Flex>
   );
 };

diff --git a/ui/opengradient/teeRegistry/placeholders.ts b/ui/opengradient/teeRegistry/placeholders.ts
@@ -1,15 +1,11 @@
-import type { TEERegistryStats, TEETypeSummary } from 'lib/opengradient/contracts/teeRegistry';
+import type { TEERegistryStats, TEETypeSummary } from 'lib/opengradient/teeRegistry';
 
 export const PLACEHOLDER_TEE_REGISTRY_STATS: TEERegistryStats = {
-  totalTypes: 3,
-  totalNodes: 12,
-  activeNodes: 8,
-  enabledNodes: 10,
-  approvedPCRs: 5,
+  totalTypes: 0,
+  totalNodes: 0,
+  activeNodes: 0,
+  enabledNodes: 0,
+  approvedPCRs: 0,
 };
 
-export const PLACEHOLDER_TEE_TYPES: Array<TEETypeSummary> = [
-  { typeId: 0, name: 'LLM Inference', totalNodes: 5, enabledNodes: 4, activeNodes: 3, approvedPCRs: 2, addedAt: BigInt(0) },
-  { typeId: 1, name: 'Agent Execution', totalNodes: 4, enabledNodes: 3, activeNodes: 3, approvedPCRs: 2, addedAt: BigInt(0) },
-  { typeId: 2, name: 'Model Training', totalNodes: 3, enabledNodes: 3, activeNodes: 2, approvedPCRs: 1, addedAt: BigInt(0) },
-];
+export const PLACEHOLDER_TEE_TYPES: Array<TEETypeSummary> = [];