@buoy-gg/js-top 7.0.29 → 7.0.31

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

@@ -1,350 +0,0 @@
-/**
- * TaskDetailView — the "inspect process" screen behind a row tap.
- *
- * Shows everything the engine knows about one origin: a 5s activity bar
- * chart (the per-origin bucket ring, rendered nowhere else), the full stat
- * grid (schedules vs runs, avg/max/total, freezes), the captured scheduling
- * site (caller + raw frames), and a plain-language explanation of what this
- * origin type means. Data refreshes with the modal's snapshot tick — the
- * parent re-renders us and we re-pull the detail.
- */
-
-import { memo } from "react";
-import { ScrollView, StyleSheet, Text, View } from "react-native";
-import { macOSColors, night, useSafeAreaInsets } from "@buoy-gg/shared-ui";
-import type { JsTopOriginDetail, TaskApi } from "../types";
-import { badgeFor, displayName } from "./TaskTable";
-
-const API_EXPLAINER: Record<string, string> = {
-  timeout:
-    "Work scheduled with setTimeout. Time shown is the callback's exclusive run time on the JS thread.",
-  interval:
-    "A repeating setInterval. One scheduling site, many runs — a hot interval is the classic silent JS-FPS killer.",
-  immediate:
-    "Work scheduled with setImmediate — runs at the end of the current event-loop turn.",
-  raf: "requestAnimationFrame work — runs once per frame while scheduled. Cost here directly trades against 60fps.",
-  microtask:
-    "queueMicrotask work — runs after the current task, before the thread yields.",
-  then: "Promise reaction (.then/.catch/.finally). Named by the function that attached the reaction. Note: async/await bodies bypass .then and land in the System row instead.",
-  bridge:
-    "A native→JS call-in over the legacy bridge (events, module callbacks), measured as its un-nested remainder.",
-  unattributed:
-    "Thread time the probe measured but no JS wrapper could claim: touch handlers, React commits, native call-ins, and async/await bodies. High here on New Architecture is normal — it's where UI work lives.",
-  other:
-    "Origins evicted from the table when the registry hit its cap — their totals are preserved here.",
-};
-
-function explainerFor(api: TaskApi): string {
-  return API_EXPLAINER[api] ?? API_EXPLAINER.other;
-}
-
-function fmt(n: number): string {
-  if (n >= 10_000) return `${Math.round(n / 1000)}k`;
-  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
-  if (n >= 100) return `${Math.round(n)}`;
-  return `${Math.round(n * 100) / 100}`;
-}
-
-function agoFmt(ms: number): string {
-  if (ms <= 0) return "—";
-  const sec = ms / 1000;
-  if (sec < 1) return "just now";
-  if (sec < 60) return `${Math.round(sec)}s ago`;
-  return `${Math.floor(sec / 60)}m ago`;
-}
-
-function Stat({ label, value, accent }: { label: string; value: string; accent?: string }) {
-  return (
-    <View style={styles.stat}>
-      <Text style={styles.statLabel}>{label}</Text>
-      <Text style={[styles.statValue, accent ? { color: accent } : null]}>
-        {value}
-      </Text>
-    </View>
-  );
-}
-
-export const TaskDetailView = memo(function TaskDetailView({
-  detail,
-}: {
-  detail: JsTopOriginDetail;
-}) {
-  const badge = badgeFor(detail.api);
-  const insets = useSafeAreaInsets({ minBottom: 12 });
-  const maxBucket = Math.max(1, ...detail.buckets);
-
-  return (
-    <ScrollView
-      style={styles.root}
-      contentContainerStyle={{ paddingBottom: insets.bottom }}
-    >
-      {/* Identity */}
-      <View style={styles.identityRow}>
-        <View
-          style={[
-            styles.badge,
-            { borderColor: badge.color, backgroundColor: `${badge.color}1A` },
-          ]}
-        >
-          <Text style={[styles.badgeText, { color: badge.color }]}>
-            {badge.text}
-          </Text>
-        </View>
-        <Text style={styles.name} numberOfLines={2}>
-          {displayName(detail)}
-        </Text>
-      </View>
-      <Text style={styles.explainer}>{explainerFor(detail.api)}</Text>
-
-      {/* 5s activity trend — the per-origin bucket ring */}
-      <Text style={styles.sectionTitle}>ACTIVITY · LAST 5S</Text>
-      <View style={styles.chartRow}>
-        {detail.buckets.map((ms, i) => (
-          <View key={`bk${i}`} style={styles.chartBarSlot}>
-            <View
-              style={[
-                styles.chartBar,
-                {
-                  height: Math.max(2, (ms / maxBucket) * 44),
-                  backgroundColor: badge.color,
-                },
-              ]}
-            />
-          </View>
-        ))}
-      </View>
-      <View style={styles.chartLegend}>
-        <Text style={styles.chartLegendText}>
-          {fmt(detail.windowMs)} ms in window · {detail.pctOfBusy.toFixed(1)}%
-          of busy time
-        </Text>
-        <Text style={styles.chartLegendText}>peak {fmt(maxBucket)} ms/250ms</Text>
-      </View>
-
-      {/* Stats */}
-      <Text style={styles.sectionTitle}>STATS · SINCE START</Text>
-      <View style={styles.statGrid}>
-        <Stat label="RUNS" value={detail.calls > 0 ? fmt(detail.calls) : "—"} />
-        <Stat
-          label="SCHEDULED"
-          value={detail.scheduleCount > 0 ? fmt(detail.scheduleCount) : "—"}
-        />
-        <Stat
-          label="AVG / RUN"
-          value={detail.calls > 0 ? `${fmt(detail.avgMs)} ms` : "—"}
-        />
-        <Stat
-          label="MAX / RUN"
-          value={detail.maxMs > 0 ? `${fmt(detail.maxMs)} ms` : "—"}
-          accent={
-            detail.maxMs >= 50 ? macOSColors.semantic.warning : undefined
-          }
-        />
-        <Stat
-          label="TOTAL"
-          value={detail.totalMs > 0 ? `${fmt(detail.totalMs)} ms` : "—"}
-        />
-        <Stat label="LAST RUN" value={agoFmt(detail.lastSeenAgoMs)} />
-        <Stat
-          label="FREEZES · 60S"
-          value={detail.freezes > 0 ? `${detail.freezes}` : "0"}
-          accent={
-            detail.freezes > 0 ? macOSColors.semantic.error : undefined
-          }
-        />
-        <Stat
-          label="WORST FREEZE"
-          value={detail.worstFreezeMs > 0 ? `${detail.worstFreezeMs} ms` : "—"}
-          accent={
-            detail.worstFreezeMs >= 100
-              ? macOSColors.semantic.error
-              : detail.worstFreezeMs > 0
-                ? macOSColors.semantic.warning
-                : undefined
-          }
-        />
-      </View>
-
-      {/* Scheduling site */}
-      {(detail.caller || (detail.frames?.length ?? 0) > 0) && (
-        <>
-          <Text style={styles.sectionTitle}>SCHEDULED FROM</Text>
-          <View style={styles.siteCard}>
-            {detail.caller && (
-              <Text style={styles.siteCaller}>{detail.caller}()</Text>
-            )}
-            {detail.file && (
-              <Text style={styles.siteFile}>
-                {detail.file}
-                {detail.line != null ? `:${detail.line}` : ""}
-              </Text>
-            )}
-            {detail.frames?.map((f, i) => (
-              <Text key={`fr${i}`} style={styles.siteFrame} numberOfLines={1}>
-                {f.file}:{f.line}:{f.col}
-              </Text>
-            ))}
-            <Text style={styles.siteNote}>
-              Frames are bundle offsets (Hermes) — the caller name above is the
-              readable part. Captured once when this origin got hot.
-            </Text>
-          </View>
-        </>
-      )}
-      {!detail.caller &&
-        (detail.frames?.length ?? 0) === 0 &&
-        detail.api !== "unattributed" &&
-        detail.api !== "other" && (
-          <>
-            <Text style={styles.sectionTitle}>SCHEDULED FROM</Text>
-            <Text style={styles.sitePending}>
-              {detail.promoted
-                ? "Stack capture pending — next schedule from this site will record it."
-                : "Not hot enough yet — the scheduling stack is captured once an origin passes 25 schedules or 50ms total."}
-            </Text>
-          </>
-        )}
-    </ScrollView>
-  );
-});
-
-const styles = StyleSheet.create({
-  root: {
-    flex: 1,
-    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
-    backgroundColor: "transparent",
-    paddingHorizontal: 12,
-  },
-  identityRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    paddingTop: 12,
-  },
-  badge: {
-    borderWidth: 1,
-    borderRadius: 3,
-    paddingHorizontal: 5,
-    paddingVertical: 2,
-  },
-  badgeText: {
-    fontSize: 9,
-    fontWeight: "700",
-    letterSpacing: 0.4,
-  },
-  name: {
-    flex: 1,
-    color: night.color.text,
-    fontSize: 15,
-    fontWeight: "600",
-  },
-  explainer: {
-    color: night.color.textTertiary,
-    fontSize: 11,
-    lineHeight: 15,
-    marginTop: 6,
-    marginBottom: 4,
-  },
-  sectionTitle: {
-    color: night.color.textTertiary,
-    fontSize: 9,
-    fontWeight: "700",
-    letterSpacing: 0.5,
-    marginTop: 14,
-    marginBottom: 6,
-  },
-  chartRow: {
-    flexDirection: "row",
-    alignItems: "flex-end",
-    height: 48,
-    gap: 2,
-    backgroundColor: night.color.surface,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    paddingHorizontal: 6,
-    paddingTop: 2,
-  },
-  chartBarSlot: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "flex-end",
-  },
-  chartBar: {
-    width: "70%",
-    borderTopLeftRadius: 2,
-    borderTopRightRadius: 2,
-    opacity: 0.9,
-  },
-  chartLegend: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    marginTop: 4,
-  },
-  chartLegendText: {
-    color: night.color.textTertiary,
-    fontSize: 10,
-    fontVariant: ["tabular-nums"],
-  },
-  statGrid: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 8,
-  },
-  stat: {
-    width: "23%",
-    minWidth: 76,
-    flexGrow: 1,
-    backgroundColor: night.color.surface,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    borderRadius: 6,
-    paddingHorizontal: 8,
-    paddingVertical: 6,
-  },
-  statLabel: {
-    color: night.color.textTertiary,
-    fontSize: 8,
-    fontWeight: "700",
-    letterSpacing: 0.4,
-    marginBottom: 3,
-  },
-  statValue: {
-    color: night.color.text,
-    fontSize: 13,
-    fontWeight: "600",
-    fontVariant: ["tabular-nums"],
-  },
-  siteCard: {
-    backgroundColor: night.color.surface,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    borderRadius: 6,
-    padding: 10,
-    gap: 3,
-  },
-  siteCaller: {
-    color: night.color.text,
-    fontSize: 13,
-    fontWeight: "600",
-  },
-  siteFile: {
-    color: night.color.info,
-    fontSize: 11,
-  },
-  siteFrame: {
-    color: night.color.textTertiary,
-    fontSize: 10,
-    fontVariant: ["tabular-nums"],
-  },
-  siteNote: {
-    color: night.color.textTertiary,
-    fontSize: 9,
-    opacity: 0.8,
-    marginTop: 4,
-  },
-  sitePending: {
-    color: night.color.textTertiary,
-    fontSize: 11,
-  },
-});

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

@@ -1,365 +0,0 @@
-/**
- * The ranked task table — the "process list".
- *
- * Row layout (phone-first): the API is a small colored badge and the FULL
- * width goes to the task name (the part that varies); numbers live on a
- * second stats line instead of fixed-width columns, so nothing truncates:
- *
- *   1  [INTERVAL] hotIntervalWork              1240 ms  41%
- *      ▓▓▓▓▓░░░░░  50 calls · avg 24.8 · max 31.0 · total 1.2k
- *
- * Sorting is a chip row above the list (column headers don't survive on a
- * narrow screen). Rows keyed by origin key (never index: rows re-rank every
- * tick) and memoized with a precise comparator so a tick only re-renders
- * rows whose numbers moved.
- */
-
-import { memo, useState } from "react";
-import {
-  ScrollView,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from "react-native";
-import { macOSColors, night } from "@buoy-gg/shared-ui";
-import type { JsTopRow, TaskApi } from "../types";
-
-export type SortKey = "windowMs" | "calls" | "avgMs" | "maxMs" | "totalMs";
-
-const SORT_OPTIONS: { key: SortKey; title: string }[] = [
-  { key: "windowMs", title: "RECENT" },
-  { key: "calls", title: "CALLS" },
-  { key: "avgMs", title: "AVG" },
-  { key: "maxMs", title: "MAX" },
-  { key: "totalMs", title: "TOTAL" },
-];
-
-export const API_BADGE: Record<
-  string,
-  { text: string; color: string; prefix?: string }
-> = {
-  timeout: { text: "TIMEOUT", color: "#38BDF8", prefix: "setTimeout" },
-  interval: { text: "INTERVAL", color: "#22D3EE", prefix: "setInterval" },
-  immediate: { text: "IMMED", color: "#60A5FA", prefix: "setImmediate" },
-  raf: { text: "RAF", color: "#34D399", prefix: "requestAnimationFrame" },
-  microtask: { text: "MICRO", color: "#A78BFA", prefix: "queueMicrotask" },
-  then: { text: "PROMISE", color: "#BF5AF2", prefix: "Promise.then" },
-  bridge: { text: "BRIDGE", color: "#FBBF24", prefix: "bridge" },
-  unattributed: { text: "SYSTEM", color: "#8E8E93" },
-  other: { text: "OTHER", color: "#8E8E93", prefix: "other" },
-};
-
-export function badgeFor(api: TaskApi) {
-  return API_BADGE[api] ?? API_BADGE.other;
-}
-
-/** The row label minus its API prefix — the badge already says the API. */
-export function displayName(row: { api: TaskApi; label: string }): string {
-  if (row.api === "unattributed") return "events · React · native call-ins";
-  if (row.api === "other") return "evicted cold origins";
-  const prefix = badgeFor(row.api).prefix;
-  let name = row.label;
-  if (prefix && name.startsWith(prefix)) name = name.slice(prefix.length);
-  name = name.replace(/^[\s←@]+/, "").trim();
-  return name.length > 0 ? name : "anonymous";
-}
-
-function fmt(n: number): string {
-  if (n >= 10_000) return `${Math.round(n / 1000)}k`;
-  if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;
-  if (n >= 100) return `${Math.round(n)}`;
-  return `${Math.round(n * 10) / 10}`;
-}
-
-function statsLine(row: JsTopRow): string {
-  if (row.calls <= 0) return "measured by probe · not reachable from JS";
-  return `${fmt(row.calls)} calls · avg ${fmt(row.avgMs)} · max ${fmt(row.maxMs)} · total ${fmt(row.totalMs)} ms`;
-}
-
-const TaskRow = memo(
-  function TaskRow({
-    row,
-    rank,
-    onPress,
-  }: {
-    row: JsTopRow;
-    rank: number;
-    onPress?: (row: JsTopRow) => void;
-  }) {
-    const badge = badgeFor(row.api);
-    const Wrapper = onPress ? TouchableOpacity : View;
-    return (
-      <Wrapper
-        style={rowStyles.row}
-        {...(onPress ? { onPress: () => onPress(row), activeOpacity: 0.6 } : {})}
-      >
-        <View style={rowStyles.topLine}>
-          <Text style={rowStyles.rank}>{rank}</Text>
-          <View
-            style={[
-              rowStyles.badge,
-              { borderColor: badge.color, backgroundColor: `${badge.color}1A` },
-            ]}
-          >
-            <Text style={[rowStyles.badgeText, { color: badge.color }]}>
-              {badge.text}
-            </Text>
-          </View>
-          <Text style={rowStyles.name} numberOfLines={1}>
-            {displayName(row)}
-          </Text>
-          {row.freezes > 0 && (
-            <Text
-              style={[
-                rowStyles.freezeBadge,
-                row.worstFreezeMs >= 100 && rowStyles.freezeBadgeSevere,
-              ]}
-            >
-              ⚠ ×{row.freezes}
-            </Text>
-          )}
-          <Text
-            style={[
-              rowStyles.windowMs,
-              row.api !== "unattributed" &&
-                row.pctOfBusy >= 25 && {
-                  color:
-                    row.pctOfBusy >= 50
-                      ? macOSColors.semantic.error
-                      : macOSColors.semantic.warning,
-                },
-            ]}
-          >
-            {fmt(row.windowMs)}
-            <Text style={rowStyles.unit}> ms</Text>
-          </Text>
-          <Text
-            style={[
-              rowStyles.pct,
-              row.api === "unattributed" && rowStyles.pctMuted,
-            ]}
-          >
-            {Math.round(row.pctOfBusy)}%
-          </Text>
-        </View>
-        <View style={rowStyles.subLine}>
-          <View style={rowStyles.barTrack}>
-            <View
-              style={[
-                rowStyles.barFill,
-                {
-                  width: `${Math.min(100, row.pctOfBusy)}%`,
-                  backgroundColor: badge.color,
-                },
-              ]}
-            />
-          </View>
-          <Text style={rowStyles.stats} numberOfLines={1}>
-            {statsLine(row)}
-          </Text>
-        </View>
-      </Wrapper>
-    );
-  },
-  (prev, next) =>
-    prev.rank === next.rank &&
-    prev.onPress === next.onPress &&
-    prev.row.key === next.row.key &&
-    prev.row.windowMs === next.row.windowMs &&
-    prev.row.calls === next.row.calls &&
-    prev.row.maxMs === next.row.maxMs &&
-    prev.row.totalMs === next.row.totalMs &&
-    prev.row.pctOfBusy === next.row.pctOfBusy &&
-    prev.row.freezes === next.row.freezes &&
-    prev.row.worstFreezeMs === next.row.worstFreezeMs,
-);
-
-export function TaskTable({
-  rows,
-  onSelectRow,
-}: {
-  rows: JsTopRow[];
-  /** Tap-through to the origin detail view. Rows are static when absent. */
-  onSelectRow?: (row: JsTopRow) => void;
-}) {
-  const [sortKey, setSortKey] = useState<SortKey>("windowMs");
-
-  const sorted =
-    sortKey === "windowMs"
-      ? rows
-      : [...rows].sort((a, b) => b[sortKey] - a[sortKey]);
-
-  return (
-    <View style={styles.root}>
-      <View style={styles.sortRow}>
-        <Text style={styles.sortLabel}>SORT</Text>
-        {SORT_OPTIONS.map((o) => (
-          <TouchableOpacity
-            key={o.key}
-            onPress={() => setSortKey(o.key)}
-            style={[styles.sortChip, sortKey === o.key && styles.sortChipOn]}
-          >
-            <Text
-              style={[
-                styles.sortChipText,
-                sortKey === o.key && styles.sortChipTextOn,
-              ]}
-            >
-              {o.title}
-            </Text>
-          </TouchableOpacity>
-        ))}
-      </View>
-      <ScrollView style={styles.body}>
-        {sorted.map((row, i) => (
-          <TaskRow key={row.key} row={row} rank={i + 1} onPress={onSelectRow} />
-        ))}
-        {sorted.length === 0 && (
-          <Text style={styles.empty}>
-            No tasks observed yet — interact with the app.
-          </Text>
-        )}
-      </ScrollView>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  root: { flex: 1, minHeight: 0 },
-  sortRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 10,
-    paddingVertical: 6,
-    borderBottomWidth: 1,
-    borderBottomColor: night.color.border,
-    backgroundColor: night.color.surface,
-  },
-  sortLabel: {
-    color: night.color.textTertiary,
-    fontSize: 9,
-    fontWeight: "700",
-    letterSpacing: 0.5,
-    marginRight: 2,
-  },
-  sortChip: {
-    borderWidth: 1,
-    borderColor: night.color.border,
-    borderRadius: 4,
-    paddingHorizontal: 7,
-    paddingVertical: 3,
-  },
-  sortChipOn: {
-    borderColor: night.color.accentBorderStrong,
-    backgroundColor: night.color.accentSoft,
-  },
-  sortChipText: {
-    color: night.color.textTertiary,
-    fontSize: 9,
-    fontWeight: "600",
-    fontVariant: ["tabular-nums"],
-  },
-  sortChipTextOn: { color: night.color.accent },
-  body: { flex: 1 },
-  empty: {
-    color: night.color.textTertiary,
-    fontSize: 12,
-    textAlign: "center",
-    paddingVertical: 24,
-  },
-});
-
-const rowStyles = StyleSheet.create({
-  row: {
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: night.color.border,
-    gap: 5,
-  },
-  topLine: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6,
-  },
-  rank: {
-    width: 16,
-    color: night.color.textTertiary,
-    fontSize: 10,
-    fontVariant: ["tabular-nums"],
-  },
-  badge: {
-    borderWidth: 1,
-    borderRadius: 3,
-    paddingHorizontal: 4,
-    paddingVertical: 1,
-  },
-  badgeText: {
-    fontSize: 8,
-    fontWeight: "700",
-    letterSpacing: 0.4,
-  },
-  name: {
-    flex: 1,
-    color: night.color.text,
-    fontSize: 13,
-    fontWeight: "500",
-  },
-  freezeBadge: {
-    color: macOSColors.semantic.warning,
-    fontSize: 10,
-    fontWeight: "700",
-    fontVariant: ["tabular-nums"],
-  },
-  freezeBadgeSevere: {
-    color: macOSColors.semantic.error,
-  },
-  windowMs: {
-    color: night.color.text,
-    fontSize: 13,
-    fontWeight: "700",
-    fontVariant: ["tabular-nums"],
-  },
-  unit: {
-    color: night.color.textTertiary,
-    fontSize: 10,
-    fontWeight: "400",
-  },
-  pct: {
-    width: 38,
-    textAlign: "right",
-    color: night.color.textSecondary,
-    fontSize: 12,
-    fontWeight: "600",
-    fontVariant: ["tabular-nums"],
-  },
-  pctMuted: {
-    color: night.color.textTertiary,
-  },
-  subLine: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    paddingLeft: 22,
-  },
-  barTrack: {
-    width: 72,
-    height: 4,
-    borderRadius: 2,
-    backgroundColor: night.color.fillSecondary,
-    overflow: "hidden",
-  },
-  barFill: {
-    height: 4,
-    borderRadius: 2,
-    opacity: 0.85,
-  },
-  stats: {
-    flex: 1,
-    color: night.color.textTertiary,
-    fontSize: 10,
-    fontVariant: ["tabular-nums"],
-  },
-});