@buoy-gg/network 7.0.41 → 7.0.43

package/lib/module/network/components/NetworkHeaderLive.js

@@ -1,366 +1 @@
-"use strict";
-
-/**
- * The header pieces that consume LIVE event data, decomposed out of
- * NetworkModal per rule3 (decompose by responsibility) so each one is its
- * own narrow store subscriber and the modal root/header never re-render
- * per network event:
- *
- *  - `NetworkHeaderBadges` — success/error/pending count chips
- *  - `NetworkClearButton`  — trash button (enabled = store has events;
- *    clear handler co-located here per rule2)
- *  - `NetworkHeaderCopyButton` — copy-all button; the copy TEXT is
- *    resolved lazily at press time (CopyButton accepts a function value —
- *    rule2's latest-ref pattern), so no string is built per event
- *
- * Profiling evidence for this decomposition: tool-bench 2026-07-06 —
- * Trash2/CopyButton re-rendered 15× for 15 network events when the
- * subscription lived at the modal root.
- */
-
-import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { Bookmark, CheckCircle, XCircle, Clock, Copy, Pin, Trash2, CopyButton, macOSColors, night, useLimit, monoFont } from "@buoy-gg/shared-ui";
-import { networkEventStore } from "../utils/networkEventStore";
-import { flagsForEventId, networkSavedStore, MAX_PINNED, MAX_SAVED } from "../utils/networkSavedStore";
-import { useNetworkSaved } from "../hooks/useNetworkSaved";
-import { useSelectedNetworkEventId } from "../hooks/useNetworkSelection";
-import { useNetworkBadgeCounts } from "../hooks/useNetworkBadgeCounts";
-import { useNetworkHasEvents, useNetworkHasMatches } from "../hooks/useNetworkHasMatches";
-import { generateNetworkCopyText } from "../utils/generateNetworkCopyText";
-import { applyIgnoredPatterns, filterNetworkEvents } from "../utils/filterNetworkEvents";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/** Success / error / pending chips — tap to toggle the status filter. */
-export function NetworkHeaderBadges({
-  activeStatus,
-  onToggleStatus,
-  ignoredPatterns,
-  paused
-}) {
-  const counts = useNetworkBadgeCounts({
-    ignoredPatterns,
-    paused
-  });
-  return /*#__PURE__*/_jsx(NetworkHeaderBadgesView, {
-    counts: counts,
-    activeStatus: activeStatus,
-    onToggleStatus: onToggleStatus
-  });
-}
-/**
- * The chips themselves, fed by props — what the parity sheet renders with
- * fixture counts (`NetworkHeaderBadges` reads the live store).
- */
-export function NetworkHeaderBadgesView({
-  counts,
-  activeStatus,
-  onToggleStatus
-}) {
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.headerChipRow,
-    children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
-      style: [styles.headerChip, activeStatus === "success" && styles.headerChipActive],
-      onPress: () => onToggleStatus("success"),
-      children: [/*#__PURE__*/_jsx(CheckCircle, {
-        size: 12,
-        color: macOSColors.semantic.success
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.headerChipValue, {
-          color: macOSColors.semantic.success
-        }],
-        children: counts.successful
-      })]
-    }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-      style: [styles.headerChip, activeStatus === "error" && styles.headerChipActive],
-      onPress: () => onToggleStatus("error"),
-      children: [/*#__PURE__*/_jsx(XCircle, {
-        size: 12,
-        color: macOSColors.semantic.error
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.headerChipValue, {
-          color: macOSColors.semantic.error
-        }],
-        children: counts.failed
-      })]
-    }), /*#__PURE__*/_jsxs(TouchableOpacity, {
-      style: [styles.headerChip, activeStatus === "pending" && styles.headerChipActive],
-      onPress: () => onToggleStatus("pending"),
-      children: [/*#__PURE__*/_jsx(Clock, {
-        size: 12,
-        color: macOSColors.semantic.warning
-      }), /*#__PURE__*/_jsx(Text, {
-        style: [styles.headerChipValue, {
-          color: macOSColors.semantic.warning
-        }],
-        children: counts.pending
-      })]
-    })]
-  });
-}
-/** Trash button — handler co-located; enabled while the store has events.
- * Subscribes to a flip-guarded boolean, so it renders when the store goes
- * empty↔non-empty, not on every count change. */
-export function NetworkClearButton({
-  paused
-}) {
-  const hasEvents = useNetworkHasEvents({
-    paused
-  });
-  return /*#__PURE__*/_jsx(TouchableOpacity, {
-    "sentry-label": "ignore clear events",
-    testID: "buoy-network-clear",
-    accessibilityLabel: "Clear network requests",
-    accessibilityRole: "button",
-    onPress: () => networkEventStore.clearEvents(),
-    style: [styles.headerActionButton, !hasEvents && styles.headerActionButtonDisabled],
-    disabled: !hasEvents,
-    children: /*#__PURE__*/_jsx(Trash2, {
-      size: 14,
-      color: hasEvents ? night.color.textSecondary : night.color.textTertiary
-    })
-  });
-}
-/**
- * Entry point to the Saved screen, with its count. A self-subscribing leaf so
- * the badge tracks the store without the modal header re-rendering.
- */
-export function NetworkSavedButton({
-  onPress
-}) {
-  const {
-    savedRecords
-  } = useNetworkSaved();
-  const count = savedRecords.length;
-  return /*#__PURE__*/_jsxs(TouchableOpacity, {
-    "sentry-label": "ignore open saved",
-    onPress: onPress,
-    accessibilityLabel: "Saved requests",
-    style: styles.headerActionButton,
-    children: [/*#__PURE__*/_jsx(Bookmark, {
-      size: 14,
-      color: count > 0 ? night.color.accent : night.color.textSecondary
-    }), count > 0 ? /*#__PURE__*/_jsx(View, {
-      style: styles.savedBadge,
-      children: /*#__PURE__*/_jsx(Text, {
-        style: styles.savedBadgeText,
-        children: count > 99 ? "99+" : count
-      })
-    }) : null]
-  });
-}
-/**
- * Pin + Save toggles for the request-detail header.
- *
- * Lives here, as a self-subscribing leaf, for two reasons. First the usual
- * one: the modal root stays free of subscriptions. Second, and the real
- * constraint — these buttons deliberately do NOT go inside
- * `NetworkEventDetailView`, because the Events tool renders that same detail
- * view (UnifiedEventDetail) and has no saved store behind it. The header is
- * the Network tool's own surface, so the feature stays where it belongs.
- *
- * The event object is resolved at PRESS time rather than held as a prop: the
- * live store has the fresh copy while the request is in flight, and the saved
- * store is the only copy once it has been cleared or aged out.
- *
- * The selected id is SUBSCRIBED here rather than passed down, so stepping
- * through requests doesn't have to re-render the modal root just to rebuild
- * the header around a new prop.
- */
-export function NetworkDetailPinActions({
-  isPro,
-  onUpgradePress
-}) {
-  const eventId = useSelectedNetworkEventId();
-  const state = useNetworkSaved();
-  const {
-    pinned,
-    saved
-  } = flagsForEventId(state, eventId);
-  const savedLimit = useLimit("network.saved");
-  const atPinCap = !pinned && state.pinnedEvents.length >= MAX_PINNED;
-  const atSavedCap = !saved && state.savedRecords.length >= savedLimit;
-  const resolveEvent = () => {
-    if (!eventId) return null;
-    return networkEventStore.getEvents().find(event => event.id === eventId) ?? networkSavedStore.getEventById(eventId);
-  };
-  const handlePin = () => {
-    const event = resolveEvent();
-    if (event) state.togglePin(event);
-  };
-  const handleSave = () => {
-    // Hitting the free ceiling is an upgrade moment, not a dead button.
-    if (atSavedCap && !isPro) {
-      onUpgradePress();
-      return;
-    }
-    const event = resolveEvent();
-    if (event) state.toggleSave(event);
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-      "sentry-label": "ignore pin request",
-      onPress: handlePin,
-      disabled: atPinCap,
-      testID: "buoy-network-pin",
-      accessibilityRole: "button",
-      accessibilityLabel: pinned ? "Unpin request" : "Pin request",
-      accessibilityHint: atPinCap ? `Pin limit reached (${MAX_PINNED})` : undefined,
-      style: [styles.headerActionButton, pinned && styles.headerActionButtonActive, atPinCap && styles.headerActionButtonDisabled],
-      children: /*#__PURE__*/_jsx(Pin, {
-        size: 14,
-        active: pinned,
-        color: pinned ? night.color.accent : atPinCap ? night.color.textTertiary : night.color.textSecondary
-      })
-    }), /*#__PURE__*/_jsx(TouchableOpacity, {
-      "sentry-label": "ignore save request",
-      onPress: handleSave,
-      disabled: atSavedCap && isPro,
-      testID: "buoy-network-save",
-      accessibilityRole: "button",
-      accessibilityLabel: saved ? "Remove from saved" : "Save request",
-      accessibilityHint: atSavedCap && isPro ? `Saved limit reached (${MAX_SAVED})` : undefined,
-      style: [styles.headerActionButton, saved && styles.headerActionButtonSaved, atSavedCap && isPro && styles.headerActionButtonDisabled],
-      children: /*#__PURE__*/_jsx(Bookmark, {
-        size: 14,
-        color: saved ? night.color.accent : atSavedCap && isPro ? night.color.textTertiary : night.color.textSecondary
-      })
-    })]
-  });
-}
-/**
- * Copy-all-requests button. Subscribes to a flip-guarded boolean (its
- * enabled state); the copy text is generated at PRESS time from a live
- * store read, so there's no per-event work and no stale closure.
- */
-export function NetworkHeaderCopyButton({
-  isPro,
-  filter,
-  ignoredPatterns,
-  copySettings,
-  paused,
-  onUpgradePress,
-  label
-}) {
-  const hasEvents = useNetworkHasMatches({
-    filter,
-    ignoredPatterns,
-    paused
-  });
-  if (!isPro) {
-    return /*#__PURE__*/_jsxs(TouchableOpacity, {
-      "sentry-label": "ignore copy pro",
-      onPress: onUpgradePress,
-      style: [label ? styles.copyMenuRow : styles.headerActionButton, !hasEvents && styles.headerActionButtonDisabled],
-      disabled: !hasEvents,
-      children: [/*#__PURE__*/_jsx(Copy, {
-        size: 14,
-        color: hasEvents ? night.color.textSecondary : night.color.textTertiary
-      }), label ? /*#__PURE__*/_jsx(Text, {
-        style: styles.copyMenuLabel,
-        children: label
-      }) : null]
-    });
-  }
-  return /*#__PURE__*/_jsx(CopyButton
-  // Lazy value: resolved at copy time by CopyButton's latest-ref
-  // pattern, reading the LIVE store — no per-event work, no staleness.
-  , {
-    value: () => generateNetworkCopyText(filterNetworkEvents(applyIgnoredPatterns(networkEventStore.getEvents(), ignoredPatterns), filter), copySettings),
-    size: 14,
-    label: label,
-    buttonStyle: label ? styles.copyMenuRow : styles.headerActionButton,
-    labelStyle: styles.copyMenuLabel,
-    colors: {
-      idle: hasEvents ? night.color.textSecondary : night.color.textTertiary,
-      success: macOSColors.semantic.success,
-      error: macOSColors.semantic.error
-    },
-    disabled: !hasEvents
-  });
-}
-const styles = StyleSheet.create({
-  /** The overflow-menu variant: a full-width row, matching the other items. */
-  copyMenuRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 10,
-    paddingHorizontal: 6,
-    paddingVertical: 11,
-    justifyContent: "flex-start"
-  },
-  copyMenuLabel: {
-    fontSize: 13,
-    fontWeight: "600",
-    color: night.color.text
-  },
-  headerChipRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  /**
-   * Counter chips and toolbar buttons on the night dark-glass fill — the
-   * hairline outline barely registers on the star field, and the fill marks
-   * the active filter in the brand accent (the night selection language).
-   * Status glyph/count colors stay on the classic semantic palette on
-   * purpose — see getStatusColor in NetworkEventItemCompact.
-   */
-  headerChip: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 4,
-    backgroundColor: night.color.buttonSurface,
-    paddingHorizontal: 10,
-    paddingVertical: 5,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: night.color.border
-  },
-  headerChipActive: {
-    backgroundColor: night.color.accentSoft,
-    borderColor: night.color.accentBorderStrong
-  },
-  headerChipValue: {
-    fontSize: 12,
-    fontWeight: "600",
-    fontFamily: monoFont
-  },
-  headerActionButton: {
-    width: 32,
-    height: 32,
-    borderRadius: 8,
-    backgroundColor: night.color.buttonSurface,
-    borderWidth: 1,
-    borderColor: night.color.border,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  headerActionButtonDisabled: {
-    opacity: 0.55
-  },
-  headerActionButtonActive: {
-    backgroundColor: night.color.accentSoft,
-    borderColor: night.color.accentBorderStrong
-  },
-  headerActionButtonSaved: {
-    backgroundColor: night.color.accentSoft,
-    borderColor: night.color.accentBorderStrong
-  },
-  savedBadge: {
-    position: "absolute",
-    top: -3,
-    right: -3,
-    minWidth: 14,
-    height: 14,
-    paddingHorizontal: 3,
-    borderRadius: 7,
-    backgroundColor: night.color.accent,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  savedBadgeText: {
-    color: night.color.onAccent,
-    fontSize: 9,
-    fontWeight: "700",
-    fontFamily: monoFont
-  }
-});
+"use strict";import{StyleSheet as A,Text as g,TouchableOpacity as l,View as m}from"react-native";import{Bookmark as C,CheckCircle as z,XCircle as E,Clock as N,Copy as D,Pin as I,Trash2 as R,CopyButton as P,macOSColors as d,night as t,useLimit as H,monoFont as S}from"@buoy-gg/shared-ui";import{networkEventStore as v}from"../utils/networkEventStore";import{flagsForEventId as T,networkSavedStore as L,MAX_PINNED as w,MAX_SAVED as M}from"../utils/networkSavedStore";import{useNetworkSaved as B}from"../hooks/useNetworkSaved";import{useSelectedNetworkEventId as V}from"../hooks/useNetworkSelection";import{useNetworkBadgeCounts as j}from"../hooks/useNetworkBadgeCounts";import{useNetworkHasEvents as q,useNetworkHasMatches as F}from"../hooks/useNetworkHasMatches";import{generateNetworkCopyText as W}from"../utils/generateNetworkCopyText";import{applyIgnoredPatterns as _,filterNetworkEvents as X}from"../utils/filterNetworkEvents";import{jsx as o,jsxs as p,Fragment as O}from"react/jsx-runtime";export function NetworkHeaderBadges({activeStatus:n,onToggleStatus:i,ignoredPatterns:r,paused:s}){const a=j({ignoredPatterns:r,paused:s});return o(NetworkHeaderBadgesView,{counts:a,activeStatus:n,onToggleStatus:i})}export function NetworkHeaderBadgesView({counts:n,activeStatus:i,onToggleStatus:r}){return p(m,{style:e.headerChipRow,children:[p(l,{style:[e.headerChip,i==="success"&&e.headerChipActive],onPress:()=>r("success"),children:[o(z,{size:12,color:d.semantic.success}),o(g,{style:[e.headerChipValue,{color:d.semantic.success}],children:n.successful})]}),p(l,{style:[e.headerChip,i==="error"&&e.headerChipActive],onPress:()=>r("error"),children:[o(E,{size:12,color:d.semantic.error}),o(g,{style:[e.headerChipValue,{color:d.semantic.error}],children:n.failed})]}),p(l,{style:[e.headerChip,i==="pending"&&e.headerChipActive],onPress:()=>r("pending"),children:[o(N,{size:12,color:d.semantic.warning}),o(g,{style:[e.headerChipValue,{color:d.semantic.warning}],children:n.pending})]})]})}export function NetworkClearButton({paused:n}){const i=q({paused:n});return o(l,{"sentry-label":"ignore clear events",testID:"buoy-network-clear",accessibilityLabel:"Clear network requests",accessibilityRole:"button",onPress:()=>v.clearEvents(),style:[e.headerActionButton,!i&&e.headerActionButtonDisabled],disabled:!i,children:o(R,{size:14,color:i?t.color.textSecondary:t.color.textTertiary})})}export function NetworkSavedButton({onPress:n}){const{savedRecords:i}=B();const r=i.length;return p(l,{"sentry-label":"ignore open saved",onPress:n,accessibilityLabel:"Saved requests",style:e.headerActionButton,children:[o(C,{size:14,color:r>0?t.color.accent:t.color.textSecondary}),r>0?o(m,{style:e.savedBadge,children:o(g,{style:e.savedBadgeText,children:r>99?"99+":r})}):null]})}export function NetworkDetailPinActions({isPro:n,onUpgradePress:i}){const r=V();const s=B();const{pinned:a,saved:y}=T(s,r);const u=H("network.saved");const c=!a&&s.pinnedEvents.length>=w;const b=!y&&s.savedRecords.length>=u;const f=()=>{if(!r)return null;return v.getEvents().find(h=>h.id===r)??L.getEventById(r)};const k=()=>{const h=f();if(h)s.togglePin(h)};const x=()=>{if(b&&!n){i();return}const h=f();if(h)s.toggleSave(h)};return p(O,{children:[o(l,{"sentry-label":"ignore pin request",onPress:k,disabled:c,testID:"buoy-network-pin",accessibilityRole:"button",accessibilityLabel:a?"Unpin request":"Pin request",accessibilityHint:c?`Pin limit reached (${w})`:void 0,style:[e.headerActionButton,a&&e.headerActionButtonActive,c&&e.headerActionButtonDisabled],children:o(I,{size:14,active:a,color:a?t.color.accent:c?t.color.textTertiary:t.color.textSecondary})}),o(l,{"sentry-label":"ignore save request",onPress:x,disabled:b&&n,testID:"buoy-network-save",accessibilityRole:"button",accessibilityLabel:y?"Remove from saved":"Save request",accessibilityHint:b&&n?`Saved limit reached (${M})`:void 0,style:[e.headerActionButton,y&&e.headerActionButtonSaved,b&&n&&e.headerActionButtonDisabled],children:o(C,{size:14,color:y?t.color.accent:b&&n?t.color.textTertiary:t.color.textSecondary})})]})}export function NetworkHeaderCopyButton({isPro:n,filter:i,ignoredPatterns:r,copySettings:s,paused:a,onUpgradePress:y,label:u}){const c=F({filter:i,ignoredPatterns:r,paused:a});if(!n){return p(l,{"sentry-label":"ignore copy pro",onPress:y,style:[u?e.copyMenuRow:e.headerActionButton,!c&&e.headerActionButtonDisabled],disabled:!c,children:[o(D,{size:14,color:c?t.color.textSecondary:t.color.textTertiary}),u?o(g,{style:e.copyMenuLabel,children:u}):null]})}return o(P,{value:()=>W(X(_(v.getEvents(),r),i),s),size:14,label:u,buttonStyle:u?e.copyMenuRow:e.headerActionButton,labelStyle:e.copyMenuLabel,colors:{idle:c?t.color.textSecondary:t.color.textTertiary,success:d.semantic.success,error:d.semantic.error},disabled:!c})}const e=A.create({copyMenuRow:{flexDirection:"row",alignItems:"center",gap:10,paddingHorizontal:6,paddingVertical:11,justifyContent:"flex-start"},copyMenuLabel:{fontSize:13,fontWeight:"600",color:t.color.text},headerChipRow:{flexDirection:"row",alignItems:"center",gap:8},headerChip:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:t.color.buttonSurface,paddingHorizontal:10,paddingVertical:5,borderRadius:12,borderWidth:1,borderColor:t.color.border},headerChipActive:{backgroundColor:t.color.accentSoft,borderColor:t.color.accentBorderStrong},headerChipValue:{fontSize:12,fontWeight:"600",fontFamily:S},headerActionButton:{width:32,height:32,borderRadius:8,backgroundColor:t.color.buttonSurface,borderWidth:1,borderColor:t.color.border,alignItems:"center",justifyContent:"center"},headerActionButtonDisabled:{opacity:.55},headerActionButtonActive:{backgroundColor:t.color.accentSoft,borderColor:t.color.accentBorderStrong},headerActionButtonSaved:{backgroundColor:t.color.accentSoft,borderColor:t.color.accentBorderStrong},savedBadge:{position:"absolute",top:-3,right:-3,minWidth:14,height:14,paddingHorizontal:3,borderRadius:7,backgroundColor:t.color.accent,alignItems:"center",justifyContent:"center"},savedBadgeText:{color:t.color.onAccent,fontSize:9,fontWeight:"700",fontFamily:S}});