@buoy-gg/js-top 7.0.3

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

@@ -0,0 +1,421 @@
+/**
+ * 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,
+  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={macOSColors.semantic.info} />
+          ) : (
+            <Pause size={14} color={macOSColors.text.secondary} />
+          )}
+        </TouchableOpacity>
+        <TouchableOpacity
+          onPress={actions.clear}
+          disabled={!hasData}
+          style={[styles.actionBtn, !hasData && styles.actionBtnDisabled]}
+          accessibilityLabel="Clear stats"
+        >
+          <Trash2
+            size={14}
+            color={hasData ? macOSColors.text.muted : macOSColors.text.muted}
+          />
+        </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: macOSColors.text.primary,
+    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: macOSColors.background.hover,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  actionBtnActive: {
+    backgroundColor: macOSColors.semantic.infoBackground,
+    borderColor: macOSColors.semantic.info + "40",
+  },
+  actionBtnDisabled: {
+    opacity: 0.55,
+  },
+  body: {
+    flex: 1,
+    minHeight: 0,
+    backgroundColor: macOSColors.background.base,
+  },
+  diagnosis: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginHorizontal: 10,
+    marginTop: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    backgroundColor: macOSColors.background.card,
+    borderRadius: 6,
+    borderLeftWidth: 3,
+  },
+  diagnosisIcon: {
+    fontSize: 11,
+    fontWeight: "700",
+  },
+  diagnosisText: {
+    flex: 1,
+    color: macOSColors.text.primary,
+    fontSize: 12,
+    lineHeight: 16,
+  },
+  sparklineRow: {
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    gap: 4,
+  },
+  sparklineCaption: {
+    color: macOSColors.text.muted,
+    fontSize: 8,
+    fontWeight: "700",
+    letterSpacing: 0.5,
+  },
+  tierBanner: {
+    color: macOSColors.text.muted,
+    fontSize: 10,
+    paddingHorizontal: 10,
+    paddingBottom: 6,
+  },
+  waiting: {
+    color: macOSColors.text.muted,
+    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,
+  },
+});