@buoy-gg/js-top 7.0.41 → 7.0.42

package/README.md

@@ -1,86 +1,27 @@
 <div align="center">
-  <h1>@buoy-gg/js-top</h1>
-  <p><b>A live Task Manager for the React Native JS thread.</b></p>
-  <p>See which timers, Promise chains, and callbacks are eating your JS FPS — ranked in real time, like Activity Monitor for your app's JS thread.</p>
-  <p>
-    <a href="https://buoy.gg/buoy/latest/docs/tools/js-top">Docs</a> ·
-    <a href="https://buoy.gg">buoy.gg</a>
-  </p>
-</div>
-
----
 
-JS Top ranks measured callback time. For example, a task table might look like this (illustrative values):
+# @buoy-gg/js-top
 
-```
-#  TASK ORIGIN                        5S MS   %BUSY  CALLS  AVG   MAX
-1  setInterval ← startPolling         1240    41.2   50     24.8  31.0
-2  Promise.then ← processTodos         610    20.3   10     61.0  75.2
-3  requestAnimationFrame ← rafLoop     402    13.4   300    1.3   4.1
-4  unattributed (events / React)       255     8.5   –      –     –
-```
+A live task manager for the React Native JS thread. It ranks which timers, Promise chains and callbacks are using your JS FPS.
 
-- **Pure JavaScript.** No native module, no debugger, no dev client — works in **Expo Go** and even release builds.
-- **Capture lifecycle.** The engine only runs while the tool is open (or a Buoy Desktop dashboard is watching).
-- **Honest accounting.** Exclusive-time bookkeeping (nested callbacks never double-count), a calibrated probe that estimates thread occupancy, and an explicit *unattributed* row for work no JS wrapper can see.
-- **Blocking-task attribution.** Every 50ms+ freeze (via React Native's `longtask` observer) is matched to the callback that overlapped it.
+<a href="https://buoy.gg/buoy/latest/docs/tools/js-top"><b>JS Top guide</b></a> &nbsp;·&nbsp; <a href="https://buoy.gg">buoy.gg</a> &nbsp;·&nbsp; <a href="https://github.com/Buoy-gg/buoy">All tools</a>
 
-## Install
+[![npm version](https://img.shields.io/npm/v/@buoy-gg/js-top?style=flat-square&labelColor=10302a&color=2a9d78)](https://www.npmjs.com/package/@buoy-gg/js-top) [![npm downloads](https://img.shields.io/npm/dm/@buoy-gg/js-top?style=flat-square&labelColor=10302a&color=2a9d78&label=downloads%2Fmonth)](https://www.npmjs.com/package/@buoy-gg/js-top)
 
-```bash
-npm install @buoy-gg/core @buoy-gg/js-top
-```
+<a href="https://buoy.gg/buoy/latest/docs/tools/js-top"><img src="https://raw.githubusercontent.com/Buoy-gg/buoy/main/.github/readme/tools/js-top.png" alt="Watch the JS Top film on buoy.gg" width="640" /></a>
 
-## Before you start
+</div>
 
-Use a development build with `@buoy-gg/core` and a Free or Pro Buoy account key. From your app’s directory, sign in:
+## Install
 
 ```bash
-npx --package=@buoy-gg/core buoy login
-```
-
-For Expo, initialize Buoy before rendering the menu:
-
-```tsx
-import { Buoy } from "@buoy-gg/core";
-
-Buoy.init({ licenseKey: process.env.EXPO_PUBLIC_BUOY_KEY });
-```
-
-The login command writes the Expo key to `.env.local`. For React Native CLI, pass the key from your app’s environment configuration; React Native does not load `.env.local` automatically. Mount `FloatingDevTools` inside the same providers as your screens and restart the development server after installation. The [Quick Start](https://buoy.gg/buoy/latest/docs/quick-start) shows the complete root component setup.
-
-After setup, open JS Top, run a known timer-driven interaction, and inspect the task table. Explicit registration:
-
-```tsx
-import { FloatingDevTools } from "@buoy-gg/core";
-import { jsTopPreset, jsTopModalPreset } from "@buoy-gg/js-top";
-
-<FloatingDevTools apps={[jsTopModalPreset, jsTopPreset]} />
+npm install @buoy-gg/core @buoy-gg/js-top
 ```
 
-## How it works
-
-You can't sample a blocked JS thread from JS — so JS Top doesn't sample. It wraps supported scheduling entry points (`setTimeout` / `setInterval` / `setImmediate` / `requestAnimationFrame` / `queueMicrotask` / Promise reactions / legacy-bridge call-ins) and deterministically times each callback, attributing cost to **where the callback was scheduled from** — with lazy stack capture so hot origins get named `setInterval ← startPolling` while limiting stack-capture work.
-
-On the New Architecture, touch/React-commit work enters through paths pure JS can't wrap; that time shows as *unattributed* (the in-tool banner explains). Work outside wrapped paths, including some async/await continuations and native entry points, can remain unattributed.
-
-## Desktop & AI
+JS Top is pure JavaScript with no native module. It only runs while the tool is open or Buoy Desktop is watching.
 
-To connect a React Native app to [Buoy Desktop](https://github.com/Buoy-gg/Buoy-Desktop) or MCP, install `@buoy-gg/external-sync` and follow the [Desktop connection guide](https://buoy.gg/buoy/latest/docs/desktop). Sign in to Desktop separately. [MCP setup](https://buoy.gg/buoy/latest/docs/mcp) also requires a process account and Pro access. Available remote actions depend on the tool and app integration.
+The [JS Top guide](https://buoy.gg/buoy/latest/docs/tools/js-top) covers setup, what it captures and its limits. New to Buoy? Start with the [Quick start](https://buoy.gg/buoy/latest/docs/quick-start).
 
-## Remote capabilities
-
-- The desktop dashboard mirrors the device's task table live, and adds a dev-only **per-function Hermes sampler** (attaches to Metro's inspector).
-- Via the Buoy MCP server, your AI agent can call `get_js_thread_top` — "why is JS FPS low?" becomes one tool call.
-
-## Account and plan requirements
-
-Use a Free or Pro Buoy account. History limits and paid features vary by tool; see [pricing](https://buoy.gg/pricing). Production access requires Pro where supported. Development-only hooks and actions remain unavailable in release builds.
-
-## License
-
-Part of [React Buoy](https://buoy.gg). See buoy.gg for licensing.
-
-## Web support (unreleased)
+---
 
-Register this package’s /web namespace in FloatingDevTools modules to use its shared panels and actions in a browser app. The browser build is available in this checkout and has not been published yet. See the [web setup guide](https://buoy.gg/buoy/latest/docs/web-preview) for registration, dependencies, and browser boundaries.
+<sub>Part of <a href="https://buoy.gg">Buoy</a>, developer tools that live inside your app. Proprietary software. © Buoy LLC. <a href="https://buoy.gg/terms">Terms</a></sub>

package/lib/commonjs/index.js

@@ -1,99 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "JS_TOP_DISABLED_COLOR", {
-  enumerable: true,
-  get: function () {
-    return _preset.JS_TOP_DISABLED_COLOR;
-  }
-});
-Object.defineProperty(exports, "JS_TOP_ENABLED_COLOR", {
-  enumerable: true,
-  get: function () {
-    return _preset.JS_TOP_ENABLED_COLOR;
-  }
-});
-Object.defineProperty(exports, "JsTopController", {
-  enumerable: true,
-  get: function () {
-    return _JsTopController.JsTopController;
-  }
-});
-Object.defineProperty(exports, "JsTopHudOverlay", {
-  enumerable: true,
-  get: function () {
-    return _JsTopHudOverlay.JsTopHudOverlay;
-  }
-});
-Object.defineProperty(exports, "JsTopModal", {
-  enumerable: true,
-  get: function () {
-    return _JsTopModal.JsTopModal;
-  }
-});
-Object.defineProperty(exports, "jsTopModalPreset", {
-  enumerable: true,
-  get: function () {
-    return _preset.jsTopModalPreset;
-  }
-});
-Object.defineProperty(exports, "jsTopPreset", {
-  enumerable: true,
-  get: function () {
-    return _preset.jsTopPreset;
-  }
-});
-Object.defineProperty(exports, "jsTopSyncAdapter", {
-  enumerable: true,
-  get: function () {
-    return _jsTopSyncAdapter.jsTopSyncAdapter;
-  }
-});
-var _JsTopController = require("./js-top/engine/JsTopController");
-var _promises = require("./js-top/engine/patches/promises");
-var _bridge = require("./js-top/engine/patches/bridge");
-var _timers = require("./js-top/engine/patches/timers");
-var _microtasks = require("./js-top/engine/patches/microtasks");
-var _longtasks = require("./js-top/engine/longtasks");
-var _jsTopSyncAdapter = require("./js-top/sync/jsTopSyncAdapter");
-var _JsTopModal = require("./js-top/components/JsTopModal");
-var _JsTopHudOverlay = require("./js-top/components/JsTopHudOverlay");
-var _preset = require("./preset");
-/**
- * @buoy-gg/js-top — live Task Manager for the React Native JS thread.
- *
- * Pure JS (Expo Go + release compatible): wraps timers / rAF / microtasks /
- * Promise reactions / legacy-bridge call-ins and books exclusive time per
- * scheduling origin; a calibrated busy probe measures true thread occupancy
- * so unattributable work is surfaced honestly instead of hidden.
- *
- * Coverage tiers beyond the core (promises, bridge, longtask correlation)
- * are registered here at module scope — the controller installs them lazily
- * on first engine start, so importing this package costs nothing until a
- * viewer opens the tool.
- */
-
-_JsTopController.JsTopController.registerTierInstaller(_promises.installPromisePatches);
-_JsTopController.JsTopController.registerTierInstaller(_bridge.installBridgePatch);
-_JsTopController.JsTopController.registerTierInstaller(_longtasks.installLongtaskObserver);
-_JsTopController.JsTopController.registerLongtaskProvider(_longtasks.getLongtasks);
-_JsTopController.JsTopController.registerFreezeStatsProvider(_longtasks.getFreezeStats);
-_JsTopController.JsTopController.registerClearHook(_longtasks.clearLongtasks);
-
-// Timer/microtask patches install at import so callbacks scheduled at APP
-// BOOT — the classic forgotten setInterval, the tool's #1 target — are
-// wrapped and attributable the moment any viewer opens the tool. Wrappers
-// resolve their origin lazily and cost one boolean per fire while the
-// engine is off. (Promise/bridge patches are more invasive and stay lazy —
-// they install on first engine start and cover work scheduled after it.)
-try {
-  if (typeof window !== "undefined") {
-    (0, _timers.installTimerPatches)();
-    (0, _microtasks.installMicrotaskPatches)();
-  }
-} catch {
-  // Never let instrumentation break an app at import time.
-}
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"JS_TOP_DISABLED_COLOR",{enumerable:true,get:function(){return _preset.JS_TOP_DISABLED_COLOR}});Object.defineProperty(exports,"JS_TOP_ENABLED_COLOR",{enumerable:true,get:function(){return _preset.JS_TOP_ENABLED_COLOR}});Object.defineProperty(exports,"JsTopController",{enumerable:true,get:function(){return _JsTopController.JsTopController}});Object.defineProperty(exports,"JsTopHudOverlay",{enumerable:true,get:function(){return _JsTopHudOverlay.JsTopHudOverlay}});Object.defineProperty(exports,"JsTopModal",{enumerable:true,get:function(){return _JsTopModal.JsTopModal}});Object.defineProperty(exports,"jsTopModalPreset",{enumerable:true,get:function(){return _preset.jsTopModalPreset}});Object.defineProperty(exports,"jsTopPreset",{enumerable:true,get:function(){return _preset.jsTopPreset}});Object.defineProperty(exports,"jsTopSyncAdapter",{enumerable:true,get:function(){return _jsTopSyncAdapter.jsTopSyncAdapter}});var _JsTopController=require("./js-top/engine/JsTopController");var _promises=require("./js-top/engine/patches/promises");var _bridge=require("./js-top/engine/patches/bridge");var _timers=require("./js-top/engine/patches/timers");var _microtasks=require("./js-top/engine/patches/microtasks");var _longtasks=require("./js-top/engine/longtasks");var _jsTopSyncAdapter=require("./js-top/sync/jsTopSyncAdapter");var _JsTopModal=require("./js-top/components/JsTopModal");var _JsTopHudOverlay=require("./js-top/components/JsTopHudOverlay");var _preset=require("./preset");_JsTopController.JsTopController.registerTierInstaller(_promises.installPromisePatches);_JsTopController.JsTopController.registerTierInstaller(_bridge.installBridgePatch);_JsTopController.JsTopController.registerTierInstaller(_longtasks.installLongtaskObserver);_JsTopController.JsTopController.registerLongtaskProvider(_longtasks.getLongtasks);_JsTopController.JsTopController.registerFreezeStatsProvider(_longtasks.getFreezeStats);_JsTopController.JsTopController.registerClearHook(_longtasks.clearLongtasks);try{if(typeof window!=="undefined"){(0,_timers.installTimerPatches)();(0,_microtasks.installMicrotaskPatches)()}}catch{}

package/lib/commonjs/js-top/components/BusySparkline.js

@@ -1,56 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BusySparkline = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Busy% history sparkline — plain View bars (no SVG dependency), tinted by
- * severity. Renders at most the trailing 60 buckets (15s).
- */
-
-const MAX_POINTS = 60;
-function barColor(pct) {
-  if (pct >= 80) return _sharedUi.macOSColors.semantic.error;
-  if (pct >= 40) return _sharedUi.macOSColors.semantic.warning;
-  return _sharedUi.macOSColors.semantic.success;
-}
-const BusySparkline = exports.BusySparkline = /*#__PURE__*/(0, _react.memo)(function BusySparkline({
-  history
-}) {
-  const points = history.slice(-MAX_POINTS);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.row,
-    pointerEvents: "none",
-    children: points.map((pct, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View
-    // Bars are positional by nature (a scrolling time axis); the array
-    // is fixed-length and rewritten wholesale each tick, so positional
-    // keys are correct here — this is not a prepend-list.
-    , {
-      style: [styles.bar, {
-        height: Math.max(2, pct / 100 * 28),
-        backgroundColor: barColor(pct)
-      }]
-    }, `b${i}`))
-  });
-});
-const styles = _reactNative.StyleSheet.create({
-  row: {
-    flexDirection: "row",
-    alignItems: "flex-end",
-    gap: 1,
-    height: 28,
-    alignSelf: "stretch"
-  },
-  bar: {
-    flex: 1,
-    maxWidth: 6,
-    borderRadius: 1,
-    opacity: 0.9
-  }
-});
-//# sourceMappingURL=BusySparkline.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.BusySparkline=void 0;var _react=require("react");var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _jsxRuntime=require("react/jsx-runtime");const MAX_POINTS=60;function barColor(e){if(e>=80)return _sharedUi.macOSColors.semantic.error;if(e>=40)return _sharedUi.macOSColors.semantic.warning;return _sharedUi.macOSColors.semantic.success}const BusySparkline=exports.BusySparkline=(0,_react.memo)(function e({history:t}){const i=t.slice(-MAX_POINTS);return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.row,pointerEvents:"none",children:i.map((r,a)=>(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.bar,{height:Math.max(2,r/100*28),backgroundColor:barColor(r)}]},`b${a}`))})});const styles=_reactNative.StyleSheet.create({row:{flexDirection:"row",alignItems:"flex-end",gap:1,height:28,alignSelf:"stretch"},bar:{flex:1,maxWidth:6,borderRadius:1,opacity:.9}});

package/lib/commonjs/js-top/components/JsTopHudOverlay.js

@@ -1,79 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.JsTopHudOverlay = JsTopHudOverlay;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _JsTopController = require("../engine/JsTopController");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Minimal floating HUD pill: busy% + the current top offender. Rendered by
- * FloatingDevTools (guarded require) when the JS TOP toggle chip is on —
- * same auto-mount pattern as the perf-monitor overlay. Display-only in v1
- * (no drag; sits under the status bar on the left).
- */
-
-function busyColor(pct) {
-  if (pct >= 80) return _sharedUi.macOSColors.semantic.error;
-  if (pct >= 40) return _sharedUi.macOSColors.semantic.warning;
-  return _sharedUi.macOSColors.semantic.success;
-}
-function JsTopHudOverlay() {
-  const [enabled, setEnabled] = (0, _react.useState)(() => _JsTopController.JsTopController.isEnabled());
-  const [snapshot, setSnapshot] = (0, _react.useState)(null);
-  (0, _react.useEffect)(() => _JsTopController.JsTopController.subscribeEnabled(setEnabled), []);
-  (0, _react.useEffect)(() => {
-    if (!enabled) {
-      setSnapshot(null);
-      return;
-    }
-    return _JsTopController.JsTopController.subscribe(setSnapshot);
-  }, [enabled]);
-  if (!enabled || !snapshot) return null;
-  const top = snapshot.rows.find(r => r.api !== "unattributed");
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.pill,
-    pointerEvents: "none",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-      style: [styles.busy, {
-        color: busyColor(snapshot.busyPct)
-      }],
-      children: [snapshot.busyPct.toFixed(0), "%"]
-    }), top && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: styles.label,
-      numberOfLines: 1,
-      children: top.label
-    })]
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  pill: {
-    position: "absolute",
-    top: 60,
-    left: 8,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    backgroundColor: _sharedUi.night.color.buttonSurface,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    borderRadius: 6,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    maxWidth: 220
-  },
-  busy: {
-    fontSize: 11,
-    fontWeight: "700",
-    fontVariant: ["tabular-nums"]
-  },
-  label: {
-    color: _sharedUi.night.color.textSecondary,
-    fontSize: 10,
-    flexShrink: 1
-  }
-});
-//# sourceMappingURL=JsTopHudOverlay.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.JsTopHudOverlay=JsTopHudOverlay;var _react=require("react");var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _JsTopController=require("../engine/JsTopController");var _jsxRuntime=require("react/jsx-runtime");function busyColor(e){if(e>=80)return _sharedUi.macOSColors.semantic.error;if(e>=40)return _sharedUi.macOSColors.semantic.warning;return _sharedUi.macOSColors.semantic.success}function JsTopHudOverlay(){const[e,n]=(0,_react.useState)(()=>_JsTopController.JsTopController.isEnabled());const[r,t]=(0,_react.useState)(null);(0,_react.useEffect)(()=>_JsTopController.JsTopController.subscribeEnabled(n),[]);(0,_react.useEffect)(()=>{if(!e){t(null);return}return _JsTopController.JsTopController.subscribe(t)},[e]);if(!e||!r)return null;const o=r.rows.find(s=>s.api!=="unattributed");return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.pill,pointerEvents:"none",children:[(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:[styles.busy,{color:busyColor(r.busyPct)}],children:[r.busyPct.toFixed(0),"%"]}),o&&(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.label,numberOfLines:1,children:o.label})]})}const styles=_reactNative.StyleSheet.create({pill:{position:"absolute",top:60,left:8,flexDirection:"row",alignItems:"center",gap:6,backgroundColor:_sharedUi.night.color.buttonSurface,borderWidth:1,borderColor:_sharedUi.night.color.border,borderRadius:6,paddingHorizontal:8,paddingVertical:4,maxWidth:220},busy:{fontSize:11,fontWeight:"700",fontVariant:["tabular-nums"]},label:{color:_sharedUi.night.color.textSecondary,fontSize:10,flexShrink:1}});