@rozenite/network-activity-plugin 1.9.0 → 1.10.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @rozenite/network-activity-plugin
 
+## 1.10.0
+
+### Minor Changes
+
+- [#271](https://github.com/callstackincubator/rozenite/pull/271) [`3a77ccf`](https://github.com/callstackincubator/rozenite/commit/3a77ccfce710a45c674c7cd05ca9a7f6aa422f4f) Thanks [@burczu](https://github.com/burczu)! - Image responses now render inline in the Network Activity panel. PNG, JPEG, GIF, WebP, and SVG show up as previews under a new Preview/Raw sub-tab. The Raw tab shows Content-Type and decoded size; for SVG, the Raw tab shows the source XML. Image responses above an in-capture 5 MB cap show a "Response too large for preview" message instead of crossing the bridge.
+
+  Adds a Preview/Raw axis that subsequent response-viewer improvements (rendered HTML, formatted XML, JSON Raw, ...) will extend. The toggle is adaptive — hidden for formats with only one meaningful view. The user's last toggle choice sticks across responses within a panel session.
+
+  The `response-body` bridge event's wire shape is extended additively to a discriminated union (`string | { kind: 'binary'; base64 } | { kind: 'binary-too-large'; size } | null`). Existing consumers that only handle the string variant continue to work unchanged.
+
+- [#266](https://github.com/callstackincubator/rozenite/pull/266) [`3adbe11`](https://github.com/callstackincubator/rozenite/commit/3adbe117d38b00455b864a60bdc86b3cd151cbab) Thanks [@draggie](https://github.com/draggie)! - Add advanced request filters to Network Activity.
+
+- [#263](https://github.com/callstackincubator/rozenite/pull/263) [`340b779`](https://github.com/callstackincubator/rozenite/commit/340b779c43b43702959dd9a29ed77041b73b970c) Thanks [@draggie](https://github.com/draggie)! - Show source-mapped request initiator details in Network Activity.
+
+- [#274](https://github.com/callstackincubator/rozenite/pull/274) [`032ff3e`](https://github.com/callstackincubator/rozenite/commit/032ff3eb9795c7cb0c747d52b73d341a2871185e) Thanks [@burczu](https://github.com/burczu)! - Non-image binary responses now render with a metadata card + virtualized hex viewer, replacing the "Binary content not shown" placeholder. PDFs, fonts, audio, video, archives, and `application/octet-stream` payloads show their bytes in the classic offset / hex / ASCII layout, with a Download button on the metadata card that saves the file using a sensibly-derived name (`Content-Disposition` filename → URL last segment → `response.<ext>` from a small content-type map).
+
+  Image responses get the same upgrade in their Raw tab — was metadata-only, now metadata + hex view + Download.
+
+  The `getResponseBody` capture widens to cover everything that isn't text: arraybuffer responses and non-text non-image blobs now arrive at the panel as base64-encoded binary via the existing wire union, with chunked encoding so large payloads don't blow up `String.fromCharCode`. The 5 MB cap continues to apply uniformly; oversized responses surface as "Response too large for preview" with the Download button disabled.
+
+  Post-this-release invariant: `body === null` on the wire means only "the plugin could not read the body at all" — every other shape arrives as a typed variant of the discriminated union.
+
+- [#279](https://github.com/callstackincubator/rozenite/pull/279) [`571d273`](https://github.com/callstackincubator/rozenite/commit/571d2730a570016c60b018f7523945aaee03e15a) Thanks [@burczu](https://github.com/burczu)! - Virtualize large code blocks in the Network Activity panel.
+
+  Text response bodies above 50,000 characters now render inside a virtualized 500 px scrollable window instead of an unbounded `<pre>` element. Smaller bodies and tree views (JSON, XML) are unaffected. This keeps the panel snappy on multi-megabyte responses (pretty-printed JSON, minified bundles served as text, large logs) without truncating any content.
+
+- [#275](https://github.com/callstackincubator/rozenite/pull/275) [`c18dc0f`](https://github.com/callstackincubator/rozenite/commit/c18dc0fb335f4fc472b8392f5e6af72e658edde6) Thanks [@burczu](https://github.com/burczu)! - Render HTML responses in the Network Activity panel via a sandboxed iframe. The Preview tab shows the page with `sandbox=""` (scripts blocked) and a Content-Security-Policy that disallows external subresources (no outbound requests to images, stylesheets, or fonts referenced by the captured HTML). The Raw tab shows the HTML source.
+
+- [#277](https://github.com/callstackincubator/rozenite/pull/277) [`e82fa22`](https://github.com/callstackincubator/rozenite/commit/e82fa2201d6e68c0e300a08c2bc49b640aa6fd69) Thanks [@burczu](https://github.com/burczu)! - Render XML responses in the Network Activity panel and add a Raw view to JSON responses.
+
+  XML responses (`application/xml`, `text/xml`, and RFC 7303 composite types like `application/atom+xml`, `application/rss+xml`, `application/soap+xml`, `application/xhtml+xml`, ...) now render as a collapsible tree with copy affordances on elements, text, and CDATA values in the Preview tab; the Raw tab shows the XML source verbatim. Malformed XML falls back to source with a warning. The capture path was also extended so `application/xml` and `+xml` composite bodies actually reach the panel — previously they were dropped on the wire.
+
+  JSON responses gain a Preview/Raw toggle: Preview keeps the existing tree, Raw shows the body pretty-printed with 2-space indent regardless of how the wire response was formatted, so minified JSON is readable without leaving the panel.
+
+### Patch Changes
+
+- [#273](https://github.com/callstackincubator/rozenite/pull/273) [`60a157e`](https://github.com/callstackincubator/rozenite/commit/60a157e4eb3a2b894bafa50decc1e04eb8b19374) Thanks [@V3RON](https://github.com/V3RON)! - Resolve the optional `react-native-nitro-fetch` dependency before React Native finishes initializing so Metro 0.82 does not show an error overlay when the package is not installed.
+
+- Updated dependencies []:
+  - @rozenite/agent-bridge@1.10.0
+  - @rozenite/agent-shared@1.10.0
+  - @rozenite/plugin-bridge@1.10.0
+
 ## 1.9.0
 
 ### Patch Changes

package/dist/devtools/App.html

@@ -22,8 +22,8 @@
     <script>
       var __ROZENITE_PANEL__ = true;
     </script>
-    <script type="module" crossorigin src="../devtools/assets/App-hSoryVpJ.js"></script>
-    <link rel="stylesheet" crossorigin href="../devtools/assets/App-m6xge0az.css">
+    <script type="module" crossorigin src="../devtools/assets/App-DsimzJvx.js"></script>
+    <link rel="stylesheet" crossorigin href="../devtools/assets/App-CUXU0mup.css">
   </head>
   <body>
     <div id="root"></div>

package/dist/devtools/assets/{App-m6xge0az.css → App-CUXU0mup.css}

@@ -541,6 +541,45 @@ video {
   background-color: hsl(var(--background));
   color: hsl(var(--foreground));
 }
+.container {
+  width: 100%;
+}
+@media (min-width: 640px) {
+
+  .container {
+    max-width: 640px;
+  }
+}
+@media (min-width: 768px) {
+
+  .container {
+    max-width: 768px;
+  }
+}
+@media (min-width: 1024px) {
+
+  .container {
+    max-width: 1024px;
+  }
+}
+@media (min-width: 1280px) {
+
+  .container {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1536px) {
+
+  .container {
+    max-width: 1536px;
+  }
+}
+.visible {
+  visibility: visible;
+}
+.collapse {
+  visibility: collapse;
+}
 .absolute {
   position: absolute;
 }
@@ -579,6 +618,9 @@ video {
   margin-top: 0.25rem;
   margin-bottom: 0.25rem;
 }
+.-ml-5 {
+  margin-left: -1.25rem;
+}
 .mb-2 {
   margin-bottom: 0.5rem;
 }
@@ -609,15 +651,24 @@ video {
 .ms-2 {
   margin-inline-start: 0.5rem;
 }
+.mt-0\.5 {
+  margin-top: 0.125rem;
+}
 .mt-1 {
   margin-top: 0.25rem;
 }
 .mt-2 {
   margin-top: 0.5rem;
 }
+.block {
+  display: block;
+}
 .inline-block {
   display: inline-block;
 }
+.inline {
+  display: inline;
+}
 .flex {
   display: flex;
 }
@@ -630,6 +681,9 @@ video {
 .grid {
   display: grid;
 }
+.hidden {
+  display: none;
+}
 .h-10 {
   height: 2.5rem;
 }
@@ -669,6 +723,9 @@ video {
 .h-\[1px\] {
   height: 1px;
 }
+.h-\[500px\] {
+  height: 500px;
+}
 .h-full {
   height: 100%;
 }
@@ -681,6 +738,9 @@ video {
 .max-h-96 {
   max-height: 24rem;
 }
+.max-h-\[400px\] {
+  max-height: 400px;
+}
 .min-h-0 {
   min-height: 0px;
 }
@@ -714,6 +774,9 @@ video {
 .w-8 {
   width: 2rem;
 }
+.w-80 {
+  width: 20rem;
+}
 .w-\[1px\] {
   width: 1px;
 }
@@ -729,6 +792,9 @@ video {
 .max-w-24 {
   max-width: 6rem;
 }
+.max-w-full {
+  max-width: 100%;
+}
 .max-w-xs {
   max-width: 20rem;
 }
@@ -772,11 +838,17 @@ video {
      -moz-user-select: none;
           user-select: none;
 }
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
 .grid-cols-2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
-.grid-cols-5 {
-  grid-template-columns: repeat(5, minmax(0, 1fr));
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+.grid-cols-6 {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
 }
 .grid-cols-\[minmax\(7rem\2c 25\%\)_minmax\(3rem\2c 1fr\)\] {
   grid-template-columns: minmax(7rem,25%) minmax(3rem,1fr);
@@ -784,6 +856,9 @@ video {
 .flex-col {
   flex-direction: column;
 }
+.items-start {
+  align-items: flex-start;
+}
 .items-center {
   align-items: center;
 }
@@ -799,6 +874,9 @@ video {
 .gap-2 {
   gap: 0.5rem;
 }
+.gap-3 {
+  gap: 0.75rem;
+}
 .gap-4 {
   gap: 1rem;
 }
@@ -846,6 +924,9 @@ video {
 .overflow-y-auto {
   overflow-y: auto;
 }
+.overscroll-contain {
+  overscroll-behavior: contain;
+}
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -921,9 +1002,16 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(192 132 252 / var(--tw-border-opacity, 1));
 }
+.border-red-900\/70 {
+  border-color: rgb(127 29 29 / 0.7);
+}
 .border-transparent {
   border-color: transparent;
 }
+.border-violet-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(139 92 246 / var(--tw-border-opacity, 1));
+}
 .border-yellow-400 {
   --tw-border-opacity: 1;
   border-color: rgb(250 204 21 / var(--tw-border-opacity, 1));
@@ -937,6 +1025,9 @@ video {
 .bg-background {
   background-color: hsl(var(--background));
 }
+.bg-blue-500\/30 {
+  background-color: rgb(59 130 246 / 0.3);
+}
 .bg-blue-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
@@ -965,10 +1056,17 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
 }
+.bg-gray-800\/60 {
+  background-color: rgb(31 41 55 / 0.6);
+}
 .bg-gray-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
 }
+.bg-gray-950 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 7 18 / var(--tw-bg-opacity, 1));
+}
 .bg-green-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
@@ -991,6 +1089,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
 }
+.bg-red-950\/30 {
+  background-color: rgb(69 10 10 / 0.3);
+}
 .bg-secondary {
   background-color: hsl(var(--secondary));
 }
@@ -998,6 +1099,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(196 181 253 / var(--tw-bg-opacity, 1));
 }
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
 .bg-yellow-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(202 138 4 / var(--tw-bg-opacity, 1));
@@ -1005,6 +1110,10 @@ video {
 .fill-current {
   fill: currentColor;
 }
+.object-contain {
+  -o-object-fit: contain;
+     object-fit: contain;
+}
 .p-0 {
   padding: 0px;
 }
@@ -1023,6 +1132,10 @@ video {
 .p-\[1px\] {
   padding: 1px;
 }
+.px-1 {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
 .px-1\.5 {
   padding-left: 0.375rem;
   padding-right: 0.375rem;
@@ -1115,12 +1228,23 @@ video {
 .italic {
   font-style: italic;
 }
+.leading-snug {
+  line-height: 1.375;
+}
 .tracking-wide {
   letter-spacing: 0.025em;
 }
 .tracking-widest {
   letter-spacing: 0.1em;
 }
+.text-amber-400 {
+  --tw-text-opacity: 1;
+  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
+}
+.text-blue-100 {
+  --tw-text-opacity: 1;
+  color: rgb(219 234 254 / var(--tw-text-opacity, 1));
+}
 .text-blue-300 {
   --tw-text-opacity: 1;
   color: rgb(147 197 253 / var(--tw-text-opacity, 1));
@@ -1196,6 +1320,14 @@ video {
   --tw-text-opacity: 1;
   color: rgb(168 85 247 / var(--tw-text-opacity, 1));
 }
+.text-red-200 {
+  --tw-text-opacity: 1;
+  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
+}
+.text-red-300 {
+  --tw-text-opacity: 1;
+  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
+}
 .text-red-400 {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity, 1));
@@ -1207,6 +1339,10 @@ video {
 .text-secondary-foreground {
   color: hsl(var(--secondary-foreground));
 }
+.text-violet-200 {
+  --tw-text-opacity: 1;
+  color: rgb(221 214 254 / var(--tw-text-opacity, 1));
+}
 .text-violet-300 {
   --tw-text-opacity: 1;
   color: rgb(196 181 253 / var(--tw-text-opacity, 1));
@@ -1304,6 +1440,14 @@ video {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity, 1));
 }
+.placeholder\:text-gray-500::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
+.placeholder\:text-gray-500::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+}
 .placeholder\:text-muted-foreground::-moz-placeholder {
   color: hsl(var(--muted-foreground));
 }
@@ -1339,6 +1483,9 @@ video {
 .hover\:bg-secondary\/80:hover {
   background-color: hsl(var(--secondary) / 0.8);
 }
+.hover\:bg-violet-900\/40:hover {
+  background-color: rgb(76 29 149 / 0.4);
+}
 .hover\:text-accent-foreground:hover {
   color: hsl(var(--accent-foreground));
 }
@@ -1416,6 +1563,9 @@ video {
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }
+.disabled\:hover\:bg-transparent:hover:disabled {
+  background-color: transparent;
+}
 .group:hover .group-hover\:opacity-100 {
   opacity: 1;
 }