@buoy-gg/js-top 7.0.29 → 7.0.31

package/src/js-top/engine/patches/timers.ts

@@ -1,80 +0,0 @@
-/**
- * Tier 1 patches: setTimeout / setInterval / setImmediate /
- * requestAnimationFrame. Public globals only — RN internals (JSTimers) are
- * private API and churn across versions.
- *
- * Install-once, never unpatch (see state.ts). Handles are returned from the
- * originals unchanged, so clearTimeout/clearInterval/cancelAnimationFrame
- * need no patching. Extra setTimeout args pass through.
- */
-
-import { buoyJsTopWrapTask } from "../frameStack";
-import { captureOriginals, g, PATCHED_TAG } from "../state";
-
-export function installTimerPatches(): void {
-  const originals = captureOriginals();
-
-  if (typeof g.setTimeout === "function" && !g.setTimeout[PATCHED_TAG]) {
-    const buoyJsTopSetTimeout = function (
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      fn: any,
-      timeout?: number,
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ...args: any[]
-    ) {
-      const cb = buoyJsTopWrapTask(fn, "timeout");
-      return (originals.setTimeout as typeof setTimeout)(cb, timeout, ...args);
-    };
-    buoyJsTopSetTimeout[PATCHED_TAG] = true;
-    g.setTimeout = buoyJsTopSetTimeout;
-  }
-
-  if (typeof g.setInterval === "function" && !g.setInterval[PATCHED_TAG]) {
-    const buoyJsTopSetInterval = function (
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      fn: any,
-      timeout?: number,
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ...args: any[]
-    ) {
-      const cb = buoyJsTopWrapTask(fn, "interval");
-      return (originals.setInterval as typeof setInterval)(
-        cb,
-        timeout,
-        ...args,
-      );
-    };
-    buoyJsTopSetInterval[PATCHED_TAG] = true;
-    g.setInterval = buoyJsTopSetInterval;
-  }
-
-  if (
-    typeof g.setImmediate === "function" &&
-    !g.setImmediate[PATCHED_TAG] &&
-    originals.setImmediate
-  ) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const buoyJsTopSetImmediate = function (fn: any, ...args: any[]) {
-      const cb = buoyJsTopWrapTask(fn, "immediate");
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      return (originals.setImmediate as any)(cb, ...args);
-    };
-    buoyJsTopSetImmediate[PATCHED_TAG] = true;
-    g.setImmediate = buoyJsTopSetImmediate;
-  }
-
-  if (
-    typeof g.requestAnimationFrame === "function" &&
-    !g.requestAnimationFrame[PATCHED_TAG] &&
-    originals.requestAnimationFrame
-  ) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const buoyJsTopRequestAnimationFrame = function (fn: any) {
-      const cb = buoyJsTopWrapTask(fn, "raf");
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      return (originals.requestAnimationFrame as any)(cb);
-    };
-    buoyJsTopRequestAnimationFrame[PATCHED_TAG] = true;
-    g.requestAnimationFrame = buoyJsTopRequestAnimationFrame;
-  }
-}

package/src/js-top/engine/state.ts

@@ -1,66 +0,0 @@
-/**
- * Shared engine state + pre-patch originals.
- *
- * `active` is the single gate every patched global checks at schedule time:
- * patches install once and are NEVER removed (restoring originals would
- * clobber any wrapper another library — Sentry, Reanimated — layered on top
- * of ours after install; same reasoning as highlight-updates' CommitProfiler
- * hook). When inactive, a patched global forwards the raw callback to the
- * original at the cost of one boolean check.
- *
- * `originals` are captured BEFORE patching so the engine's own probe and
- * notify timers never flow through the wrappers — JS TOP must not list
- * itself as a task.
- */
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const g: any =
-  // eslint-disable-next-line no-restricted-globals
-  typeof globalThis !== "undefined" ? globalThis : {};
-
-let active = false;
-
-export function isActive(): boolean {
-  return active;
-}
-
-export function setActive(on: boolean): void {
-  active = on;
-}
-
-interface Originals {
-  setTimeout: typeof setTimeout;
-  setInterval: typeof setInterval;
-  clearInterval: typeof clearInterval;
-  clearTimeout: typeof clearTimeout;
-  setImmediate: typeof setImmediate | undefined;
-  requestAnimationFrame: typeof requestAnimationFrame | undefined;
-  queueMicrotask: typeof queueMicrotask | undefined;
-}
-
-let originals: Originals | null = null;
-
-/** Capture pre-patch globals. Idempotent; first call wins. */
-export function captureOriginals(): Originals {
-  if (!originals) {
-    originals = {
-      setTimeout: g.setTimeout?.bind(g),
-      setInterval: g.setInterval?.bind(g),
-      clearInterval: g.clearInterval?.bind(g),
-      clearTimeout: g.clearTimeout?.bind(g),
-      setImmediate: g.setImmediate?.bind(g),
-      requestAnimationFrame: g.requestAnimationFrame?.bind(g),
-      queueMicrotask: g.queueMicrotask?.bind(g),
-    };
-  }
-  return originals;
-}
-
-export function getOriginals(): Originals {
-  return captureOriginals();
-}
-
-/** Tag interned on patched globals so duplicate module instances skip re-patching. */
-export const PATCHED_TAG = Symbol.for("buoy.jsTop.patched");
-/** Marker set on wrapper functions so a wrapped fn is never wrapped twice. */
-export const WRAPPED_TAG = Symbol.for("buoy.jsTop.wrapped");

package/src/js-top/engine/symbolicate.ts

@@ -1,109 +0,0 @@
-/**
- * Dev-only origin symbolication via Metro's /symbolicate endpoint (the same
- * one LogBox uses). Hermes stacks give function names + bundle offsets; for
- * anonymous scheduling sites (the typical `useEffect(() => setInterval(…))`)
- * that leaves an unreadable label. Metro maps the offset back to the real
- * source file — so a row can say `setInterval ← ChatScreen.tsx:42`, which is
- * component-level attribution in practice.
- *
- * Fire-and-forget with hard caps: one attempt per origin, few in flight,
- * silent on any failure (release builds, tunnels, Metro gone). The origin's
- * label/file/line are upgraded in place when the answer lands — the table
- * re-renders every tick and picks it up.
- */
-
-import type { Origin } from "./originRegistry";
-
-declare const __DEV__: boolean;
-
-const MAX_IN_FLIGHT = 3;
-let inFlight = 0;
-
-function isDev(): boolean {
-  return typeof __DEV__ !== "undefined" && __DEV__;
-}
-
-/** Last two path segments of a source path — "screens/ChatScreen.tsx". */
-function tailPath(file: string): string {
-  const clean = file.split("?")[0] ?? file;
-  const parts = clean.split("/").filter(Boolean);
-  return parts.slice(-2).join("/");
-}
-
-/** True for names like ChatScreen / PokemonScreen — reads as a component. */
-function looksLikeComponent(name: string): boolean {
-  return /^[A-Z][A-Za-z0-9]*$/.test(name);
-}
-
-export function buoyJsTopSymbolicateOrigin(
-  o: Origin,
-  apiLabelText: string,
-): void {
-  if (!isDev()) return;
-  if (o.symbolicated || !o.frames || o.frames.length === 0) return;
-  if (inFlight >= MAX_IN_FLIGHT) return; // retried implicitly? no — one shot
-  o.symbolicated = true;
-
-  const top = o.frames[0];
-  if (!top || !/^https?:\/\//.test(top.file)) return;
-  let endpoint: string;
-  try {
-    endpoint = `${new URL(top.file).origin}/symbolicate`;
-  } catch {
-    return;
-  }
-
-  inFlight++;
-  const body = JSON.stringify({
-    stack: o.frames.map((f) => ({
-      file: f.file,
-      lineNumber: f.line,
-      column: f.col,
-      methodName: "",
-    })),
-  });
-
-  fetch(endpoint, { method: "POST", body })
-    .then((res) => (res.ok ? res.json() : null))
-    .then(
-      (data: {
-        stack?: { file?: string; lineNumber?: number; methodName?: string }[];
-        error?: string;
-      } | null) => {
-        let frame = data?.stack?.find(
-          (f) => f.file && !f.file.includes("node_modules"),
-        ) ?? data?.stack?.[0];
-        // Some Metro configs (serialized source maps) reject full
-        // symbolication but still NAME the module in the error — that file
-        // path is exactly the scheduling site, so harvest it.
-        if (!frame?.file && data?.error) {
-          const m = /found: (\/.+)$/.exec(data.error);
-          if (m) frame = { file: m[1] };
-        }
-        if (!frame?.file) return;
-        const file = tailPath(frame.file);
-        const line = frame.lineNumber;
-        const method =
-          frame.methodName && frame.methodName !== "<unknown>"
-            ? frame.methodName
-            : undefined;
-        o.file = file;
-        o.line = line ?? o.line;
-        // The existing label is name-anchored — append the source site
-        // once, and promote a component-looking method name.
-        const site = `${file.split("/").pop()}${line != null ? `:${line}` : ""}`;
-        if (method && looksLikeComponent(method) && !o.caller) {
-          o.caller = method;
-          o.label = `${o.label} ← <${method}> · ${site}`;
-        } else {
-          o.label = `${o.label} · ${site}`;
-        }
-      },
-    )
-    .catch(() => {
-      // Symbolication is best-effort decoration — never surface failures.
-    })
-    .finally(() => {
-      inFlight--;
-    });
-}

package/src/js-top/sync/jsTopSyncAdapter.ts

@@ -1,72 +0,0 @@
-/**
- * Sync adapter for the JS TOP tool, consumed by @buoy-gg/external-sync's
- * `useExternalSync` (structurally matches its ToolSyncAdapter interface so
- * this package doesn't need a dependency on it — same pattern as
- * perf-monitor's adapter).
- *
- * `subscribe` is only called while a dashboard is watching, and subscribing
- * to JsTopController is exactly what starts the engine — so a desktop
- * watcher auto-starts sampling and closing the desktop tool stops it. The
- * snapshot IS the live channel; there is no heavy persisted state.
- */
-
-import { JsTopController } from "../engine/JsTopController";
-import type { JsTopSnapshot } from "../types";
-
-export const jsTopSyncAdapter = {
-  version: 1,
-  getSnapshot: (): { live: JsTopSnapshot; enabled: boolean } => ({
-    live: JsTopController.getSnapshot(),
-    // "enabled" mirrors perf-monitor semantics: is the device sampling for
-    // any viewer (its own HUD/modal or a desktop's silent remote sampling).
-    enabled:
-      JsTopController.isEnabled() || JsTopController.isRemoteSampling(),
-  }),
-  subscribe: (onChange: () => void) => {
-    const unsubSnapshot = JsTopController.subscribe(() => onChange());
-    const unsubEnabled = JsTopController.subscribeEnabled(() => onChange());
-    return () => {
-      unsubSnapshot();
-      unsubEnabled();
-    };
-  },
-  actions: {
-    /**
-     * Silent sampling for a desktop viewer: streams snapshots without
-     * showing the device's own HUD. (Subscribing via `subscribe` already
-     * runs the engine while watched; this exists so MCP / scripted callers
-     * can force sampling on without a watch.)
-     */
-    setEnabled: (params?: unknown) => {
-      const enabled = (params as { enabled: boolean }).enabled;
-      JsTopController.setRemoteSampling(enabled);
-    },
-    pause: () => JsTopController.pause(),
-    resume: () => JsTopController.resume(),
-    clear: () => JsTopController.clear(),
-    /** Full detail for one origin (desktop tap-through parity). */
-    getOriginDetail: (params?: unknown) =>
-      JsTopController.getOriginDetail((params as { key: string }).key),
-    /**
-     * One-shot sample for MCP/automation: ensure the engine is running,
-     * observe for `durationMs` (default 3s, capped 30s), return the
-     * resulting snapshot. `clearFirst` resets all stats before sampling so
-     * the result attributes exactly one interaction/window. Leaves sampling
-     * in its prior state.
-     */
-    sample: async (params: unknown) => {
-      const p = params as { durationMs?: number; clearFirst?: boolean };
-      const durationMs = Math.min(Math.max(p?.durationMs ?? 3000, 250), 30_000);
-      const wasSampling =
-        JsTopController.isRemoteSampling() || JsTopController.isEnabled();
-      if (!wasSampling) JsTopController.setRemoteSampling(true);
-      if (p?.clearFirst) JsTopController.clear();
-      try {
-        await new Promise((resolve) => setTimeout(resolve, durationMs));
-        return JsTopController.getSnapshot();
-      } finally {
-        if (!wasSampling) JsTopController.setRemoteSampling(false);
-      }
-    },
-  },
-};

package/src/js-top/types/index.ts

@@ -1,144 +0,0 @@
-/**
- * JS TOP — live Task Manager for the React Native JS thread.
- *
- * Attribution model: the engine wraps every JS-thread entry point it can
- * reach (timers, rAF, microtasks, Promise reactions, legacy-bridge call-ins)
- * and books EXCLUSIVE time per "origin" (the place a callback was scheduled
- * from). A high-frequency probe measures true thread occupancy; the gap
- * between measured busy time and attributed time is surfaced honestly as an
- * "unattributed" row rather than hidden.
- */
-
-/** Which entry-point API a task came through. */
-export type TaskApi =
-  | "timeout"
-  | "interval"
-  | "immediate"
-  | "raf"
-  | "microtask"
-  | "then"
-  | "bridge"
-  | "other"
-  | "unattributed";
-
-/** One captured stack frame from an origin's scheduling site (dev-readable). */
-export interface OriginStackFrame {
-  file: string;
-  line: number;
-  col: number;
-}
-
-/**
- * Which coverage tiers are live on this device. UIs gray out / banner what a
- * runtime can't see (e.g. bridge call-ins don't exist on bridgeless).
- */
-export interface JsTopTiers {
-  /** Tier 1: timers/rAF/queueMicrotask — always true once the engine runs. */
-  timers: boolean;
-  /** Tier 1.5: Promise.prototype reactions (async/await bodies excluded). */
-  promises: boolean;
-  /** Tier 2: legacy-bridge call-ins (absent on New Architecture). */
-  bridge: boolean;
-  /** PerformanceObserver('longtask') available on this runtime. */
-  longtask: boolean;
-}
-
-/** One row of the live table — a task origin ("process" in Task Manager terms). */
-export interface JsTopRow {
-  /** Stable identity (cheap or refined origin key). */
-  key: string;
-  /** Human label, e.g. `setInterval pollFeed` or `Promise.then @ api.ts:88`. */
-  label: string;
-  api: TaskApi;
-  /** Present once the origin was promoted and a scheduling site resolved. */
-  file?: string;
-  line?: number;
-  /** Exclusive ms booked in the rolling window (the default sort column). */
-  windowMs: number;
-  /** windowMs as a share of measured busy time in the same window, 0–100. */
-  pctOfBusy: number;
-  /** Exclusive ms since engine start / last clear. */
-  totalMs: number;
-  calls: number;
-  avgMs: number;
-  maxMs: number;
-  lastSeenAgoMs: number;
-  /** 50ms+ freezes attributed to this origin in the last 60s. */
-  freezes: number;
-  /** Worst attributed freeze duration in that window (0 when none). */
-  worstFreezeMs: number;
-}
-
-/** A 50ms+ blocking task reported by the runtime, with our best attribution. */
-export interface JsTopLongtask {
-  /** performance.now()-based start of the block. */
-  start: number;
-  duration: number;
-  /** Wall-clock time (Date.now()) the block was reported — for "Ns ago" UI. */
-  at: number;
-  /** Label of the wrapped origin that overlapped the block most, if any. */
-  originLabel: string | null;
-}
-
-/** The JSON-serializable live snapshot (device UI + external-sync payload). */
-export interface JsTopSnapshot {
-  ts: number;
-  paused: boolean;
-  /** Thread busy% over the rolling window, 0–100. */
-  busyPct: number;
-  /** Per-bucket busy% history, oldest→newest, ≤120 points (30s @ 250ms). */
-  busyHistory: number[];
-  tiers: JsTopTiers;
-  /** Top origins by windowMs, plus pinned "unattributed"/"other" rows. */
-  rows: JsTopRow[];
-  totals: {
-    attributedWindowMs: number;
-    unattributedWindowMs: number;
-    /** Wall span of the rolling window actually covered, in ms. */
-    windowMs: number;
-  };
-  /** Freezes (50ms+ blocks) over the trailing 60s — header summary chip. */
-  freezeSummary: { count: number; worstMs: number };
-  longtasks: JsTopLongtask[];
-}
-
-export type JsTopStatus = "disabled" | "running" | "paused";
-
-/** Everything the engine knows about one origin — the tap-through detail. */
-export interface JsTopOriginDetail {
-  key: string;
-  label: string;
-  api: TaskApi;
-  /** Scheduling site (present once the origin was promoted + captured). */
-  caller?: string;
-  file?: string;
-  line?: number;
-  frames?: OriginStackFrame[];
-  promoted: boolean;
-  /** Times a callback was scheduled from this site. */
-  scheduleCount: number;
-  /** Times a callback actually ran. */
-  calls: number;
-  totalMs: number;
-  avgMs: number;
-  maxMs: number;
-  windowMs: number;
-  pctOfBusy: number;
-  lastSeenAgoMs: number;
-  /** Exclusive ms per 250ms bucket, oldest→newest (the 5s trend). */
-  buckets: number[];
-  freezes: number;
-  worstFreezeMs: number;
-}
-
-/** Engine tuning constants — exported for tests. */
-export const BUCKET_MS = 250;
-/** Rolling "recent" window: 20 buckets = 5s. */
-export const WINDOW_BUCKETS = 20;
-/** Global busy history ring: 120 buckets = 30s. */
-export const HISTORY_BUCKETS = 120;
-export const MAX_ORIGINS = 500;
-/** Promotion thresholds: capture a scheduling stack once an origin is hot. */
-export const PROMOTE_MIN_CALLS = 25;
-export const PROMOTE_MIN_TOTAL_MS = 50;
-export const SNAPSHOT_ROWS = 30;

package/src/js-top/utils/preferences.ts

@@ -1,35 +0,0 @@
-/**
- * Persisted JS TOP preferences. Same load-then-save contract as
- * perf-monitor's hudPreferences: rehydrate async, and only persist
- * user-driven changes after the load resolves so defaults never clobber
- * last session's state.
- */
-
-import { persistentStorage } from "@buoy-gg/shared-ui";
-
-const KEY = "@react_buoy/js-top/prefs";
-
-interface JsTopPrefs {
-  enabled: boolean;
-}
-
-const DEFAULTS: JsTopPrefs = { enabled: false };
-
-export async function loadJsTopPrefs(): Promise<JsTopPrefs> {
-  try {
-    const raw = await persistentStorage.getItem(KEY);
-    if (!raw) return DEFAULTS;
-    const parsed = JSON.parse(raw) as Partial<JsTopPrefs>;
-    return { enabled: parsed.enabled === true };
-  } catch {
-    return DEFAULTS;
-  }
-}
-
-export async function saveJsTopPrefs(prefs: JsTopPrefs): Promise<void> {
-  try {
-    await persistentStorage.setItem(KEY, JSON.stringify(prefs));
-  } catch {
-    // Storage unavailable — non-fatal.
-  }
-}

package/src/preset.tsx

@@ -1,67 +0,0 @@
-/**
- * Pre-configured JS TOP tools for FloatingDevTools.
- *
- * Two presets:
- *  - jsTopPreset: toggle-only chip that turns the floating busy% pill on/off.
- *  - jsTopModalPreset: opens the Task Manager window (ranked live table).
- *
- * @example
- * ```tsx
- * import { jsTopPreset, jsTopModalPreset } from '@buoy-gg/js-top';
- *
- * <FloatingDevTools apps={[jsTopPreset, jsTopModalPreset]} />
- * ```
- */
-
-import { useEffect, useState } from "react";
-import { Activity } from "@buoy-gg/shared-ui";
-import { JsTopController } from "./js-top/engine/JsTopController";
-import { JsTopModal } from "./js-top/components/JsTopModal";
-
-export const JS_TOP_ENABLED_COLOR = "#34D399";
-export const JS_TOP_DISABLED_COLOR = "#6B7280";
-
-function JsTopToggleIcon({ size }: { size: number }) {
-  const [enabled, setEnabled] = useState(() => JsTopController.isEnabled());
-  useEffect(() => JsTopController.subscribeEnabled(setEnabled), []);
-  return (
-    <Activity
-      size={size}
-      color={enabled ? JS_TOP_ENABLED_COLOR : JS_TOP_DISABLED_COLOR}
-    />
-  );
-}
-
-function EmptyComponent() {
-  return null;
-}
-
-/** Toggle-only preset: show/hide the floating busy% pill. */
-export const jsTopPreset = {
-  id: "js-top",
-  name: "JS TOP",
-  description: "Toggle the floating JS-thread busy pill",
-  slot: "row" as const,
-  icon: JsTopToggleIcon,
-  component: EmptyComponent,
-  props: {},
-  launchMode: "toggle-only" as const,
-  onPress: () => {
-    JsTopController.setEnabled(!JsTopController.isEnabled());
-  },
-};
-
-/** Modal preset: the live Task Manager window. */
-export const jsTopModalPreset = {
-  id: "js-top-modal",
-  name: "TASKS",
-  description: "Live Task Manager for the JS thread",
-  slot: "both" as const,
-  icon: ({ size }: { size: number }) => (
-    <Activity size={size} color={JS_TOP_ENABLED_COLOR} />
-  ),
-  component: JsTopModal,
-  props: {
-    enableSharedModalDimensions: false,
-  },
-};