@buoy-gg/shared-ui 7.0.3 → 7.0.5

package/lib/module/icons/index.js

@@ -7,6 +7,16 @@ export * from "./primitives/index.js";
 export { NetworkIcon, NETWORK_ICON_COLOR } from "@buoy-gg/floating-tools-core";
 export { EnvIcon, ENV_ICON_COLOR } from "@buoy-gg/floating-tools-core";
 
+// Buoy Icon Format icons: authored once in shared/icons/*.json and generated
+// into core, so these are the same artwork the Flutter build renders. Tool
+// packages re-export from here rather than drawing their own copies.
+export { ConsoleIcon, CONSOLE_ICON_COLOR } from "@buoy-gg/floating-tools-core";
+export { ImagesIcon, IMAGES_ICON_COLOR } from "@buoy-gg/floating-tools-core";
+export { ImpersonateIcon, IMPERSONATE_ICON_COLOR } from "@buoy-gg/floating-tools-core";
+export { ImageOverlayIcon, IMAGE_OVERLAY_ICON_COLOR } from "@buoy-gg/floating-tools-core";
+export { ZustandIcon, ZUSTAND_ICON_COLOR } from "@buoy-gg/floating-tools-core";
+export { JotaiIcon, JOTAI_ICON_COLOR } from "@buoy-gg/floating-tools-core";
+
 // Export custom icons
 export { EnvLaptopIcon, LaptopIcon } from "./EnvLaptopIcon.js";
 export { ReactQueryIcon } from "./ReactQueryIcon.js";
@@ -17,7 +27,6 @@ export { RouteMapIcon, RouteIcon, NavigationIcon } from "./RouteMapIcon.js";
 export { StackPulseIcon, RenderPulseIcon, HighlightUpdatesIcon } from "./StackPulseIcon.js";
 export { RenderCountIcon } from "./RenderCountIcon.js";
 export { BenchmarkIcon } from "./BenchmarkIcon.js";
-export { ImageOverlayIcon } from "./ImageOverlayIcon.js";
 export { IconBackground } from "./IconBackground.js";
 
 // Export lucide icons

package/lib/module/icons/lucide-icons-original-full.js

@@ -951,7 +951,11 @@ export const GlobeIcon = ({
   strokeWidth = 2,
   ...props
 }) => {
-  color = gameUIColors.env;
+  // NOTE: this used to reassign `color = gameUIColors.env` right here, throwing
+  // away whatever the caller passed. The default above already covers the
+  // "network tool green" case; the reassignment only broke every caller that
+  // asked for something else (e.g. the network empty state, which asks for
+  // muted grey and was getting a green globe on the white canvas).
   const scale = size / 24;
   const globeSize = 18 * scale;
   return /*#__PURE__*/_jsxs(View, {

package/lib/module/icons/lucide-icons.js

@@ -530,6 +530,62 @@ export const Pin = ({
     strokeWidth: strokeWidth
   })]
 });
+
+/**
+ * Bookmark — the "saved request" glyph (Network tool's favorites).
+ *
+ * Lucide's Star would be the obvious choice, but these icons are composed from
+ * View-based `Line`/`Circle`/`Rect` primitives (there is no `Path`), so a
+ * 5-point star isn't drawable here. A bookmark is five straight segments and
+ * reads as "kept for later" at 10px, which is what the glyph has to say.
+ */
+export const Bookmark = ({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+  ...props
+}) => /*#__PURE__*/_jsxs(Svg, {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  ...props,
+  children: [/*#__PURE__*/_jsx(Line, {
+    x1: 5,
+    y1: 3,
+    x2: 19,
+    y2: 3,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(Line, {
+    x1: 5,
+    y1: 3,
+    x2: 5,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(Line, {
+    x1: 19,
+    y1: 3,
+    x2: 19,
+    y2: 21,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(Line, {
+    x1: 5,
+    y1: 21,
+    x2: 12,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  }), /*#__PURE__*/_jsx(Line, {
+    x1: 19,
+    y1: 21,
+    x2: 12,
+    y2: 15,
+    stroke: color,
+    strokeWidth: strokeWidth
+  })]
+});
 export const EyeOff = ({
   size = 24,
   color = "currentColor",

package/lib/module/index.js

@@ -26,6 +26,8 @@ parseValue, formatValue, getTypeColor, truncateText, flattenObject, formatPath,
 loadOptionalModule, getCachedOptionalModule,
 // Render-commit capture bridge (provider: highlight-updates, consumer: perf-monitor)
 setRenderCaptureProvider, getRenderCaptureProvider,
+// JS-bundle reload (core's `app` adapter + perf-monitor's batch runner)
+reloadApp, scheduleReloadApp, resolveReloadStrategy, REMOTE_RELOAD_DELAY_MS,
 // Subscribable base class for self-managing listeners
 Subscribable,
 // Subscriber count notifier for cross-package notifications
@@ -54,6 +56,8 @@ export { useSafeAreaInsets, useFilterManager, useDeviceInfo, getDeviceInfo, logD
 export { JsModal } from "./JsModal.js";
 // game ui colors
 export { gameUIColors, buoyColors } from "./ui/gameUI/constants/gameUIColors.js";
+// Runtime re-tint hook — only the desktop dashboard's theme switcher uses it.
+export { refreshGameUIColors } from "./ui/gameUI/constants/gameUIColors.js";
 export { macOSColors } from "./ui/gameUI/constants/macOSDesignSystemColors.js";
 export { dialColors } from "./ui/gameUI/constants/gameUIColors.js";
 //EnvironmentIndicator

package/lib/module/settings/components/BubbleSettingsSection.js

@@ -6,6 +6,8 @@ import { useState, useEffect } from "react";
 import { CyberpunkSectionButton } from "../../ui/console/CyberpunkSectionButton.js";
 import { devToolsStorageKeys } from "../../storage/devToolsStorageKeys.js";
 import { persistentStorage } from "../../utils/persistentStorage.js";
+import { macOSColors } from "../../ui/gameUI/constants/macOSDesignSystemColors.js";
+import { buoyColors } from "../../ui/gameUI/constants/gameUIColors.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const STORAGE_KEY = devToolsStorageKeys.bubble.settings();
 const USER_PREFERENCES_KEY = devToolsStorageKeys.bubble.userPreferences();
@@ -206,7 +208,7 @@ export function BubbleSettingsDetail({
               false: "#4B5563",
               true: "#10B981"
             },
-            thumbColor: settings[config.key] ? "#fff" : "#9CA3AF"
+            thumbColor: settings[config.key] ? "#fff" : buoyColors.textSecondary
           })]
         }, config.key))
       }), /*#__PURE__*/_jsxs(View, {
@@ -215,7 +217,7 @@ export function BubbleSettingsDetail({
           style: styles.noteContainer,
           children: [/*#__PURE__*/_jsx(EyeOff, {
             size: 16,
-            color: "#9CA3AF"
+            color: buoyColors.textSecondary
           }), /*#__PURE__*/_jsx(Text, {
             style: styles.noteText,
             children: "User status indicator is always visible and cannot be disabled"
@@ -244,7 +246,7 @@ const styles = StyleSheet.create({
     flexGrow: 1
   },
   sectionCard: {
-    backgroundColor: "#1F2937",
+    backgroundColor: buoyColors.input,
     borderRadius: 8,
     padding: 16,
     flexDirection: "row",
@@ -264,25 +266,25 @@ const styles = StyleSheet.create({
     flex: 1
   },
   title: {
-    color: "#E5E7EB",
+    color: buoyColors.text,
     fontSize: 14,
     fontWeight: "600",
     marginBottom: 2
   },
   subtitle: {
-    color: "#9CA3AF",
+    color: buoyColors.textSecondary,
     fontSize: 12
   },
   chevron: {
-    color: "#6B7280",
+    color: macOSColors.text.icon,
     fontSize: 20
   },
   detailContainer: {
     flex: 1,
-    backgroundColor: "#171717"
+    backgroundColor: buoyColors.card
   },
   loadingText: {
-    color: "#9CA3AF",
+    color: buoyColors.textSecondary,
     fontSize: 14,
     textAlign: "center",
     marginTop: 20
@@ -290,16 +292,16 @@ const styles = StyleSheet.create({
   header: {
     padding: 16,
     borderBottomWidth: 1,
-    borderBottomColor: "rgba(255, 255, 255, 0.1)"
+    borderBottomColor: "rgba(128, 128, 128, 0.2)"
   },
   headerTitle: {
-    color: "#E5E7EB",
+    color: buoyColors.text,
     fontSize: 16,
     fontWeight: "600",
     marginBottom: 4
   },
   headerDescription: {
-    color: "#9CA3AF",
+    color: buoyColors.textSecondary,
     fontSize: 12
   },
   settingsList: {
@@ -310,7 +312,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     paddingVertical: 12,
     borderBottomWidth: 1,
-    borderBottomColor: "rgba(255, 255, 255, 0.05)"
+    borderBottomColor: "rgba(128, 128, 128, 0.1)"
   },
   settingIconContainer: {
     width: 32,
@@ -324,13 +326,13 @@ const styles = StyleSheet.create({
     marginRight: 12
   },
   settingLabel: {
-    color: "#E5E7EB",
+    color: buoyColors.text,
     fontSize: 14,
     fontWeight: "500",
     marginBottom: 2
   },
   settingDescription: {
-    color: "#6B7280",
+    color: macOSColors.text.icon,
     fontSize: 11
   },
   indicator: {
@@ -341,7 +343,7 @@ const styles = StyleSheet.create({
   footer: {
     padding: 16,
     borderTopWidth: 1,
-    borderTopColor: "rgba(255, 255, 255, 0.1)"
+    borderTopColor: "rgba(128, 128, 128, 0.2)"
   },
   noteContainer: {
     flexDirection: "row",
@@ -350,12 +352,12 @@ const styles = StyleSheet.create({
     marginBottom: 8
   },
   noteText: {
-    color: "#9CA3AF",
+    color: buoyColors.textSecondary,
     fontSize: 12,
     flex: 1
   },
   restartNote: {
-    color: "#6B7280",
+    color: macOSColors.text.icon,
     fontSize: 11,
     fontStyle: "italic"
   },
@@ -364,10 +366,10 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     marginTop: 8,
     borderTopWidth: 1,
-    borderTopColor: "rgba(255, 255, 255, 0.06)"
+    borderTopColor: "rgba(128, 128, 128, 0.12)"
   },
   sectionTitle: {
-    color: "#9CA3AF",
+    color: buoyColors.textSecondary,
     fontSize: 12,
     fontWeight: "600",
     letterSpacing: 0.5,

package/lib/module/storage/devToolsStorageKeys.js

@@ -95,8 +95,6 @@ export const devToolsStorageKeys = {
     preferences: () => `${devToolsStorageKeys.storage.root()}_preferences`,
     activeTab: () => `${devToolsStorageKeys.storage.root()}_active_tab`,
     isMonitoring: () => `${devToolsStorageKeys.storage.root()}_is_monitoring`,
-    detailView: () => `${devToolsStorageKeys.storage.root()}_detail_view`,
-    // 'current' | 'diff'
     diffViewerMode: () => `${devToolsStorageKeys.storage.root()}_diff_viewer_mode` // 'split' | 'tree'
   },
   /**
@@ -123,7 +121,12 @@ export const devToolsStorageKeys = {
     ignoredDomains: () => `${devToolsStorageKeys.network.root()}_ignored_domains`,
     ignoredUrls: () => `${devToolsStorageKeys.network.root()}_ignored_urls`,
     preferences: () => `${devToolsStorageKeys.network.root()}_preferences`,
-    copyOptions: () => `${devToolsStorageKeys.network.root()}_copy_options`
+    copyOptions: () => `${devToolsStorageKeys.network.root()}_copy_options`,
+    /**
+     * Pinned + saved requests (snapshots, not IDs — request IDs are
+     * per-runtime counters and collide across app launches).
+     */
+    saved: () => `${devToolsStorageKeys.network.root()}_saved`
   },
   /**
    * Route events-related storage keys

package/lib/module/ui/components/Badge.js

@@ -204,6 +204,8 @@ const styles = StyleSheet.create({
     alignItems: "center"
   },
   methodBadge: {
+    // Fixed width keeps the URL column aligned down the list whether or not
+    // the badge still has a chip around it.
     minWidth: 45,
     alignItems: "center"
   },

package/lib/module/ui/components/CompactRow.js

@@ -114,12 +114,19 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     borderWidth: 1,
     borderColor: buoyColors.border + "40",
+    // …separated by a single hairline instead of four borders per row.
+    // Declared after borderWidth so the specific side wins on the chat path.
+    borderBottomWidth: 1,
+    borderBottomColor: buoyColors.border + "40",
     padding: 12,
+    paddingHorizontal: 12,
     transform: [{
       scale: 1
     }]
   },
   selectedRow: {
+    // Neutral fill, no outline, no lift — the same selection language as the
+    // sidebar. The classic path keeps its tinted, scaled, glowing card.
     backgroundColor: buoyColors.primary + "15",
     borderColor: buoyColors.primary + "50",
     transform: [{

package/lib/module/ui/components/CopyButton.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { useState, useRef, useCallback, memo, useEffect } from "react";
-import { TouchableOpacity, StyleSheet } from "react-native";
+import { Text, TouchableOpacity, StyleSheet } from "react-native";
 import { copyToClipboard } from "../../clipboard/copyToClipboard.js";
 import { gameUIColors } from "../gameUI/constants/gameUIColors.js";
 import { Copy, CheckCircle2, AlertTriangle, Trash2 } from "../../icons/lucide-icons.js";
@@ -12,7 +12,7 @@ import { persistentStorage } from "../../utils/persistentStorage.js";
 import { useHintsDisabled } from "../../context/index.js";
 import { ProUpgradeModal } from "../../license/index.js";
 import { useIsPro } from "@buoy-gg/license";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Reusable copy button component with visual feedback
  * Shows different icons for idle, success, and error states
@@ -55,6 +55,8 @@ export const CopyButton = /*#__PURE__*/memo(function CopyButton({
   isFocused = false,
   size = 16,
   buttonStyle,
+  label,
+  labelStyle,
   onCopySuccess,
   onCopyError,
   feedbackDuration = 1500,
@@ -176,7 +178,7 @@ export const CopyButton = /*#__PURE__*/memo(function CopyButton({
     });
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+    children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
       ...touchableProps,
       style: [styles.button, buttonStyle],
       onPress: copyState === "idle" || !isPro ? handlePress : undefined,
@@ -189,7 +191,12 @@ export const CopyButton = /*#__PURE__*/memo(function CopyButton({
       },
       accessibilityLabel: copyState === "idle" ? "Copy to clipboard" : copyState === "success" ? "Copied to clipboard" : "Failed to copy",
       accessibilityRole: "button",
-      children: renderIcon()
+      children: [renderIcon(), label ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.label, {
+          color: getColor()
+        }, labelStyle],
+        children: label
+      }) : null]
     }), /*#__PURE__*/_jsx(ClipboardHintBanner, {
       visible: showHint,
       onAcknowledge: handleHintAcknowledge
@@ -204,7 +211,15 @@ const styles = StyleSheet.create({
   button: {
     padding: 4,
     justifyContent: "center",
-    alignItems: "center"
+    alignItems: "center",
+    // Only relevant when a `label` is present; a bare icon button has one
+    // child, so the row direction and gap cost it nothing.
+    flexDirection: "row",
+    gap: 7
+  },
+  label: {
+    fontSize: 12.5,
+    fontWeight: "600"
   }
 });
 
@@ -268,7 +283,15 @@ const clearStyles = StyleSheet.create({
   button: {
     padding: 4,
     justifyContent: "center",
-    alignItems: "center"
+    alignItems: "center",
+    // Only relevant when a `label` is present; a bare icon button has one
+    // child, so the row direction and gap cost it nothing.
+    flexDirection: "row",
+    gap: 7
+  },
+  label: {
+    fontSize: 12.5,
+    fontWeight: "600"
   },
   disabled: {
     opacity: 0.4

package/lib/module/ui/components/DevToolsCard.js

@@ -74,6 +74,11 @@ export function DevToolsCard({
     })
   });
 }
+
+/**
+ * A bordered tile in a gutter. `CompactRow` is the other row primitive; keep the
+ * two in step.
+ */
 const styles = StyleSheet.create({
   wrapper: {
     marginHorizontal: DEVTOOLS_CARD_CONSTANTS.marginHorizontal,
@@ -84,10 +89,16 @@ const styles = StyleSheet.create({
     borderRadius: DEVTOOLS_CARD_CONSTANTS.borderRadius,
     borderWidth: DEVTOOLS_CARD_CONSTANTS.borderWidth,
     borderColor: buoyColors.border + "40",
+    // The separator. On classic this just re-states the full outline; on chat
+    // it is the ONLY edge the row has.
+    borderBottomWidth: 1,
+    borderBottomColor: buoyColors.border + "40",
     padding: DEVTOOLS_CARD_CONSTANTS.padding,
+    paddingHorizontal: DEVTOOLS_CARD_CONSTANTS.padding,
     minHeight: DEVTOOLS_CARD_CONSTANTS.minHeight
   },
   selectedCard: {
+    // Neutral grey fill, no tinted outline and no lift — see CompactRow.
     backgroundColor: buoyColors.primary + "15",
     borderColor: buoyColors.primary + "50",
     shadowColor: buoyColors.primary,

package/lib/module/ui/components/DynamicFilterView.js

@@ -381,7 +381,14 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     borderWidth: 1
   },
+  /**
+   * Selection is marked with a 2px accent outline. Border width stays 1 so
+   * selecting a
+   * tile doesn't shift the grid by a pixel.
+   */
   tabButtonActive: {
+    // White THUMB, not a grey one — the INACTIVE tab is already
+    // `buoyColors.hover` here, so a grey active state would be invisible.
     backgroundColor: buoyColors.primary + "20",
     borderColor: buoyColors.primary,
     borderWidth: 2
@@ -444,7 +451,7 @@ const styles = StyleSheet.create({
     backgroundColor: buoyColors.primary + "33",
     borderColor: buoyColors.primary,
     borderWidth: 2,
-    // Subtle glow effect like web
+    // Subtle glow effect like web — no glows on a light surface.
     shadowColor: buoyColors.primary,
     shadowOffset: {
       width: 0,

package/lib/module/ui/components/EmptyState.js

@@ -1,6 +1,7 @@
 "use strict";
 
 import { StyleSheet, Text, View, TouchableOpacity } from "react-native";
+import { macOSColors } from "../gameUI/constants/macOSDesignSystemColors.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Reusable empty state component for consistent empty/no-data displays
@@ -10,7 +11,7 @@ export function EmptyState({
   description,
   icon: Icon,
   iconSize = 48,
-  iconColor = "#4B5563",
+  iconColor = macOSColors.border.hover,
   action,
   variant = "default",
   style
@@ -87,11 +88,11 @@ const styles = StyleSheet.create({
     maxWidth: 300
   },
   cardVariant: {
-    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    backgroundColor: "rgba(128, 128, 128, 0.06)",
     padding: 32,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: "rgba(255, 255, 255, 0.05)"
+    borderColor: "rgba(128, 128, 128, 0.1)"
   },
   minimalVariant: {
     padding: 16
@@ -100,14 +101,20 @@ const styles = StyleSheet.create({
     marginBottom: 16
   },
   title: {
-    color: "#6B7280",
+    color: macOSColors.text.icon,
     fontSize: 16,
     fontWeight: "500",
     textAlign: "center",
     marginBottom: 8
   },
   description: {
-    color: "#4B5563",
+    // ⚠️ KNOWN LOW CONTRAST. This reads a BORDER token — border.hover is tuned
+    // to be a faint LINE, so as text it lands at ~2.8:1 on the near-black
+    // canvas, under WCAG AA. `macOSColors.text.muted` is the real tertiary-text
+    // token and would clear it comfortably. Left as-is because it is the
+    // shipped look and changing it moves every empty state in the suite; worth
+    // a deliberate pass rather than a drive-by.
+    color: macOSColors.border.hover,
     fontSize: 14,
     textAlign: "center",
     lineHeight: 20

package/lib/module/ui/components/ErrorBoundary.js

@@ -3,6 +3,7 @@
 import { Component } from "react";
 import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
 import { AlertTriangle, RefreshCw } from "../../icons/index.js";
+import { buoyColors } from "../gameUI/constants/gameUIColors.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export class ErrorBoundary extends Component {
   constructor(props) {
@@ -64,7 +65,7 @@ export class ErrorBoundary extends Component {
 }
 const styles = StyleSheet.create({
   errorContainer: {
-    backgroundColor: "#171717",
+    backgroundColor: buoyColors.card,
     borderRadius: 6,
     borderWidth: 1,
     borderColor: "#EF4444",
@@ -82,7 +83,7 @@ const styles = StyleSheet.create({
     fontWeight: "600"
   },
   errorMessage: {
-    color: "#9CA3AF",
+    color: buoyColors.textSecondary,
     fontSize: 12,
     textAlign: "center",
     lineHeight: 16

package/lib/module/ui/components/EventHistoryViewer/EventHistoryViewer.js

@@ -16,6 +16,30 @@ import { ViewToggleCards } from "./ViewToggleCards.js";
 import { DiffModeTabs } from "./DiffModeTabs.js";
 import { CompareBar } from "./CompareBar.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Section wrapper for the diff view: a plain flex box normally, or a ScrollView
+ * when the whole section should scroll as one page. Split out so the children
+ * are written once instead of duplicated across both branches.
+ */
+function DiffSectionContainer({
+  scrolls,
+  style,
+  children
+}) {
+  if (!scrolls) return /*#__PURE__*/_jsx(View, {
+    style: style,
+    children: children
+  });
+  // `contentSection` carries `flex: 1`, which is meaningless (and harmful) on a
+  // content container — the scrolling variant uses flexGrow padding instead.
+  return /*#__PURE__*/_jsx(ScrollView, {
+    style: styles.contentScroll,
+    contentContainerStyle: styles.contentScrollInner,
+    showsVerticalScrollIndicator: true,
+    children: children
+  });
+}
+
 /**
  * EventHistoryViewer is the main container for viewing event history.
  * It composes sub-components to display current value or diff views.
@@ -51,6 +75,7 @@ export const EventHistoryViewer = /*#__PURE__*/memo(function EventHistoryViewer(
   canRightNext,
   onLeftPickerOpen,
   onRightPickerOpen,
+  scrollDiffSection,
   // Footer
   disableInternalFooter,
   footerCurrentIndex,
@@ -60,28 +85,36 @@ export const EventHistoryViewer = /*#__PURE__*/memo(function EventHistoryViewer(
   onFooterPrevious,
   onFooterNext
 }) {
+  const hasCurrentView = renderCurrentView != null;
   const diffDisabled = footerTotalItems <= 1;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(View, {
       style: [styles.container, {
-        // Add padding when footer is shown (internal or external via modal)
-        paddingBottom: footerTotalItems > 1 ? 96 : 0
+        // Reserve space ONLY for the internal footer, which is absolutely
+        // positioned and would otherwise cover the content. An external
+        // footer is laid out by the host modal, which already pads the
+        // content area by its own footerHeight — adding this on top of that
+        // left a dead band above the footer (96px of padding for a footer
+        // that isn't in this subtree).
+        paddingBottom: !disableInternalFooter && footerTotalItems > 1 ? 96 : 0
       }],
-      children: [/*#__PURE__*/_jsx(ViewToggleCards, {
+      children: [hasCurrentView && /*#__PURE__*/_jsx(ViewToggleCards, {
         activeView: activeView,
-        onViewChange: onViewChange,
-        currentLabel: currentViewLabel,
-        currentDescription: currentViewDescription,
+        onViewChange: onViewChange ?? (() => {}),
+        currentLabel: currentViewLabel ?? "",
+        currentDescription: currentViewDescription ?? "",
         currentIcon: currentViewIcon,
         diffLabel: diffViewLabel,
         diffDescription: diffViewDescription,
         diffIcon: diffViewIcon,
         diffDisabled: diffDisabled
-      }), activeView === "current" && /*#__PURE__*/_jsx(ScrollView, {
-        style: styles.contentSection,
+      }), hasCurrentView && activeView === "current" && /*#__PURE__*/_jsx(ScrollView, {
+        style: styles.contentScroll,
+        contentContainerStyle: styles.contentScrollInner,
         showsVerticalScrollIndicator: true,
-        children: renderCurrentView()
-      }), activeView === "diff" && /*#__PURE__*/_jsxs(View, {
+        children: renderCurrentView?.()
+      }), (!hasCurrentView || activeView === "diff") && /*#__PURE__*/_jsxs(DiffSectionContainer, {
+        scrolls: scrollDiffSection,
         style: styles.contentSection,
         children: [diffModeTabs && diffModeTabs.length > 0 && onDiffModeChange && /*#__PURE__*/_jsx(DiffModeTabs, {
           tabs: diffModeTabs,
@@ -101,7 +134,10 @@ export const EventHistoryViewer = /*#__PURE__*/memo(function EventHistoryViewer(
           canRightNext: canRightNext,
           onLeftPress: onLeftPickerOpen,
           onRightPress: onRightPickerOpen
-        }), renderDiffContent()]
+        }), scrollDiffSection ? renderDiffContent() : /*#__PURE__*/_jsx(View, {
+          style: styles.diffContent,
+          children: renderDiffContent()
+        })]
       })]
     }), !disableInternalFooter && /*#__PURE__*/_jsx(EventStepperFooter, {
       currentIndex: footerCurrentIndex,
@@ -121,7 +157,23 @@ const styles = StyleSheet.create({
   },
   contentSection: {
     flex: 1,
+    minHeight: 0,
     paddingHorizontal: 14,
     paddingVertical: 10
+  },
+  contentScroll: {
+    // No `minHeight: 0` here. On the scroll frame it stops the ScrollView from
+    // constraining itself, so a tall value lays out at full content height and
+    // spills past the panel and the footer instead of scrolling inside it.
+    flex: 1
+  },
+  contentScrollInner: {
+    flexGrow: 1,
+    paddingHorizontal: 14,
+    paddingVertical: 10
+  },
+  diffContent: {
+    flex: 1,
+    minHeight: 0
   }
 });