@buoy-gg/network 7.0.4 → 7.0.5

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

@@ -1,6 +1,6 @@
 "use strict";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from "react-native";
 import { Clock, Upload, Download, AlertCircle, ChevronDown, ChevronUp, Lock, Unlock, FileJson, Filter, Globe, Link, Copy, InlineCopyButton, macOSColors, useFeatureGate, UpgradeModal } from "@buoy-gg/shared-ui";
 import { formatBytes, formatDuration, formatHttpStatus } from "../utils/formatting";
@@ -8,13 +8,86 @@ import { formatRelativeTime } from "@buoy-gg/shared-ui";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
 import { formatGraphQLDisplay } from "../utils/formatGraphQLVariables";
 import { useNetworkBodyResolver } from "../sync/networkBodyResolver";
+
+/**
+ * Colour for the icons that merely LABEL a section (Sent/Received, the JSON
+ * body glyphs). The Lock/Unlock pair keeps its colour because
+ * secure-vs-insecure is a genuine signal, as does the status pill.
+ */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const NEUTRAL_ICON = macOSColors.semantic.success;
+/**
+ * The measurable slice of a request's lifetime, as proportional bars.
+ *
+ * Renders NOTHING when the interceptor couldn't measure it — an older device
+ * talking to a newer dashboard, or a request that died before headers. A phase
+ * row reading `0ms` would claim we measured zero, which is a different and
+ * false statement from "we didn't measure this".
+ *
+ * Only two phases, on purpose. Queueing / DNS / TLS / request-send all happen
+ * below the JS layer with nothing to read them from — see NetworkTimings. The
+ * design this came from shows five, but derives the other three by multiplying
+ * the total by fixed fractions, i.e. they are invented. Two real ones are worth
+ * more than five where three are decoration.
+ */
+const TimingPhases = ({
+  timings,
+  total
+}) => {
+  // Guard the divisor: a sub-millisecond request would otherwise divide by 0.
+  const span = Math.max(1, total);
+  const phases = [{
+    // Deliberately NOT called "server time". Measured from JS, this includes
+    // queueing, DNS, TLS and sending the request — everything before the
+    // headers land. The subtitle says so rather than implying Chrome-grade
+    // precision we don't have.
+    label: "Waiting (TTFB)",
+    hint: "incl. queue, DNS, TLS",
+    value: timings.ttfb,
+    color: macOSColors.semantic.warning
+  }, {
+    label: "Content download",
+    hint: undefined,
+    value: timings.download,
+    color: macOSColors.semantic.success
+  }];
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.phaseList,
+    children: phases.map(phase => /*#__PURE__*/_jsxs(View, {
+      style: styles.phaseRow,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.phaseLabelGroup,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.phaseLabel,
+          children: phase.label
+        }), phase.hint ? /*#__PURE__*/_jsx(Text, {
+          style: styles.phaseHint,
+          children: phase.hint
+        }) : null]
+      }), /*#__PURE__*/_jsx(View, {
+        style: styles.phaseTrack,
+        children: /*#__PURE__*/_jsx(View, {
+          style: [styles.phaseBar, {
+            backgroundColor: phase.color,
+            // A floor so a 1ms phase is still a visible tick.
+            width: `${Math.max(1, phase.value / span * 100)}%`
+          }]
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.phaseValue,
+        children: formatDuration(phase.value)
+      })]
+    }, phase.label))
+  });
+};
+
 // Component for collapsible sections matching Sentry style
 const CollapsibleSection = ({
   title,
   icon,
   children,
-  defaultOpen = false
+  defaultOpen = false,
+  count
 }) => {
   const [isOpen, setIsOpen] = useState(defaultOpen);
   return /*#__PURE__*/_jsxs(View, {
@@ -27,7 +100,10 @@ const CollapsibleSection = ({
         children: [icon, /*#__PURE__*/_jsx(Text, {
           style: styles.collapsibleTitleText,
           children: title
-        })]
+        }), count !== undefined ? /*#__PURE__*/_jsx(Text, {
+          style: styles.collapsibleCount,
+          children: count
+        }) : null]
       }), isOpen ? /*#__PURE__*/_jsx(ChevronUp, {
         size: 16,
         color: macOSColors.text.secondary
@@ -95,7 +171,23 @@ const UrlBreakdown = ({
       };
     }
   };
-  const urlParts = parseUrl(url);
+
+  /**
+   * MUST be memoized. `parseUrl` builds a fresh `params` object every call, and
+   * that object is handed to `DataViewer` as its `data` prop — whose flattening
+   * effect keys on `data` by IDENTITY. Computed inline, every render of this
+   * component produced a new object, so the effect re-fired and re-entered
+   * "Processing data…" forever. The detail view re-renders constantly on the
+   * dashboard (it tracks the live event as the device pushes snapshots ~4×/sec),
+   * so this pinned the query-parameter viewer in a permanent processing loop.
+   *
+   * `url` is a string, so this is stable by value.
+   */
+  const urlParts = useMemo(() => parseUrl(url),
+  // parseUrl closes over the graphql/operation props, which are what change
+  // the derived pathname.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [url, requestClient, operationName, graphqlVariables]);
   const [showParams, setShowParams] = useState(false);
   return /*#__PURE__*/_jsxs(View, {
     style: styles.urlBreakdown,
@@ -144,6 +236,9 @@ const UrlBreakdown = ({
         children: [/*#__PURE__*/_jsx(Text, {
           style: styles.queryParamsToggleText,
           children: "Query Parameters"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.collapsibleCount,
+          children: Object.keys(urlParts.params).length
         }), showParams ? /*#__PURE__*/_jsx(ChevronUp, {
           size: 14,
           color: macOSColors.text.secondary
@@ -359,34 +454,41 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
           }), /*#__PURE__*/_jsxs(Text, {
             style: styles.timingExact,
             children: ["(", new Date(event.timestamp).toLocaleTimeString(), ")"]
-          })]
-        }), event.requestSize || event.responseSize ? /*#__PURE__*/_jsxs(View, {
-          style: styles.sizeRow,
-          children: [event.requestSize !== undefined ? /*#__PURE__*/_jsxs(View, {
-            style: styles.sizeItem,
-            children: [/*#__PURE__*/_jsx(Upload, {
-              size: 10,
-              color: macOSColors.semantic.info
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.sizeLabel,
-              children: "Sent:"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.sizeValue,
-              children: formatBytes(event.requestSize)
-            })]
-          }) : null, event.responseSize !== undefined ? /*#__PURE__*/_jsxs(View, {
-            style: styles.sizeItem,
-            children: [/*#__PURE__*/_jsx(Download, {
-              size: 10,
-              color: macOSColors.semantic.success
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.sizeLabel,
-              children: "Received:"
-            }), /*#__PURE__*/_jsx(Text, {
-              style: styles.sizeValue,
-              children: formatBytes(event.responseSize)
-            })]
+          }), event.requestSize || event.responseSize ? /*#__PURE__*/_jsxs(View, {
+            style: styles.sizeRow,
+            children: [event.requestSize !== undefined ? /*#__PURE__*/_jsxs(View, {
+              style: styles.sizeItem,
+              children: [/*#__PURE__*/_jsx(Upload, {
+                size: 10,
+                color: macOSColors.semantic.info
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.sizeLabel,
+                children: "Sent:"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.sizeValue,
+                children: formatBytes(event.requestSize)
+              })]
+            }) : null, event.responseSize !== undefined ? /*#__PURE__*/_jsxs(View, {
+              style: styles.sizeItem,
+              children: [/*#__PURE__*/_jsx(Download, {
+                size: 10,
+                color: NEUTRAL_ICON
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.sizeLabel,
+                children: "Received:"
+              }), /*#__PURE__*/_jsx(Text, {
+                style: styles.sizeValue,
+                children: formatBytes(event.responseSize)
+              })]
+            }) : null]
           }) : null]
+        }), event.timings ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(View, {
+            style: styles.phaseDivider
+          }), /*#__PURE__*/_jsx(TimingPhases, {
+            timings: event.timings,
+            total: event.duration ?? event.timings.ttfb + event.timings.download
+          })]
         }) : null]
       }), /*#__PURE__*/_jsx(CollapsibleSection, {
         title: "Request Headers",
@@ -395,6 +497,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
           color: macOSColors.semantic.info
         }),
         defaultOpen: false,
+        count: Object.keys(event.requestHeaders).length,
         children: Object.keys(event.requestHeaders).length > 0 ? /*#__PURE__*/_jsx(View, {
           style: styles.dataViewerContainer,
           children: /*#__PURE__*/_jsx(DataViewer, {
@@ -413,9 +516,10 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
         title: "Response Headers",
         icon: /*#__PURE__*/_jsx(Download, {
           size: 14,
-          color: macOSColors.semantic.success
+          color: NEUTRAL_ICON
         }),
         defaultOpen: false,
+        count: Object.keys(event.responseHeaders).length,
         children: Object.keys(event.responseHeaders).length > 0 ? /*#__PURE__*/_jsx(View, {
           style: styles.dataViewerContainer,
           children: /*#__PURE__*/_jsx(DataViewer, {
@@ -463,9 +567,12 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
         title: "Response Body",
         icon: /*#__PURE__*/_jsx(FileJson, {
           size: 14,
-          color: macOSColors.semantic.success
-        }),
-        defaultOpen: false,
+          color: NEUTRAL_ICON
+        })
+        // The body is what you opened the row FOR — the design has it
+        // expanded on arrival, everything else closed.
+        ,
+        defaultOpen: true,
         children: /*#__PURE__*/_jsx(View, {
           style: styles.dataViewerContainer,
           children: /*#__PURE__*/_jsx(DataViewer, {
@@ -481,7 +588,7 @@ ${JSON.stringify(requestDetails.responseData, null, 2)}
         title: "Response Body",
         icon: /*#__PURE__*/_jsx(FileJson, {
           size: 14,
-          color: macOSColors.semantic.success
+          color: NEUTRAL_ICON
         }),
         defaultOpen: true,
         children: /*#__PURE__*/_jsx(Text, {
@@ -707,6 +814,7 @@ const styles = StyleSheet.create({
     marginBottom: 8
   },
   queryParamsToggleText: {
+    flexGrow: 0,
     color: macOSColors.text.primary,
     fontSize: 12,
     fontWeight: "600",
@@ -725,7 +833,10 @@ const styles = StyleSheet.create({
   timingRow: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 6
+    gap: 6,
+    // Wraps rather than squashing when the card is narrow (a phone, or a
+    // half-width panel) — the sizes drop to their own line there.
+    flexWrap: "wrap"
   },
   timingLabel: {
     color: macOSColors.text.secondary,
@@ -743,11 +854,11 @@ const styles = StyleSheet.create({
   },
   sizeRow: {
     flexDirection: "row",
+    alignItems: "center",
     gap: 16,
-    marginTop: 8,
-    paddingTop: 8,
-    borderTopWidth: 1,
-    borderTopColor: macOSColors.border.default
+    // Pushed to the far end of the Started row. No top border/padding — it is
+    // no longer a separate strip.
+    marginLeft: "auto"
   },
   sizeItem: {
     flexDirection: "row",
@@ -764,6 +875,50 @@ const styles = StyleSheet.create({
     fontFamily: "monospace",
     fontWeight: "600"
   },
+  /* ---- Timing phases ---- */
+  phaseDivider: {
+    height: 1,
+    backgroundColor: macOSColors.border.default,
+    marginTop: 12,
+    marginBottom: 12
+  },
+  phaseList: {
+    gap: 8
+  },
+  phaseRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 14
+  },
+  phaseLabelGroup: {
+    width: 150
+  },
+  phaseLabel: {
+    fontSize: 12,
+    color: macOSColors.text.secondary
+  },
+  phaseHint: {
+    fontSize: 10,
+    color: macOSColors.text.muted
+  },
+  phaseTrack: {
+    flex: 1,
+    height: 7,
+    borderRadius: 4,
+    backgroundColor: macOSColors.background.hover,
+    justifyContent: "center"
+  },
+  phaseBar: {
+    height: 7,
+    borderRadius: 4
+  },
+  phaseValue: {
+    width: 72,
+    textAlign: "right",
+    fontSize: 12,
+    fontFamily: "monospace",
+    color: macOSColors.text.primary
+  },
   // Collapsible section styles
   collapsibleSection: {
     marginHorizontal: 12,
@@ -779,6 +934,8 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "space-between",
     padding: 12,
+    // `background.hover` is the SELECTION grey — heavy enough here that every
+    // section header read as a toolbar. The design uses a near-white strip.
     backgroundColor: macOSColors.background.hover
   },
   collapsibleTitle: {
@@ -791,6 +948,12 @@ const styles = StyleSheet.create({
     fontSize: 13,
     fontWeight: "600"
   },
+  /** The "how much is in here" number beside a section title. */
+  collapsibleCount: {
+    color: macOSColors.text.muted,
+    fontSize: 11.5,
+    fontFamily: "monospace"
+  },
   collapsibleContent: {
     padding: 12
   },

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

@@ -2,7 +2,7 @@
 
 import { memo } from "react";
 import { StyleSheet, View, Text } from "react-native";
-import { ChevronRight, Upload, Download, Clock, AlertCircle, DevToolsCard, MethodBadge, TypeBadge, macOSColors } from "@buoy-gg/shared-ui";
+import { ChevronRight, Upload, Download, Clock, AlertCircle, Bookmark, Pin, DevToolsCard, MethodBadge, TypeBadge, macOSColors } from "@buoy-gg/shared-ui";
 import { formatBytes, formatDuration } from "../utils/formatting";
 import { formatRelativeTime } from "@buoy-gg/shared-ui";
 import { useTickEveryMinute } from "../hooks/useTickEveryMinute";
@@ -32,6 +32,39 @@ function getContentTypeBadge(headers) {
   return null;
 }
 
+/**
+ * The transport chip (`fetch` / `GQL` / `gRPC` / `XHR`), one brand colour each.
+ */
+function getClientChipColors(requestClient) {
+  switch (requestClient) {
+    case "fetch":
+      return {
+        backgroundColor: "rgba(74, 144, 226, 0.15)",
+        color: "#4A90E2"
+      };
+    case "graphql":
+      return {
+        backgroundColor: "rgba(229, 53, 171, 0.15)",
+        color: "#E535AB"
+      };
+    case "grpc-web":
+      return {
+        backgroundColor: "rgba(16, 185, 129, 0.15)",
+        color: "#10B981"
+      };
+    case "xhr":
+      return {
+        backgroundColor: "rgba(245, 158, 11, 0.15)",
+        color: "#F59E0B"
+      };
+    default:
+      return {
+        backgroundColor: "rgba(147, 51, 234, 0.15)",
+        color: "#9333EA"
+      };
+  }
+}
+
 // Decomposed components following rule3 - Component Composition
 
 // Status indicator component - single responsibility
@@ -134,7 +167,10 @@ export const NetworkEventItemCompact = /*#__PURE__*/memo(
 // renders to this component instead of a compiled anonymous name.
 function NetworkEventItemCompact({
   event,
-  onPress
+  onPress,
+  pinned = false,
+  saved = false,
+  onLongPress
 }) {
   const statusColor = getStatusColor(event.status, event.error);
   const isPending = !event.status && !event.error;
@@ -159,23 +195,30 @@ function NetworkEventItemCompact({
   }
   return /*#__PURE__*/_jsxs(DevToolsCard, {
     onPress: () => onPress(event),
+    onLongPress: onLongPress ? () => onLongPress(event) : undefined,
     style: styles.cardWrapper,
     contentStyle: [styles.container, {
       borderLeftColor: statusColor
     }],
     children: [/*#__PURE__*/_jsxs(View, {
       style: styles.topRightContainer,
-      children: [/*#__PURE__*/_jsx(StatusIndicator, {
+      children: [pinned ? /*#__PURE__*/_jsx(Pin, {
+        size: 10,
+        color: macOSColors.semantic.info
+      }) : null, saved ? /*#__PURE__*/_jsx(Bookmark, {
+        size: 10,
+        color: macOSColors.semantic.debug
+      }) : null, /*#__PURE__*/_jsx(StatusIndicator, {
         event: event,
         isPending: isPending,
         statusColor: statusColor
       }), event.requestClient ? /*#__PURE__*/_jsx(View, {
         style: [styles.topRightBadge, {
-          backgroundColor: event.requestClient === "fetch" ? "rgba(74, 144, 226, 0.15)" : event.requestClient === "graphql" ? "rgba(229, 53, 171, 0.15)" : event.requestClient === "grpc-web" ? "rgba(16, 185, 129, 0.15)" : event.requestClient === "xhr" ? "rgba(245, 158, 11, 0.15)" : "rgba(147, 51, 234, 0.15)"
+          backgroundColor: getClientChipColors(event.requestClient).backgroundColor
         }],
         children: /*#__PURE__*/_jsx(Text, {
           style: [styles.clientText, {
-            color: event.requestClient === "fetch" ? "#4A90E2" : event.requestClient === "graphql" ? "#E535AB" : event.requestClient === "grpc-web" ? "#10B981" : event.requestClient === "xhr" ? "#F59E0B" : "#9333EA"
+            color: getClientChipColors(event.requestClient).color
           }],
           children: event.requestClient === "graphql" ? "GQL" : event.requestClient === "grpc-web" ? "gRPC" : event.requestClient === "xhr" ? "XHR" : event.requestClient
         })
@@ -220,13 +263,17 @@ function NetworkEventItemCompact({
 NetworkEventItemCompact.displayName = "NetworkEventItemCompact";
 const styles = StyleSheet.create({
   cardWrapper: {
+    // Overrides DevToolsCard's own wrapper margin, so it has to opt into the
+    // edge-to-edge chat layout too or the rows keep their gutter.
     marginHorizontal: 8
   },
   container: {
     flexDirection: "row",
     alignItems: "center",
     borderLeftWidth: 3,
-    borderLeftColor: "transparent"
+    borderLeftColor: "transparent",
+    // One hairline per row — the same value DevToolsCard's border uses.
+    borderBottomWidth: 1
   },
   leftSection: {
     marginRight: 8,

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

@@ -19,13 +19,15 @@
  */
 
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { CheckCircle, XCircle, Clock, Copy, Trash2, CopyButton, macOSColors } from "@buoy-gg/shared-ui";
+import { Bookmark, CheckCircle, XCircle, Clock, Copy, Pin, Trash2, CopyButton, macOSColors } from "@buoy-gg/shared-ui";
 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 { 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 } from "react/jsx-runtime";
+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,
@@ -98,6 +100,104 @@ export function NetworkClearButton({
     })
   });
 }
+/**
+ * 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 ? macOSColors.semantic.debug : macOSColors.text.muted
+    }), 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.
+ */
+export function NetworkDetailPinActions({
+  eventId,
+  isPro,
+  onUpgradePress
+}) {
+  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(TouchableOpacity, {
+      "sentry-label": "ignore pin request",
+      onPress: handlePin,
+      disabled: atPinCap,
+      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,
+        color: pinned ? macOSColors.semantic.info : atPinCap ? macOSColors.text.disabled : macOSColors.text.secondary
+      })
+    }), /*#__PURE__*/_jsx(TouchableOpacity, {
+      "sentry-label": "ignore save request",
+      onPress: handleSave,
+      disabled: atSavedCap && isPro,
+      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 ? 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
@@ -149,6 +249,10 @@ const styles = StyleSheet.create({
     alignItems: "center",
     gap: 8
   },
+  /**
+   * Counter chips and toolbar buttons carry a permanent outline; the fill marks
+   * the active filter.
+   */
   headerChip: {
     flexDirection: "row",
     alignItems: "center",
@@ -189,5 +293,31 @@ const styles = StyleSheet.create({
   },
   headerActionButtonDisabled: {
     opacity: 0.55
+  },
+  headerActionButtonActive: {
+    backgroundColor: macOSColors.semantic.infoBackground,
+    borderColor: macOSColors.semantic.info + "50"
+  },
+  headerActionButtonSaved: {
+    backgroundColor: macOSColors.semantic.debug + "1A",
+    borderColor: macOSColors.semantic.debug + "50"
+  },
+  savedBadge: {
+    position: "absolute",
+    top: -3,
+    right: -3,
+    minWidth: 14,
+    height: 14,
+    paddingHorizontal: 3,
+    borderRadius: 7,
+    backgroundColor: macOSColors.semantic.debug,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  savedBadgeText: {
+    color: "#FFFFFF",
+    fontSize: 9,
+    fontWeight: "700",
+    fontFamily: "monospace"
   }
 });