@buoy-gg/shared-ui 7.0.21 → 7.0.23

package/lib/commonjs/ui/backgrounds/variants/starfield.js

@@ -0,0 +1,210 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Starfield = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _absoluteFill = require("../../../utils/absoluteFill.js");
+var _primitives = require("../primitives.js");
+var _rng = require("../rng.js");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Starfield — the RN-primitive port of the Everlights parallax-drift starfield.
+ *
+ * The original is a GPU-instanced Skia `<Atlas>` with a per-star worklet; Buoy
+ * can't depend on Skia, so the depth continuum is quantised into five discrete
+ * bands. Each band is one rasterized layer of dots sliding at its own speed —
+ * five native-driven loops instead of 160 per-frame transforms — and the eye
+ * reads five parallax speeds as depth just as well as it reads a continuum.
+ */
+
+/**
+ * Depth bands, far → near. `z` drives both size and speed (drift/sec at z=1 is
+ * 0.016 of the width, matching the original), `count` thins out as stars get
+ * closer so the fast, big ones stay sparse.
+ */
+const BANDS = [
+// dia is the star's core in px; halo is how many core-widths the bloom
+// spreads (0 = no bloom, which is what keeps the far bands cheap).
+{
+  z: 1.0,
+  count: 38,
+  dia: 1.4,
+  halo: 0,
+  color: "#7C93B5",
+  alpha: 0.55
+}, {
+  z: 0.78,
+  count: 26,
+  dia: 1.9,
+  halo: 0,
+  color: "#A6BBD8",
+  alpha: 0.65
+}, {
+  z: 0.6,
+  count: 18,
+  dia: 2.4,
+  halo: 0,
+  color: "#C9D9F0",
+  alpha: 0.8
+}, {
+  z: 0.45,
+  count: 11,
+  dia: 3.1,
+  halo: 0,
+  color: "#E4EEFC",
+  alpha: 0.92
+},
+// Only the closest band gets a bloom: 6 stars x 3 extra discs is 36 views,
+// and it is the entire difference between "dots" and "stars".
+{
+  z: 0.3,
+  count: 6,
+  dia: 4.2,
+  halo: 4.4,
+  color: "#FFFFFF",
+  alpha: 1
+}];
+const DRIFT = 0.016; // fraction of width travelled per second at z=1
+
+/** Pre-scattered x/y per band, generated once at module load. */
+const BAND_TABLES = BANDS.map((b, i) => ({
+  xs: (0, _rng.scatter)(0x5747 + i * 977, b.count),
+  ys: (0, _rng.scatter)(0x91c3 + i * 613, b.count)
+}));
+
+/**
+ * The bloom around a close star. Three nested discs rather than a `RadialGlow`,
+ * because this one is drawn per star and lives INSIDE the band layer — which is
+ * the point: the halo travels with its star instead of sitting still while the
+ * star drifts off it.
+ */
+function haloDiscs(cx, cy, core, spread, color, key) {
+  const out = [];
+  const steps = [{
+    mul: spread,
+    alpha: 0.05
+  }, {
+    mul: spread * 0.62,
+    alpha: 0.09
+  }, {
+    mul: spread * 0.34,
+    alpha: 0.16
+  }];
+  for (let i = 0; i < steps.length; i++) {
+    const d = core * steps[i].mul;
+    out.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        position: "absolute",
+        left: cx - d / 2,
+        top: cy - d / 2,
+        width: d,
+        height: d,
+        borderRadius: d / 2,
+        backgroundColor: (0, _rng.withAlpha)(color, steps[i].alpha)
+      }
+    }, `${key}-h${i}`));
+  }
+  return out;
+}
+const StarBand = /*#__PURE__*/(0, _react.memo)(function StarBand({
+  index,
+  width,
+  height,
+  animated
+}) {
+  const band = BANDS[index];
+  const table = BAND_TABLES[index];
+  // One full width of travel takes z / DRIFT seconds — nearer (smaller z) is
+  // faster, which is the whole parallax effect.
+  const drift = (0, _primitives.useLoop)(band.z / DRIFT * 1000, animated);
+  const translateX = drift.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, -width]
+  });
+  const dots = [];
+  for (let i = 0; i < band.count; i++) {
+    const x = table.xs[i] * width;
+    const y = table.ys[i] * height;
+    // Each star is drawn twice, one width apart, so the layer tiles seamlessly
+    // when the loop snaps back to 0.
+    for (let copy = 0; copy < 2; copy++) {
+      const cx = x + copy * width;
+      const key = `${i}-${copy}`;
+      if (band.halo > 0) {
+        dots.push(...haloDiscs(cx, y, band.dia, band.halo, band.color, key));
+      }
+      dots.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          position: "absolute",
+          left: cx - band.dia / 2,
+          top: y - band.dia / 2,
+          width: band.dia,
+          height: band.dia,
+          borderRadius: band.dia / 2,
+          backgroundColor: (0, _rng.withAlpha)(band.color, band.alpha)
+        }
+      }, key));
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    style: [{
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: width * 2,
+      height
+    }, {
+      transform: [{
+        translateX
+      }]
+    }],
+    pointerEvents: "none",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.RasterLayer, {
+      style: {
+        width: width * 2,
+        height
+      },
+      children: dots
+    })
+  });
+});
+const Starfield = exports.Starfield = /*#__PURE__*/(0, _react.memo)(function Starfield(props) {
+  // A single slow breath over the whole field. One node, and it's what stops
+  // the sky looking like a printed dot pattern now that the per-star twinkle
+  // from the Skia original isn't affordable.
+  const shimmer = (0, _primitives.usePulse)(5200, props.animated);
+  const opacity = shimmer.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0.82, 1]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: _absoluteFill.absoluteFill,
+    pointerEvents: "none",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Base, {
+      color: "#05060A"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.RadialGlow, {
+      size: props.width * 1.6,
+      color: "#1E3A8A",
+      alpha: 0.2,
+      rings: 8,
+      falloff: 2,
+      style: {
+        position: "absolute",
+        left: -props.width * 0.3,
+        top: -props.width * 0.9
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [_absoluteFill.absoluteFill, {
+        opacity
+      }],
+      pointerEvents: "none",
+      children: BANDS.map((_, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StarBand, {
+        index: i,
+        ...props
+      }, i))
+    })]
+  });
+});

package/lib/commonjs/ui/index.js

@@ -31,9 +31,7 @@ Object.keys(_index).forEach(function (key) {
     }
   });
 });
-var _toolTheme = require("./toolTheme.js");
-var _CyberpunkSectionButton = require("./console/CyberpunkSectionButton.js");
-var _index2 = require("./gameUI/index.js");
+var _index2 = require("./backgrounds/index.js");
 Object.keys(_index2).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -44,4 +42,18 @@ Object.keys(_index2).forEach(function (key) {
       return _index2[key];
     }
   });
+});
+var _toolTheme = require("./toolTheme.js");
+var _CyberpunkSectionButton = require("./console/CyberpunkSectionButton.js");
+var _index3 = require("./gameUI/index.js");
+Object.keys(_index3).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _index3[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _index3[key];
+    }
+  });
 });

package/lib/commonjs/utils/devServer.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDevServerOrigin = getDevServerOrigin;
+/**
+ * devServer
+ *
+ * Origin of the Metro/Expo dev server that served this bundle, e.g.
+ * `http://192.168.1.20:8081`.
+ *
+ * Why a remote driver wants it: reloading the app normally runs IN the app
+ * (`DevSettings.reload()`), which is exactly what stops working when the app
+ * has crashed — a fatal render error unmounts the tree, so no JS action can be
+ * answered and the one command that would recover the app is unreachable. The
+ * dev server's message socket reloads through the NATIVE side instead (it is
+ * what the `r` key and the redbox's Reload button use), so a driver that knows
+ * this origin can recover an app that can no longer help itself.
+ *
+ * Reported once, while the app is healthy, so it is already known by the time
+ * it's needed.
+ */
+
+const ORIGIN_RE = /^(https?:\/\/[^/]+)/;
+
+/** Bundle URL this JS realm was loaded from, or null off React Native. */
+function scriptURL() {
+  try {
+    // Requires stay lexically inside try{} so Metro treats them as optional —
+    // react-native-web has neither path and falls through to null.
+    const NativeSourceCode =
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    require("react-native/Libraries/NativeModules/specs/NativeSourceCode").default;
+    const url = NativeSourceCode?.getConstants?.().scriptURL;
+    if (url) return url;
+  } catch {
+    // RN internals moved, or old architecture — try NativeModules below.
+  }
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const {
+      NativeModules
+    } = require("react-native");
+    const url = NativeModules?.SourceCode?.getConstants?.().scriptURL ?? NativeModules?.SourceCode?.scriptURL;
+    if (url) return url;
+  } catch {
+    // not React Native
+  }
+  return null;
+}
+
+/**
+ * `http://host:port` of the dev server, or null in production / on web (a
+ * release bundle's scriptURL is a `file://` path, which has no origin worth
+ * reporting).
+ */
+function getDevServerOrigin() {
+  const url = scriptURL();
+  if (!url || !/^https?:\/\//.test(url)) return null;
+  return url.match(ORIGIN_RE)?.[1] ?? null;
+}

package/lib/commonjs/utils/index.js

@@ -57,6 +57,12 @@ Object.defineProperty(exports, "getConstructorName", {
     return _typeHelpers.getConstructorName;
   }
 });
+Object.defineProperty(exports, "getDevServerOrigin", {
+  enumerable: true,
+  get: function () {
+    return _devServer.getDevServerOrigin;
+  }
+});
 Object.defineProperty(exports, "getRenderCaptureProvider", {
   enumerable: true,
   get: function () {
@@ -75,6 +81,12 @@ Object.defineProperty(exports, "getSafeCurrentPathname", {
     return _safeExpoRouter.getSafeCurrentPathname;
   }
 });
+Object.defineProperty(exports, "getSafeCurrentRoute", {
+  enumerable: true,
+  get: function () {
+    return _safeExpoRouter.getSafeCurrentRoute;
+  }
+});
 Object.defineProperty(exports, "getSafeRouter", {
   enumerable: true,
   get: function () {
@@ -291,6 +303,7 @@ var _renderCaptureRegistry = require("./renderCaptureRegistry.js");
 var _stateSnapshotRegistry = require("./stateSnapshotRegistry.js");
 var _minimalSuperJSON = require("./minimalSuperJSON.js");
 var _reloadApp = require("./reloadApp.js");
+var _devServer = require("./devServer.js");
 var _subscribable = require("./subscribable.js");
 var _subscriberCountNotifier = require("./subscriberCountNotifier.js");
 var _safeExpoRouter = require("./safeExpoRouter.js");

package/lib/commonjs/utils/renderCaptureRegistry.js

@@ -15,16 +15,45 @@ exports.setRenderCaptureProvider = setRenderCaptureProvider;
  * `installReaFpsGetter`.
  */
 
+/**
+ * Why a component rendered, counted across a capture window.
+ *
+ * The split between `props` and `propsUnstable` is the one that matters in
+ * practice. Both mean "my props changed", but they send you to different
+ * files: `props` is a genuine update (a value differs) and belongs to the
+ * component; `propsUnstable` means the values are equal and only the
+ * IDENTITY changed — a fresh arrow or object literal handed down by the
+ * parent every render — and the fix is always upstream. Reporting that as
+ * plain "props" is technically true and sends people into the wrong file,
+ * which is why it gets its own bucket.
+ */
+
 /** One component's aggregated renders across a capture window. */
 
 /** Result of a capture window (one benchmark recording). */
 
-let provider = null;
+/**
+ * The provider lives on a global, NOT in module scope.
+ *
+ * Package managers routinely give each @buoy-gg/* package its own nested copy
+ * of shared-ui — observed in the wild with ten identical 7.0.21 copies and
+ * nothing hoisted, simply because shared-ui was nobody's direct dependency.
+ * Module-scoped state means highlight-updates registers into its copy and
+ * perf-monitor reads a different one, so capture silently produces nothing:
+ * no error, no warning, just `renderCommits: null` in every report.
+ *
+ * A global key survives duplicate module instances. Same reasoning as
+ * external-sync's crash-flush registry.
+ */
+const PROVIDER_KEY = "__buoyRenderCaptureProvider";
+function providerHost() {
+  return globalThis;
+}
 
 /** Register (or clear with null) the active provider. Last registration wins. */
 function setRenderCaptureProvider(p) {
-  provider = p;
+  providerHost()[PROVIDER_KEY] = p;
 }
 function getRenderCaptureProvider() {
-  return provider;
+  return providerHost()[PROVIDER_KEY] ?? null;
 }

package/lib/commonjs/utils/safeExpoRouter.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getSafeCurrentPathname = getSafeCurrentPathname;
+exports.getSafeCurrentRoute = getSafeCurrentRoute;
 exports.getSafeRouter = getSafeRouter;
 exports.isExpoRouterAvailable = isExpoRouterAvailable;
 exports.useSafeGlobalSearchParams = useSafeGlobalSearchParams;
@@ -184,6 +185,7 @@ function getSafeRouter() {
 // path the require throws and the imperative fallback simply disables (callers
 // degrade to route-events history). expo-router's store exposes getRouteInfo(),
 // which returns the live pathname even before any navigation is recorded.
+
 let routerStore;
 function getRouterStore() {
   if (routerStore !== undefined) return routerStore;
@@ -205,12 +207,35 @@ function getRouterStore() {
  * can't be reached.
  */
 function getSafeCurrentPathname() {
+  return getSafeCurrentRoute()?.pathname ?? null;
+}
+
+/** A route location that can be re-visited later via {@link getSafeRouter}. */
+
+/**
+ * The current route as a re-visitable location, read imperatively from
+ * expo-router's store.
+ *
+ * Like {@link getSafeCurrentPathname} this works before any navigation has
+ * been recorded (cold start on the initial route), and returns null when
+ * expo-router isn't available or the store can't be reached.
+ */
+function getSafeCurrentRoute() {
   if (!checkExpoRouterAvailability()) {
     return null;
   }
   try {
-    const pathname = getRouterStore()?.getRouteInfo?.()?.pathname;
-    return typeof pathname === "string" && pathname.length > 0 ? pathname : null;
+    const info = getRouterStore()?.getRouteInfo?.();
+    const pathname = info?.pathname;
+    if (typeof pathname !== "string" || pathname.length === 0) return null;
+    const withParams = info?.pathnameWithParams;
+    return {
+      pathname,
+      href: typeof withParams === "string" && withParams.length > 0 ? withParams : pathname,
+      ...(Array.isArray(info?.segments) ? {
+        segments: info.segments
+      } : {})
+    };
   } catch (error) {
     return null;
   }

package/lib/module/JsModal.js

@@ -693,6 +693,14 @@ const JsModalComponent = ({
       } else {
         // Floating mode entrance - simple fade without scale pop
         floatingScale.setValue(1); // Set scale to 1 directly, no animation
+        // Minimizing animated the window to the dock icon's corner. Put it
+        // back where it actually lives, or reopening leaves it parked
+        // off-screen — `initialModalState` only covers the dock's restore
+        // path, and the dial opens the same tool without one.
+        floatingPosition.setValue({
+          x: currentDimensionsRef.current.left,
+          y: currentDimensionsRef.current.top
+        });
         openAnimation = Animated.timing(visibilityProgress, {
           toValue: 1,
           duration: 200,
@@ -741,7 +749,7 @@ const JsModalComponent = ({
         // Stopped close animation
       }
     };
-  }, [visible, mode, visibilityProgress, bottomSheetTranslateY, floatingScale, externalAnimatedHeight]); // Removed initialHeight to prevent animation restarts on height changes
+  }, [visible, mode, visibilityProgress, bottomSheetTranslateY, floatingScale, floatingPosition, externalAnimatedHeight]); // Removed initialHeight to prevent animation restarts on height changes
 
   // ============================================================================
   // OPTIMIZED PAN RESPONDER: Bottom Sheet Resize
@@ -1111,22 +1119,18 @@ const JsModalComponent = ({
   // RENDER: Modal UI with transform-based animations
   // ============================================================================
 
-  // When not visible, render off-screen to keep children mounted (preserves state/listeners)
-  // This is similar to how React Navigation keeps screens mounted
-  if (!visible) {
-    return /*#__PURE__*/_jsx(View, {
-      style: styles.hiddenContainer,
-      pointerEvents: "none",
-      accessibilityElementsHidden: true,
-      importantForAccessibility: "no-hide-descendants",
-      children: children
-    });
-  }
+  // When not visible the SAME tree is rendered, just parked off-screen. It has
+  // to be the same tree: React reconciles by position, so a separate "hidden"
+  // branch would unmount and rebuild every child on each minimize AND each
+  // restore — which is the whole cost minimizing is supposed to avoid.
 
   // Render floating mode
   if (mode === "floating") {
     return /*#__PURE__*/_jsxs(Animated.View, {
       nativeID: "jsmodal-root",
+      pointerEvents: visible ? "auto" : "none",
+      accessibilityElementsHidden: !visible,
+      importantForAccessibility: visible ? "auto" : "no-hide-descendants",
       style: [styles.floatingModal, {
         width: dimensions.width,
         // Use state dimensions for real-time updates
@@ -1140,7 +1144,7 @@ const JsModalComponent = ({
         ...(zIndex !== undefined && {
           zIndex
         })
-      }, (isDragging || isResizing) && styles.floatingModalDragging, customStyles.container],
+      }, (isDragging || isResizing) && styles.floatingModalDragging, customStyles.container, !visible && styles.parkedOffscreen],
       children: [/*#__PURE__*/_jsx(DraggableHeader, {
         position: floatingPosition,
         onDragStart: handleFloatingDragStart,
@@ -1237,10 +1241,16 @@ const JsModalComponent = ({
 
   // Render bottom sheet mode with proper height animation
   return /*#__PURE__*/_jsx(View, {
-    style: [styles.fullScreenContainer, zIndex !== undefined && {
+    style: [
+    // Same box either way — parking it off-screen instead of resizing it
+    // keeps the sheet's layout intact, so coming back is a translate and
+    // not a full relayout.
+    visible ? styles.fullScreenContainer : styles.parkedFullScreen, visible && zIndex !== undefined && {
       zIndex
     }],
-    pointerEvents: "box-none",
+    pointerEvents: visible ? "box-none" : "none",
+    accessibilityElementsHidden: !visible,
+    importantForAccessibility: visible ? "auto" : "no-hide-descendants",
     children: /*#__PURE__*/_jsx(Animated.View, {
       nativeID: "jsmodal-root",
       style: [styles.bottomSheetWrapper, {
@@ -1336,10 +1346,23 @@ const styles = StyleSheet.create({
     shadowRadius: 12,
     elevation: 20
   },
-  hiddenContainer: {
+  /** Off-screen park for a minimized floating modal — same box, moved away. */
+  parkedOffscreen: {
+    left: -9999,
+    top: -9999,
+    opacity: 0
+  },
+  /**
+   * Off-screen park for a minimized bottom sheet. Screen-sized on purpose:
+   * `fullScreenContainer` is an absolute fill, and shrinking it here would
+   * relayout the whole sheet on every minimize/restore.
+   */
+  parkedFullScreen: {
     position: "absolute",
     left: -9999,
     top: -9999,
+    width: SCREEN.width,
+    height: SCREEN.height,
     opacity: 0
   },
   floatingModal: {

package/lib/module/dataViewer/JsonStringNotice.js

@@ -0,0 +1,54 @@
+"use strict";
+
+/**
+ * Says out loud that the diff below is showing a decoded value.
+ *
+ * Not decoration: the store holds a STRING, and the rows underneath show an
+ * object or an array. Without this line the viewer would be misreporting the
+ * type of what is stored — see jsonStringValue.ts.
+ */
+import { memo } from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const JsonStringNotice = /*#__PURE__*/memo(function JsonStringNotice({
+  visible,
+  theme
+}) {
+  if (!visible) return null;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, {
+      backgroundColor: theme.summaryBackground,
+      borderTopColor: theme.borderColor
+    }],
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: [styles.glyph, {
+        color: theme.lineNumberText
+      }],
+      children: "{ }"
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [styles.text, {
+        color: theme.lineNumberText
+      }],
+      children: "Stored as a JSON string \u2014 decoded below so the change is readable."
+    })]
+  });
+});
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 7,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    paddingHorizontal: 10,
+    paddingVertical: 6
+  },
+  glyph: {
+    fontSize: 11,
+    fontWeight: "700"
+  },
+  text: {
+    flex: 1,
+    fontSize: 11,
+    lineHeight: 14
+  }
+});

package/lib/module/dataViewer/ThemedSplitView.js

@@ -14,6 +14,10 @@ import { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } fro
 import { View, Text, FlatList, StyleSheet, TouchableOpacity } from "react-native";
 import { computeLineDiff, DiffType } from "./lineDiff.js";
 import { DiffSummary } from "./DiffSummary.js";
+import { TimestampDeltaBar } from "./TimestampDeltaBar.js";
+import { describeTimestampDeltas } from "./timestampDiff.js";
+import { JsonStringNotice } from "./JsonStringNotice.js";
+import { decodeJsonStringPair } from "./jsonStringValue.js";
 
 /** Rendering options (the shape storage's DiffOptionsPanel edits). */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -42,7 +46,12 @@ export function ThemedSplitView({
     showDiffOnly: options.showDiffOnly,
     contextLines: options.contextLines
   }), [options.compareMethod, options.disableWordDiff, options.showDiffOnly, options.contextLines]);
-  const lineDiffs = useMemo(() => computeLineDiff(oldValue, newValue, diffComputeOptions), [oldValue, newValue, diffComputeOptions]);
+
+  // A JSON-encoded string is diffed decoded, or its one real change reads as
+  // one unreadable escaped line. Everything downstream — the line diff, the
+  // timestamp scan — works off the decoded pair.
+  const pair = useMemo(() => decodeJsonStringPair(oldValue, newValue), [oldValue, newValue]);
+  const lineDiffs = useMemo(() => computeLineDiff(pair.left, pair.right, diffComputeOptions), [pair, diffComputeOptions]);
 
   // One pass for the summary instead of three .filter() calls per render.
   const summary = useMemo(() => {
@@ -59,6 +68,10 @@ export function ThemedSplitView({
     };
   }, [lineDiffs]);
 
+  // Detection walks at most one object level, but it runs on every render of
+  // a diff that may hold thousands of lines — keep it on the value identities.
+  const timestampDeltas = useMemo(() => describeTimestampDeltas(pair.left, pair.right), [pair]);
+
   // Auto-collapse runs of unchanged lines that aren't near a change. Keeps
   // CONTEXT_LINES on either side of every change visible (GitHub-style), folds
   // the rest into a tappable header.
@@ -147,6 +160,12 @@ export function ThemedSplitView({
       removed: summary.removed,
       modified: summary.modified,
       theme: theme
+    }), /*#__PURE__*/_jsx(JsonStringNotice, {
+      visible: pair.decoded,
+      theme: theme
+    }), /*#__PURE__*/_jsx(TimestampDeltaBar, {
+      deltas: timestampDeltas,
+      theme: theme
     }), lineDiffs.length === 0 ? /*#__PURE__*/_jsx(View, {
       style: dynamicStyles.emptyState,
       children: /*#__PURE__*/_jsx(Text, {