@buoy-gg/highlight-updates 7.0.41 → 7.0.42

package/lib/module/highlight-updates/components/RenderHistoryViewer.js

@@ -1,908 +1 @@
-"use strict";
-
-/**
- * RenderHistoryViewer
- *
- * Displays render history for a component with event stepping.
- * Allows navigating through render events chronologically.
- * Shows current state view or diff view between renders.
- */
-
-import React, { useState, useCallback, useMemo } from "react";
-import { View, Text, TouchableOpacity, ScrollView, StyleSheet } from "react-native";
-import { Clock, GitBranch, Database, Lock, formatRelativeTime, SectionHeader, EventStepperFooter, buoyColors, night, useLimit, ToolEmptyState, monoFont } from "@buoy-gg/shared-ui";
-import { TreeDiffViewer } from "@buoy-gg/shared-ui/dataViewer";
-import { RenderTracker } from "../utils/RenderTracker";
-import { EnhancedCauseDisplay, CAUSE_CONFIG } from "./RenderCauseBadge";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * `HH:MM:SS.mmm` — the same shape Redux, Zustand and Jotai print for the same
- * job, and for the same reason: the milliseconds are the point.
- *
- * Built by hand rather than from `toLocaleTimeString`, which appends the day
- * period on a 12-hour locale — so concatenating the milliseconds to the end of
- * it produced "8:21:44 AM.351", with the fraction attached to the wrong part
- * of the time. It also made the string depend on the hour of day, which is a
- * fine way to have a test that only passes after 10am.
- */
-function formatTimeWithMs(timestamp) {
-  const date = new Date(timestamp);
-  const h = date.getHours().toString().padStart(2, "0");
-  const m = date.getMinutes().toString().padStart(2, "0");
-  const s = date.getSeconds().toString().padStart(2, "0");
-  const ms = date.getMilliseconds().toString().padStart(3, "0");
-  return `${h}:${m}:${s}.${ms}`;
-}
-
-/**
- * Main RenderHistoryViewer component
- */
-export function RenderHistoryViewer({
-  render,
-  disableInternalFooter = false,
-  selectedEventIndex: externalIndex,
-  onEventIndexChange: externalOnChange,
-  isPro = false
-}) {
-  // Internal state for event index when not controlled externally
-  const [internalIndex, setInternalIndex] = useState(0);
-
-  // Use external or internal state
-  const selectedEventIndex = externalIndex ?? internalIndex;
-  const onEventIndexChange = externalOnChange ?? setInternalIndex;
-
-  // View mode: "current" shows selected event, "diff" shows comparison
-  const [activeView, setActiveView] = useState("current");
-
-  // Get all events sorted by timestamp (oldest first)
-  const allEvents = useMemo(() => {
-    if (!render.renderHistory || render.renderHistory.length === 0) {
-      return [];
-    }
-    return [...render.renderHistory].sort((a, b) => a.timestamp - b.timestamp);
-  }, [render.renderHistory]);
-
-  // `isPro` stays a prop so callers can force the unlimited view; the tier cap
-  // applies otherwise. useLimit() already returns Infinity for Pro, so the two
-  // agree — this only preserves the prop contract for cross-package callers.
-  const tierLimit = useLimit("highlightUpdates.historyEvents");
-  const eventLimit = isPro ? Infinity : tierLimit;
-
-  // Show the most recent N events (negative index clamps to 0, so an
-  // unlimited tier returns the whole list).
-  const events = useMemo(() => allEvents.slice(-eventLimit), [allEvents, eventLimit]);
-  const lockedEventCount = useMemo(() => Math.max(0, allEvents.length - eventLimit), [allEvents.length, eventLimit]);
-  const totalEvents = events.length;
-  const currentEvent = events[selectedEventIndex];
-  const previousEvent = selectedEventIndex > 0 ? events[selectedEventIndex - 1] : null;
-
-  // Navigation handlers
-  const goToPrevious = useCallback(() => {
-    if (selectedEventIndex > 0) {
-      onEventIndexChange(selectedEventIndex - 1);
-    }
-  }, [selectedEventIndex, onEventIndexChange]);
-  const goToNext = useCallback(() => {
-    if (selectedEventIndex < totalEvents - 1) {
-      onEventIndexChange(selectedEventIndex + 1);
-    }
-  }, [selectedEventIndex, totalEvents, onEventIndexChange]);
-
-  // If no history, show empty state
-  if (totalEvents === 0) {
-    // The copy used to tell EVERYONE to go and enable the setting, including
-    // the people who already had. Asking the tracker which it is costs one
-    // synchronous read on a branch that renders nothing else.
-    const historyEnabled = RenderTracker.getSettings().enableRenderHistory;
-    return /*#__PURE__*/_jsx(ToolEmptyState, {
-      testID: "buoy-highlight-history-empty"
-      // paused = the recorder is switched off; stare = armed and watching,
-      // which is the truth once the setting is on and this component simply
-      // has not re-rendered yet.
-      ,
-      otto: historyEnabled ? "stare" : "paused",
-      title: "No Render History",
-      message: historyEnabled ? "History is on and armed — this component has not re-rendered since. Interact with the app to record one." : "Enable render history tracking in settings to see render events here."
-    });
-  }
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: [styles.container, {
-        paddingBottom: !disableInternalFooter && totalEvents > 1 ? 80 : 0
-      }],
-      children: [lockedEventCount > 0 && /*#__PURE__*/_jsxs(View, {
-        testID: "buoy-highlight-history-locked",
-        style: styles.lockedBanner,
-        children: [/*#__PURE__*/_jsx(Lock, {
-          size: 14,
-          color: night.color.warning
-        }), /*#__PURE__*/_jsxs(Text, {
-          testID: "buoy-highlight-history-locked-text",
-          style: styles.lockedBannerText,
-          children: [lockedEventCount, " older ", lockedEventCount === 1 ? 'render' : 'renders', " locked"]
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.lockedBannerSubtext,
-          children: "Upgrade to Pro"
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.viewToggleContainer,
-        children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-          testID: "buoy-highlight-history-mode-current",
-          accessibilityRole: "button",
-          accessibilityLabel: "Current state",
-          style: [styles.viewToggleCard, activeView === "current" && styles.viewToggleCardActive],
-          onPress: () => setActiveView("current"),
-          activeOpacity: 0.8,
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.viewToggleContent,
-            children: [/*#__PURE__*/_jsx(Database, {
-              size: 16,
-              color: activeView === "current" ? night.color.accent : night.color.textSecondary
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.viewToggleLabel, activeView === "current" && styles.viewToggleLabelActive],
-              children: "CURRENT STATE"
-            })]
-          }), /*#__PURE__*/_jsxs(Text, {
-            style: [styles.viewToggleDescription, activeView === "current" && {
-              color: night.color.text
-            }],
-            children: ["View render #", currentEvent?.renderNumber ?? 0, " details"]
-          })]
-        }), /*#__PURE__*/_jsxs(View, {
-          testID: "buoy-highlight-history-mode-diff",
-          accessibilityLabel: "Diff view, coming soon",
-          style: [styles.viewToggleCard, styles.viewToggleCardDisabled],
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.viewToggleContent,
-            children: [/*#__PURE__*/_jsx(GitBranch, {
-              size: 16,
-              color: night.color.textTertiary
-            }), /*#__PURE__*/_jsx(Text, {
-              style: [styles.viewToggleLabel, styles.viewToggleLabelDisabled],
-              children: "DIFF VIEW"
-            }), /*#__PURE__*/_jsx(View, {
-              style: styles.todoBadge,
-              children: /*#__PURE__*/_jsx(Text, {
-                style: styles.todoBadgeText,
-                children: "TODO"
-              })
-            })]
-          }), /*#__PURE__*/_jsx(Text, {
-            style: [styles.viewToggleDescription, {
-              color: night.color.textTertiary
-            }],
-            children: "Compare renders side by side (coming soon)"
-          })]
-        })]
-      }), /*#__PURE__*/_jsx(ScrollView, {
-        testID: "buoy-highlight-history-scroll",
-        style: styles.contentScroll,
-        contentContainerStyle: styles.contentContainer,
-        showsVerticalScrollIndicator: false,
-        children: activeView === "current" ? /*#__PURE__*/_jsx(CurrentStateView, {
-          event: currentEvent,
-          render: render
-        }) : /*#__PURE__*/_jsx(DiffView, {
-          previousEvent: previousEvent,
-          currentEvent: currentEvent,
-          render: render
-        })
-      })]
-    }), !disableInternalFooter && /*#__PURE__*/_jsx(EventStepperFooter, {
-      currentIndex: selectedEventIndex,
-      totalItems: totalEvents,
-      onPrevious: goToPrevious,
-      onNext: goToNext,
-      itemLabel: "Render",
-      subtitle: formatRelativeTime(new Date(currentEvent?.timestamp ?? Date.now()))
-    })]
-  });
-}
-
-/**
- * Current State View - shows details of the selected render event
- */
-function CurrentStateView({
-  event,
-  render
-}) {
-  if (!event) {
-    return /*#__PURE__*/_jsx(View, {
-      testID: "buoy-highlight-history-no-event",
-      style: styles.noEventContainer,
-      children: /*#__PURE__*/_jsx(Text, {
-        style: styles.noEventText,
-        children: "No event selected"
-      })
-    });
-  }
-  const causeConfig = CAUSE_CONFIG[event.cause.type];
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.currentStateContainer,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.eventHeader,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.eventHeaderLeft,
-        children: [/*#__PURE__*/_jsxs(Text, {
-          testID: "buoy-highlight-history-event-title",
-          style: styles.eventTitle,
-          children: ["Render #", event.renderNumber]
-        }), /*#__PURE__*/_jsx(Text, {
-          testID: "buoy-highlight-history-event-time",
-          style: styles.eventTime,
-          children: formatTimeWithMs(event.timestamp)
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: [styles.eventBadge, {
-          backgroundColor: render.color + "30"
-        }],
-        children: [/*#__PURE__*/_jsx(View, {
-          style: [styles.eventBadgeDot, {
-            backgroundColor: render.color
-          }]
-        }), /*#__PURE__*/_jsx(Text, {
-          testID: "buoy-highlight-history-event-cause",
-          style: [styles.eventBadgeText, {
-            color: render.color
-          }],
-          children: event.cause.type.toUpperCase()
-        })]
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.section,
-      children: [/*#__PURE__*/_jsxs(SectionHeader, {
-        children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
-          icon: Clock,
-          color: causeConfig.color,
-          size: 12
-        }), /*#__PURE__*/_jsx(SectionHeader.Title, {
-          children: "WHY DID THIS RENDER?"
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.sectionContent,
-        children: /*#__PURE__*/_jsx(EnhancedCauseDisplay, {
-          cause: event.cause,
-          nativeType: render.viewType
-        })
-      })]
-    }), event.capturedProps && Object.keys(event.capturedProps).length > 0 && /*#__PURE__*/_jsxs(View, {
-      style: styles.section,
-      children: [/*#__PURE__*/_jsxs(SectionHeader, {
-        children: [/*#__PURE__*/_jsx(SectionHeader.Icon, {
-          icon: Database,
-          color: night.color.accent,
-          size: 12
-        }), /*#__PURE__*/_jsx(SectionHeader.Title, {
-          children: "CAPTURED PROPS"
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.sectionContent,
-        children: /*#__PURE__*/_jsx(ScrollView, {
-          horizontal: true,
-          showsHorizontalScrollIndicator: false,
-          style: styles.propsScrollView,
-          children: /*#__PURE__*/_jsx(Text, {
-            testID: "buoy-highlight-history-props",
-            style: styles.propsJson,
-            children: JSON.stringify(event.capturedProps, null, 2)
-          })
-        })
-      })]
-    })]
-  });
-}
-
-/**
- * Diff mode types
- */
-
-/**
- * Diff View - shows comparison between two render events
- */
-function DiffView({
-  previousEvent,
-  currentEvent,
-  render
-}) {
-  // Diff mode tab state
-  const [diffMode, setDiffMode] = useState("props");
-  if (!previousEvent || !currentEvent) {
-    return /*#__PURE__*/_jsx(View, {
-      style: styles.noEventContainer,
-      children: /*#__PURE__*/_jsx(Text, {
-        style: styles.noEventText,
-        children: "Select an event with a previous event to compare"
-      })
-    });
-  }
-  const prevCauseConfig = CAUSE_CONFIG[previousEvent.cause.type];
-  const currCauseConfig = CAUSE_CONFIG[currentEvent.cause.type];
-
-  // Check what data is available for diff
-  const hasPropsData = previousEvent.capturedProps && currentEvent.capturedProps;
-  const hasStateData = previousEvent.capturedState && currentEvent.capturedState;
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.diffContainer,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.compareBar,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.compareSide,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.compareLabelRow,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: [styles.compareLabel, {
-              color: buoyColors.warning
-            }],
-            children: "PREV"
-          }), /*#__PURE__*/_jsx(View, {
-            style: [styles.compareActionBadge, {
-              backgroundColor: `${prevCauseConfig.color}20`
-            }],
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.compareActionText, {
-                color: prevCauseConfig.color
-              }],
-              children: previousEvent.cause.type.toUpperCase()
-            })
-          })]
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.compareMeta,
-          children: [/*#__PURE__*/_jsxs(Text, {
-            style: styles.compareIndex,
-            children: ["#", previousEvent.renderNumber]
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.compareTime,
-            children: formatTimeWithMs(previousEvent.timestamp)
-          })]
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: styles.compareDivider,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: styles.compareArrow,
-          children: "\u2192"
-        })
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.compareSide,
-        children: [/*#__PURE__*/_jsxs(View, {
-          style: styles.compareLabelRow,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: [styles.compareLabel, {
-              color: buoyColors.success
-            }],
-            children: "CUR"
-          }), /*#__PURE__*/_jsx(View, {
-            style: [styles.compareActionBadge, {
-              backgroundColor: `${currCauseConfig.color}20`
-            }],
-            children: /*#__PURE__*/_jsx(Text, {
-              style: [styles.compareActionText, {
-                color: currCauseConfig.color
-              }],
-              children: currentEvent.cause.type.toUpperCase()
-            })
-          })]
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.compareMeta,
-          children: [/*#__PURE__*/_jsxs(Text, {
-            style: styles.compareIndex,
-            children: ["#", currentEvent.renderNumber]
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.compareTime,
-            children: formatTimeWithMs(currentEvent.timestamp)
-          })]
-        })]
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.diffModeTabs,
-      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.diffModeTab, diffMode === "cause" && styles.diffModeTabActive],
-        onPress: () => setDiffMode("cause"),
-        activeOpacity: 0.7,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.diffModeTabText, diffMode === "cause" && styles.diffModeTabTextActive],
-          children: "CAUSE"
-        })
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.diffModeTab, diffMode === "props" && styles.diffModeTabActive, !hasPropsData && styles.diffModeTabDisabled],
-        onPress: () => hasPropsData && setDiffMode("props"),
-        activeOpacity: hasPropsData ? 0.7 : 1,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.diffModeTabText, diffMode === "props" && styles.diffModeTabTextActive, !hasPropsData && styles.diffModeTabTextDisabled],
-          children: "PROPS"
-        })
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        style: [styles.diffModeTab, diffMode === "state" && styles.diffModeTabActive, !hasStateData && styles.diffModeTabDisabled],
-        onPress: () => hasStateData && setDiffMode("state"),
-        activeOpacity: hasStateData ? 0.7 : 1,
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.diffModeTabText, diffMode === "state" && styles.diffModeTabTextActive, !hasStateData && styles.diffModeTabTextDisabled],
-          children: "STATE"
-        })
-      })]
-    }), diffMode === "cause" && /*#__PURE__*/_jsx(View, {
-      style: styles.diffSummary,
-      children: /*#__PURE__*/_jsx(EnhancedCauseDisplay, {
-        cause: currentEvent.cause,
-        nativeType: render.viewType
-      })
-    }), diffMode === "props" && /*#__PURE__*/_jsx(View, {
-      style: styles.treeDiffContainer,
-      children: hasPropsData ? /*#__PURE__*/_jsx(TreeDiffViewer, {
-        oldValue: previousEvent.capturedProps,
-        newValue: currentEvent.capturedProps,
-        theme: "dark",
-        showUnchanged: true
-      }) : /*#__PURE__*/_jsxs(View, {
-        style: styles.noDiffData,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.noDiffDataTitle,
-          children: "Props Not Captured"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.noDiffDataText,
-          children: "Enable \"Capture Props on Render\" in settings to see props diff."
-        })]
-      })
-    }), diffMode === "state" && /*#__PURE__*/_jsx(View, {
-      style: styles.treeDiffContainer,
-      children: hasStateData ? /*#__PURE__*/_jsx(TreeDiffViewer, {
-        oldValue: previousEvent.capturedState,
-        newValue: currentEvent.capturedState,
-        theme: "dark",
-        showUnchanged: true
-      }) : /*#__PURE__*/_jsxs(View, {
-        style: styles.noDiffData,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.noDiffDataTitle,
-          children: "State Not Captured"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.noDiffDataText,
-          children: "Enable \"Capture State on Render\" in settings to see state diff."
-        })]
-      })
-    })]
-  });
-}
-
-/**
- * External footer component for modal integration
- * Uses renderHistory for events (only available when history tracking is enabled)
- */
-export function RenderHistoryFooter({
-  render,
-  selectedEventIndex = 0,
-  onEventIndexChange = () => {},
-  isPro = false
-}) {
-  // Get all events from render history (sorted by timestamp)
-  const allEvents = useMemo(() => {
-    if (!render.renderHistory || render.renderHistory.length === 0) {
-      return [];
-    }
-    return [...render.renderHistory].sort((a, b) => a.timestamp - b.timestamp);
-  }, [render.renderHistory]);
-
-  // Same cap as RenderHistoryViewer above; `isPro` remains a caller override.
-  const tierLimit = useLimit("highlightUpdates.historyEvents");
-  const eventLimit = isPro ? Infinity : tierLimit;
-
-  // Most recent N (negative index clamps to 0, so unlimited returns all).
-  const events = useMemo(() => allEvents.slice(-eventLimit), [allEvents, eventLimit]);
-  const totalEvents = events.length;
-  const currentEvent = events[selectedEventIndex];
-  const goToPrevious = useCallback(() => {
-    onEventIndexChange(Math.max(0, selectedEventIndex - 1));
-  }, [selectedEventIndex, onEventIndexChange]);
-  const goToNext = useCallback(() => {
-    onEventIndexChange(Math.min(totalEvents - 1, selectedEventIndex + 1));
-  }, [selectedEventIndex, totalEvents, onEventIndexChange]);
-
-  // Don't render if no history events (history tracking might be disabled)
-  if (totalEvents <= 1) {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(EventStepperFooter, {
-    currentIndex: selectedEventIndex,
-    totalItems: totalEvents,
-    onPrevious: goToPrevious,
-    onNext: goToNext,
-    itemLabel: "Render",
-    subtitle: currentEvent ? formatRelativeTime(new Date(currentEvent.timestamp)) : undefined
-  });
-}
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
-    backgroundColor: "transparent"
-  },
-  emptyContainer: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-    padding: 32,
-    gap: 12
-  },
-  emptyTitle: {
-    fontSize: 16,
-    fontWeight: "600",
-    color: night.color.text
-  },
-  emptyText: {
-    fontSize: 13,
-    color: night.color.textSecondary,
-    textAlign: "center",
-    lineHeight: 18
-  },
-  viewToggleContainer: {
-    flexDirection: "row",
-    padding: 12,
-    gap: 8
-  },
-  viewToggleCard: {
-    flex: 1,
-    backgroundColor: night.color.surface,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    padding: 10,
-    gap: 4
-  },
-  viewToggleCardActive: {
-    borderColor: night.color.accentBorderStrong,
-    backgroundColor: night.color.accentSoft
-  },
-  viewToggleCardDisabled: {
-    opacity: 0.5
-  },
-  todoBadge: {
-    backgroundColor: night.color.fillSecondary,
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderRadius: 4,
-    marginLeft: 4
-  },
-  todoBadgeText: {
-    fontSize: 9,
-    fontWeight: "700",
-    color: night.color.textTertiary,
-    letterSpacing: 0.3
-  },
-  viewToggleContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  viewToggleLabel: {
-    fontSize: 10,
-    fontWeight: "700",
-    color: night.color.textSecondary,
-    letterSpacing: 0.5
-  },
-  viewToggleLabelActive: {
-    color: night.color.accent
-  },
-  viewToggleLabelDisabled: {
-    color: night.color.textTertiary
-  },
-  viewToggleDescription: {
-    fontSize: 11,
-    color: night.color.textTertiary,
-    marginTop: 2
-  },
-  contentScroll: {
-    flex: 1
-  },
-  contentContainer: {
-    padding: 12,
-    paddingTop: 0
-  },
-  noEventContainer: {
-    padding: 24,
-    alignItems: "center"
-  },
-  noEventText: {
-    fontSize: 13,
-    color: night.color.textTertiary
-  },
-  currentStateContainer: {
-    gap: 12
-  },
-  eventHeader: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    backgroundColor: night.color.surface,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    padding: 12
-  },
-  eventHeaderLeft: {
-    gap: 2
-  },
-  eventTitle: {
-    fontSize: 15,
-    fontWeight: "700",
-    color: night.color.text
-  },
-  eventTime: {
-    fontSize: 11,
-    color: night.color.textTertiary,
-    fontFamily: monoFont
-  },
-  eventBadge: {
-    flexDirection: "row",
-    alignItems: "center",
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    borderRadius: 12,
-    gap: 6
-  },
-  eventBadgeDot: {
-    width: 6,
-    height: 6,
-    borderRadius: 3
-  },
-  eventBadgeText: {
-    fontSize: 10,
-    fontWeight: "700",
-    fontFamily: monoFont
-  },
-  section: {
-    backgroundColor: night.color.surface,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    overflow: "hidden"
-  },
-  sectionContent: {
-    padding: 12,
-    paddingTop: 8
-  },
-  causeContainer: {
-    marginBottom: 12
-  },
-  changedList: {
-    marginBottom: 12,
-    paddingLeft: 4
-  },
-  changedListTitle: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: night.color.textSecondary,
-    marginBottom: 6
-  },
-  changedItem: {
-    fontSize: 12,
-    color: night.color.text,
-    fontFamily: monoFont,
-    marginBottom: 3,
-    paddingLeft: 8
-  },
-  propsScrollView: {
-    maxHeight: 150
-  },
-  propsJson: {
-    fontSize: 11,
-    fontFamily: monoFont,
-    color: night.color.text,
-    // Inset code box — the night track color.
-    backgroundColor: night.color.bg,
-    padding: 10,
-    borderRadius: 6
-  },
-  diffContainer: {
-    gap: 12
-  },
-  compareBar: {
-    flexDirection: "row",
-    backgroundColor: night.color.surface,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    padding: 10
-  },
-  compareSide: {
-    flex: 1,
-    gap: 4
-  },
-  compareLabelRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  compareLabel: {
-    fontSize: 10,
-    fontWeight: "700",
-    letterSpacing: 0.5
-  },
-  compareActionBadge: {
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderRadius: 4
-  },
-  compareActionText: {
-    fontSize: 9,
-    fontWeight: "600"
-  },
-  compareMeta: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  compareIndex: {
-    fontSize: 12,
-    fontWeight: "600",
-    color: night.color.text
-  },
-  compareTime: {
-    fontSize: 10,
-    color: night.color.textTertiary,
-    fontFamily: monoFont
-  },
-  compareDivider: {
-    width: 30,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  compareArrow: {
-    fontSize: 16,
-    color: night.color.textTertiary
-  },
-  diffSummary: {
-    backgroundColor: night.color.surface,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    padding: 12
-  },
-  diffSummaryTitle: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: night.color.textSecondary,
-    marginBottom: 8
-  },
-  diffChanges: {
-    gap: 4
-  },
-  diffChangeItem: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  diffChangeIcon: {
-    fontSize: 12,
-    fontWeight: "700",
-    color: night.color.warning,
-    fontFamily: monoFont
-  },
-  diffChangeKey: {
-    fontSize: 12,
-    color: night.color.text,
-    fontFamily: monoFont
-  },
-  diffNoChanges: {
-    fontSize: 12,
-    color: night.color.textTertiary,
-    fontStyle: "italic"
-  },
-  diffPlaceholder: {
-    fontSize: 12,
-    color: night.color.textTertiary,
-    fontStyle: "italic",
-    textAlign: "center",
-    padding: 16
-  },
-  // Diff mode tabs
-  diffModeTabs: {
-    flexDirection: "row",
-    backgroundColor: night.color.surface,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    padding: 4,
-    gap: 4
-  },
-  diffModeTab: {
-    flex: 1,
-    paddingVertical: 8,
-    paddingHorizontal: 12,
-    borderRadius: 6,
-    alignItems: "center"
-  },
-  diffModeTabActive: {
-    backgroundColor: night.color.accentSoft
-  },
-  diffModeTabDisabled: {
-    opacity: 0.4
-  },
-  diffModeTabText: {
-    fontSize: 10,
-    fontWeight: "600",
-    color: night.color.textSecondary,
-    letterSpacing: 0.5
-  },
-  diffModeTabTextActive: {
-    color: night.color.accent
-  },
-  diffModeTabTextDisabled: {
-    color: night.color.textTertiary
-  },
-  // Cause diff styles
-  causeDiffContainer: {
-    gap: 8,
-    marginBottom: 12
-  },
-  causeDiffRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  causeDiffLabel: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: night.color.textSecondary,
-    minWidth: 80
-  },
-  causeDiffValue: {
-    fontSize: 12,
-    color: night.color.text,
-    fontFamily: monoFont,
-    fontWeight: "500"
-  },
-  diffChangesTitle: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: night.color.textSecondary,
-    marginBottom: 6
-  },
-  // Tree diff container
-  treeDiffContainer: {
-    backgroundColor: night.color.surface,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    overflow: "hidden",
-    minHeight: 150
-  },
-  noDiffData: {
-    padding: 24,
-    alignItems: "center",
-    gap: 8
-  },
-  noDiffDataTitle: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: night.color.text
-  },
-  noDiffDataText: {
-    fontSize: 12,
-    color: night.color.textTertiary,
-    textAlign: "center",
-    lineHeight: 18
-  },
-  lockedBanner: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    paddingVertical: 10,
-    paddingHorizontal: 16,
-    marginHorizontal: 12,
-    marginTop: 8,
-    backgroundColor: night.color.warningSoft,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: night.color.warning + "30",
-    gap: 8
-  },
-  lockedBannerText: {
-    color: night.color.warning,
-    fontSize: 13,
-    fontWeight: "500"
-  },
-  lockedBannerSubtext: {
-    color: night.color.textTertiary,
-    fontSize: 12
-  }
-});
-export default RenderHistoryViewer;
+"use strict";import te,{useState as k,useCallback as w,useMemo as x}from"react";import{View as r,Text as l,TouchableOpacity as v,ScrollView as L,StyleSheet as _}from"react-native";import{Clock as J,GitBranch as G,Database as A,Lock as K,formatRelativeTime as W,SectionHeader as T,EventStepperFooter as P,buoyColors as V,night as t,useLimit as N,ToolEmptyState as Y,monoFont as y}from"@buoy-gg/shared-ui";import{TreeDiffViewer as F}from"@buoy-gg/shared-ui/dataViewer";import{RenderTracker as q}from"../utils/RenderTracker";import{EnhancedCauseDisplay as E,CAUSE_CONFIG as H}from"./RenderCauseBadge";import{jsx as o,jsxs as n,Fragment as Q}from"react/jsx-runtime";function B(i){const a=new Date(i);const g=a.getHours().toString().padStart(2,"0");const d=a.getMinutes().toString().padStart(2,"0");const f=a.getSeconds().toString().padStart(2,"0");const h=a.getMilliseconds().toString().padStart(3,"0");return`${g}:${d}:${f}.${h}`}export function RenderHistoryViewer({render:i,disableInternalFooter:a=false,selectedEventIndex:g,onEventIndexChange:d,isPro:f=false}){const[h,m]=k(0);const c=g??h;const s=d??m;const[p,I]=k("current");const u=x(()=>{if(!i.renderHistory||i.renderHistory.length===0){return[]}return[...i.renderHistory].sort((D,$)=>D.timestamp-$.timestamp)},[i.renderHistory]);const z=N("highlightUpdates.historyEvents");const b=f?Infinity:z;const R=x(()=>u.slice(-b),[u,b]);const M=x(()=>Math.max(0,u.length-b),[u.length,b]);const S=R.length;const C=R[c];const U=c>0?R[c-1]:null;const O=w(()=>{if(c>0){s(c-1)}},[c,s]);const j=w(()=>{if(c<S-1){s(c+1)}},[c,S,s]);if(S===0){const D=q.getSettings().enableRenderHistory;return o(Y,{testID:"buoy-highlight-history-empty",otto:D?"stare":"paused",title:"No Render History",message:D?"History is on and armed \u2014 this component has not re-rendered since. Interact with the app to record one.":"Enable render history tracking in settings to see render events here."})}return n(Q,{children:[n(r,{style:[e.container,{paddingBottom:!a&&S>1?80:0}],children:[M>0&&n(r,{testID:"buoy-highlight-history-locked",style:e.lockedBanner,children:[o(K,{size:14,color:t.color.warning}),n(l,{testID:"buoy-highlight-history-locked-text",style:e.lockedBannerText,children:[M," older ",M===1?"render":"renders"," locked"]}),o(l,{style:e.lockedBannerSubtext,children:"Upgrade to Pro"})]}),n(r,{style:e.viewToggleContainer,children:[n(v,{testID:"buoy-highlight-history-mode-current",accessibilityRole:"button",accessibilityLabel:"Current state",style:[e.viewToggleCard,p==="current"&&e.viewToggleCardActive],onPress:()=>I("current"),activeOpacity:.8,children:[n(r,{style:e.viewToggleContent,children:[o(A,{size:16,color:p==="current"?t.color.accent:t.color.textSecondary}),o(l,{style:[e.viewToggleLabel,p==="current"&&e.viewToggleLabelActive],children:"CURRENT STATE"})]}),n(l,{style:[e.viewToggleDescription,p==="current"&&{color:t.color.text}],children:["View render #",C?.renderNumber??0," details"]})]}),n(r,{testID:"buoy-highlight-history-mode-diff",accessibilityLabel:"Diff view, coming soon",style:[e.viewToggleCard,e.viewToggleCardDisabled],children:[n(r,{style:e.viewToggleContent,children:[o(G,{size:16,color:t.color.textTertiary}),o(l,{style:[e.viewToggleLabel,e.viewToggleLabelDisabled],children:"DIFF VIEW"}),o(r,{style:e.todoBadge,children:o(l,{style:e.todoBadgeText,children:"TODO"})})]}),o(l,{style:[e.viewToggleDescription,{color:t.color.textTertiary}],children:"Compare renders side by side (coming soon)"})]})]}),o(L,{testID:"buoy-highlight-history-scroll",style:e.contentScroll,contentContainerStyle:e.contentContainer,showsVerticalScrollIndicator:false,children:p==="current"?o(X,{event:C,render:i}):o(Z,{previousEvent:U,currentEvent:C,render:i})})]}),!a&&o(P,{currentIndex:c,totalItems:S,onPrevious:O,onNext:j,itemLabel:"Render",subtitle:W(new Date(C?.timestamp??Date.now()))})]})}function X({event:i,render:a}){if(!i){return o(r,{testID:"buoy-highlight-history-no-event",style:e.noEventContainer,children:o(l,{style:e.noEventText,children:"No event selected"})})}const g=H[i.cause.type];return n(r,{style:e.currentStateContainer,children:[n(r,{style:e.eventHeader,children:[n(r,{style:e.eventHeaderLeft,children:[n(l,{testID:"buoy-highlight-history-event-title",style:e.eventTitle,children:["Render #",i.renderNumber]}),o(l,{testID:"buoy-highlight-history-event-time",style:e.eventTime,children:B(i.timestamp)})]}),n(r,{style:[e.eventBadge,{backgroundColor:a.color+"30"}],children:[o(r,{style:[e.eventBadgeDot,{backgroundColor:a.color}]}),o(l,{testID:"buoy-highlight-history-event-cause",style:[e.eventBadgeText,{color:a.color}],children:i.cause.type.toUpperCase()})]})]}),n(r,{style:e.section,children:[n(T,{children:[o(T.Icon,{icon:J,color:g.color,size:12}),o(T.Title,{children:"WHY DID THIS RENDER?"})]}),o(r,{style:e.sectionContent,children:o(E,{cause:i.cause,nativeType:a.viewType})})]}),i.capturedProps&&Object.keys(i.capturedProps).length>0&&n(r,{style:e.section,children:[n(T,{children:[o(T.Icon,{icon:A,color:t.color.accent,size:12}),o(T.Title,{children:"CAPTURED PROPS"})]}),o(r,{style:e.sectionContent,children:o(L,{horizontal:true,showsHorizontalScrollIndicator:false,style:e.propsScrollView,children:o(l,{testID:"buoy-highlight-history-props",style:e.propsJson,children:JSON.stringify(i.capturedProps,null,2)})})})]})]})}function Z({previousEvent:i,currentEvent:a,render:g}){const[d,f]=k("props");if(!i||!a){return o(r,{style:e.noEventContainer,children:o(l,{style:e.noEventText,children:"Select an event with a previous event to compare"})})}const h=H[i.cause.type];const m=H[a.cause.type];const c=i.capturedProps&&a.capturedProps;const s=i.capturedState&&a.capturedState;return n(r,{style:e.diffContainer,children:[n(r,{style:e.compareBar,children:[n(r,{style:e.compareSide,children:[n(r,{style:e.compareLabelRow,children:[o(l,{style:[e.compareLabel,{color:V.warning}],children:"PREV"}),o(r,{style:[e.compareActionBadge,{backgroundColor:`${h.color}20`}],children:o(l,{style:[e.compareActionText,{color:h.color}],children:i.cause.type.toUpperCase()})})]}),n(r,{style:e.compareMeta,children:[n(l,{style:e.compareIndex,children:["#",i.renderNumber]}),o(l,{style:e.compareTime,children:B(i.timestamp)})]})]}),o(r,{style:e.compareDivider,children:o(l,{style:e.compareArrow,children:"\u2192"})}),n(r,{style:e.compareSide,children:[n(r,{style:e.compareLabelRow,children:[o(l,{style:[e.compareLabel,{color:V.success}],children:"CUR"}),o(r,{style:[e.compareActionBadge,{backgroundColor:`${m.color}20`}],children:o(l,{style:[e.compareActionText,{color:m.color}],children:a.cause.type.toUpperCase()})})]}),n(r,{style:e.compareMeta,children:[n(l,{style:e.compareIndex,children:["#",a.renderNumber]}),o(l,{style:e.compareTime,children:B(a.timestamp)})]})]})]}),n(r,{style:e.diffModeTabs,children:[o(v,{style:[e.diffModeTab,d==="cause"&&e.diffModeTabActive],onPress:()=>f("cause"),activeOpacity:.7,children:o(l,{style:[e.diffModeTabText,d==="cause"&&e.diffModeTabTextActive],children:"CAUSE"})}),o(v,{style:[e.diffModeTab,d==="props"&&e.diffModeTabActive,!c&&e.diffModeTabDisabled],onPress:()=>c&&f("props"),activeOpacity:c?.7:1,children:o(l,{style:[e.diffModeTabText,d==="props"&&e.diffModeTabTextActive,!c&&e.diffModeTabTextDisabled],children:"PROPS"})}),o(v,{style:[e.diffModeTab,d==="state"&&e.diffModeTabActive,!s&&e.diffModeTabDisabled],onPress:()=>s&&f("state"),activeOpacity:s?.7:1,children:o(l,{style:[e.diffModeTabText,d==="state"&&e.diffModeTabTextActive,!s&&e.diffModeTabTextDisabled],children:"STATE"})})]}),d==="cause"&&o(r,{style:e.diffSummary,children:o(E,{cause:a.cause,nativeType:g.viewType})}),d==="props"&&o(r,{style:e.treeDiffContainer,children:c?o(F,{oldValue:i.capturedProps,newValue:a.capturedProps,theme:"dark",showUnchanged:true}):n(r,{style:e.noDiffData,children:[o(l,{style:e.noDiffDataTitle,children:"Props Not Captured"}),o(l,{style:e.noDiffDataText,children:'Enable "Capture Props on Render" in settings to see props diff.'})]})}),d==="state"&&o(r,{style:e.treeDiffContainer,children:s?o(F,{oldValue:i.capturedState,newValue:a.capturedState,theme:"dark",showUnchanged:true}):n(r,{style:e.noDiffData,children:[o(l,{style:e.noDiffDataTitle,children:"State Not Captured"}),o(l,{style:e.noDiffDataText,children:'Enable "Capture State on Render" in settings to see state diff.'})]})})]})}export function RenderHistoryFooter({render:i,selectedEventIndex:a=0,onEventIndexChange:g=()=>{},isPro:d=false}){const f=x(()=>{if(!i.renderHistory||i.renderHistory.length===0){return[]}return[...i.renderHistory].sort((z,b)=>z.timestamp-b.timestamp)},[i.renderHistory]);const h=N("highlightUpdates.historyEvents");const m=d?Infinity:h;const c=x(()=>f.slice(-m),[f,m]);const s=c.length;const p=c[a];const I=w(()=>{g(Math.max(0,a-1))},[a,g]);const u=w(()=>{g(Math.min(s-1,a+1))},[a,s,g]);if(s<=1){return null}return o(P,{currentIndex:a,totalItems:s,onPrevious:I,onNext:u,itemLabel:"Render",subtitle:p?W(new Date(p.timestamp)):void 0})}const e=_.create({container:{flex:1,backgroundColor:"transparent"},emptyContainer:{flex:1,alignItems:"center",justifyContent:"center",padding:32,gap:12},emptyTitle:{fontSize:16,fontWeight:"600",color:t.color.text},emptyText:{fontSize:13,color:t.color.textSecondary,textAlign:"center",lineHeight:18},viewToggleContainer:{flexDirection:"row",padding:12,gap:8},viewToggleCard:{flex:1,backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,padding:10,gap:4},viewToggleCardActive:{borderColor:t.color.accentBorderStrong,backgroundColor:t.color.accentSoft},viewToggleCardDisabled:{opacity:.5},todoBadge:{backgroundColor:t.color.fillSecondary,paddingHorizontal:6,paddingVertical:2,borderRadius:4,marginLeft:4},todoBadgeText:{fontSize:9,fontWeight:"700",color:t.color.textTertiary,letterSpacing:.3},viewToggleContent:{flexDirection:"row",alignItems:"center",gap:6},viewToggleLabel:{fontSize:10,fontWeight:"700",color:t.color.textSecondary,letterSpacing:.5},viewToggleLabelActive:{color:t.color.accent},viewToggleLabelDisabled:{color:t.color.textTertiary},viewToggleDescription:{fontSize:11,color:t.color.textTertiary,marginTop:2},contentScroll:{flex:1},contentContainer:{padding:12,paddingTop:0},noEventContainer:{padding:24,alignItems:"center"},noEventText:{fontSize:13,color:t.color.textTertiary},currentStateContainer:{gap:12},eventHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,padding:12},eventHeaderLeft:{gap:2},eventTitle:{fontSize:15,fontWeight:"700",color:t.color.text},eventTime:{fontSize:11,color:t.color.textTertiary,fontFamily:y},eventBadge:{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:4,borderRadius:12,gap:6},eventBadgeDot:{width:6,height:6,borderRadius:3},eventBadgeText:{fontSize:10,fontWeight:"700",fontFamily:y},section:{backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,overflow:"hidden"},sectionContent:{padding:12,paddingTop:8},causeContainer:{marginBottom:12},changedList:{marginBottom:12,paddingLeft:4},changedListTitle:{fontSize:11,fontWeight:"600",color:t.color.textSecondary,marginBottom:6},changedItem:{fontSize:12,color:t.color.text,fontFamily:y,marginBottom:3,paddingLeft:8},propsScrollView:{maxHeight:150},propsJson:{fontSize:11,fontFamily:y,color:t.color.text,backgroundColor:t.color.bg,padding:10,borderRadius:6},diffContainer:{gap:12},compareBar:{flexDirection:"row",backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,padding:10},compareSide:{flex:1,gap:4},compareLabelRow:{flexDirection:"row",alignItems:"center",gap:8},compareLabel:{fontSize:10,fontWeight:"700",letterSpacing:.5},compareActionBadge:{paddingHorizontal:6,paddingVertical:2,borderRadius:4},compareActionText:{fontSize:9,fontWeight:"600"},compareMeta:{flexDirection:"row",alignItems:"center",gap:6},compareIndex:{fontSize:12,fontWeight:"600",color:t.color.text},compareTime:{fontSize:10,color:t.color.textTertiary,fontFamily:y},compareDivider:{width:30,alignItems:"center",justifyContent:"center"},compareArrow:{fontSize:16,color:t.color.textTertiary},diffSummary:{backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,padding:12},diffSummaryTitle:{fontSize:11,fontWeight:"600",color:t.color.textSecondary,marginBottom:8},diffChanges:{gap:4},diffChangeItem:{flexDirection:"row",alignItems:"center",gap:6},diffChangeIcon:{fontSize:12,fontWeight:"700",color:t.color.warning,fontFamily:y},diffChangeKey:{fontSize:12,color:t.color.text,fontFamily:y},diffNoChanges:{fontSize:12,color:t.color.textTertiary,fontStyle:"italic"},diffPlaceholder:{fontSize:12,color:t.color.textTertiary,fontStyle:"italic",textAlign:"center",padding:16},diffModeTabs:{flexDirection:"row",backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,padding:4,gap:4},diffModeTab:{flex:1,paddingVertical:8,paddingHorizontal:12,borderRadius:6,alignItems:"center"},diffModeTabActive:{backgroundColor:t.color.accentSoft},diffModeTabDisabled:{opacity:.4},diffModeTabText:{fontSize:10,fontWeight:"600",color:t.color.textSecondary,letterSpacing:.5},diffModeTabTextActive:{color:t.color.accent},diffModeTabTextDisabled:{color:t.color.textTertiary},causeDiffContainer:{gap:8,marginBottom:12},causeDiffRow:{flexDirection:"row",alignItems:"center",gap:8},causeDiffLabel:{fontSize:11,fontWeight:"600",color:t.color.textSecondary,minWidth:80},causeDiffValue:{fontSize:12,color:t.color.text,fontFamily:y,fontWeight:"500"},diffChangesTitle:{fontSize:11,fontWeight:"600",color:t.color.textSecondary,marginBottom:6},treeDiffContainer:{backgroundColor:t.color.surface,borderRadius:8,borderWidth:1,borderColor:t.color.border,overflow:"hidden",minHeight:150},noDiffData:{padding:24,alignItems:"center",gap:8},noDiffDataTitle:{fontSize:13,fontWeight:"600",color:t.color.text},noDiffDataText:{fontSize:12,color:t.color.textTertiary,textAlign:"center",lineHeight:18},lockedBanner:{flexDirection:"row",alignItems:"center",justifyContent:"center",paddingVertical:10,paddingHorizontal:16,marginHorizontal:12,marginTop:8,backgroundColor:t.color.warningSoft,borderRadius:8,borderWidth:1,borderColor:t.color.warning+"30",gap:8},lockedBannerText:{color:t.color.warning,fontSize:13,fontWeight:"500"},lockedBannerSubtext:{color:t.color.textTertiary,fontSize:12}});export default RenderHistoryViewer;