@buoy-gg/js-top 7.0.40 → 7.0.42

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

@@ -1,345 +1 @@
-"use strict";
-
-/**
- * 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 } from "@buoy-gg/shared-ui";
-import { JsTopController } from "../engine/JsTopController";
-import { BusySparkline } from "./BusySparkline";
-import { TaskTable } from "./TaskTable";
-import { TaskDetailView } from "./TaskDetailView";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-function busyColor(pct) {
-  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) {
-  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) {
-  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
-}) {
-  const isRemote = remoteSnapshot !== undefined;
-  const [localSnapshot, setLocalSnapshot] = useState(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(() => 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(null);
-  const onSelectRow = useCallback(row => 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 = /*#__PURE__*/_jsxs(ModalHeader, {
-    children: [inDetail ? /*#__PURE__*/_jsx(ModalHeader.Navigation, {
-      onBack: () => setDetailKey(null)
-    }) : onBack ? /*#__PURE__*/_jsx(ModalHeader.Navigation, {
-      onBack: onBack
-    }) : null, /*#__PURE__*/_jsx(ModalHeader.Content, {
-      title: "",
-      noMargin: true,
-      children: /*#__PURE__*/_jsxs(View, {
-        style: styles.titleRow,
-        children: [/*#__PURE__*/_jsx(Activity, {
-          size: 14,
-          color: "#34D399"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.title,
-          children: "JS Top"
-        }), snapshot && /*#__PURE__*/_jsx(View, {
-          style: [styles.busyPill, {
-            borderColor: busyColor(snapshot.busyPct)
-          }],
-          children: /*#__PURE__*/_jsxs(Text, {
-            style: [styles.busyText, {
-              color: busyColor(snapshot.busyPct)
-            }],
-            children: [snapshot.busyPct.toFixed(0), "% BUSY"]
-          })
-        }), snapshot && snapshot.freezeSummary.count > 0 && /*#__PURE__*/_jsx(View, {
-          style: [styles.busyPill, {
-            borderColor: freezeColor(snapshot.freezeSummary.worstMs)
-          }],
-          children: /*#__PURE__*/_jsxs(Text, {
-            style: [styles.busyText, {
-              color: freezeColor(snapshot.freezeSummary.worstMs)
-            }],
-            children: ["\u26A0 ", snapshot.freezeSummary.count, " \xB7", " ", snapshot.freezeSummary.worstMs, "ms"]
-          })
-        })]
-      })
-    }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
-      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: paused ? actions.resume : actions.pause,
-        style: [styles.actionBtn, paused && styles.actionBtnActive],
-        accessibilityLabel: paused ? "Resume sampling" : "Pause sampling",
-        children: paused ? /*#__PURE__*/_jsx(Play, {
-          size: 14,
-          color: night.color.accent
-        }) : /*#__PURE__*/_jsx(Pause, {
-          size: 14,
-          color: night.color.textSecondary
-        })
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        onPress: actions.clear,
-        disabled: !hasData,
-        style: [styles.actionBtn, !hasData && styles.actionBtnDisabled],
-        accessibilityLabel: "Clear stats",
-        children: /*#__PURE__*/_jsx(Trash2, {
-          size: 14,
-          color: hasData ? night.color.textTertiary : night.color.textTertiary
-        })
-      })]
-    })]
-  });
-  const body = /*#__PURE__*/_jsx(View, {
-    style: styles.body,
-    children: inDetail ? detail ? /*#__PURE__*/_jsx(TaskDetailView, {
-      detail: detail
-    }) : /*#__PURE__*/_jsx(Text, {
-      style: styles.waiting,
-      children: "This origin is no longer tracked (cleared or evicted)."
-    }) : snapshot ? /*#__PURE__*/_jsxs(_Fragment, {
-      children: [(() => {
-        const d = diagnose(snapshot);
-        return /*#__PURE__*/_jsxs(View, {
-          style: [styles.diagnosis, {
-            borderLeftColor: d.color
-          }],
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: [styles.diagnosisIcon, {
-              color: d.color
-            }],
-            children: d.icon
-          }), /*#__PURE__*/_jsx(Text, {
-            style: styles.diagnosisText,
-            children: d.text
-          })]
-        });
-      })(), /*#__PURE__*/_jsxs(View, {
-        style: styles.sparklineRow,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.sparklineCaption,
-          children: "JS THREAD LOAD \xB7 LAST 30s"
-        }), /*#__PURE__*/_jsx(BusySparkline, {
-          history: snapshot.busyHistory
-        })]
-      }), !snapshot.tiers.bridge && /*#__PURE__*/_jsx(Text, {
-        style: styles.tierBanner,
-        children: "\u201CSystem\u201D rows are UI/React/native work pure JS can\u2019t name \u2014 timers, rAF and Promise chains are fully attributed."
-      }), /*#__PURE__*/_jsx(TaskTable, {
-        rows: snapshot.rows,
-        onSelectRow: isRemote ? undefined : onSelectRow
-      })]
-    }) : /*#__PURE__*/_jsx(Text, {
-      style: styles.waiting,
-      children: isRemote ? "Waiting for device…" : "Starting engine…"
-    })
-  });
-  if (embedded) {
-    return /*#__PURE__*/_jsxs(View, {
-      style: styles.embeddedRoot,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: styles.embeddedHeader,
-        children: headerContent
-      }), body]
-    });
-  }
-  return /*#__PURE__*/_jsx(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: true,
-    children: body
-  });
-}
-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
-  }
-});
-//# sourceMappingURL=JsTopModal.js.map
+"use strict";import{useCallback as O,useEffect as V,useMemo as j,useState as P}from"react";import{StyleSheet as J,Text as a,TouchableOpacity as R,View as l}from"react-native";import{Activity as $,JsModal as F,macOSColors as n,night as i,ModalHeader as y,Pause as U,Play as K,Trash2 as _}from"@buoy-gg/shared-ui";import{JsTopController as g}from"../engine/JsTopController";import{BusySparkline as E}from"./BusySparkline";import{TaskTable as N}from"./TaskTable";import{TaskDetailView as Y}from"./TaskDetailView";import{jsx as e,jsxs as s,Fragment as q}from"react/jsx-runtime";function M(r){if(r>=80)return n.semantic.error;if(r>=40)return n.semantic.warning;return n.semantic.success}function S(r){return r>=100?n.semantic.error:n.semantic.warning}function G(r){const c=r.rows.find(m=>m.api!=="unattributed"&&m.api!=="other");if(c&&c.pctOfBusy>=25&&r.busyPct>=15){return{color:c.pctOfBusy>=50?n.semantic.error:n.semantic.warning,icon:"\u25B2",text:`${c.label} is eating ${Math.round(c.pctOfBusy)}% of thread time \u2014 start there.`}}if(r.freezeSummary.count>0){return{color:S(r.freezeSummary.worstMs),icon:"\u25B2",text:`${r.freezeSummary.count} freeze${r.freezeSummary.count===1?"":"s"} in the last 60s (worst ${r.freezeSummary.worstMs}ms) \u2014 check rows marked \u26A0.`}}if(r.busyPct>=80){return{color:n.semantic.warning,icon:"\u25B2",text:"Thread saturated by UI/React work \u2014 open Highlight Updates to find re-renders."}}return{color:n.semantic.success,icon:"\u25CF",text:`Thread healthy at ${Math.round(r.busyPct)}% load \u2014 nothing worth chasing.`}}export function JsTopModal({visible:r,onClose:c,onBack:m,onMinimize:D,initialModalState:H,minimizeTargetPosition:W,remoteSnapshot:w,remoteActions:x,embedded:A=false}){const d=w!==void 0;const[v,I]=P(null);V(()=>{if(d||!r)return;return g.subscribe(I)},[d,r]);const o=d?w:v;const h=j(()=>x??{pause:()=>g.pause(),resume:()=>g.resume(),clear:()=>g.clear()},[x]);const f=o?.paused??false;const b=(o?.rows.length??0)>0;const[p,z]=P(null);const L=O(u=>z(u.key),[]);const T=!d&&p?g.getOriginDetail(p):null;const C=p!==null;const B=s(y,{children:[C?e(y.Navigation,{onBack:()=>z(null)}):m?e(y.Navigation,{onBack:m}):null,e(y.Content,{title:"",noMargin:true,children:s(l,{style:t.titleRow,children:[e($,{size:14,color:"#34D399"}),e(a,{style:t.title,children:"JS Top"}),o&&e(l,{style:[t.busyPill,{borderColor:M(o.busyPct)}],children:s(a,{style:[t.busyText,{color:M(o.busyPct)}],children:[o.busyPct.toFixed(0),"% BUSY"]})}),o&&o.freezeSummary.count>0&&e(l,{style:[t.busyPill,{borderColor:S(o.freezeSummary.worstMs)}],children:s(a,{style:[t.busyText,{color:S(o.freezeSummary.worstMs)}],children:["\u26A0 ",o.freezeSummary.count," \xB7"," ",o.freezeSummary.worstMs,"ms"]})})]})}),s(y.Actions,{children:[e(R,{onPress:f?h.resume:h.pause,style:[t.actionBtn,f&&t.actionBtnActive],accessibilityLabel:f?"Resume sampling":"Pause sampling",children:f?e(K,{size:14,color:i.color.accent}):e(U,{size:14,color:i.color.textSecondary})}),e(R,{onPress:h.clear,disabled:!b,style:[t.actionBtn,!b&&t.actionBtnDisabled],accessibilityLabel:"Clear stats",children:e(_,{size:14,color:b?i.color.textTertiary:i.color.textTertiary})})]})]});const k=e(l,{style:t.body,children:C?T?e(Y,{detail:T}):e(a,{style:t.waiting,children:"This origin is no longer tracked (cleared or evicted)."}):o?s(q,{children:[(()=>{const u=G(o);return s(l,{style:[t.diagnosis,{borderLeftColor:u.color}],children:[e(a,{style:[t.diagnosisIcon,{color:u.color}],children:u.icon}),e(a,{style:t.diagnosisText,children:u.text})]})})(),s(l,{style:t.sparklineRow,children:[e(a,{style:t.sparklineCaption,children:"JS THREAD LOAD \xB7 LAST 30s"}),e(E,{history:o.busyHistory})]}),!o.tiers.bridge&&e(a,{style:t.tierBanner,children:"\u201CSystem\u201D rows are UI/React/native work pure JS can\u2019t name \u2014 timers, rAF and Promise chains are fully attributed."}),e(N,{rows:o.rows,onSelectRow:d?void 0:L})]}):e(a,{style:t.waiting,children:d?"Waiting for device\u2026":"Starting engine\u2026"})});if(A){return s(l,{style:t.embeddedRoot,children:[e(l,{style:t.embeddedHeader,children:B}),k]})}return e(F,{visible:r,onClose:c,onMinimize:D,minimizeTargetPosition:W,initialModalState:H,header:{showToggleButton:true,customContent:B},persistenceKey:"buoy-js-top-modal",enablePersistence:true,initialMode:"bottomSheet",disableScrollWrapper:true,children:k})}const t=J.create({titleRow:{flexDirection:"row",alignItems:"center",gap:8},title:{color:i.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:i.color.buttonSurface,borderWidth:1,borderColor:i.color.border,alignItems:"center",justifyContent:"center"},actionBtnActive:{backgroundColor:i.color.accentSoft,borderColor:i.color.accentBorderStrong},actionBtnDisabled:{opacity:.55},body:{flex:1,minHeight:0,backgroundColor:"transparent"},diagnosis:{flexDirection:"row",alignItems:"center",gap:8,marginHorizontal:10,marginTop:8,paddingHorizontal:10,paddingVertical:8,backgroundColor:i.color.surface,borderRadius:6,borderLeftWidth:3},diagnosisIcon:{fontSize:11,fontWeight:"700"},diagnosisText:{flex:1,color:i.color.text,fontSize:12,lineHeight:16},sparklineRow:{paddingHorizontal:10,paddingVertical:8,gap:4},sparklineCaption:{color:i.color.textTertiary,fontSize:8,fontWeight:"700",letterSpacing:.5},tierBanner:{color:i.color.textTertiary,fontSize:10,paddingHorizontal:10,paddingBottom:6},waiting:{color:i.color.textTertiary,fontSize:12,textAlign:"center",paddingVertical:32},embeddedRoot:{position:"absolute",top:0,left:0,right:0,bottom:0,backgroundColor:n.background.base},embeddedHeader:{borderBottomWidth:1,borderBottomColor:n.border.default}});

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

@@ -1,326 +1 @@
-"use strict";
-
-/**
- * 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 { badgeFor, displayName } from "./TaskTable";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-const API_EXPLAINER = {
-  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) {
-  return API_EXPLAINER[api] ?? API_EXPLAINER.other;
-}
-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 * 100) / 100}`;
-}
-function agoFmt(ms) {
-  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
-}) {
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.stat,
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: styles.statLabel,
-      children: label
-    }), /*#__PURE__*/_jsx(Text, {
-      style: [styles.statValue, accent ? {
-        color: accent
-      } : null],
-      children: value
-    })]
-  });
-}
-export const TaskDetailView = /*#__PURE__*/memo(function TaskDetailView({
-  detail
-}) {
-  const badge = badgeFor(detail.api);
-  const insets = useSafeAreaInsets({
-    minBottom: 12
-  });
-  const maxBucket = Math.max(1, ...detail.buckets);
-  return /*#__PURE__*/_jsxs(ScrollView, {
-    style: styles.root,
-    contentContainerStyle: {
-      paddingBottom: insets.bottom
-    },
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.identityRow,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: [styles.badge, {
-          borderColor: badge.color,
-          backgroundColor: `${badge.color}1A`
-        }],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.badgeText, {
-            color: badge.color
-          }],
-          children: badge.text
-        })
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.name,
-        numberOfLines: 2,
-        children: displayName(detail)
-      })]
-    }), /*#__PURE__*/_jsx(Text, {
-      style: styles.explainer,
-      children: explainerFor(detail.api)
-    }), /*#__PURE__*/_jsx(Text, {
-      style: styles.sectionTitle,
-      children: "ACTIVITY \xB7 LAST 5S"
-    }), /*#__PURE__*/_jsx(View, {
-      style: styles.chartRow,
-      children: detail.buckets.map((ms, i) => /*#__PURE__*/_jsx(View, {
-        style: styles.chartBarSlot,
-        children: /*#__PURE__*/_jsx(View, {
-          style: [styles.chartBar, {
-            height: Math.max(2, ms / maxBucket * 44),
-            backgroundColor: badge.color
-          }]
-        })
-      }, `bk${i}`))
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.chartLegend,
-      children: [/*#__PURE__*/_jsxs(Text, {
-        style: styles.chartLegendText,
-        children: [fmt(detail.windowMs), " ms in window \xB7 ", detail.pctOfBusy.toFixed(1), "% of busy time"]
-      }), /*#__PURE__*/_jsxs(Text, {
-        style: styles.chartLegendText,
-        children: ["peak ", fmt(maxBucket), " ms/250ms"]
-      })]
-    }), /*#__PURE__*/_jsx(Text, {
-      style: styles.sectionTitle,
-      children: "STATS \xB7 SINCE START"
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.statGrid,
-      children: [/*#__PURE__*/_jsx(Stat, {
-        label: "RUNS",
-        value: detail.calls > 0 ? fmt(detail.calls) : "—"
-      }), /*#__PURE__*/_jsx(Stat, {
-        label: "SCHEDULED",
-        value: detail.scheduleCount > 0 ? fmt(detail.scheduleCount) : "—"
-      }), /*#__PURE__*/_jsx(Stat, {
-        label: "AVG / RUN",
-        value: detail.calls > 0 ? `${fmt(detail.avgMs)} ms` : "—"
-      }), /*#__PURE__*/_jsx(Stat, {
-        label: "MAX / RUN",
-        value: detail.maxMs > 0 ? `${fmt(detail.maxMs)} ms` : "—",
-        accent: detail.maxMs >= 50 ? macOSColors.semantic.warning : undefined
-      }), /*#__PURE__*/_jsx(Stat, {
-        label: "TOTAL",
-        value: detail.totalMs > 0 ? `${fmt(detail.totalMs)} ms` : "—"
-      }), /*#__PURE__*/_jsx(Stat, {
-        label: "LAST RUN",
-        value: agoFmt(detail.lastSeenAgoMs)
-      }), /*#__PURE__*/_jsx(Stat, {
-        label: "FREEZES \xB7 60S",
-        value: detail.freezes > 0 ? `${detail.freezes}` : "0",
-        accent: detail.freezes > 0 ? macOSColors.semantic.error : undefined
-      }), /*#__PURE__*/_jsx(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
-      })]
-    }), (detail.caller || (detail.frames?.length ?? 0) > 0) && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.sectionTitle,
-        children: "SCHEDULED FROM"
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.siteCard,
-        children: [detail.caller && /*#__PURE__*/_jsxs(Text, {
-          style: styles.siteCaller,
-          children: [detail.caller, "()"]
-        }), detail.file && /*#__PURE__*/_jsxs(Text, {
-          style: styles.siteFile,
-          children: [detail.file, detail.line != null ? `:${detail.line}` : ""]
-        }), detail.frames?.map((f, i) => /*#__PURE__*/_jsxs(Text, {
-          style: styles.siteFrame,
-          numberOfLines: 1,
-          children: [f.file, ":", f.line, ":", f.col]
-        }, `fr${i}`)), /*#__PURE__*/_jsx(Text, {
-          style: styles.siteNote,
-          children: "Frames are bundle offsets (Hermes) \u2014 the caller name above is the readable part. Captured once when this origin got hot."
-        })]
-      })]
-    }), !detail.caller && (detail.frames?.length ?? 0) === 0 && detail.api !== "unattributed" && detail.api !== "other" && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: styles.sectionTitle,
-        children: "SCHEDULED FROM"
-      }), /*#__PURE__*/_jsx(Text, {
-        style: styles.sitePending,
-        children: 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."
-      })]
-    })]
-  });
-});
-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
-  }
-});
-//# sourceMappingURL=TaskDetailView.js.map
+"use strict";import{memo as y}from"react";import{ScrollView as x,StyleSheet as S,Text as n,View as s}from"react-native";import{macOSColors as u,night as o,useSafeAreaInsets as w}from"@buoy-gg/shared-ui";import{badgeFor as T,displayName as k}from"./TaskTable";import{jsx as r,jsxs as a,Fragment as g}from"react/jsx-runtime";const b={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 \u2014 a hot interval is the classic silent JS-FPS killer.",immediate:"Work scheduled with setImmediate \u2014 runs at the end of the current event-loop turn.",raf:"requestAnimationFrame work \u2014 runs once per frame while scheduled. Cost here directly trades against 60fps.",microtask:"queueMicrotask work \u2014 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\u2192JS 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 \u2014 it's where UI work lives.",other:"Origins evicted from the table when the registry hit its cap \u2014 their totals are preserved here."};function C(i){return b[i]??b.other}function d(i){if(i>=1e4)return`${Math.round(i/1e3)}k`;if(i>=1e3)return`${(i/1e3).toFixed(1)}k`;if(i>=100)return`${Math.round(i)}`;return`${Math.round(i*100)/100}`}function z(i){if(i<=0)return"\u2014";const e=i/1e3;if(e<1)return"just now";if(e<60)return`${Math.round(e)}s ago`;return`${Math.floor(e/60)}m ago`}function c({label:i,value:e,accent:l}){return a(s,{style:t.stat,children:[r(n,{style:t.statLabel,children:i}),r(n,{style:[t.statValue,l?{color:l}:null],children:e})]})}export const TaskDetailView=y(function i({detail:e}){const l=T(e.api);const p=w({minBottom:12});const f=Math.max(1,...e.buckets);return a(x,{style:t.root,contentContainerStyle:{paddingBottom:p.bottom},children:[a(s,{style:t.identityRow,children:[r(s,{style:[t.badge,{borderColor:l.color,backgroundColor:`${l.color}1A`}],children:r(n,{style:[t.badgeText,{color:l.color}],children:l.text})}),r(n,{style:t.name,numberOfLines:2,children:k(e)})]}),r(n,{style:t.explainer,children:C(e.api)}),r(n,{style:t.sectionTitle,children:"ACTIVITY \xB7 LAST 5S"}),r(s,{style:t.chartRow,children:e.buckets.map((h,m)=>r(s,{style:t.chartBarSlot,children:r(s,{style:[t.chartBar,{height:Math.max(2,h/f*44),backgroundColor:l.color}]})},`bk${m}`))}),a(s,{style:t.chartLegend,children:[a(n,{style:t.chartLegendText,children:[d(e.windowMs)," ms in window \xB7 ",e.pctOfBusy.toFixed(1),"% of busy time"]}),a(n,{style:t.chartLegendText,children:["peak ",d(f)," ms/250ms"]})]}),r(n,{style:t.sectionTitle,children:"STATS \xB7 SINCE START"}),a(s,{style:t.statGrid,children:[r(c,{label:"RUNS",value:e.calls>0?d(e.calls):"\u2014"}),r(c,{label:"SCHEDULED",value:e.scheduleCount>0?d(e.scheduleCount):"\u2014"}),r(c,{label:"AVG / RUN",value:e.calls>0?`${d(e.avgMs)} ms`:"\u2014"}),r(c,{label:"MAX / RUN",value:e.maxMs>0?`${d(e.maxMs)} ms`:"\u2014",accent:e.maxMs>=50?u.semantic.warning:void 0}),r(c,{label:"TOTAL",value:e.totalMs>0?`${d(e.totalMs)} ms`:"\u2014"}),r(c,{label:"LAST RUN",value:z(e.lastSeenAgoMs)}),r(c,{label:"FREEZES \xB7 60S",value:e.freezes>0?`${e.freezes}`:"0",accent:e.freezes>0?u.semantic.error:void 0}),r(c,{label:"WORST FREEZE",value:e.worstFreezeMs>0?`${e.worstFreezeMs} ms`:"\u2014",accent:e.worstFreezeMs>=100?u.semantic.error:e.worstFreezeMs>0?u.semantic.warning:void 0})]}),(e.caller||(e.frames?.length??0)>0)&&a(g,{children:[r(n,{style:t.sectionTitle,children:"SCHEDULED FROM"}),a(s,{style:t.siteCard,children:[e.caller&&a(n,{style:t.siteCaller,children:[e.caller,"()"]}),e.file&&a(n,{style:t.siteFile,children:[e.file,e.line!=null?`:${e.line}`:""]}),e.frames?.map((h,m)=>a(n,{style:t.siteFrame,numberOfLines:1,children:[h.file,":",h.line,":",h.col]},`fr${m}`)),r(n,{style:t.siteNote,children:"Frames are bundle offsets (Hermes) \u2014 the caller name above is the readable part. Captured once when this origin got hot."})]})]}),!e.caller&&(e.frames?.length??0)===0&&e.api!=="unattributed"&&e.api!=="other"&&a(g,{children:[r(n,{style:t.sectionTitle,children:"SCHEDULED FROM"}),r(n,{style:t.sitePending,children:e.promoted?"Stack capture pending \u2014 next schedule from this site will record it.":"Not hot enough yet \u2014 the scheduling stack is captured once an origin passes 25 schedules or 50ms total."})]})]})});const t=S.create({root:{flex:1,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:.4},name:{flex:1,color:o.color.text,fontSize:15,fontWeight:"600"},explainer:{color:o.color.textTertiary,fontSize:11,lineHeight:15,marginTop:6,marginBottom:4},sectionTitle:{color:o.color.textTertiary,fontSize:9,fontWeight:"700",letterSpacing:.5,marginTop:14,marginBottom:6},chartRow:{flexDirection:"row",alignItems:"flex-end",height:48,gap:2,backgroundColor:o.color.surface,borderRadius:6,borderWidth:1,borderColor:o.color.border,paddingHorizontal:6,paddingTop:2},chartBarSlot:{flex:1,alignItems:"center",justifyContent:"flex-end"},chartBar:{width:"70%",borderTopLeftRadius:2,borderTopRightRadius:2,opacity:.9},chartLegend:{flexDirection:"row",justifyContent:"space-between",marginTop:4},chartLegendText:{color:o.color.textTertiary,fontSize:10,fontVariant:["tabular-nums"]},statGrid:{flexDirection:"row",flexWrap:"wrap",gap:8},stat:{width:"23%",minWidth:76,flexGrow:1,backgroundColor:o.color.surface,borderWidth:1,borderColor:o.color.border,borderRadius:6,paddingHorizontal:8,paddingVertical:6},statLabel:{color:o.color.textTertiary,fontSize:8,fontWeight:"700",letterSpacing:.4,marginBottom:3},statValue:{color:o.color.text,fontSize:13,fontWeight:"600",fontVariant:["tabular-nums"]},siteCard:{backgroundColor:o.color.surface,borderWidth:1,borderColor:o.color.border,borderRadius:6,padding:10,gap:3},siteCaller:{color:o.color.text,fontSize:13,fontWeight:"600"},siteFile:{color:o.color.info,fontSize:11},siteFrame:{color:o.color.textTertiary,fontSize:10,fontVariant:["tabular-nums"]},siteNote:{color:o.color.textTertiary,fontSize:9,opacity:.8,marginTop:4},sitePending:{color:o.color.textTertiary,fontSize:11}});