@buoy-gg/js-top 7.0.28 → 7.0.30

package/package.json

@@ -1,19 +1,18 @@
 {
   "name": "@buoy-gg/js-top",
-  "version": "7.0.28",
+  "version": "7.0.30",
   "description": "Live Task Manager for the React Native JS thread — see which timers, Promises, and callbacks are eating your JS FPS, ranked in real time. Part of Buoy devtools.",
-  "main": "lib/commonjs/index",
-  "module": "lib/module/index",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
   "types": "lib/typescript/index.d.ts",
-  "react-native": "src/index.tsx",
+  "react-native": "lib/module/index.js",
   "source": "src/index.tsx",
   "files": [
-    "src",
     "lib"
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/shared-ui": "^7.0.28"
+    "@buoy-gg/shared-ui": "^7.0.30"
   },
   "peerDependencies": {
     "react": "*",

package/src/index.tsx

@@ -1,69 +0,0 @@
-/**
- * @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.
- */
-
-import { JsTopController } from "./js-top/engine/JsTopController";
-import { installPromisePatches } from "./js-top/engine/patches/promises";
-import { installBridgePatch } from "./js-top/engine/patches/bridge";
-import { installTimerPatches } from "./js-top/engine/patches/timers";
-import { installMicrotaskPatches } from "./js-top/engine/patches/microtasks";
-import {
-  clearLongtasks,
-  getFreezeStats,
-  getLongtasks,
-  installLongtaskObserver,
-} from "./js-top/engine/longtasks";
-
-JsTopController.registerTierInstaller(installPromisePatches);
-JsTopController.registerTierInstaller(installBridgePatch);
-JsTopController.registerTierInstaller(installLongtaskObserver);
-JsTopController.registerLongtaskProvider(getLongtasks);
-JsTopController.registerFreezeStatsProvider(getFreezeStats);
-JsTopController.registerClearHook(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 {
-  installTimerPatches();
-  installMicrotaskPatches();
-} catch {
-  // Never let instrumentation break an app at import time.
-}
-
-export { JsTopController } from "./js-top/engine/JsTopController";
-export { jsTopSyncAdapter } from "./js-top/sync/jsTopSyncAdapter";
-export { JsTopModal } from "./js-top/components/JsTopModal";
-export type {
-  JsTopModalProps,
-  JsTopRemoteActions,
-} from "./js-top/components/JsTopModal";
-export { JsTopHudOverlay } from "./js-top/components/JsTopHudOverlay";
-export {
-  jsTopPreset,
-  jsTopModalPreset,
-  JS_TOP_ENABLED_COLOR,
-  JS_TOP_DISABLED_COLOR,
-} from "./preset";
-export type {
-  JsTopSnapshot,
-  JsTopRow,
-  JsTopLongtask,
-  JsTopOriginDetail,
-  JsTopTiers,
-  JsTopStatus,
-  TaskApi,
-} from "./js-top/types";

package/src/js-top/components/BusySparkline.tsx

@@ -1,59 +0,0 @@
-/**
- * Busy% history sparkline — plain View bars (no SVG dependency), tinted by
- * severity. Renders at most the trailing 60 buckets (15s).
- */
-
-import { memo } from "react";
-import { StyleSheet, View } from "react-native";
-import { macOSColors } from "@buoy-gg/shared-ui";
-
-const MAX_POINTS = 60;
-
-function barColor(pct: number): string {
-  if (pct >= 80) return macOSColors.semantic.error;
-  if (pct >= 40) return macOSColors.semantic.warning;
-  return macOSColors.semantic.success;
-}
-
-export const BusySparkline = memo(function BusySparkline({
-  history,
-}: {
-  history: number[];
-}) {
-  const points = history.slice(-MAX_POINTS);
-  return (
-    <View style={styles.row} pointerEvents="none">
-      {points.map((pct, i) => (
-        <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.
-          key={`b${i}`}
-          style={[
-            styles.bar,
-            {
-              height: Math.max(2, (pct / 100) * 28),
-              backgroundColor: barColor(pct),
-            },
-          ]}
-        />
-      ))}
-    </View>
-  );
-});
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: "row",
-    alignItems: "flex-end",
-    gap: 1,
-    height: 28,
-    alignSelf: "stretch",
-  },
-  bar: {
-    flex: 1,
-    maxWidth: 6,
-    borderRadius: 1,
-    opacity: 0.9,
-  },
-});

package/src/js-top/components/JsTopHudOverlay.tsx

@@ -1,78 +0,0 @@
-/**
- * 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).
- */
-
-import { useEffect, useState } from "react";
-import { StyleSheet, Text, View } from "react-native";
-import { macOSColors, night } from "@buoy-gg/shared-ui";
-import type { JsTopSnapshot } from "../types";
-import { JsTopController } from "../engine/JsTopController";
-
-function busyColor(pct: number): string {
-  if (pct >= 80) return macOSColors.semantic.error;
-  if (pct >= 40) return macOSColors.semantic.warning;
-  return macOSColors.semantic.success;
-}
-
-export function JsTopHudOverlay() {
-  const [enabled, setEnabled] = useState(() => JsTopController.isEnabled());
-  const [snapshot, setSnapshot] = useState<JsTopSnapshot | null>(null);
-
-  useEffect(() => JsTopController.subscribeEnabled(setEnabled), []);
-
-  useEffect(() => {
-    if (!enabled) {
-      setSnapshot(null);
-      return;
-    }
-    return JsTopController.subscribe(setSnapshot);
-  }, [enabled]);
-
-  if (!enabled || !snapshot) return null;
-
-  const top = snapshot.rows.find((r) => r.api !== "unattributed");
-
-  return (
-    <View style={styles.pill} pointerEvents="none">
-      <Text style={[styles.busy, { color: busyColor(snapshot.busyPct) }]}>
-        {snapshot.busyPct.toFixed(0)}%
-      </Text>
-      {top && (
-        <Text style={styles.label} numberOfLines={1}>
-          {top.label}
-        </Text>
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  pill: {
-    position: "absolute",
-    top: 60,
-    left: 8,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    backgroundColor: night.color.buttonSurface,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    borderRadius: 6,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    maxWidth: 220,
-  },
-  busy: {
-    fontSize: 11,
-    fontWeight: "700",
-    fontVariant: ["tabular-nums"],
-  },
-  label: {
-    color: night.color.textSecondary,
-    fontSize: 10,
-    flexShrink: 1,
-  },
-});

package/src/js-top/components/JsTopModal.tsx

@@ -1,426 +0,0 @@
-/**
- * JS TOP modal — the Task Manager window.
- *
- * Layout: header (busy% pill + pause/clear controls) → busy sparkline →
- * coverage banner (when bridge tier is unavailable) → ranked task table →
- * blocking-task list.
- *
- * Data source is the local JsTopController by default. The desktop
- * dashboard mounts this same component via react-native-web and injects the
- * synced device snapshot + remote actions through `remoteSnapshot` /
- * `remoteActions` — the modal never samples the Electron renderer.
- */
-
-import { useCallback, useEffect, useMemo, useState } from "react";
-import {
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import {
-  Activity,
-  JsModal,
-  macOSColors,
-  night,
-  ModalHeader,
-  Pause,
-  Play,
-  Trash2,
-  type ModalState,
-} from "@buoy-gg/shared-ui";
-import type { JsTopSnapshot } from "../types";
-import type { JsTopRow } from "../types";
-import { JsTopController } from "../engine/JsTopController";
-import { BusySparkline } from "./BusySparkline";
-import { TaskTable } from "./TaskTable";
-import { TaskDetailView } from "./TaskDetailView";
-
-export interface JsTopRemoteActions {
-  pause: () => void;
-  resume: () => void;
-  clear: () => void;
-}
-
-export interface JsTopModalProps {
-  visible: boolean;
-  onClose: () => void;
-  /** App-stack back (from the floating menu's AppHost). */
-  onBack?: () => void;
-  onMinimize?: (modalState: ModalState) => void;
-  initialModalState?: ModalState;
-  minimizeTargetPosition?: { x: number; y: number };
-  enableSharedModalDimensions?: boolean;
-  /** Desktop dashboard: render from a synced device snapshot. */
-  remoteSnapshot?: JsTopSnapshot | null;
-  remoteActions?: JsTopRemoteActions;
-  /** Desktop Workbench: render inline, parent supplies window chrome. */
-  embedded?: boolean;
-}
-
-function busyColor(pct: number): string {
-  if (pct >= 80) return macOSColors.semantic.error;
-  if (pct >= 40) return macOSColors.semantic.warning;
-  return macOSColors.semantic.success;
-}
-
-/** ≥100ms is a dropped-tap-level freeze — escalate to red. */
-function freezeColor(worstMs: number): string {
-  return worstMs >= 100
-    ? macOSColors.semantic.error
-    : macOSColors.semantic.warning;
-}
-
-/**
- * The one-line answer to "what should I look at?" — rendered above the
- * table so triage never requires reading it. Priority: a named culprit >
- * freezes > saturated-by-UI-work > healthy.
- */
-function diagnose(s: JsTopSnapshot): {
-  color: string;
-  icon: string;
-  text: string;
-} {
-  const culprit = s.rows.find(
-    (r) => r.api !== "unattributed" && r.api !== "other",
-  );
-  if (culprit && culprit.pctOfBusy >= 25 && s.busyPct >= 15) {
-    return {
-      color:
-        culprit.pctOfBusy >= 50
-          ? macOSColors.semantic.error
-          : macOSColors.semantic.warning,
-      icon: "▲",
-      text: `${culprit.label} is eating ${Math.round(culprit.pctOfBusy)}% of thread time — start there.`,
-    };
-  }
-  if (s.freezeSummary.count > 0) {
-    return {
-      color: freezeColor(s.freezeSummary.worstMs),
-      icon: "▲",
-      text: `${s.freezeSummary.count} freeze${s.freezeSummary.count === 1 ? "" : "s"} in the last 60s (worst ${s.freezeSummary.worstMs}ms) — check rows marked ⚠.`,
-    };
-  }
-  if (s.busyPct >= 80) {
-    return {
-      color: macOSColors.semantic.warning,
-      icon: "▲",
-      text: "Thread saturated by UI/React work — open Highlight Updates to find re-renders.",
-    };
-  }
-  return {
-    color: macOSColors.semantic.success,
-    icon: "●",
-    text: `Thread healthy at ${Math.round(s.busyPct)}% load — nothing worth chasing.`,
-  };
-}
-
-export function JsTopModal({
-  visible,
-  onClose,
-  onBack,
-  onMinimize,
-  initialModalState,
-  minimizeTargetPosition,
-  remoteSnapshot,
-  remoteActions,
-  embedded = false,
-}: JsTopModalProps) {
-  const isRemote = remoteSnapshot !== undefined;
-  const [localSnapshot, setLocalSnapshot] = useState<JsTopSnapshot | null>(
-    null,
-  );
-
-  // Local mode: subscribing is what starts the engine (and unsubscribing on
-  // close is what stops it — zero overhead when the window isn't open).
-  useEffect(() => {
-    if (isRemote || !visible) return;
-    return JsTopController.subscribe(setLocalSnapshot);
-  }, [isRemote, visible]);
-
-  const snapshot = isRemote ? remoteSnapshot : localSnapshot;
-
-  const actions = useMemo<JsTopRemoteActions>(
-    () =>
-      remoteActions ?? {
-        pause: () => JsTopController.pause(),
-        resume: () => JsTopController.resume(),
-        clear: () => JsTopController.clear(),
-      },
-    [remoteActions],
-  );
-
-  const paused = snapshot?.paused ?? false;
-  const hasData = (snapshot?.rows.length ?? 0) > 0;
-
-  // Tap-through detail. Local mode re-pulls the detail on every snapshot
-  // tick (this component re-renders), so the detail view stays live.
-  // Remote mode (desktop) has no local engine — rows aren't tappable there.
-  const [detailKey, setDetailKey] = useState<string | null>(null);
-  const onSelectRow = useCallback(
-    (row: JsTopRow) => setDetailKey(row.key),
-    [],
-  );
-  const detail =
-    !isRemote && detailKey ? JsTopController.getOriginDetail(detailKey) : null;
-  const inDetail = detailKey !== null;
-
-  // Shared ModalHeader compound — same structure as Network/Events/Console:
-  // Content (brand icon + title + live busy pill) and 32px icon Actions.
-  // In the detail view the chevron pops back to the table.
-  const headerContent = (
-    <ModalHeader>
-      {inDetail ? (
-        <ModalHeader.Navigation onBack={() => setDetailKey(null)} />
-      ) : onBack ? (
-        <ModalHeader.Navigation onBack={onBack} />
-      ) : null}
-      <ModalHeader.Content title="" noMargin>
-        <View style={styles.titleRow}>
-          <Activity size={14} color="#34D399" />
-          <Text style={styles.title}>JS Top</Text>
-          {snapshot && (
-            <View
-              style={[
-                styles.busyPill,
-                { borderColor: busyColor(snapshot.busyPct) },
-              ]}
-            >
-              <Text
-                style={[
-                  styles.busyText,
-                  { color: busyColor(snapshot.busyPct) },
-                ]}
-              >
-                {snapshot.busyPct.toFixed(0)}% BUSY
-              </Text>
-            </View>
-          )}
-          {snapshot && snapshot.freezeSummary.count > 0 && (
-            <View
-              style={[
-                styles.busyPill,
-                { borderColor: freezeColor(snapshot.freezeSummary.worstMs) },
-              ]}
-            >
-              <Text
-                style={[
-                  styles.busyText,
-                  { color: freezeColor(snapshot.freezeSummary.worstMs) },
-                ]}
-              >
-                ⚠ {snapshot.freezeSummary.count} ·{" "}
-                {snapshot.freezeSummary.worstMs}ms
-              </Text>
-            </View>
-          )}
-        </View>
-      </ModalHeader.Content>
-      <ModalHeader.Actions>
-        <TouchableOpacity
-          onPress={paused ? actions.resume : actions.pause}
-          style={[styles.actionBtn, paused && styles.actionBtnActive]}
-          accessibilityLabel={paused ? "Resume sampling" : "Pause sampling"}
-        >
-          {paused ? (
-            <Play size={14} color={night.color.accent} />
-          ) : (
-            <Pause size={14} color={night.color.textSecondary} />
-          )}
-        </TouchableOpacity>
-        <TouchableOpacity
-          onPress={actions.clear}
-          disabled={!hasData}
-          style={[styles.actionBtn, !hasData && styles.actionBtnDisabled]}
-          accessibilityLabel="Clear stats"
-        >
-          <Trash2
-            size={14}
-            color={
-              hasData ? night.color.textTertiary : night.color.textTertiary
-            }
-          />
-        </TouchableOpacity>
-      </ModalHeader.Actions>
-    </ModalHeader>
-  );
-
-  const body = (
-    <View style={styles.body}>
-      {inDetail ? (
-        detail ? (
-          <TaskDetailView detail={detail} />
-        ) : (
-          <Text style={styles.waiting}>
-            This origin is no longer tracked (cleared or evicted).
-          </Text>
-        )
-      ) : snapshot ? (
-        <>
-          {(() => {
-            const d = diagnose(snapshot);
-            return (
-              <View style={[styles.diagnosis, { borderLeftColor: d.color }]}>
-                <Text style={[styles.diagnosisIcon, { color: d.color }]}>
-                  {d.icon}
-                </Text>
-                <Text style={styles.diagnosisText}>{d.text}</Text>
-              </View>
-            );
-          })()}
-          <View style={styles.sparklineRow}>
-            <Text style={styles.sparklineCaption}>
-              JS THREAD LOAD · LAST 30s
-            </Text>
-            <BusySparkline history={snapshot.busyHistory} />
-          </View>
-          {!snapshot.tiers.bridge && (
-            <Text style={styles.tierBanner}>
-              “System” rows are UI/React/native work pure JS can’t name —
-              timers, rAF and Promise chains are fully attributed.
-            </Text>
-          )}
-          <TaskTable
-            rows={snapshot.rows}
-            onSelectRow={isRemote ? undefined : onSelectRow}
-          />
-        </>
-      ) : (
-        <Text style={styles.waiting}>
-          {isRemote ? "Waiting for device…" : "Starting engine…"}
-        </Text>
-      )}
-    </View>
-  );
-
-  if (embedded) {
-    return (
-      <View style={styles.embeddedRoot}>
-        <View style={styles.embeddedHeader}>{headerContent}</View>
-        {body}
-      </View>
-    );
-  }
-
-  return (
-    <JsModal
-      visible={visible}
-      onClose={onClose}
-      onMinimize={onMinimize}
-      minimizeTargetPosition={minimizeTargetPosition}
-      initialModalState={initialModalState}
-      header={{ showToggleButton: true, customContent: headerContent }}
-      persistenceKey="buoy-js-top-modal"
-      enablePersistence={true}
-      initialMode="bottomSheet"
-      disableScrollWrapper
-    >
-      {body}
-    </JsModal>
-  );
-}
-
-const styles = StyleSheet.create({
-  titleRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-  },
-  title: {
-    color: night.color.text,
-    fontSize: 14,
-    fontWeight: "500",
-  },
-  busyPill: {
-    borderWidth: 1,
-    borderRadius: 4,
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-  },
-  busyText: {
-    fontSize: 10,
-    fontWeight: "700",
-    fontVariant: ["tabular-nums"],
-  },
-  actionBtn: {
-    width: 32,
-    height: 32,
-    borderRadius: 8,
-    backgroundColor: night.color.buttonSurface,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  actionBtnActive: {
-    backgroundColor: night.color.accentSoft,
-    borderColor: night.color.accentBorderStrong,
-  },
-  actionBtnDisabled: {
-    opacity: 0.55,
-  },
-  body: {
-    flex: 1,
-    minHeight: 0,
-    // Transparent so JsModal's ToolBackground shows through (the modal paints
-    // opaque base beneath it). The embedded path keeps `embeddedRoot`'s base fill.
-    backgroundColor: "transparent",
-  },
-  diagnosis: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginHorizontal: 10,
-    marginTop: 8,
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-    backgroundColor: night.color.surface,
-    borderRadius: 6,
-    borderLeftWidth: 3,
-  },
-  diagnosisIcon: {
-    fontSize: 11,
-    fontWeight: "700",
-  },
-  diagnosisText: {
-    flex: 1,
-    color: night.color.text,
-    fontSize: 12,
-    lineHeight: 16,
-  },
-  sparklineRow: {
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-    gap: 4,
-  },
-  sparklineCaption: {
-    color: night.color.textTertiary,
-    fontSize: 8,
-    fontWeight: "700",
-    letterSpacing: 0.5,
-  },
-  tierBanner: {
-    color: night.color.textTertiary,
-    fontSize: 10,
-    paddingHorizontal: 10,
-    paddingBottom: 6,
-  },
-  waiting: {
-    color: night.color.textTertiary,
-    fontSize: 12,
-    textAlign: "center",
-    paddingVertical: 32,
-  },
-  embeddedRoot: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: macOSColors.background.base,
-  },
-  embeddedHeader: {
-    borderBottomWidth: 1,
-    borderBottomColor: macOSColors.border.default,
-  },
-});