@buoy-gg/network 7.0.14 → 7.0.16

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

@@ -0,0 +1,598 @@
+"use strict";
+
+/**
+ * NetworkHeaderLive.web — DOM twin of NetworkHeaderLive.tsx.
+ *
+ * The header pieces that consume LIVE event data, each its own narrow store
+ * subscriber (same decomposition + hooks as native — `useNetworkBadgeCounts`,
+ * `useNetworkHasEvents`, `useNetworkSaved` are platform-free and reused, not
+ * forked):
+ *
+ *  - `NetworkHeaderBadges` — success/error/pending count chips (tap toggles
+ *    the status filter)
+ *  - `NetworkClearButton`  — trash button, enabled while the store has events
+ *  - `NetworkSavedButton`  — Saved-screen entry point with its live count
+ *  - `NetworkDetailPinActions` — pin + save toggles for the request-DETAIL
+ *    header (ported with the F3 detail-view feature; same flagsForEventId /
+ *    cap logic and press-time event resolution as native)
+ *  - `NetworkHeaderCopyButton` — copy-all button / labelled ⋯-menu row
+ *    (ported with the F5 saved+copy feature; the copy text is the SAME
+ *    platform-free `generateNetworkCopyText`, resolved lazily at press time
+ *    from a live store read, exactly like native)
+ *
+ * shared-ui RN chrome is replicated as DOM with provenance (web consumers
+ * resolve `@buoy-gg/shared-ui` to a minimal shim):
+ *  - `macOSColors` — inlined verbatim subset from
+ *    shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts.
+ *  - Icons — inline lucide SVGs (shared-ui's icons are lucide re-exports).
+ *  - The active chip's native shadow (shadowOffset 0/1, opacity 0.08,
+ *    radius 2) → an equivalent CSS box-shadow.
+ *  - shared-ui `CopyButton` (the Pro branch of the copy button) — inlined
+ *    labelled DOM twin below: same idle/success/error icon set, 1500ms
+ *    feedback, lazy function value, and label-follows-labelStyle behavior.
+ *
+ * Intentional deviations (all logged):
+ *  - shared-ui CopyButton's ClipboardHintBanner and internal
+ *    @buoy-gg/license Pro modal are not ported — license gating isn't part
+ *    of the web port; the explicit `isPro` prop branch (native's own outer
+ *    gate) still routes free users to `onUpgradePress`.
+ *  - `CopySettings` is imported from the platform-free
+ *    `generateNetworkCopyText` module (the native file imports it from
+ *    NetworkCopySettingsView.tsx, which would drag react-native in).
+ *
+ * @platform React DOM Web
+ */
+
+import { useEffect, useRef, useState } from "react";
+import { networkEventStore } from "../utils/networkEventStore";
+import { flagsForEventId, networkSavedStore, FREE_TIER_SAVED_LIMIT, 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";
+
+// =============================
+// Native palette (provenance)
+// =============================
+
+/** macOSColors subset — shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts, verbatim. */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const macOSColors = {
+  background: {
+    hover: "#1D1D1F"
+  },
+  border: {
+    default: "#2D2D2F"
+  },
+  text: {
+    primary: "#F5F5F7",
+    secondary: "#A1A1A6",
+    muted: "#8E8E93",
+    disabled: "#9E9EA0"
+  },
+  semantic: {
+    success: "#34C759",
+    error: "#FF453A",
+    warning: "#FFEB3B",
+    info: "#00B8E6",
+    infoBackground: "rgba(0, 184, 230, 0.1)",
+    debug: "#BF5AF2"
+  }
+};
+
+// =============================
+// Inline lucide icons (shared-ui icons are lucide re-exports)
+// =============================
+
+function Svg({
+  size = 14,
+  color = "currentColor",
+  children
+}) {
+  return /*#__PURE__*/_jsx("svg", {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: color,
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: {
+      flexShrink: 0,
+      display: "block"
+    },
+    children: children
+  });
+}
+const CheckCircle = p => /*#__PURE__*/_jsxs(Svg, {
+  ...p,
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M21.801 10A10 10 0 1 1 17 3.335"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "m9 11 3 3L22 4"
+  })]
+});
+const XCircle = p => /*#__PURE__*/_jsxs(Svg, {
+  ...p,
+  children: [/*#__PURE__*/_jsx("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "m15 9-6 6"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "m9 9 6 6"
+  })]
+});
+const Clock = p => /*#__PURE__*/_jsxs(Svg, {
+  ...p,
+  children: [/*#__PURE__*/_jsx("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/_jsx("polyline", {
+    points: "12 6 12 12 16 14"
+  })]
+});
+const Trash2 = p => /*#__PURE__*/_jsxs(Svg, {
+  ...p,
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M3 6h18"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+  }), /*#__PURE__*/_jsx("line", {
+    x1: "10",
+    x2: "10",
+    y1: "11",
+    y2: "17"
+  }), /*#__PURE__*/_jsx("line", {
+    x1: "14",
+    x2: "14",
+    y1: "11",
+    y2: "17"
+  })]
+});
+const Bookmark = p => /*#__PURE__*/_jsx(Svg, {
+  ...p,
+  children: /*#__PURE__*/_jsx("path", {
+    d: "m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z"
+  })
+});
+const Pin = p => /*#__PURE__*/_jsxs(Svg, {
+  ...p,
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M12 17v5"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1z"
+  })]
+});
+const Copy = p => /*#__PURE__*/_jsxs(Svg, {
+  ...p,
+  children: [/*#__PURE__*/_jsx("rect", {
+    width: "14",
+    height: "14",
+    x: "8",
+    y: "8",
+    rx: "2",
+    ry: "2"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"
+  })]
+});
+const CheckCircle2 = p => /*#__PURE__*/_jsxs(Svg, {
+  ...p,
+  children: [/*#__PURE__*/_jsx("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "m9 12 2 2 4-4"
+  })]
+});
+const AlertTriangle = p => /*#__PURE__*/_jsxs(Svg, {
+  ...p,
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M12 9v4"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M12 17h.01"
+  })]
+});
+/** Success / error / pending chips — tap to toggle the status filter. */
+export function NetworkHeaderBadges({
+  activeStatus,
+  onToggleStatus,
+  ignoredPatterns,
+  paused
+}) {
+  const counts = useNetworkBadgeCounts({
+    ignoredPatterns,
+    paused
+  });
+  return /*#__PURE__*/_jsxs("div", {
+    style: styles.headerChipRow,
+    children: [/*#__PURE__*/_jsxs("button", {
+      type: "button",
+      style: {
+        ...styles.headerChip,
+        ...(activeStatus === "success" ? styles.headerChipActive : null)
+      },
+      onClick: () => onToggleStatus("success"),
+      children: [/*#__PURE__*/_jsx(CheckCircle, {
+        size: 12,
+        color: macOSColors.semantic.success
+      }), /*#__PURE__*/_jsx("span", {
+        style: {
+          ...styles.headerChipValue,
+          color: macOSColors.semantic.success
+        },
+        children: counts.successful
+      })]
+    }), /*#__PURE__*/_jsxs("button", {
+      type: "button",
+      style: {
+        ...styles.headerChip,
+        ...(activeStatus === "error" ? styles.headerChipActive : null)
+      },
+      onClick: () => onToggleStatus("error"),
+      children: [/*#__PURE__*/_jsx(XCircle, {
+        size: 12,
+        color: macOSColors.semantic.error
+      }), /*#__PURE__*/_jsx("span", {
+        style: {
+          ...styles.headerChipValue,
+          color: macOSColors.semantic.error
+        },
+        children: counts.failed
+      })]
+    }), /*#__PURE__*/_jsxs("button", {
+      type: "button",
+      style: {
+        ...styles.headerChip,
+        ...(activeStatus === "pending" ? styles.headerChipActive : null)
+      },
+      onClick: () => onToggleStatus("pending"),
+      children: [/*#__PURE__*/_jsx(Clock, {
+        size: 12,
+        color: macOSColors.semantic.warning
+      }), /*#__PURE__*/_jsx("span", {
+        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("button", {
+    type: "button",
+    "aria-label": "Clear events",
+    onClick: () => networkEventStore.clearEvents(),
+    style: {
+      ...styles.headerActionButton,
+      ...(!hasEvents ? styles.headerActionButtonDisabled : null)
+    },
+    disabled: !hasEvents,
+    children: /*#__PURE__*/_jsx(Trash2, {
+      size: 14,
+      color: hasEvents ? macOSColors.text.muted : macOSColors.text.disabled
+    })
+  });
+}
+/**
+ * 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("button", {
+    type: "button",
+    onClick: onPress,
+    "aria-label": "Saved requests",
+    style: styles.headerActionButton,
+    children: [/*#__PURE__*/_jsx(Bookmark, {
+      size: 14,
+      color: count > 0 ? macOSColors.semantic.debug : macOSColors.text.muted
+    }), count > 0 ? /*#__PURE__*/_jsx("span", {
+      style: styles.savedBadge,
+      children: /*#__PURE__*/_jsx("span", {
+        style: styles.savedBadgeText,
+        children: count > 99 ? "99+" : count
+      })
+    }) : null]
+  });
+}
+/**
+ * Pin + Save toggles for the request-detail header — same self-subscribing
+ * leaf as native, for the same two reasons: the host root stays free of
+ * subscriptions, and these buttons deliberately do NOT live inside
+ * `NetworkEventDetailView` (the Events tool renders that same detail view
+ * with no saved store behind it).
+ *
+ * The event object is resolved at PRESS time (live store first, then the
+ * saved snapshot), and the selected id is SUBSCRIBED here rather than passed
+ * down, so stepping through requests doesn't rebuild the host header.
+ */
+export function NetworkDetailPinActions({
+  isPro,
+  onUpgradePress
+}) {
+  const eventId = useSelectedNetworkEventId();
+  const state = useNetworkSaved();
+  const {
+    pinned,
+    saved
+  } = flagsForEventId(state, eventId);
+  const savedLimit = isPro ? MAX_SAVED : FREE_TIER_SAVED_LIMIT;
+  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("button", {
+      type: "button",
+      onClick: handlePin,
+      disabled: atPinCap,
+      "aria-label": pinned ? "Unpin request" : "Pin request",
+      title: atPinCap ? `Pin limit reached (${MAX_PINNED})` : undefined,
+      style: {
+        ...styles.headerActionButton,
+        ...(pinned ? styles.headerActionButtonActive : null),
+        ...(atPinCap ? styles.headerActionButtonDisabled : null)
+      },
+      children: /*#__PURE__*/_jsx(Pin, {
+        size: 14,
+        color: pinned ? macOSColors.semantic.info : atPinCap ? macOSColors.text.disabled : macOSColors.text.secondary
+      })
+    }), /*#__PURE__*/_jsx("button", {
+      type: "button",
+      onClick: handleSave,
+      disabled: atSavedCap && isPro,
+      "aria-label": saved ? "Remove from saved" : "Save request",
+      title: atSavedCap && isPro ? `Saved limit reached (${MAX_SAVED})` : undefined,
+      style: {
+        ...styles.headerActionButton,
+        ...(saved ? styles.headerActionButtonSaved : null),
+        ...(atSavedCap && isPro ? styles.headerActionButtonDisabled : null)
+      },
+      children: /*#__PURE__*/_jsx(Bookmark, {
+        size: 14,
+        color: saved ? macOSColors.semantic.debug : atSavedCap && isPro ? macOSColors.text.disabled : macOSColors.text.secondary
+      })
+    })]
+  });
+}
+/**
+ * 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.
+ *
+ * The Pro branch inlines shared-ui CopyButton's copy/feedback loop (same
+ * icon set, 1500ms feedback, label keeps its own color while the icon
+ * follows the state — native's `labelStyle` wins over the state color).
+ */
+export function NetworkHeaderCopyButton({
+  isPro,
+  filter,
+  ignoredPatterns,
+  copySettings,
+  paused,
+  onUpgradePress,
+  label
+}) {
+  const hasEvents = useNetworkHasMatches({
+    filter,
+    ignoredPatterns,
+    paused
+  });
+  const [copyState, setCopyState] = useState("idle");
+  const timeoutRef = useRef(null);
+  useEffect(() => () => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+  }, []);
+  if (!isPro) {
+    return /*#__PURE__*/_jsxs("button", {
+      type: "button",
+      onClick: onUpgradePress,
+      style: {
+        ...(label ? styles.copyMenuRow : styles.headerActionButton),
+        ...(!hasEvents ? styles.headerActionButtonDisabled : null)
+      },
+      disabled: !hasEvents,
+      "aria-label": label ?? "Copy requests",
+      children: [/*#__PURE__*/_jsx(Copy, {
+        size: 14,
+        color: hasEvents ? macOSColors.text.secondary : macOSColors.text.disabled
+      }), label ? /*#__PURE__*/_jsx("span", {
+        style: styles.copyMenuLabel,
+        children: label
+      }) : null]
+    });
+  }
+  const settle = state => {
+    setCopyState(state);
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    // 1500ms — shared-ui CopyButton's `feedbackDuration` default.
+    timeoutRef.current = setTimeout(() => {
+      setCopyState("idle");
+      timeoutRef.current = null;
+    }, 1500);
+  };
+  const handleCopy = async () => {
+    try {
+      // Lazy value: resolved at copy time from the LIVE store — no per-event
+      // work, no staleness (native's CopyButton function-value contract).
+      const text = generateNetworkCopyText(filterNetworkEvents(applyIgnoredPatterns(networkEventStore.getEvents(), ignoredPatterns), filter), copySettings);
+      await navigator.clipboard.writeText(text);
+      settle("success");
+    } catch {
+      settle("error");
+    }
+  };
+  const iconColor = copyState === "success" ? macOSColors.semantic.success : copyState === "error" ? macOSColors.semantic.error : hasEvents ? macOSColors.text.secondary : macOSColors.text.disabled;
+  return /*#__PURE__*/_jsxs("button", {
+    type: "button",
+    onClick: copyState === "idle" ? handleCopy : undefined,
+    style: {
+      ...(label ? styles.copyMenuRow : styles.headerActionButton),
+      ...(!hasEvents ? styles.headerActionButtonDisabled : null)
+    },
+    disabled: !hasEvents,
+    "aria-label": copyState === "idle" ? label ?? "Copy to clipboard" : copyState === "success" ? "Copied to clipboard" : "Failed to copy",
+    children: [copyState === "success" ? /*#__PURE__*/_jsx(CheckCircle2, {
+      size: 14,
+      color: iconColor
+    }) : copyState === "error" ? /*#__PURE__*/_jsx(AlertTriangle, {
+      size: 14,
+      color: iconColor
+    }) : /*#__PURE__*/_jsx(Copy, {
+      size: 14,
+      color: iconColor
+    }), label ? /*#__PURE__*/_jsx("span", {
+      style: styles.copyMenuLabel,
+      children: label
+    }) : null]
+  });
+}
+
+// Values mirror the native StyleSheet block 1:1.
+const styles = {
+  /** The overflow-menu variant: a full-width row, matching the other items. */
+  copyMenuRow: {
+    display: "flex",
+    width: "100%",
+    boxSizing: "border-box",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    padding: "11px 6px",
+    justifyContent: "flex-start",
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    margin: 0,
+    fontFamily: "inherit",
+    textAlign: "left"
+  },
+  copyMenuLabel: {
+    fontSize: 13,
+    fontWeight: 600,
+    color: macOSColors.text.primary
+  },
+  headerChipRow: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  /**
+   * Counter chips and toolbar buttons carry a permanent outline; the fill
+   * marks the active filter.
+   */
+  headerChip: {
+    display: "inline-flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: macOSColors.background.hover,
+    padding: "5px 10px",
+    borderRadius: 12,
+    border: `1px solid ${macOSColors.border.default}`,
+    cursor: "pointer",
+    margin: 0
+  },
+  headerChipActive: {
+    backgroundColor: macOSColors.semantic.infoBackground,
+    border: `1px solid ${macOSColors.semantic.info}50`,
+    // Native: shadowColor info, offset 0/1, opacity 0.08, radius 2.
+    boxShadow: "0 1px 2px rgba(0, 184, 230, 0.08)"
+  },
+  headerChipValue: {
+    fontSize: 12,
+    fontWeight: 600,
+    fontFamily: "ui-monospace, Menlo, monospace"
+  },
+  headerActionButton: {
+    position: "relative",
+    display: "inline-flex",
+    width: 32,
+    height: 32,
+    boxSizing: "border-box",
+    borderRadius: 8,
+    backgroundColor: macOSColors.background.hover,
+    border: `1px solid ${macOSColors.border.default}`,
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer",
+    padding: 0,
+    margin: 0
+  },
+  headerActionButtonDisabled: {
+    opacity: 0.55,
+    cursor: "default"
+  },
+  headerActionButtonActive: {
+    backgroundColor: macOSColors.semantic.infoBackground,
+    border: `1px solid ${macOSColors.semantic.info}50`
+  },
+  headerActionButtonSaved: {
+    backgroundColor: `${macOSColors.semantic.debug}1A`,
+    border: `1px solid ${macOSColors.semantic.debug}50`
+  },
+  savedBadge: {
+    position: "absolute",
+    top: -3,
+    right: -3,
+    minWidth: 14,
+    height: 14,
+    boxSizing: "border-box",
+    padding: "0 3px",
+    borderRadius: 7,
+    backgroundColor: macOSColors.semantic.debug,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  savedBadgeText: {
+    color: "#FFFFFF",
+    fontSize: 9,
+    fontWeight: 700,
+    fontFamily: "ui-monospace, Menlo, monospace"
+  }
+};

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

@@ -162,7 +162,8 @@ export function NetworkListScreen({
   } = useNetworkEventList({
     filter,
     ignoredPatterns,
-    paused: paused || !visible,
+    paused,
+    visible,
     isPro
   });