@buoy-gg/js-top 7.0.41 → 7.0.42

package/lib/module/js-top/components/TaskTable.js

@@ -1,353 +1 @@
-"use strict";
-
-/**
- * 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SORT_OPTIONS = [{
-  key: "windowMs",
-  title: "RECENT"
-}, {
-  key: "calls",
-  title: "CALLS"
-}, {
-  key: "avgMs",
-  title: "AVG"
-}, {
-  key: "maxMs",
-  title: "MAX"
-}, {
-  key: "totalMs",
-  title: "TOTAL"
-}];
-export const API_BADGE = {
-  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) {
-  return API_BADGE[api] ?? API_BADGE.other;
-}
-
-/** The row label minus its API prefix — the badge already says the API. */
-export function displayName(row) {
-  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) {
-  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) {
-  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 = /*#__PURE__*/memo(function TaskRow({
-  row,
-  rank,
-  onPress
-}) {
-  const badge = badgeFor(row.api);
-  const Wrapper = onPress ? TouchableOpacity : View;
-  return /*#__PURE__*/_jsxs(Wrapper, {
-    style: rowStyles.row,
-    ...(onPress ? {
-      onPress: () => onPress(row),
-      activeOpacity: 0.6
-    } : {}),
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: rowStyles.topLine,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: rowStyles.rank,
-        children: rank
-      }), /*#__PURE__*/_jsx(View, {
-        style: [rowStyles.badge, {
-          borderColor: badge.color,
-          backgroundColor: `${badge.color}1A`
-        }],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [rowStyles.badgeText, {
-            color: badge.color
-          }],
-          children: badge.text
-        })
-      }), /*#__PURE__*/_jsx(Text, {
-        style: rowStyles.name,
-        numberOfLines: 1,
-        children: displayName(row)
-      }), row.freezes > 0 && /*#__PURE__*/_jsxs(Text, {
-        style: [rowStyles.freezeBadge, row.worstFreezeMs >= 100 && rowStyles.freezeBadgeSevere],
-        children: ["\u26A0 \xD7", row.freezes]
-      }), /*#__PURE__*/_jsxs(Text, {
-        style: [rowStyles.windowMs, row.api !== "unattributed" && row.pctOfBusy >= 25 && {
-          color: row.pctOfBusy >= 50 ? macOSColors.semantic.error : macOSColors.semantic.warning
-        }],
-        children: [fmt(row.windowMs), /*#__PURE__*/_jsx(Text, {
-          style: rowStyles.unit,
-          children: " ms"
-        })]
-      }), /*#__PURE__*/_jsxs(Text, {
-        style: [rowStyles.pct, row.api === "unattributed" && rowStyles.pctMuted],
-        children: [Math.round(row.pctOfBusy), "%"]
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
-      style: rowStyles.subLine,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: rowStyles.barTrack,
-        children: /*#__PURE__*/_jsx(View, {
-          style: [rowStyles.barFill, {
-            width: `${Math.min(100, row.pctOfBusy)}%`,
-            backgroundColor: badge.color
-          }]
-        })
-      }), /*#__PURE__*/_jsx(Text, {
-        style: rowStyles.stats,
-        numberOfLines: 1,
-        children: statsLine(row)
-      })]
-    })]
-  });
-}, (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
-}) {
-  const [sortKey, setSortKey] = useState("windowMs");
-  const sorted = sortKey === "windowMs" ? rows : [...rows].sort((a, b) => b[sortKey] - a[sortKey]);
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.root,
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.sortRow,
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.sortLabel,
-        children: "SORT"
-      }), SORT_OPTIONS.map(o => /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: () => setSortKey(o.key),
-        style: [styles.sortChip, sortKey === o.key && styles.sortChipOn],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.sortChipText, sortKey === o.key && styles.sortChipTextOn],
-          children: o.title
-        })
-      }, o.key))]
-    }), /*#__PURE__*/_jsxs(ScrollView, {
-      style: styles.body,
-      children: [sorted.map((row, i) => /*#__PURE__*/_jsx(TaskRow, {
-        row: row,
-        rank: i + 1,
-        onPress: onSelectRow
-      }, row.key)), sorted.length === 0 && /*#__PURE__*/_jsx(Text, {
-        style: styles.empty,
-        children: "No tasks observed yet \u2014 interact with the app."
-      })]
-    })]
-  });
-}
-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"]
-  }
-});
-//# sourceMappingURL=TaskTable.js.map
+"use strict";import{memo as b,useState as x}from"react";import{ScrollView as M,StyleSheet as g,Text as l,TouchableOpacity as m,View as f}from"react-native";import{macOSColors as p,night as r}from"@buoy-gg/shared-ui";import{jsx as n,jsxs as s}from"react/jsx-runtime";const w=[{key:"windowMs",title:"RECENT"},{key:"calls",title:"CALLS"},{key:"avgMs",title:"AVG"},{key:"maxMs",title:"MAX"},{key:"totalMs",title:"TOTAL"}];export const API_BADGE={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(t){return API_BADGE[t]??API_BADGE.other}export function displayName(t){if(t.api==="unattributed")return"events \xB7 React \xB7 native call-ins";if(t.api==="other")return"evicted cold origins";const e=badgeFor(t.api).prefix;let i=t.label;if(e&&i.startsWith(e))i=i.slice(e.length);i=i.replace(/^[\s←@]+/,"").trim();return i.length>0?i:"anonymous"}function h(t){if(t>=1e4)return`${Math.round(t/1e3)}k`;if(t>=1e3)return`${(t/1e3).toFixed(1)}k`;if(t>=100)return`${Math.round(t)}`;return`${Math.round(t*10)/10}`}function S(t){if(t.calls<=0)return"measured by probe \xB7 not reachable from JS";return`${h(t.calls)} calls \xB7 avg ${h(t.avgMs)} \xB7 max ${h(t.maxMs)} \xB7 total ${h(t.totalMs)} ms`}const T=b(function t({row:e,rank:i,onPress:u}){const d=badgeFor(e.api);const a=u?m:f;return s(a,{style:o.row,...u?{onPress:()=>u(e),activeOpacity:.6}:{},children:[s(f,{style:o.topLine,children:[n(l,{style:o.rank,children:i}),n(f,{style:[o.badge,{borderColor:d.color,backgroundColor:`${d.color}1A`}],children:n(l,{style:[o.badgeText,{color:d.color}],children:d.text})}),n(l,{style:o.name,numberOfLines:1,children:displayName(e)}),e.freezes>0&&s(l,{style:[o.freezeBadge,e.worstFreezeMs>=100&&o.freezeBadgeSevere],children:["\u26A0 \xD7",e.freezes]}),s(l,{style:[o.windowMs,e.api!=="unattributed"&&e.pctOfBusy>=25&&{color:e.pctOfBusy>=50?p.semantic.error:p.semantic.warning}],children:[h(e.windowMs),n(l,{style:o.unit,children:" ms"})]}),s(l,{style:[o.pct,e.api==="unattributed"&&o.pctMuted],children:[Math.round(e.pctOfBusy),"%"]})]}),s(f,{style:o.subLine,children:[n(f,{style:o.barTrack,children:n(f,{style:[o.barFill,{width:`${Math.min(100,e.pctOfBusy)}%`,backgroundColor:d.color}]})}),n(l,{style:o.stats,numberOfLines:1,children:S(e)})]})]})},(t,e)=>t.rank===e.rank&&t.onPress===e.onPress&&t.row.key===e.row.key&&t.row.windowMs===e.row.windowMs&&t.row.calls===e.row.calls&&t.row.maxMs===e.row.maxMs&&t.row.totalMs===e.row.totalMs&&t.row.pctOfBusy===e.row.pctOfBusy&&t.row.freezes===e.row.freezes&&t.row.worstFreezeMs===e.row.worstFreezeMs);export function TaskTable({rows:t,onSelectRow:e}){const[i,u]=x("windowMs");const d=i==="windowMs"?t:[...t].sort((a,y)=>y[i]-a[i]);return s(f,{style:c.root,children:[s(f,{style:c.sortRow,children:[n(l,{style:c.sortLabel,children:"SORT"}),w.map(a=>n(m,{onPress:()=>u(a.key),style:[c.sortChip,i===a.key&&c.sortChipOn],children:n(l,{style:[c.sortChipText,i===a.key&&c.sortChipTextOn],children:a.title})},a.key))]}),s(M,{style:c.body,children:[d.map((a,y)=>n(T,{row:a,rank:y+1,onPress:e},a.key)),d.length===0&&n(l,{style:c.empty,children:"No tasks observed yet \u2014 interact with the app."})]})]})}const c=g.create({root:{flex:1,minHeight:0},sortRow:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:10,paddingVertical:6,borderBottomWidth:1,borderBottomColor:r.color.border,backgroundColor:r.color.surface},sortLabel:{color:r.color.textTertiary,fontSize:9,fontWeight:"700",letterSpacing:.5,marginRight:2},sortChip:{borderWidth:1,borderColor:r.color.border,borderRadius:4,paddingHorizontal:7,paddingVertical:3},sortChipOn:{borderColor:r.color.accentBorderStrong,backgroundColor:r.color.accentSoft},sortChipText:{color:r.color.textTertiary,fontSize:9,fontWeight:"600",fontVariant:["tabular-nums"]},sortChipTextOn:{color:r.color.accent},body:{flex:1},empty:{color:r.color.textTertiary,fontSize:12,textAlign:"center",paddingVertical:24}});const o=g.create({row:{paddingHorizontal:10,paddingVertical:8,borderBottomWidth:g.hairlineWidth,borderBottomColor:r.color.border,gap:5},topLine:{flexDirection:"row",alignItems:"center",gap:6},rank:{width:16,color:r.color.textTertiary,fontSize:10,fontVariant:["tabular-nums"]},badge:{borderWidth:1,borderRadius:3,paddingHorizontal:4,paddingVertical:1},badgeText:{fontSize:8,fontWeight:"700",letterSpacing:.4},name:{flex:1,color:r.color.text,fontSize:13,fontWeight:"500"},freezeBadge:{color:p.semantic.warning,fontSize:10,fontWeight:"700",fontVariant:["tabular-nums"]},freezeBadgeSevere:{color:p.semantic.error},windowMs:{color:r.color.text,fontSize:13,fontWeight:"700",fontVariant:["tabular-nums"]},unit:{color:r.color.textTertiary,fontSize:10,fontWeight:"400"},pct:{width:38,textAlign:"right",color:r.color.textSecondary,fontSize:12,fontWeight:"600",fontVariant:["tabular-nums"]},pctMuted:{color:r.color.textTertiary},subLine:{flexDirection:"row",alignItems:"center",gap:8,paddingLeft:22},barTrack:{width:72,height:4,borderRadius:2,backgroundColor:r.color.fillSecondary,overflow:"hidden"},barFill:{height:4,borderRadius:2,opacity:.85},stats:{flex:1,color:r.color.textTertiary,fontSize:10,fontVariant:["tabular-nums"]}});