@buoy-gg/network 7.0.34 → 7.0.36

package/lib/commonjs/network/utils/networkListener.js

@@ -71,6 +71,46 @@ const BUOY_XHR_INTERCEPTOR_FLAG = exports.BUOY_XHR_INTERCEPTOR_FLAG = "__buoyNet
  * @performance Uses lazy singleton pattern to minimize memory footprint
  * @performance Includes URL filtering to ignore development traffic
  */
+/**
+ * Hosts another Buoy package has claimed as its own traffic.
+ *
+ * A GLOBAL, not an import: `@buoy-gg/network` cannot depend on `agent-core`
+ * (Ask Buoy is optional and this package is older), and `agent-core` ships
+ * with no dependencies at all. `registerSelfEndpoint` in agent-core writes the
+ * set; this reads it. Absent, undefined or the wrong shape all mean "nothing
+ * to exclude", so nothing breaks in an app without Ask Buoy.
+ *
+ * WHY IT IS NOT ENOUGH TO FILTER LATER. The interceptor reads the response
+ * body — `await processResponseBody(response.clone())` — BEFORE handing the
+ * response back. On a streamed reply that resolves only at EOF, so an
+ * intercepted model endpoint delivers its whole answer at once and Ask Buoy
+ * cannot stream a word. Ignoring the URL is what keeps the socket the
+ * caller's. It also keeps override rules off model traffic, which a broad
+ * user-authored rule would otherwise rewrite.
+ */
+/**
+ * Content types whose body arrives over time rather than all at once.
+ *
+ * These are the ones where reading the clone before returning the response
+ * changes the CALLER's behaviour instead of merely observing it.
+ */
+const STREAMED_CONTENT_TYPES = ["text/event-stream", "application/x-ndjson", "application/stream+json"];
+const STREAMING_PLACEHOLDER = "[streaming\u2026]";
+function isStreamedContentType(contentType) {
+  if (!contentType) return false;
+  const lower = contentType.toLowerCase();
+  return STREAMED_CONTENT_TYPES.some(t => lower.includes(t));
+}
+const INTERNAL_HOSTS_KEY = "__BUOY_INTERNAL_HOSTS__";
+function isInternalBuoyHost(url) {
+  const hosts = globalThis[INTERNAL_HOSTS_KEY];
+  if (!(hosts instanceof Set) || hosts.size === 0) return false;
+  const lower = url.toLowerCase();
+  for (const host of hosts) {
+    if (typeof host === "string" && host && lower.includes(host)) return true;
+  }
+  return false;
+}
 class NetworkListener {
   listeners = [];
   isListening = false;
@@ -121,7 +161,8 @@ class NetworkListener {
    * @returns True if the URL should be ignored
    */
   shouldIgnoreUrl(url) {
-    return this.ignoredUrls.some(pattern => pattern.test(url));
+    if (this.ignoredUrls.some(pattern => pattern.test(url))) return true;
+    return isInternalBuoyHost(url);
   }
 
   // Emit event to all listeners
@@ -167,6 +208,70 @@ class NetworkListener {
    * @param maxSize - Maximum body size in bytes (default: 1MB)
    * @returns Object containing body, size, and truncation status
    */
+  /**
+   * Read a streamed body in the background, with a hard ceiling.
+   *
+   * Deliberately not `processResponseBody`: that one calls `.text()`, which
+   * accumulates the WHOLE body before it checks the size, so a long-lived SSE
+   * stream would grow unbounded in memory with nothing to stop it. This stops
+   * at the cap and cancels the reader, and a runtime with no `body` (React
+   * Native's own fetch) falls back to `.text()` — that response was never
+   * streaming there in the first place.
+   */
+  async readStreamedBody(response, maxSize = 256 * 1024) {
+    const body = response.body;
+    if (!body || typeof body.getReader !== "function") {
+      const text = await response.text();
+      return text.length > maxSize ? {
+        body: `${text.slice(0, maxSize)}\n\n... [truncated]`,
+        size: text.length
+      } : {
+        body: text,
+        size: text.length
+      };
+    }
+    const reader = body.getReader();
+    const decoder = new TextDecoder();
+    let out = "";
+    let size = 0;
+    let capped = false;
+    try {
+      for (;;) {
+        const {
+          done,
+          value
+        } = await reader.read();
+        if (done) break;
+        size += value?.byteLength ?? 0;
+        if (!capped) {
+          out += decoder.decode(value, {
+            stream: true
+          });
+          if (out.length >= maxSize) {
+            out = `${out.slice(0, maxSize)}\n\n... [truncated]`;
+            capped = true;
+            break;
+          }
+        }
+      }
+      if (!capped) out += decoder.decode();
+    } finally {
+      try {
+        void Promise.resolve(reader.cancel()).catch(() => {});
+      } catch {
+        /* already gone */
+      }
+      try {
+        reader.releaseLock();
+      } catch {
+        /* already released */
+      }
+    }
+    return {
+      body: out,
+      size
+    };
+  }
   async processResponseBody(response, maxSize = 1024 * 1024 // 1MB default
   ) {
     try {
@@ -544,6 +649,8 @@ class NetworkListener {
       }
 
       // Parse request body
+      // Explicitly typed: the late emit for a streamed reply reads this from
+      // inside a callback, which defeats the inference it used to rely on.
       let requestData;
       if (init?.body) {
         if (typeof init.body === "string") {
@@ -612,12 +719,29 @@ class NetworkListener {
         // look faster through fetch than through XHR.
         const ttfb = Date.now() - startTime;
 
+        /**
+         * A STREAMED reply is never awaited here.
+         *
+         * `processResponseBody` reads the clone to the end, and for
+         * `text/event-stream` the end is when the server finishes — seconds
+         * later, for an LLM. Awaiting it made the interceptor hold the
+         * response back until then, so every consumer of a streaming endpoint
+         * inside an app with capture on received the whole thing at once and
+         * could not stream a word of it. The row is emitted now with what is
+         * known, and the body is filled in when the stream closes: the store
+         * merges a second `response` event onto the same request id.
+         */
+        const streamed = isStreamedContentType(response.headers?.get?.("content-type"));
+
         // Clone response to read body with size limits
         const responseClone = response.clone();
         const {
           body,
           size: responseSize
-        } = await self.processResponseBody(responseClone);
+        } = streamed ? {
+          body: STREAMING_PLACEHOLDER,
+          size: 0
+        } : await self.processResponseBody(responseClone);
 
         // Now the body is in — this is the comparable, total number.
         const duration = Date.now() - startTime;
@@ -676,6 +800,36 @@ class NetworkListener {
           },
           override
         });
+        if (streamed) {
+          // Bounded, cancelled at the cap, and never awaited by the caller.
+          void self.readStreamedBody(responseClone).then(late => {
+            self.emit({
+              type: "response",
+              timestamp: new Date(),
+              duration: Date.now() - startTime,
+              timings,
+              request: {
+                id: requestId || "unknown",
+                url: cleanUrl,
+                method,
+                headers: requestHeaders,
+                data: requestData,
+                params: params || undefined,
+                client: clientType
+              },
+              response: {
+                status: response.status,
+                statusText: response.statusText,
+                headers: responseHeaders,
+                body: late.body,
+                size: late.size
+              },
+              override
+            });
+          }).catch(() => {
+            /* the caller's response is unaffected either way */
+          });
+        }
         return response;
       } catch (error) {
         const duration = Date.now() - startTime;

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

@@ -1,6 +1,6 @@
 "use strict";
 
-import { DynamicFilterView, macOSColors, FileText, FileCode, Link, Zap, Settings, Hash, Eye, ToolbarCopyButton, formatRelativeTime, useFeatureGate, ProFeatureBanner, ExportPreview } from "@buoy-gg/shared-ui";
+import { DynamicFilterView, macOSColors, FileText, FileCode, Link, Zap, Settings, Hash, Eye, ToolbarCopyButton, formatRelativeTime, useFeatureGate, ProFeatureBanner, ExportPreview, monoFont } from "@buoy-gg/shared-ui";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
 import { useCallback, useMemo, useState } from "react";
 import { Text, StyleSheet, ScrollView, View } from "react-native";
@@ -721,13 +721,13 @@ const styles = StyleSheet.create({
     maxHeight: 300
   },
   markdownText: {
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontSize: 11,
     color: macOSColors.text.primary,
     lineHeight: 18
   },
   plaintextText: {
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontSize: 11,
     color: macOSColors.text.primary,
     lineHeight: 18

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

@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useMemo, memo } 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, FlaskConical, InlineCopyButton, macOSColors, night, useFeatureGate, UpgradeModal } from "@buoy-gg/shared-ui";
+import { Clock, Upload, Download, AlertCircle, ChevronDown, ChevronUp, Lock, Unlock, FileJson, Filter, Globe, Link, Copy, FlaskConical, InlineCopyButton, macOSColors, night, useFeatureGate, UpgradeModal, monoFont } from "@buoy-gg/shared-ui";
 import { formatBytes, formatDuration, formatHttpStatus } from "../utils/formatting";
 import { formatRelativeTime } from "@buoy-gg/shared-ui";
 import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
@@ -869,12 +869,12 @@ const styles = StyleSheet.create({
   urlPath: {
     color: night.color.textSecondary,
     fontSize: 11,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   urlQueryString: {
     color: night.color.info,
     fontSize: 11,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   // Query Parameters - Collapsible section
   queryParamsCollapsible: {
@@ -951,7 +951,7 @@ const styles = StyleSheet.create({
   sizeValue: {
     color: night.color.info,
     fontSize: 10,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "600"
   },
   /* ---- Timing phases ---- */
@@ -996,7 +996,7 @@ const styles = StyleSheet.create({
     width: 72,
     textAlign: "right",
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     color: night.color.text
   },
   // Collapsible section styles
@@ -1032,7 +1032,7 @@ const styles = StyleSheet.create({
   collapsibleCount: {
     color: night.color.textTertiary,
     fontSize: 11.5,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   collapsibleContent: {
     padding: 12
@@ -1106,7 +1106,7 @@ const styles = StyleSheet.create({
   filterOptionValue: {
     color: night.color.text,
     fontSize: 13,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   filterToggle: {
     paddingHorizontal: 10,

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, Bookmark, FlaskConical, Pin, DevToolsCard, MethodBadge, TypeBadge, night, macOSColors } from "@buoy-gg/shared-ui";
+import { ChevronRight, Upload, Download, Clock, AlertCircle, Bookmark, FlaskConical, Pin, DevToolsCard, MethodBadge, TypeBadge, night, macOSColors, monoFont } from "@buoy-gg/shared-ui";
 import { formatBytes, formatDuration } from "../utils/formatting";
 import { formatRelativeTime } from "@buoy-gg/shared-ui";
 import { useTickEveryMinute } from "../hooks/useTickEveryMinute";
@@ -316,7 +316,7 @@ const styles = StyleSheet.create({
     fontSize: 12,
     color: night.color.text,
     lineHeight: 16,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   rightSection: {
     flexDirection: "row",
@@ -331,7 +331,7 @@ const styles = StyleSheet.create({
   bottomRightText: {
     fontSize: 9,
     color: night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   statusBadge: {
     paddingHorizontal: 4,
@@ -387,7 +387,7 @@ const styles = StyleSheet.create({
   sizeText: {
     fontSize: 8,
     color: night.color.textSecondary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   clientText: {
     fontSize: 8,

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

@@ -1,6 +1,6 @@
 "use strict";
 
-import { CheckCircle, Clock, DynamicFilterView, Film, FileJson, FileText, Filter, Globe, Image, macOSColors, night, Music, XCircle } from "@buoy-gg/shared-ui";
+import { CheckCircle, Clock, DynamicFilterView, Film, FileJson, FileText, Filter, Globe, Image, macOSColors, night, Music, XCircle, monoFont } from "@buoy-gg/shared-ui";
 import { useCallback, useMemo, useState } from "react";
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -384,7 +384,7 @@ const styles = StyleSheet.create({
   },
   modeBadgeText: {
     fontSize: 9,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontWeight: "700",
     letterSpacing: 0.5
   },
@@ -398,7 +398,7 @@ const styles = StyleSheet.create({
     fontSize: 11,
     fontWeight: "600",
     color: night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.3
   },
   modeToggleGroup: {
@@ -424,7 +424,7 @@ const styles = StyleSheet.create({
     fontSize: 11,
     fontWeight: "700",
     color: night.color.textSecondary,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.3
   },
   modeToggleButtonTextActive: {

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

@@ -19,7 +19,7 @@
  */
 
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { Bookmark, CheckCircle, XCircle, Clock, Copy, Pin, Trash2, CopyButton, macOSColors, night, useLimit } from "@buoy-gg/shared-ui";
+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";
@@ -322,7 +322,7 @@ const styles = StyleSheet.create({
   headerChipValue: {
     fontSize: 12,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   headerActionButton: {
     width: 32,
@@ -361,6 +361,6 @@ const styles = StyleSheet.create({
     color: night.color.onAccent,
     fontSize: 9,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   }
 });

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

@@ -14,7 +14,7 @@
 
 import { useCallback } from "react";
 import { FlatList, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { FlaskConical, Pin, Power, macOSColors, ToolEmptyState, resolveListEmptyState, EVENT_LIST_PRESET } from "@buoy-gg/shared-ui";
+import { FlaskConical, Pin, Power, macOSColors, ToolEmptyState, resolveListEmptyState, EVENT_LIST_PRESET, monoFont } from "@buoy-gg/shared-ui";
 import { NetworkEventItemCompact } from "./NetworkEventItemCompact";
 import { NetworkUpgradeBanner } from "./NetworkUpgradeBanner";
 import { useNetworkEventList } from "../hooks/useNetworkEventList";
@@ -367,7 +367,7 @@ const styles = StyleSheet.create({
     fontSize: 10,
     fontWeight: "700",
     letterSpacing: 0.6,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   pinnedClear: {
     paddingHorizontal: 6,

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

@@ -2,7 +2,7 @@
 
 import { useMemo, useState } from "react";
 import { ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from "react-native";
-import { ChevronDown, ChevronRight, macOSColors, useSafeAreaInsets } from "@buoy-gg/shared-ui";
+import { ChevronDown, ChevronRight, macOSColors, useSafeAreaInsets, monoFont } from "@buoy-gg/shared-ui";
 import Explorer from "./response-editor/Explorer";
 import { ResponseEditorContext } from "./response-editor/editorContext";
 import { NetworkNumberPrompt } from "./NetworkNumberPrompt";
@@ -678,7 +678,7 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     color: macOSColors.text.primary,
     fontSize: 12,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     minHeight: 40
   },
   bodyInput: {

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

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useState } from "react";
 import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { AlertCircle, AlertTriangle, DevToolsCard, EmptyState, MethodBadge, Plus, Trash2, macOSColors, useLimit } from "@buoy-gg/shared-ui";
+import { AlertCircle, AlertTriangle, DevToolsCard, EmptyState, MethodBadge, Plus, Trash2, macOSColors, useLimit, monoFont } from "@buoy-gg/shared-ui";
 import { useOverrideRules } from "../hooks/useOverrideRules";
 import { NetworkOverrideEditor } from "./NetworkOverrideEditor";
 import { overrideRulesStore } from "../overrides/overrideRulesStore";
@@ -489,7 +489,7 @@ const styles = StyleSheet.create({
     fontSize: 12,
     color: macOSColors.text.primary,
     lineHeight: 16,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   urlTextOff: {
     color: macOSColors.text.muted

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

@@ -19,7 +19,7 @@
 
 import { useState } from "react";
 import { FlatList, StyleSheet, Text, TextInput, View, TouchableOpacity } from "react-native";
-import { Bookmark, CopyButton, Search, macOSColors, useLimit, ToolEmptyState, resolveListEmptyState, EVENT_LIST_PRESET } from "@buoy-gg/shared-ui";
+import { Bookmark, CopyButton, Search, macOSColors, useLimit, ToolEmptyState, resolveListEmptyState, EVENT_LIST_PRESET, monoFont } from "@buoy-gg/shared-ui";
 import { NetworkEventItemCompact } from "./NetworkEventItemCompact";
 import { NetworkUpgradeBanner } from "./NetworkUpgradeBanner";
 import { generateNetworkCopyText } from "../utils/generateNetworkCopyText";
@@ -177,7 +177,7 @@ const styles = StyleSheet.create({
     fontSize: 10,
     fontWeight: "700",
     letterSpacing: 0.6,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   toolbarButton: {
     width: 26,

package/lib/module/network/components/response-editor/Explorer.js

@@ -2,7 +2,7 @@
 
 import { useState, useMemo, useCallback, useRef, useEffect, memo } from "react";
 import { Text, TouchableOpacity, View, StyleSheet } from "react-native";
-import { displayValue, buoyColors } from "@buoy-gg/shared-ui";
+import { displayValue, buoyColors, monoFont } from "@buoy-gg/shared-ui";
 import { CopyButton as SharedCopyButton } from "@buoy-gg/shared-ui";
 import { ChevronRight, ChevronDown, Trash } from "@buoy-gg/shared-ui";
 import { CyberpunkInput } from "@buoy-gg/shared-ui/dataViewer";
@@ -539,7 +539,7 @@ const styles = StyleSheet.create({
   clearButtonText: {
     fontSize: 12,
     fontWeight: "700",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   expanderIcon: {
     width: 18,
@@ -626,7 +626,7 @@ const styles = StyleSheet.create({
     fontSize: 10,
     fontWeight: "600",
     marginRight: 4,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.4
   },
   labelTextFocused: {
@@ -642,14 +642,14 @@ const styles = StyleSheet.create({
     color: buoyColors.textMuted,
     fontSize: 10,
     fontWeight: "400",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     opacity: 0.7
   },
   pageRangeText: {
     color: buoyColors.textSecondary,
     fontSize: 10,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   flexRowGapItemsCenter: {
     flexDirection: "row",
@@ -707,11 +707,11 @@ const styles = StyleSheet.create({
   textNumber: {
     color: buoyColors.text,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   textString: {
     color: buoyColors.text,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   flexRowGapFullWidth: {
     flexDirection: "row",
@@ -728,7 +728,7 @@ const styles = StyleSheet.create({
     fontWeight: "600",
     fontSize: 9,
     minWidth: 50,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.4,
     opacity: 0.8
   },
@@ -782,7 +782,7 @@ const styles = StyleSheet.create({
     flex: 1,
     color: buoyColors.text,
     fontWeight: "400",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontSize: 12,
     paddingVertical: 6,
     paddingHorizontal: 10,
@@ -838,7 +838,7 @@ const styles = StyleSheet.create({
   readOnlyValue: {
     color: buoyColors.text,
     fontSize: 13,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     paddingVertical: 8,
     paddingHorizontal: 12,
     borderRadius: 6,
@@ -864,7 +864,7 @@ const styles = StyleSheet.create({
     marginLeft: 8,
     color: buoyColors.warning,
     fontWeight: "500",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   modernToggleButton: {
     flexDirection: "row",
@@ -903,7 +903,7 @@ const styles = StyleSheet.create({
     color: "#E5E7EB",
     fontSize: 11,
     fontWeight: "600",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.3
   },
   toggleStatus: {
@@ -922,7 +922,7 @@ const styles = StyleSheet.create({
     fontWeight: "700",
     textTransform: "uppercase",
     letterSpacing: 0.8,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   // Pre-computed toggle icon styles to avoid inline objects [[memory:4875251]]
   toggleIconTrue: {
@@ -961,7 +961,7 @@ const styles = StyleSheet.create({
     color: buoyColors.textSecondary,
     fontSize: 10,
     fontWeight: "600",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.4,
     minWidth: 60,
     flexShrink: 0