@buoy-gg/highlight-updates 7.0.34 → 7.0.36

package/lib/commonjs/highlight-updates/utils/screenElements.js

@@ -46,6 +46,69 @@ function getReactDevToolsHook() {
   return global.__REACT_DEVTOOLS_GLOBAL_HOOK__ ?? null;
 }
 
+/**
+ * React commits observed since this counter was installed.
+ *
+ * `tapElement` reads it either side of firing a handler to say whether
+ * ANYTHING re-rendered afterwards. Without that a tap that matched a button
+ * on the screen BENEATH the current one (a stack keeps it mounted) came back
+ * `tapped:true` — the handler really did run — and an agent then built its
+ * next three turns on a sign-in that never happened. Zero commits inside the
+ * settle window is the honest signal: the handler ran and the app did nothing
+ * visible with it.
+ *
+ * Installed once and chained, the same way CommitProfiler wraps the hook;
+ * counting is the only work it does on the commit path.
+ */
+let commitCount = 0;
+let commitCounterInstalled = false;
+function ensureCommitCounter() {
+  if (commitCounterInstalled) return;
+  const hook = getReactDevToolsHook();
+  if (!hook) return;
+  const original = hook.onCommitFiberRoot;
+  hook.onCommitFiberRoot = function (...args) {
+    commitCount++;
+    return typeof original === "function" ? original.apply(hook, args) : undefined;
+  };
+  commitCounterInstalled = true;
+}
+
+/** How long a tap waits to see the app react before reporting. */
+const TAP_SETTLE_MS = 250;
+
+/**
+ * Per-walk memo of "is this fiber under Buoy's own overlay". Every candidate
+ * asks, and they share ancestors, so the answer is cached along the path
+ * walked rather than recomputed 400 levels deep per row.
+ */
+function makeChromeCheck() {
+  const memo = new Map();
+  return fiber => {
+    const path = [];
+    let cur = fiber;
+    let depth = 0;
+    let inChrome = false;
+    while (cur && depth < 400) {
+      const known = memo.get(cur);
+      if (known !== undefined) {
+        inChrome = known;
+        break;
+      }
+      if (getProps(cur)?.__buoyDevToolsRoot) {
+        inChrome = true;
+        memo.set(cur, true);
+        break;
+      }
+      path.push(cur);
+      cur = cur.return;
+      depth++;
+    }
+    for (const f of path) memo.set(f, inChrome);
+    return inChrome;
+  };
+}
+
 /**
  * Collect fiber roots across ALL renderers. A single renderer id is not safe
  * to assume: secondary reconcilers (react-native-skia, react-native-svg, …)
@@ -264,13 +327,48 @@ function getOwningComponentName(fiber) {
 function getProps(fiber) {
   return fiber?.memoizedProps ?? fiber?.pendingProps ?? null;
 }
+
+/**
+ * The text of a `children` value, INCLUDING one assembled from several pieces.
+ *
+ * `<Text>{value} {label}</Text>` compiles to `children: ["1,450", " ", "Points"]`
+ * and `Check Back Soon{"\n"}For Available Offers` to three strings. This used
+ * to accept a lone string or number and nothing else, so EVERY composed label
+ * in an app was invisible to describeScreen, tapElement and waitFor — while
+ * native accessibility, which concatenates the same children, could read them.
+ * Measured on a live QA run: five waits failed against an empty state that was
+ * on screen the whole time, and the agent then reported the app was missing
+ * one; a points balance could not be found by its own number.
+ *
+ * Nested React ELEMENTS are not walked here — `collectDescendantText` owns
+ * that, with its stop-at-a-nested-button rule — so this stays a leaf join, and
+ * adjacent pieces are concatenated exactly as React renders them.
+ */
+function flattenText(value, depth = 0) {
+  if (typeof value === "string") return value;
+  if (typeof value === "number" && Number.isFinite(value)) return String(value);
+  if (Array.isArray(value) && depth < 4) {
+    const parts = [];
+    for (const child of value) {
+      const part = flattenText(child, depth + 1);
+      if (part) parts.push(part);
+    }
+    return parts.length > 0 ? parts.join("") : undefined;
+  }
+  return undefined;
+}
+
+/** What a person reads: newlines and runs of spaces collapse to one space. */
+function normalizeVisibleText(value) {
+  return value.replace(/\s+/g, " ").trim();
+}
 function getVisibleText(props) {
   if (!props) return undefined;
   const pick = v => {
-    if (typeof v === "string") return v.trim() ? v.trim().slice(0, 80) : undefined;
-    // Numeric children are common (counters, badges) — coerce them too.
-    if (typeof v === "number" && Number.isFinite(v)) return String(v);
-    return undefined;
+    const flat = flattenText(v);
+    if (flat === undefined) return undefined;
+    const text = normalizeVisibleText(flat);
+    return text ? text.slice(0, 80) : undefined;
   };
   return pick(props.children) ?? pick(props.title) ?? pick(props.label) ?? pick(props.placeholder) ?? undefined;
 }
@@ -384,7 +482,19 @@ function collectCandidates() {
   const roots = getAllFiberRoots();
   if (roots.length === 0) return [];
   const out = [];
-  const seenInstances = new Set();
+  /**
+   * De-dup indexes. Two fibers resolving to the same host node collapse to one
+   * row — a Pressable and its inner View, but ALSO the same native view reached
+   * twice by the walk, which produces two different `instance` objects for one
+   * `nativeTag`. Measured on a live QA run: a 141-row screen dump held 70
+   * distinct elements, every one listed twice, and the agent told the user
+   * their layout had duplicate elements. Keyed both ways so either collision
+   * collapses, and as Maps because the old `out.find(…)` was a linear scan per
+   * candidate on a list that can run to hundreds.
+   */
+  const byInstance = new Map();
+  const byTag = new Map();
+  const inBuoyChrome = makeChromeCheck();
   for (const root of roots) {
     traverseFiberTree(root.current, fiber => {
       const props = getProps(fiber);
@@ -442,25 +552,25 @@ function collectCandidates() {
         text = collectDescendantText(fiber, 6);
       }
       const instance = host?.instance ?? null;
-      // De-dup: two fibers resolving to the same host instance (e.g. Pressable
-      // and its inner View) collapse to one row — keep the more interactive.
-      if (instance && seenInstances.has(instance)) {
-        const existing = out.find(c => c.instance === instance);
-        if (existing) {
-          if (!existing.press && press) existing.press = press;else if (existing.press && press?.longPress && !existing.press.longPress) {
-            existing.press.longPress = press.longPress;
-          }
-          if (!existing.valueControl && valueControl) existing.valueControl = valueControl;
-          if (!existing.textControl && textControl) existing.textControl = textControl;
-          if (!existing.testID && testID) existing.testID = testID;
-          if (!existing.label && label) existing.label = label;
-          if (!existing.text && text) existing.text = text;
-          return;
+      const nativeTag = host?.nativeTag ?? null;
+      const existing = (instance ? byInstance.get(instance) : undefined) ?? (nativeTag != null ? byTag.get(nativeTag) : undefined);
+      if (existing) {
+        // Keep the more interactive / better-labelled of the two.
+        if (!existing.press && press) existing.press = press;else if (existing.press && press?.longPress && !existing.press.longPress) {
+          existing.press.longPress = press.longPress;
         }
+        if (!existing.valueControl && valueControl) existing.valueControl = valueControl;
+        if (!existing.textControl && textControl) existing.textControl = textControl;
+        if (!existing.testID && testID) existing.testID = testID;
+        if (!existing.label && label) existing.label = label;
+        if (!existing.text && text) existing.text = text;
+        // Index the alias too, so a third sighting through either key finds it.
+        if (instance && !byInstance.has(instance)) byInstance.set(instance, existing);
+        if (nativeTag != null && !byTag.has(nativeTag)) byTag.set(nativeTag, existing);
+        return;
       }
-      if (instance) seenInstances.add(instance);
-      out.push({
-        nativeTag: host?.nativeTag ?? null,
+      const candidate = {
+        nativeTag,
         name,
         role,
         testID,
@@ -472,12 +582,48 @@ function collectCandidates() {
         press,
         valueControl,
         textControl,
-        rect: null
-      });
+        rect: null,
+        buoy: inBuoyChrome(fiber)
+      };
+      out.push(candidate);
+      if (instance) byInstance.set(instance, candidate);
+      if (nativeTag != null) byTag.set(nativeTag, candidate);
     });
   }
   return out;
 }
+
+/**
+ * Whether the caller named THIS element, rather than described one like it.
+ * An exact nativeTag or testID is a deliberate choice, and is honoured even
+ * inside Buoy's own chrome — that is how a test or an editor agent drives a
+ * Buoy tool on purpose. A fuzzy `query` is not.
+ */
+function explicitlyTargets(c, params) {
+  if (params.nativeTag != null) return c.nativeTag === params.nativeTag;
+  if (params.testID && c.testID) return c.testID.toLowerCase() === params.testID.toLowerCase();
+  return false;
+}
+
+/**
+ * The app under test, not the tool looking at it.
+ *
+ * Buoy runs INSIDE the app, so its own sheet is in the same fiber tree as the
+ * screens it inspects — and Ask Buoy's activity log echoes whatever the model
+ * is searching for back as visible text. Left in, that echo was the best
+ * match for the next fuzzy tap or wait, so every text-driven action landed on
+ * Buoy's own panel and nothing in the app moved. The agent diagnosed it
+ * itself, four chats in ("every text-based tap and wait I've done this
+ * session has been landing on Buoy's panel"), and still could not escape it.
+ *
+ * `includeBuoy` lists the chrome for callers that want it; an exact id gets
+ * through regardless (see `explicitlyTargets`).
+ */
+function appCandidates(params) {
+  const all = collectCandidates();
+  if (params.includeBuoy) return all;
+  return all.filter(c => !c.buoy || explicitlyTargets(c, params));
+}
 async function measureCandidates(candidates) {
   await Promise.all(candidates.map(async c => {
     if (c.instance) c.rect = await measureInstance(c.instance);
@@ -486,8 +632,10 @@ async function measureCandidates(candidates) {
 
 // --- describeScreen -------------------------------------------------------
 
-async function describeScreen() {
-  const candidates = collectCandidates();
+async function describeScreen(params = {}) {
+  const all = collectCandidates();
+  const candidates = params.includeBuoy ? all : all.filter(c => !c.buoy);
+  const hiddenBuoy = all.length - candidates.length;
   await measureCandidates(candidates);
   const win = _reactNative.Dimensions.get("window");
   const screenW = Math.round(win.width) || 1;
@@ -549,7 +697,10 @@ async function describeScreen() {
       height: screenH
     },
     count: elements.length,
-    elements
+    elements,
+    ...(hiddenBuoy > 0 ? {
+      hiddenBuoy
+    } : {})
   };
 }
 function round2(n) {
@@ -605,7 +756,7 @@ function makeSyntheticPressEvent(rect) {
   };
 }
 async function tapElement(params) {
-  const candidates = collectCandidates();
+  const candidates = appCandidates(params);
   if (candidates.length === 0) {
     return {
       tapped: false,
@@ -654,6 +805,21 @@ async function tapElement(params) {
   // sit below 15 text-score peers.
   const target = top.find(r => isInteractive(r.c)) ?? ranked.find(r => isInteractive(r.c)) ?? top[0];
   const c = target.c;
+
+  // Everything else that matched just as well. A fuzzy "SIGN IN" on a stack
+  // that still has the home screen mounted underneath has two equal answers,
+  // and the caller has to know that before trusting whichever one fired.
+  const sameControl = (a, b) => a.press && a.press.handler === b.press?.handler || a.valueControl && a.valueControl.handler === b.valueControl?.handler || a.textControl && a.textControl.handler === b.textControl?.handler;
+  const alsoMatched = top.filter(r => r !== target && isInteractive(r.c) && r.score === target.score)
+  // The label Text inside the tapped button matches its own button's text
+  // and inherits its onPress: same control, not a rival.
+  .filter(r => !sameControl(r.c, c)).filter((r, i, arr) => arr.findIndex(o => sameControl(o.c, r.c)) === i).slice(0, 3).map(r => ({
+    nativeTag: r.c.nativeTag,
+    name: r.c.name,
+    testID: r.c.testID,
+    text: r.c.text,
+    tap: tapPoint(r.c.rect, screenW, screenH)
+  }));
   if (!isInteractive(c)) {
     return {
       tapped: false,
@@ -691,6 +857,28 @@ async function tapElement(params) {
     label: c.label,
     text: c.text
   };
+
+  // Fire, then watch. The handler is the app's own; what it did — or did
+  // not do — shows up as commits (or none) in the settle window.
+  ensureCommitCounter();
+  // Read BEFORE the handler runs: a synchronous setState commits inside it.
+  const c0 = commitCount;
+  const t0 = Date.now();
+  const fired = async matched => {
+    await new Promise(resolve => setTimeout(resolve, TAP_SETTLE_MS));
+    return {
+      tapped: true,
+      scrolled,
+      matched,
+      effect: {
+        commits: commitCount - c0,
+        observedMs: Date.now() - t0
+      },
+      ...(alsoMatched.length ? {
+        alsoMatched
+      } : {})
+    };
+  };
   try {
     if (c.press) {
       if (params.longPress) {
@@ -707,24 +895,16 @@ async function tapElement(params) {
           };
         }
         lp(makeSyntheticPressEvent(c.rect));
-        return {
-          tapped: true,
-          scrolled,
-          matched: {
-            ...base,
-            via: "onLongPress"
-          }
-        };
+        return await fired({
+          ...base,
+          via: "onLongPress"
+        });
       }
       c.press.handler(makeSyntheticPressEvent(c.rect));
-      return {
-        tapped: true,
-        scrolled,
-        matched: {
-          ...base,
-          via: c.press.kind
-        }
-      };
+      return await fired({
+        ...base,
+        via: c.press.kind
+      });
     }
     if (c.valueControl) {
       const vc = c.valueControl;
@@ -742,28 +922,20 @@ async function tapElement(params) {
         }
       }
       vc.handler(next);
-      return {
-        tapped: true,
-        scrolled,
-        matched: {
-          ...base,
-          via: "onValueChange",
-          value: next
-        }
-      };
+      return await fired({
+        ...base,
+        via: "onValueChange",
+        value: next
+      });
     }
     // textControl
     const next = params.text ?? (typeof params.value === "string" ? params.value : "");
     c.textControl.handler(next);
-    return {
-      tapped: true,
-      scrolled,
-      matched: {
-        ...base,
-        via: "onChangeText",
-        value: next
-      }
-    };
+    return await fired({
+      ...base,
+      via: "onChangeText",
+      value: next
+    });
   } catch (e) {
     return {
       tapped: false,
@@ -812,7 +984,9 @@ const WAIT_DEFAULT_POLL_MS = 150;
  * waiting for.
  */
 async function waitFor(params) {
-  const hasTarget = params.nativeTag != null || !!params.testID?.trim() || !!params.query?.trim();
+  // Coerced, not optional-chained: a model sends `query: 1450` often enough,
+  // and `.trim()` on a number throws before the wait ever starts.
+  const hasTarget = params.nativeTag != null || !!String(params.testID ?? "").trim() || !!String(params.query ?? "").trim();
   if (!hasTarget) {
     return {
       ok: false,
@@ -828,7 +1002,10 @@ async function waitFor(params) {
   let polls = 0;
   for (;;) {
     polls += 1;
-    const hit = await findOnScreen(params);
+    const {
+      hit,
+      closest
+    } = await findOnScreen(params);
     if (wantGone ? !hit : !!hit) {
       return {
         ok: true,
@@ -838,12 +1015,18 @@ async function waitFor(params) {
       };
     }
     if (Date.now() - started >= timeoutMs) {
+      const nearMisses = closest?.length ? closest : undefined;
+      // Say which of the two failures this is. "Nothing is called that" and
+      // "it exists but is not visible" need opposite next moves, and a caller
+      // that cannot tell them apart tries the same wait with new words.
+      const why = wantGone ? `Still on screen after ${timeoutMs}ms.` : nearMisses ? `Not on screen after ${timeoutMs}ms — ${nearMisses.length === 1 ? "one element" : `${nearMisses.length} elements`} matched but ${nearMisses.some(n => n.onScreen) ? "not well enough" : "none is visible"}. See \`closest\`; do not retry with different words, call describeScreen.` : `Not on screen after ${timeoutMs}ms, and nothing matched those words at all. Call describeScreen to see what is there.`;
       return {
         ok: false,
         waitedMs: Date.now() - started,
         polls,
-        reason: wantGone ? `Still on screen after ${timeoutMs}ms.` : `Not on screen after ${timeoutMs}ms. Call describeScreen to see what is.`,
-        matched: hit ?? undefined
+        reason: why,
+        matched: hit ?? undefined,
+        closest: nearMisses
       };
     }
     await new Promise(resolve => setTimeout(resolve, pollMs));
@@ -852,22 +1035,26 @@ async function waitFor(params) {
 
 /** One scan: rank by identity, then confirm the best match is really visible. */
 async function findOnScreen(params) {
-  const ranked = collectCandidates().map(c => ({
+  const ranked = appCandidates(params).map(c => ({
     c,
     score: matchScore(c, params)
   })).filter(r => r.score > 0).sort((a, b) => b.score - a.score)
   // Only the plausible few get measured; a broad query can match dozens.
   .slice(0, 8);
-  if (ranked.length === 0) return null;
+  if (ranked.length === 0) return {
+    hit: null,
+    closest: undefined
+  };
   await measureCandidates(ranked.map(r => r.c));
   const win = _reactNative.Dimensions.get("window");
   const screenW = Math.round(win.width) || 1;
   const screenH = Math.round(win.height) || 1;
+  let hit = null;
   for (const {
     c
   } of ranked) {
     if (!(0, _tapMatch.isRectCenterOnScreen)(c.rect, screenW, screenH)) continue;
-    return {
+    hit = {
       nativeTag: c.nativeTag,
       name: c.name,
       testID: c.testID,
@@ -875,8 +1062,23 @@ async function findOnScreen(params) {
       text: c.text,
       interactive: !!(c.press || c.valueControl || c.textControl)
     };
+    break;
   }
-  return null;
+
+  // Built from the same measured ranking, so a failed wait can say what it
+  // nearly matched and whether that thing was visible.
+  const closest = ranked.slice(0, 3).map(({
+    c
+  }) => ({
+    name: c.name,
+    testID: c.testID,
+    text: c.text,
+    onScreen: (0, _tapMatch.isRectCenterOnScreen)(c.rect, screenW, screenH)
+  }));
+  return {
+    hit,
+    closest
+  };
 }
 
 // --- resolveTouchTarget ---------------------------------------------------

package/lib/commonjs/highlight-updates/utils/tapMatch.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isOnScreenTap = isOnScreenTap;
 exports.isRectCenterOnScreen = isRectCenterOnScreen;
+exports.looseText = looseText;
 exports.scoreTapMatch = scoreTapMatch;
 /**
  * Shared tap-target scoring for describe_screen / tap_element.
@@ -33,15 +34,39 @@ function isRectCenterOnScreen(rect, screenW, screenH) {
   const slackY = screenH * 0.1;
   return cx >= -slackX && cx <= screenW + slackX && cy >= -slackY && cy <= screenH + slackY;
 }
+
+/**
+ * The comparable form of a piece of text.
+ *
+ * "1,450", `1450` and "1,450 Points" are one request as far as a person is
+ * concerned. Measured on a live QA run: waits for BOTH "1,450" and 1450 failed
+ * against a balance that was on screen, because the thousands separator made
+ * every comparison miss. Lowercased, whitespace collapsed, digit-group
+ * separators dropped. A number arrives here as a number often enough that the
+ * coercion is not optional — `.trim()` on one is a crash.
+ */
+function looseText(value) {
+  return String(value ?? "").toLowerCase().replace(/\s+/g, " ").replace(/(\d)[,\u00a0\u202f](?=\d{3}\b)/g, "$1").trim();
+}
 function scoreTapMatch(c, params) {
   if (params.nativeTag != null && c.nativeTag === params.nativeTag) return 1000;
-  const q = (params.query ?? params.testID ?? "").trim().toLowerCase();
+  const q = String(params.query ?? params.testID ?? "").trim().toLowerCase();
   if (!q) return 0;
   const fields = [c.testID, c.label, c.text, c.name].filter(Boolean).map(s => s.toLowerCase());
   let best = 0;
   for (const f of fields) {
     if (f === q) best = Math.max(best, 100);else if (f.startsWith(q)) best = Math.max(best, 50);else if (f.includes(q)) best = Math.max(best, 25);
   }
+  // Same tiers on the loose form, one notch lower so an exact hit still wins
+  // when both match. Skipped when the loose query is empty, or `includes("")`
+  // would score every candidate on the screen.
+  const looseQuery = looseText(q);
+  if (looseQuery) {
+    for (const f of fields) {
+      const loose = looseText(f);
+      if (loose === looseQuery) best = Math.max(best, 90);else if (loose.startsWith(looseQuery)) best = Math.max(best, 45);else if (loose.includes(looseQuery)) best = Math.max(best, 22);
+    }
+  }
   if (params.testID && c.testID && c.testID.toLowerCase() === params.testID.toLowerCase()) {
     best = Math.max(best, 200);
   }

package/lib/commonjs/sync/highlightUpdatesSyncAdapter.js

@@ -205,7 +205,7 @@ const highlightUpdatesSyncAdapter = exports.highlightUpdatesSyncAdapter = {
     // Walk the live fiber tree and return the current screen's meaningful /
     // interactive elements, each with normalized tap coordinates. Powers the
     // MCP `describe_screen` reader — no screenshot, no silent-tracking needed.
-    describeScreen: () => (0, _screenElements.describeScreen)(),
+    describeScreen: params => (0, _screenElements.describeScreen)(params ?? {}),
     // Tap an element purely in JS: resolve it (by nativeTag / testID / query),
     // find the nearest onPress up its fiber chain, and invoke it with a
     // synthetic press event. Powers the MCP `tap_element` action.

package/lib/module/highlight-updates/HighlightUpdatesOverlay.js

@@ -10,7 +10,7 @@
 
 import React, { useEffect, useState, useRef, useCallback, useLayoutEffect } from "react";
 import { View, Text, StyleSheet } from "react-native";
-import { night } from "@buoy-gg/shared-ui";
+import { night, monoFont } from "@buoy-gg/shared-ui";
 import HighlightUpdatesController from "./utils/HighlightUpdatesController";
 import { PerformanceLogger, markOverlayRendered } from "./utils/PerformanceLogger";
 import { RenderTracker } from "./utils/RenderTracker";
@@ -268,7 +268,7 @@ const styles = StyleSheet.create({
     color: night.color.accent,
     fontSize: 11,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   }
 });
 export default HighlightUpdatesOverlay;

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

@@ -10,7 +10,7 @@
 
 import React, { useState, useCallback } from "react";
 import { View, Text, TouchableOpacity, TextInput, StyleSheet, ScrollView, Modal, Pressable, Switch } from "react-native";
-import { Eye, Filter, Plus, X, Box, Settings, Hash, SectionHeader, night } from "@buoy-gg/shared-ui";
+import { Eye, Filter, Plus, X, Box, Settings, Hash, SectionHeader, night, monoFont } from "@buoy-gg/shared-ui";
 import { IdentifierBadge, IDENTIFIER_CONFIG } from "./IdentifierBadge";
 import { detectedItemTestID, patternChipTestID, settingTestID } from "../utils/testIDs";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -1095,7 +1095,7 @@ const styles = StyleSheet.create({
   patternChipValue: {
     fontSize: 11,
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     flexShrink: 1
   },
   patternChipX: {
@@ -1238,7 +1238,7 @@ const styles = StyleSheet.create({
   detectedItemText: {
     fontSize: 11,
     color: night.color.text,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   emptyText: {
     fontSize: 11,
@@ -1256,7 +1256,7 @@ const styles = StyleSheet.create({
     fontSize: 11,
     color: night.color.textTertiary,
     lineHeight: 18,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   howItWorksBold: {
     fontWeight: "700",
@@ -1356,7 +1356,7 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: "700",
     color: night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   settingDescription: {
     fontSize: 11,
@@ -1399,7 +1399,7 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: "500",
     color: night.color.textSecondary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   batchSizePresetTextActive: {
     color: night.color.textTertiary,
@@ -1438,7 +1438,7 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: "600",
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     textAlign: "center"
   },
   renderCountSeparator: {

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

@@ -9,7 +9,7 @@
 
 import React from "react";
 import { View, Text, StyleSheet } from "react-native";
-import { Box, Hash, Layers, Eye, Search, FileCode, buoyColors, night } from "@buoy-gg/shared-ui";
+import { Box, Hash, Layers, Eye, Search, FileCode, buoyColors, night, monoFont } from "@buoy-gg/shared-ui";
 
 // All possible identifier types
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -198,7 +198,7 @@ const styles = StyleSheet.create({
   value: {
     fontSize: 12,
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     flex: 1
   },
   valueCompact: {
@@ -231,7 +231,7 @@ const styles = StyleSheet.create({
   // Value only
   valueOnly: {
     fontSize: 12,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   valueOnlyCompact: {
     fontSize: 11