Fix missed slot status and add auto-refetch for live epochs (#295)

- Only show "Missed" status when datasource has processed beyond that slot
- Show "Pending" status for slots still being processed by datasource
- Add timestampToSlot utility to convert bounds from timestamps to slots
- Auto-refetch epoch data every 12s for current epoch (live)
- Skip auto-refetch for historical epochs (improves performance)

Author: samcm

src/pages/ethereum/epochs/DetailPage.tsx

@@ -23,6 +23,7 @@ import { Tab } from '@/components/Navigation/Tab';
 import { ScrollableTabs } from '@/components/Navigation/ScrollableTabs';
 import { formatEpoch } from '@/utils';
 import { weiToEth } from '@/utils/ethereum';
+import { useBeaconClock } from '@/hooks/useBeaconClock';
 import { useNetworkChangeRedirect } from '@/hooks/useNetworkChangeRedirect';
 import { useTabState } from '@/hooks/useTabState';
 import { Route } from '@/routes/ethereum/epochs/$epoch';
@@ -52,8 +53,12 @@ export function DetailPage(): React.JSX.Element {
   const parsed = parseInt(params.epoch, 10);
   const epoch = isNaN(parsed) || parsed < 0 ? null : parsed;
 
+  // Determine if this is the current epoch (for auto-refetch)
+  const { epoch: currentEpoch } = useBeaconClock();
+  const isLiveEpoch = epoch !== null && epoch === currentEpoch;
+
   // Fetch data for this epoch
-  const { data, isLoading, error } = useEpochDetailData(epoch ?? 0);
+  const { data, isLoading, error } = useEpochDetailData(epoch ?? 0, isLiveEpoch);
 
   // Keyboard navigation
   useEffect(() => {

src/pages/ethereum/epochs/components/EpochSlotsTable/EpochSlotsTable.tsx

@@ -7,6 +7,9 @@ import { Table } from '@/components/Lists/Table';
 import type { Column } from '@/components/Lists/Table/Table.types';
 import { Timestamp } from '@/components/DataDisplay/Timestamp';
 import { useBeaconClock } from '@/hooks/useBeaconClock';
+import { useTablesBounds } from '@/hooks/useBounds';
+import { useNetwork } from '@/hooks/useNetwork';
+import { timestampToSlot } from '@/utils/beacon';
 import type { SlotData } from '../../hooks/useEpochDetailData.types';
 import type { EpochSlotsTableProps } from './EpochSlotsTable.types';
 
@@ -17,10 +20,17 @@ import type { EpochSlotsTableProps } from './EpochSlotsTable.types';
  * - Slot number with slot-in-epoch subtext (clickable link to slot detail)
  * - Relative timestamp
  * - Proposer details (index and entity)
- * - Block status (canonical, missed)
+ * - Block status (canonical, proposed, missed, pending, scheduled)
  * - Blob count
  * - Attestation metrics (head correct count, participation %)
  *
+ * Status determination:
+ * - Canonical: Slot appears in canonical chain (int_block_canonical)
+ * - Proposed: Slot appears in head chain but not canonical (fct_block_head)
+ * - Missed: Slot is missing from both chains AND datasources have processed beyond this slot
+ * - Pending: Slot appears to be missing but datasources haven't processed it yet
+ * - Scheduled: Future slot (beyond current beacon clock slot)
+ *
  * Users can click on slot numbers to navigate to slot detail pages.
  * Timestamp component has interactive popup for more details.
  */
@@ -31,10 +41,26 @@ export function EpochSlotsTable({
   sortOrder = 'asc',
 }: EpochSlotsTableProps): JSX.Element {
   const { slot: currentSlot } = useBeaconClock();
+  const { currentNetwork } = useNetwork();
+
+  // Fetch bounds for block tables to determine if we can confidently mark slots as missed
+  // Use both int_block_canonical and fct_block_head since status is determined by presence in either
+  const { data: boundsData } = useTablesBounds(['int_block_canonical', 'fct_block_head']);
 
   // Disable real-time features for historical views (prevents re-renders every 12s)
   const effectiveCurrentSlot = enableRealtimeHighlighting ? currentSlot : Number.MAX_SAFE_INTEGER;
 
+  // Determine the maximum slot we've processed in our datasources
+  // Use minOfMaxes to get the earliest ending point across both tables
+  // This ensures we only mark slots as missed if BOTH tables have processed beyond that slot
+  // Bounds are returned as Unix timestamps, so convert to slot number
+  const maxProcessedSlot = useMemo(() => {
+    if (!boundsData?.aggregate.minOfMaxes || !currentNetwork) {
+      return undefined;
+    }
+    return timestampToSlot(boundsData.aggregate.minOfMaxes, currentNetwork.genesis_time);
+  }, [boundsData?.aggregate.minOfMaxes, currentNetwork]);
+
   /**
    * Sort slots by slot number
    */
@@ -122,13 +148,27 @@ export function EpochSlotsTable({
               </Badge>
             );
           }
+
+          // Only show "Missed" if we're confident the datasource has processed this slot
+          // If maxProcessedSlot is undefined or the slot hasn't been processed yet, show "Pending"
           if (row.status === 'missed') {
+            const hasBeenProcessed = maxProcessedSlot !== undefined && row.slot <= maxProcessedSlot;
+
+            if (!hasBeenProcessed) {
+              return (
+                <Badge color="gray" variant="border">
+                  Pending
+                </Badge>
+              );
+            }
+
             return (
               <Badge color="yellow" variant="border">
                 Missed
               </Badge>
             );
           }
+
           return (
             <Badge color="gray" variant="border">
               {row.status}
@@ -158,7 +198,7 @@ export function EpochSlotsTable({
         },
       },
     ],
-    [effectiveCurrentSlot, showSlotInEpoch]
+    [effectiveCurrentSlot, showSlotInEpoch, maxProcessedSlot]
   );
 
   /**

src/pages/ethereum/epochs/hooks/useEpochDetailData.ts

@@ -13,7 +13,7 @@ import {
   intBlockCanonicalServiceListOptions,
 } from '@/api/@tanstack/react-query.gen';
 import { useNetwork } from '@/hooks/useNetwork';
-import { epochToTimestamp, getEpochSlotRange, slotToTimestamp } from '@/utils/beacon';
+import { epochToTimestamp, getEpochSlotRange, slotToTimestamp, SECONDS_PER_SLOT } from '@/utils/beacon';
 
 import type {
   EpochDetailData,
@@ -35,15 +35,23 @@ import type {
  * - Block first seen times
  * - Attestation liveness by entity
  *
+ * For live epochs (current epoch), data is automatically refetched every 12 seconds
+ * to capture new blocks and attestations as they arrive.
+ *
  * @param epoch - Epoch number
+ * @param isLive - Whether this is the current epoch (enables auto-refetch)
  * @returns Comprehensive epoch data including slots, stats, and missed attestations
  */
-export function useEpochDetailData(epoch: number): UseEpochDetailDataReturn {
+export function useEpochDetailData(epoch: number, isLive = false): UseEpochDetailDataReturn {
   const { currentNetwork } = useNetwork();
 
   const epochStartTime = currentNetwork ? epochToTimestamp(epoch, currentNetwork.genesis_time) : 0;
   const { firstSlot, lastSlot } = getEpochSlotRange(epoch);
 
+  // For live epochs, refetch every slot (12 seconds) to capture new data as it arrives
+  // For historical epochs, disable auto-refetch (false)
+  const refetchInterval = isLive ? SECONDS_PER_SLOT * 1000 : false;
+
   // Fetch data for all slots in the epoch using range queries (9 total queries)
   const results = useQueries({
     queries: [
@@ -58,6 +66,7 @@ export function useEpochDetailData(epoch: number): UseEpochDetailDataReturn {
           },
         }),
         enabled: !!currentNetwork && firstSlot >= 0,
+        refetchInterval,
       },
       // 2. Blob counts
       {
@@ -69,6 +78,7 @@ export function useEpochDetailData(epoch: number): UseEpochDetailDataReturn {
           },
         }),
         enabled: !!currentNetwork && firstSlot >= 0,
+        refetchInterval,
       },
       // 3. Attestation correctness
       {
@@ -80,6 +90,7 @@ export function useEpochDetailData(epoch: number): UseEpochDetailDataReturn {
           },
         }),
         enabled: !!currentNetwork && firstSlot >= 0,
+        refetchInterval,
       },
       // 4. Proposer entities
       {
@@ -91,6 +102,7 @@ export function useEpochDetailData(epoch: number): UseEpochDetailDataReturn {
           },
         }),
         enabled: !!currentNetwork && firstSlot >= 0,
+        refetchInterval,
       },
       // 5. Block first seen by nodes (get all, will filter to earliest per slot)
       {
@@ -103,6 +115,7 @@ export function useEpochDetailData(epoch: number): UseEpochDetailDataReturn {
           },
         }),
         enabled: !!currentNetwork && firstSlot >= 0,
+        refetchInterval,
       },
       // 6. Attestation liveness by entity (only missed)
       {
@@ -115,6 +128,7 @@ export function useEpochDetailData(epoch: number): UseEpochDetailDataReturn {
           },
         }),
         enabled: !!currentNetwork && firstSlot >= 0,
+        refetchInterval,
       },
       // 7. MEV data
       {
@@ -126,6 +140,7 @@ export function useEpochDetailData(epoch: number): UseEpochDetailDataReturn {
           },
         }),
         enabled: !!currentNetwork && firstSlot >= 0,
+        refetchInterval,
       },
       // 8. Block head data (for gas, transactions, base fee)
       {
@@ -137,6 +152,7 @@ export function useEpochDetailData(epoch: number): UseEpochDetailDataReturn {
           },
         }),
         enabled: !!currentNetwork && firstSlot >= 0,
+        refetchInterval,
       },
       // 9. Canonical blocks (for determining canonical vs proposed status)
       {
@@ -150,6 +166,7 @@ export function useEpochDetailData(epoch: number): UseEpochDetailDataReturn {
           },
         }),
         enabled: !!currentNetwork && firstSlot >= 0,
+        refetchInterval,
       },
     ],
   });

src/utils/beacon.ts

@@ -77,6 +77,22 @@ export function slotToTimestamp(slot: number, genesisTime: number): number {
   return genesisTime + slot * SECONDS_PER_SLOT;
 }
 
+/**
+ * Convert Unix timestamp to slot number
+ *
+ * @param timestamp - Unix timestamp in seconds
+ * @param genesisTime - Genesis time in Unix seconds
+ * @returns Beacon chain slot number
+ *
+ * @example
+ * ```tsx
+ * timestampToSlot(1606825223, 1606824023) // Returns 100
+ * ```
+ */
+export function timestampToSlot(timestamp: number, genesisTime: number): number {
+  return Math.floor((timestamp - genesisTime) / SECONDS_PER_SLOT);
+}
+
 /**
  * Convert slot number to epoch number
  *