@rozenite/network-activity-plugin 1.10.0 → 1.12.0

package/dist/devtools/assets/{App-DsimzJvx.js → App-2rukIHdY.js}

@@ -20836,12 +20836,13 @@ const getGeneratedFrameLocation$1 = (frame) => ({
   columnNumber: frame.generatedColumnNumber ?? frame.columnNumber
 });
 const isGeneratedBundleUrl = (url) => /[^/]+\.bundle(?:[/?#]|$)/.test(url);
+const isMetroSymbolicatableUrl = (url) => url?.startsWith("http") ?? false;
 const canSymbolicateStack = (stack) => stack?.some(
-  (frame) => getGeneratedFrameLocation$1(frame).url?.startsWith("http")
+  (frame) => isMetroSymbolicatableUrl(getGeneratedFrameLocation$1(frame).url)
 ) ?? false;
 const toReactNativeStackFrame = (frame) => {
   const generatedLocation = getGeneratedFrameLocation$1(frame);
-  if (!generatedLocation.url) {
+  if (!isMetroSymbolicatableUrl(generatedLocation.url)) {
     return null;
   }
   return {
@@ -20934,14 +20935,36 @@ const symbolicateInitiator = async (initiator, symbolicateStackTrace = symbolica
   if (!canSymbolicateStack(initiator.stack)) {
     return null;
   }
-  const generatedStackFrames = initiator.stack?.map(toReactNativeStackFrame).filter((frame) => frame !== null) ?? [];
+  const originalStack = initiator.stack ?? [];
+  const generatedStackFrames = originalStack.flatMap(
+    (originalFrame, originalIndex) => {
+      const frame = toReactNativeStackFrame(originalFrame);
+      return frame ? [{ frame, originalIndex }] : [];
+    }
+  );
   if (generatedStackFrames.length === 0) {
     return null;
   }
   try {
-    const symbolicatedStackTrace = await symbolicateStackTrace(generatedStackFrames);
-    const symbolicatedStack = symbolicatedStackTrace.stack.map(
-      (frame, index2) => fromSymbolicatedStackFrame(frame, initiator.stack?.[index2])
+    const symbolicatedStackTrace = await symbolicateStackTrace(
+      generatedStackFrames.map((entry) => entry.frame)
+    );
+    const symbolicatedFramesByOriginalIndex = /* @__PURE__ */ new Map();
+    symbolicatedStackTrace.stack.forEach((frame, index2) => {
+      const generatedFrame = generatedStackFrames[index2];
+      if (!generatedFrame) {
+        return;
+      }
+      symbolicatedFramesByOriginalIndex.set(
+        generatedFrame.originalIndex,
+        fromSymbolicatedStackFrame(
+          frame,
+          originalStack[generatedFrame.originalIndex]
+        )
+      );
+    });
+    const symbolicatedStack = originalStack.map(
+      (frame, index2) => symbolicatedFramesByOriginalIndex.get(index2) ?? frame
     );
     const sourceFrame = getPreferredSourceFrame(
       symbolicatedStack,
@@ -20975,6 +20998,9 @@ const symbolicateInitiator = async (initiator, symbolicateStackTrace = symbolica
   }
 };
 const STORE_VERSION = 1;
+const getElapsedDuration = (endTimestamp, startTimestamp) => {
+  return Math.max(endTimestamp - startTimestamp, 0);
+};
 const createNetworkActivityStore = () => createStore()(
   persist(
     (set, get) => ({
@@ -21169,6 +21195,10 @@ const createNetworkActivityStore = () => createStore()(
               const updatedEntry = {
                 ...httpEntry,
                 status: "failed",
+                duration: getElapsedDuration(
+                  eventData.timestamp,
+                  httpEntry.timestamp
+                ),
                 error: eventData.error
               };
               const newEntries = new Map(state.networkEntries);
@@ -21259,7 +21289,10 @@ const createNetworkActivityStore = () => createStore()(
                 status: "closed",
                 closeCode: eventData.code,
                 closeReason: eventData.reason,
-                duration: eventData.timestamp - wsEntry.timestamp
+                duration: getElapsedDuration(
+                  eventData.timestamp,
+                  wsEntry.timestamp
+                )
               };
               const newEntries = new Map(state.networkEntries);
               newEntries.set(entry.id, updatedEntry);
@@ -21324,6 +21357,10 @@ const createNetworkActivityStore = () => createStore()(
               const updatedEntry = {
                 ...wsEntry,
                 status: "error",
+                duration: getElapsedDuration(
+                  eventData.timestamp,
+                  wsEntry.timestamp
+                ),
                 error: eventData.error
               };
               const newEntries = new Map(state.networkEntries);
@@ -21408,6 +21445,10 @@ const createNetworkActivityStore = () => createStore()(
               const updatedEntry = {
                 ...sseEntry,
                 status: "error",
+                duration: getElapsedDuration(
+                  eventData.timestamp,
+                  sseEntry.timestamp
+                ),
                 error: eventData.error.message
               };
               const newEntries = new Map(state.networkEntries);
@@ -21425,7 +21466,10 @@ const createNetworkActivityStore = () => createStore()(
               const updatedEntry = {
                 ...sseEntry,
                 status: "closed",
-                duration: eventData.timestamp - sseEntry.timestamp
+                duration: getElapsedDuration(
+                  eventData.timestamp,
+                  sseEntry.timestamp
+                )
               };
               const newEntries = new Map(state.networkEntries);
               newEntries.set(eventData.requestId, updatedEntry);
@@ -21862,6 +21906,7 @@ const getProcessedRequests = memoize((state) => {
         method: httpEntry.request.method,
         httpStatus: httpEntry.response?.status,
         contentType: httpEntry.response?.contentType,
+        ttfb: httpEntry.ttfb,
         progress: httpEntry.progress
       });
     } else if (entry.type === "websocket") {
@@ -21939,9 +21984,232 @@ const useOverrides = () => {
 const useClientUISettings = () => {
   return useNetworkActivityStore((state) => state.clientUISettings);
 };
+const base64ToBytes = (base64) => {
+  const binary = atob(base64);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes;
+};
+const base64ToBlob = (base64, contentType) => {
+  const binary = atob(base64);
+  const buffer = new ArrayBuffer(binary.length);
+  const view = new Uint8Array(buffer);
+  for (let i = 0; i < binary.length; i++) {
+    view[i] = binary.charCodeAt(i);
+  }
+  return new Blob([buffer], {
+    type: contentType || "application/octet-stream"
+  });
+};
+const CONTENT_TYPE_EXTENSIONS = {
+  "application/pdf": "pdf",
+  "application/zip": "zip",
+  "application/gzip": "gz",
+  "application/json": "json",
+  "application/xml": "xml",
+  "application/javascript": "js",
+  "application/octet-stream": "bin",
+  "image/png": "png",
+  "image/jpeg": "jpg",
+  "image/gif": "gif",
+  "image/webp": "webp",
+  "image/svg+xml": "svg",
+  "image/bmp": "bmp",
+  "image/x-icon": "ico",
+  "audio/mpeg": "mp3",
+  "audio/ogg": "ogg",
+  "audio/wav": "wav",
+  "video/mp4": "mp4",
+  "video/webm": "webm",
+  "font/woff": "woff",
+  "font/woff2": "woff2",
+  "font/ttf": "ttf",
+  "font/otf": "otf",
+  "text/html": "html",
+  "text/plain": "txt",
+  "text/css": "css",
+  "text/csv": "csv"
+};
+const extensionForContentType = (contentType) => {
+  const bare = contentType.split(";", 1)[0]?.trim().toLowerCase() ?? "";
+  return CONTENT_TYPE_EXTENSIONS[bare] ?? "bin";
+};
+const readHeader = (headers, name) => {
+  if (!headers) return void 0;
+  const lowerTarget = name.toLowerCase();
+  for (const [key, value] of Object.entries(headers)) {
+    if (key.toLowerCase() === lowerTarget) {
+      return Array.isArray(value) ? value[0] : value;
+    }
+  }
+  return void 0;
+};
+const parseContentDispositionFilename = (header) => {
+  if (!header) return void 0;
+  const extended = /filename\*\s*=\s*[^']*''([^;]+)/i.exec(header);
+  if (extended?.[1]) {
+    try {
+      return decodeURIComponent(extended[1].trim()) || void 0;
+    } catch {
+    }
+  }
+  const basic2 = /filename\s*=\s*("([^"]*)"|([^;]+))/i.exec(header);
+  const value = basic2?.[2] ?? basic2?.[3];
+  return value?.trim() || void 0;
+};
+const filenameFromUrl = (url) => {
+  try {
+    const parsed = new URL(url);
+    const segments = parsed.pathname.split("/").filter(Boolean);
+    const last = segments[segments.length - 1];
+    return last && last.length > 0 ? last : void 0;
+  } catch {
+    return void 0;
+  }
+};
+const deriveFilename = ({
+  headers,
+  url,
+  contentType
+}) => {
+  const fromDisposition = parseContentDispositionFilename(
+    readHeader(headers, "Content-Disposition")
+  );
+  if (fromDisposition) return fromDisposition;
+  const fromUrl = filenameFromUrl(url);
+  if (fromUrl) return fromUrl;
+  return `response.${extensionForContentType(contentType)}`;
+};
+const downloadBlob = (blob, filename) => {
+  const objectUrl = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = objectUrl;
+  anchor.download = filename;
+  document.body.appendChild(anchor);
+  anchor.click();
+  document.body.removeChild(anchor);
+  setTimeout(() => URL.revokeObjectURL(objectUrl), 0);
+};
+const downloadJson = (data, filename) => {
+  downloadBlob(
+    new Blob([JSON.stringify(data, null, 2)], { type: "application/json" }),
+    filename
+  );
+};
+const EXPORT_SCHEMA_VERSION = 1;
+const getDuration = (duration) => duration ?? null;
+const serializeHttpEntry = (entry) => ({
+  id: entry.id,
+  type: "http",
+  source: entry.source,
+  timestamp: entry.timestamp,
+  duration: getDuration(entry.duration),
+  status: entry.status,
+  error: entry.error,
+  canceled: entry.canceled,
+  request: entry.request,
+  response: entry.response ?? null,
+  size: entry.size ?? null,
+  ttfb: entry.ttfb ?? null,
+  initiator: entry.initiator,
+  resourceType: entry.resourceType,
+  progress: entry.progress
+});
+const serializeWebSocketEntry = (entry, websocketMessages) => ({
+  id: entry.id,
+  type: "websocket",
+  source: entry.source,
+  timestamp: entry.timestamp,
+  duration: getDuration(entry.duration),
+  status: entry.status,
+  connection: entry.connection,
+  error: entry.error,
+  closeCode: entry.closeCode,
+  closeReason: entry.closeReason,
+  messages: websocketMessages.get(entry.id) ?? []
+});
+const serializeSSEEntry = (entry) => ({
+  id: entry.id,
+  type: "sse",
+  source: entry.source,
+  timestamp: entry.timestamp,
+  duration: getDuration(entry.duration),
+  status: entry.status,
+  error: entry.error,
+  request: entry.request,
+  response: entry.response ?? null,
+  initiator: entry.initiator,
+  resourceType: entry.resourceType,
+  messages: entry.messages
+});
+const serializeEntry = (entry, websocketMessages) => {
+  switch (entry.type) {
+    case "http":
+      return serializeHttpEntry(entry);
+    case "websocket":
+      return serializeWebSocketEntry(entry, websocketMessages);
+    case "sse":
+      return serializeSSEEntry(entry);
+  }
+};
+const createNetworkActivitySessionExport = (networkEntries, websocketMessages, exportedAt = /* @__PURE__ */ new Date()) => {
+  const entries = Array.from(networkEntries.values()).sort((a, b2) => a.timestamp - b2.timestamp).map((entry) => serializeEntry(entry, websocketMessages));
+  return {
+    schemaVersion: EXPORT_SCHEMA_VERSION,
+    tool: "rozenite-network-activity",
+    exportedAt: exportedAt.toISOString(),
+    summary: {
+      totalEntries: entries.length,
+      httpRequests: entries.filter((entry) => entry.type === "http").length,
+      webSocketConnections: entries.filter(
+        (entry) => entry.type === "websocket"
+      ).length,
+      sseConnections: entries.filter((entry) => entry.type === "sse").length,
+      realtimeMessages: entries.reduce((count2, entry) => {
+        if (entry.type === "websocket" || entry.type === "sse") {
+          return count2 + entry.messages.length;
+        }
+        return count2;
+      }, 0)
+    },
+    entries
+  };
+};
+const getNetworkActivitySessionExportFileName = (exportedAt = /* @__PURE__ */ new Date()) => {
+  const timestamp = exportedAt.toISOString().replace(/\.\d{3}Z$/, "Z").replace(/[:]/g, "-");
+  return `rozenite-network-session-${timestamp}.json`;
+};
+const useNetworkActivitySessionExport = () => {
+  const canExportSession = useNetworkActivityStore(
+    (state) => state.networkEntries.size > 0
+  );
+  const exportSession = reactExports.useCallback(() => {
+    const { networkEntries, websocketMessages } = store.getState();
+    if (networkEntries.size === 0) {
+      return;
+    }
+    const exportedAt = /* @__PURE__ */ new Date();
+    const exportData = createNetworkActivitySessionExport(
+      networkEntries,
+      websocketMessages,
+      exportedAt
+    );
+    downloadJson(
+      exportData,
+      getNetworkActivitySessionExportFileName(exportedAt)
+    );
+  }, []);
+  return {
+    canExportSession,
+    exportSession
+  };
+};
 const Toolbar = () => {
   const actions = useNetworkActivityActions();
   const isRecording = useIsRecording();
+  const { canExportSession, exportSession } = useNetworkActivitySessionExport();
   const onToggleRecording = () => {
     actions.setRecording(!isRecording);
   };
@@ -21969,6 +22237,18 @@ const Toolbar = () => {
         className: "h-8 w-8 p-0 text-gray-400 hover:text-blue-400",
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "h-4 w-4" })
       }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        onClick: exportSession,
+        disabled: !canExportSession,
+        className: "ml-auto h-8 w-8 p-0 text-gray-400 hover:text-blue-400",
+        title: "Export session",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "h-4 w-4" })
+      }
     )
   ] });
 };
@@ -24755,7 +25035,7 @@ const formatStartTime = (startTime) => {
   const milliseconds = date.getMilliseconds().toString().padStart(3, "0");
   return `${timeString}.${milliseconds}`;
 };
-const extractDomainAndPath = (url) => {
+const extractDomainAndPath$1 = (url) => {
   try {
     const { hostname, pathname, search, hash: hash2, port } = new URL(url);
     return {
@@ -24806,122 +25086,9 @@ const sortTime = (rowA, rowB, columnId) => {
   };
   return getNumericValue(a) - getNumericValue(b2);
 };
-const parseThreshold = (value) => {
-  const normalizedValue = value.trim();
-  if (!normalizedValue) {
-    return null;
-  }
-  const parsedValue = Number(normalizedValue);
-  return Number.isFinite(parsedValue) ? parsedValue : null;
-};
-const matchesStatusFilter = (statusCode, statusFilter) => {
-  const normalizedFilter = statusFilter.trim().toLowerCase();
-  if (!normalizedFilter) {
-    return true;
-  }
-  if (statusCode === void 0) {
-    return false;
-  }
-  const statusRangeMatch = normalizedFilter.match(/^(\d{3})\s*-\s*(\d{3})$/);
-  if (statusRangeMatch) {
-    const min2 = Number(statusRangeMatch[1]);
-    const max2 = Number(statusRangeMatch[2]);
-    return statusCode >= min2 && statusCode <= max2;
-  }
-  const statusClassMatch = normalizedFilter.match(/^([1-5])xx$/);
-  if (statusClassMatch) {
-    return Math.floor(statusCode / 100) === Number(statusClassMatch[1]);
-  }
-  const comparisonMatch = normalizedFilter.match(/^(>=|<=|>|<)\s*(\d{3})$/);
-  if (comparisonMatch) {
-    const value = Number(comparisonMatch[2]);
-    switch (comparisonMatch[1]) {
-      case ">=":
-        return statusCode >= value;
-      case "<=":
-        return statusCode <= value;
-      case ">":
-        return statusCode > value;
-      case "<":
-        return statusCode < value;
-    }
-  }
-  return statusCode === Number(normalizedFilter);
-};
-const isInFlightStatus = (status) => {
-  return ["pending", "loading", "connecting", "open"].includes(status);
-};
-const isFailedStatus = (status) => {
-  return ["failed", "error"].includes(status);
-};
-const isHttpMethod = (method) => method !== "WS" && method !== "SSE";
-const filterNetworkRequests = (requests, filter) => {
-  const searchText = filter.text.trim().toLowerCase();
-  const domainFilter = filter.advanced.domain.trim().toLowerCase();
-  const contentTypeFilter = filter.advanced.contentType.trim().toLowerCase();
-  const minSize = parseThreshold(filter.advanced.minSize);
-  const maxSize = parseThreshold(filter.advanced.maxSize);
-  const minDuration = parseThreshold(filter.advanced.minDuration);
-  const maxDuration = parseThreshold(filter.advanced.maxDuration);
-  return requests.filter((request) => {
-    if (filter.types.size > 0 && !filter.types.has(request.type)) {
-      return false;
-    }
-    if (filter.advanced.methods.size > 0 && (!isHttpMethod(request.method) || !filter.advanced.methods.has(request.method))) {
-      return false;
-    }
-    if (filter.advanced.sources.size > 0 && (!request.source || !filter.advanced.sources.has(request.source))) {
-      return false;
-    }
-    if (!matchesStatusFilter(request.statusCode, filter.advanced.status)) {
-      return false;
-    }
-    if (domainFilter && !request.domain.toLowerCase().includes(domainFilter)) {
-      return false;
-    }
-    if (contentTypeFilter && !request.contentType?.toLowerCase().includes(contentTypeFilter)) {
-      return false;
-    }
-    if (filter.advanced.failedOnly && !isFailedStatus(request.statusState)) {
-      return false;
-    }
-    if (filter.advanced.inFlightOnly && !isInFlightStatus(request.statusState)) {
-      return false;
-    }
-    if (filter.advanced.overriddenOnly && !request.hasOverride) {
-      return false;
-    }
-    if (minSize !== null && (request.sizeBytes === null || request.sizeBytes < minSize)) {
-      return false;
-    }
-    if (maxSize !== null && (request.sizeBytes === null || request.sizeBytes > maxSize)) {
-      return false;
-    }
-    if (minDuration !== null && request.durationMs < minDuration) {
-      return false;
-    }
-    if (maxDuration !== null && request.durationMs > maxDuration) {
-      return false;
-    }
-    if (searchText) {
-      const searchableFields = [
-        request.name,
-        request.method,
-        request.status,
-        request.domain,
-        request.path,
-        request.source,
-        request.type,
-        request.contentType
-      ].join(" ").toLowerCase();
-      return searchableFields.includes(searchText);
-    }
-    return true;
-  });
-};
 const processNetworkRequests = (processedRequests, overrides, showEntirePathAsName = false) => {
   return processedRequests.map((request) => {
-    const { domain, path } = extractDomainAndPath(request.name);
+    const { domain, path } = extractDomainAndPath$1(request.name);
     const duration = request.duration || 0;
     const hasOverride = overrides.has(request.name);
     let statusDisplay = request.httpStatus || request.status;
@@ -24936,7 +25103,6 @@ const processNetworkRequests = (processedRequests, overrides, showEntirePathAsNa
       name: generateName(request.name, showEntirePathAsName),
       status: statusDisplay,
       statusCode: request.httpStatus || void 0,
-      statusState: request.status,
       method: request.method,
       domain,
       path,
@@ -25002,21 +25168,19 @@ const columns$1 = [
     sortingFn: sortTime
   })
 ];
-const RequestList = ({ filter }) => {
+const RequestList = ({ requests: filteredRequests }) => {
   const actions = useNetworkActivityActions();
-  const processedRequests = useProcessedRequests();
   const selectedRequestId = useSelectedRequestId();
   const [sorting, setSorting] = reactExports.useState([]);
   const overrides = useOverrides();
   const clientUISettings = useClientUISettings();
   const requests = reactExports.useMemo(() => {
-    const allRequests = processNetworkRequests(
-      processedRequests,
+    return processNetworkRequests(
+      filteredRequests,
       overrides,
       clientUISettings?.showUrlAsName
     );
-    return filterNetworkRequests(allRequests, filter);
-  }, [processedRequests, overrides, clientUISettings?.showUrlAsName, filter]);
+  }, [filteredRequests, overrides, clientUISettings?.showUrlAsName]);
   const table = useReactTable({
     data: requests,
     columns: columns$1,
@@ -25879,7 +26043,7 @@ const TabsContent = reactExports.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 TabsContent.displayName = Content$1.displayName;
-function clamp$1(value, [min2, max2]) {
+function clamp$2(value, [min2, max2]) {
   return Math.min(max2, Math.max(min2, value));
 }
 function useStateMachine(initialState, machine) {
@@ -26529,7 +26693,7 @@ function getThumbOffsetFromScroll(scrollPos, sizes, dir = "ltr") {
   const maxScrollPos = sizes.content - sizes.viewport;
   const maxThumbPos = scrollbar - thumbSizePx;
   const scrollClampRange = dir === "ltr" ? [0, maxScrollPos] : [maxScrollPos * -1, 0];
-  const scrollWithoutMomentum = clamp$1(scrollPos, scrollClampRange);
+  const scrollWithoutMomentum = clamp$2(scrollPos, scrollClampRange);
   const interpolate = linearScale([0, maxScrollPos], [0, maxThumbPos]);
   return interpolate(scrollWithoutMomentum);
 }
@@ -27272,7 +27436,7 @@ const oppositeAlignmentMap = {
   start: "end",
   end: "start"
 };
-function clamp(start, value, end) {
+function clamp$1(start, value, end) {
   return max(start, min(value, end));
 }
 function evaluate(value, param) {
@@ -27623,7 +27787,7 @@ const arrow$3 = (options) => ({
     const min$12 = minPadding;
     const max2 = clientSize - arrowDimensions[length] - maxPadding;
     const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
-    const offset2 = clamp(min$12, center, max2);
+    const offset2 = clamp$1(min$12, center, max2);
     const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset2 && rects.reference[length] / 2 - (center < min$12 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
     const alignmentOffset = shouldAddOffset ? center < min$12 ? center - min$12 : center - max2 : 0;
     return {
@@ -27920,14 +28084,14 @@ const shift$2 = function(options) {
         const maxSide = mainAxis === "y" ? "bottom" : "right";
         const min2 = mainAxisCoord + overflow[minSide];
         const max2 = mainAxisCoord - overflow[maxSide];
-        mainAxisCoord = clamp(min2, mainAxisCoord, max2);
+        mainAxisCoord = clamp$1(min2, mainAxisCoord, max2);
       }
       if (checkCrossAxis) {
         const minSide = crossAxis === "y" ? "top" : "left";
         const maxSide = crossAxis === "y" ? "bottom" : "right";
         const min2 = crossAxisCoord + overflow[minSide];
         const max2 = crossAxisCoord - overflow[maxSide];
-        crossAxisCoord = clamp(min2, crossAxisCoord, max2);
+        crossAxisCoord = clamp$1(min2, crossAxisCoord, max2);
       }
       const limitedCoords = limiter.fn({
         ...state,
@@ -38796,120 +38960,12 @@ const HexView = ({ bytes }) => {
     }
   ) });
 };
-const base64ToBytes = (base64) => {
-  const binary = atob(base64);
-  const bytes = new Uint8Array(binary.length);
-  for (let i = 0; i < binary.length; i++) {
-    bytes[i] = binary.charCodeAt(i);
+const formatBytes$1 = (bytes) => {
+  if (bytes >= 1024 * 1024) {
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
   }
-  return bytes;
-};
-const base64ToBlob = (base64, contentType) => {
-  const binary = atob(base64);
-  const buffer = new ArrayBuffer(binary.length);
-  const view = new Uint8Array(buffer);
-  for (let i = 0; i < binary.length; i++) {
-    view[i] = binary.charCodeAt(i);
-  }
-  return new Blob([buffer], {
-    type: contentType || "application/octet-stream"
-  });
-};
-const CONTENT_TYPE_EXTENSIONS = {
-  "application/pdf": "pdf",
-  "application/zip": "zip",
-  "application/gzip": "gz",
-  "application/json": "json",
-  "application/xml": "xml",
-  "application/javascript": "js",
-  "application/octet-stream": "bin",
-  "image/png": "png",
-  "image/jpeg": "jpg",
-  "image/gif": "gif",
-  "image/webp": "webp",
-  "image/svg+xml": "svg",
-  "image/bmp": "bmp",
-  "image/x-icon": "ico",
-  "audio/mpeg": "mp3",
-  "audio/ogg": "ogg",
-  "audio/wav": "wav",
-  "video/mp4": "mp4",
-  "video/webm": "webm",
-  "font/woff": "woff",
-  "font/woff2": "woff2",
-  "font/ttf": "ttf",
-  "font/otf": "otf",
-  "text/html": "html",
-  "text/plain": "txt",
-  "text/css": "css",
-  "text/csv": "csv"
-};
-const extensionForContentType = (contentType) => {
-  const bare = contentType.split(";", 1)[0]?.trim().toLowerCase() ?? "";
-  return CONTENT_TYPE_EXTENSIONS[bare] ?? "bin";
-};
-const readHeader = (headers, name) => {
-  if (!headers) return void 0;
-  const lowerTarget = name.toLowerCase();
-  for (const [key, value] of Object.entries(headers)) {
-    if (key.toLowerCase() === lowerTarget) {
-      return Array.isArray(value) ? value[0] : value;
-    }
-  }
-  return void 0;
-};
-const parseContentDispositionFilename = (header) => {
-  if (!header) return void 0;
-  const extended = /filename\*\s*=\s*[^']*''([^;]+)/i.exec(header);
-  if (extended?.[1]) {
-    try {
-      return decodeURIComponent(extended[1].trim()) || void 0;
-    } catch {
-    }
-  }
-  const basic2 = /filename\s*=\s*("([^"]*)"|([^;]+))/i.exec(header);
-  const value = basic2?.[2] ?? basic2?.[3];
-  return value?.trim() || void 0;
-};
-const filenameFromUrl = (url) => {
-  try {
-    const parsed = new URL(url);
-    const segments = parsed.pathname.split("/").filter(Boolean);
-    const last = segments[segments.length - 1];
-    return last && last.length > 0 ? last : void 0;
-  } catch {
-    return void 0;
-  }
-};
-const deriveFilename = ({
-  headers,
-  url,
-  contentType
-}) => {
-  const fromDisposition = parseContentDispositionFilename(
-    readHeader(headers, "Content-Disposition")
-  );
-  if (fromDisposition) return fromDisposition;
-  const fromUrl = filenameFromUrl(url);
-  if (fromUrl) return fromUrl;
-  return `response.${extensionForContentType(contentType)}`;
-};
-const downloadBlob = (blob, filename) => {
-  const objectUrl = URL.createObjectURL(blob);
-  const anchor = document.createElement("a");
-  anchor.href = objectUrl;
-  anchor.download = filename;
-  document.body.appendChild(anchor);
-  anchor.click();
-  document.body.removeChild(anchor);
-  setTimeout(() => URL.revokeObjectURL(objectUrl), 0);
-};
-const formatBytes$1 = (bytes) => {
-  if (bytes >= 1024 * 1024) {
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-  }
-  if (bytes >= 1024) {
-    return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes >= 1024) {
+    return `${(bytes / 1024).toFixed(1)} KB`;
   }
   return `${bytes} bytes`;
 };
@@ -41730,19 +41786,14 @@ const Input = reactExports.forwardRef(
   }
 );
 Input.displayName = "Input";
-const REQUEST_TYPES = ["http", "sse", "websocket"];
-const HTTP_METHODS = [
-  "GET",
-  "POST",
-  "PUT",
-  "PATCH",
-  "DELETE",
-  "HEAD"
+const DEFAULT_REQUEST_TYPES = [
+  "http",
+  "websocket",
+  "sse"
 ];
-const SOURCES = ["builtin", "nitro"];
 const createDefaultFilter = () => ({
   text: "",
-  types: /* @__PURE__ */ new Set(),
+  types: new Set(DEFAULT_REQUEST_TYPES),
   advanced: {
     methods: /* @__PURE__ */ new Set(),
     sources: /* @__PURE__ */ new Set(),
@@ -41758,6 +41809,15 @@ const createDefaultFilter = () => ({
     maxDuration: ""
   }
 });
+const HTTP_METHODS = [
+  "GET",
+  "POST",
+  "PUT",
+  "PATCH",
+  "DELETE",
+  "HEAD"
+];
+const SOURCES = ["builtin", "nitro"];
 const getTypeLabel = (type) => {
   switch (type) {
     case "http":
@@ -41793,7 +41853,7 @@ const getAdvancedFilterCount = (advanced) => {
   ].filter(Boolean).length;
 };
 const getActiveFilterCount = (filter) => {
-  const typeFilterCount = filter.types.size > 0 ? 1 : 0;
+  const typeFilterCount = filter.types.size < DEFAULT_REQUEST_TYPES.length ? 1 : 0;
   return typeFilterCount + getAdvancedFilterCount(filter.advanced);
 };
 const FilterField = ({
@@ -41904,7 +41964,7 @@ const FilterBar = ({ filter, onFilterChange }) => {
     onFilterChange(createDefaultFilter());
   };
   const activeFilterCount = getActiveFilterCount(filter);
-  const hasActiveFilters = filter.text !== "" || activeFilterCount > 0;
+  const hasActiveFilters = filter.text.trim() !== "" || activeFilterCount > 0;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 p-2 border-b border-gray-700 bg-gray-800", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       Input,
@@ -41940,7 +42000,7 @@ const FilterBar = ({ filter, onFilterChange }) => {
         ...getFloatingProps(),
         children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(FilterPanelLabel, { children: "Request Type" }),
-          REQUEST_TYPES.map((type) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          DEFAULT_REQUEST_TYPES.map((type) => /* @__PURE__ */ jsxRuntimeExports.jsx(
             FilterCheckbox,
             {
               checked: filter.types.has(type),
@@ -42077,14 +42137,692 @@ const FilterBar = ({ filter, onFilterChange }) => {
     )
   ] });
 };
+const TIMELINE_LAYOUT = {
+  minVisibleBarPercent: 0.65,
+  minRangeMs: 1e3,
+  liveRefreshMs: 1e3,
+  maxRenderedRequests: 1e3,
+  laneCount: 8,
+  laneHeightPx: 2,
+  laneGapPx: 6,
+  laneHitTargetHeightPx: 8,
+  rulerHeightPx: 22,
+  laneTopPx: 32,
+  laneBottomPaddingPx: 18,
+  tickTargetCount: 7,
+  minTickLabelGapPercent: 6,
+  rangePaddingRatio: 0.025,
+  minRangePaddingMs: 25,
+  streamingRequestMaxDurationMs: 5e3
+};
+const NICE_TICK_FACTORS = [1, 2, 2.5, 5, 10];
+const ACTIVE_HTTP_STATUSES = /* @__PURE__ */ new Set([
+  "pending",
+  "loading"
+]);
+const ACTIVE_WEBSOCKET_STATUSES = /* @__PURE__ */ new Set([
+  "connecting",
+  "open",
+  "closing"
+]);
+const ACTIVE_SSE_STATUSES = /* @__PURE__ */ new Set([
+  "connecting",
+  "open"
+]);
+const clamp = (value, minimum, maximum) => {
+  return Math.min(Math.max(value, minimum), maximum);
+};
+const getTimelineChartHeight = (layout = TIMELINE_LAYOUT) => {
+  return layout.laneTopPx + layout.laneCount * layout.laneHeightPx + (layout.laneCount - 1) * layout.laneGapPx + layout.laneBottomPaddingPx;
+};
+const getTimelineLaneTop = (lane, layout = TIMELINE_LAYOUT) => {
+  return lane * (layout.laneHeightPx + layout.laneGapPx) + layout.laneTopPx;
+};
+const getTimelineTrackTop = (lane, layout = TIMELINE_LAYOUT) => {
+  const visualBarTop = getTimelineLaneTop(lane, layout);
+  return visualBarTop - (layout.laneHitTargetHeightPx - layout.laneHeightPx) / 2;
+};
+const getTimelineBarTopOffset = (layout = TIMELINE_LAYOUT) => {
+  return (layout.laneHitTargetHeightPx - layout.laneHeightPx) / 2;
+};
+const isRequestActive = (request) => {
+  switch (request.type) {
+    case "http":
+      return ACTIVE_HTTP_STATUSES.has(request.status);
+    case "websocket":
+      return ACTIVE_WEBSOCKET_STATUSES.has(request.status);
+    case "sse":
+      return ACTIVE_SSE_STATUSES.has(request.status);
+  }
+};
+const formatTimelineOffset = (milliseconds) => {
+  if (milliseconds < 1e3) {
+    return `${Math.round(milliseconds)} ms`;
+  }
+  if (milliseconds < 6e4) {
+    return `${(milliseconds / 1e3).toFixed(milliseconds < 1e4 ? 1 : 0)} s`;
+  }
+  const totalSeconds = Math.round(milliseconds / 1e3);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}m ${seconds.toString().padStart(2, "0")}s`;
+};
+const getRequestEndTime = (request, now) => {
+  if (typeof request.duration === "number") {
+    return request.timestamp + Math.max(request.duration, 0);
+  }
+  if (isRequestActive(request)) {
+    return Math.max(now, request.timestamp);
+  }
+  return request.timestamp;
+};
+const getTimelineRequestEndTime = (request, now, layout = TIMELINE_LAYOUT) => {
+  const endTime = getRequestEndTime(request, now);
+  if (request.type !== "websocket" && request.type !== "sse") {
+    return endTime;
+  }
+  return Math.min(
+    endTime,
+    request.timestamp + layout.streamingRequestMaxDurationMs
+  );
+};
+const requestOverlapsTimelineRange = (request, range, now, layout = TIMELINE_LAYOUT) => {
+  const rangeStart = Math.min(range.startTime, range.endTime);
+  const rangeEnd = Math.max(range.startTime, range.endTime);
+  const requestStart = request.timestamp;
+  const requestEnd = getTimelineRequestEndTime(request, now, layout);
+  return requestStart <= rangeEnd && requestEnd >= rangeStart;
+};
+const getNiceTickStep = (rangeDuration, targetTickCount) => {
+  const targetStep = rangeDuration / targetTickCount;
+  const exponent = Math.floor(Math.log10(targetStep));
+  const magnitude = 10 ** exponent;
+  const normalizedStep = targetStep / magnitude;
+  const factor = NICE_TICK_FACTORS.find((candidate) => candidate >= normalizedStep) ?? NICE_TICK_FACTORS[NICE_TICK_FACTORS.length - 1];
+  return factor * magnitude;
+};
+const getTimelineTicks = (rangeDuration, layout = TIMELINE_LAYOUT) => {
+  const step = getNiceTickStep(rangeDuration, layout.tickTargetCount);
+  const ticks = [];
+  for (let value = 0; value <= rangeDuration; value += step) {
+    ticks.push({
+      label: formatTimelineOffset(value),
+      offsetPercent: value / rangeDuration * 100
+    });
+  }
+  if (ticks.length === 0 || ticks[ticks.length - 1].offsetPercent < 100 - Number.EPSILON) {
+    const finalTick = {
+      label: formatTimelineOffset(rangeDuration),
+      offsetPercent: 100
+    };
+    const previousTick = ticks[ticks.length - 1];
+    if (!previousTick || finalTick.label !== previousTick.label && finalTick.offsetPercent - previousTick.offsetPercent >= layout.minTickLabelGapPercent) {
+      ticks.push(finalTick);
+    }
+  }
+  return ticks;
+};
+const getTimelineBounds = (requests, now, layout) => {
+  return requests.reduce(
+    (result, request) => {
+      const endTime = getTimelineRequestEndTime(request, now, layout);
+      return {
+        start: Math.min(result.start, request.timestamp),
+        end: Math.max(result.end, endTime)
+      };
+    },
+    {
+      start: Number.POSITIVE_INFINITY,
+      end: Number.NEGATIVE_INFINITY
+    }
+  );
+};
+const getEarliestLaneIndex = (laneEndTimes) => {
+  return laneEndTimes.reduce((earliestIndex, laneEndTime, index2) => {
+    return laneEndTime < laneEndTimes[earliestIndex] ? index2 : earliestIndex;
+  }, 0);
+};
+const getRenderableRequests = (requests, layout) => {
+  if (requests.length <= layout.maxRenderedRequests) {
+    return requests;
+  }
+  return [...requests].sort((a, b2) => b2.timestamp - a.timestamp).slice(0, layout.maxRenderedRequests);
+};
+const getTimelineModel = (requests, now, layout = TIMELINE_LAYOUT) => {
+  const renderableRequests = getRenderableRequests(requests, layout);
+  const hiddenRequestCount = requests.length - renderableRequests.length;
+  if (renderableRequests.length === 0) {
+    return {
+      rows: [],
+      ticks: getTimelineTicks(layout.minRangeMs, layout),
+      rangeStart: 0,
+      rangeDuration: layout.minRangeMs,
+      chartHeight: getTimelineChartHeight(layout),
+      totalRequestCount: requests.length,
+      hiddenRequestCount
+    };
+  }
+  const bounds = getTimelineBounds(renderableRequests, now, layout);
+  const rawRangeDuration = Math.max(
+    bounds.end - bounds.start,
+    layout.minRangeMs
+  );
+  const rangePadding = Math.max(
+    rawRangeDuration * layout.rangePaddingRatio,
+    layout.minRangePaddingMs
+  );
+  const rangeStart = bounds.start - rangePadding;
+  const rangeDuration = rawRangeDuration + rangePadding * 2;
+  const laneEndTimes = Array.from({ length: layout.laneCount }, () => 0);
+  const rows = [...renderableRequests].sort((a, b2) => a.timestamp - b2.timestamp).map((request) => {
+    const startTime = request.timestamp;
+    const endTime = getTimelineRequestEndTime(request, now, layout);
+    const duration = Math.max(endTime - startTime, 0);
+    const offsetPercent = clamp(
+      (startTime - rangeStart) / rangeDuration * 100,
+      0,
+      100 - layout.minVisibleBarPercent
+    );
+    const widthPercent = Math.min(
+      Math.max(duration / rangeDuration * 100, layout.minVisibleBarPercent),
+      100 - offsetPercent
+    );
+    const ttfb = clamp(request.ttfb ?? 0, 0, duration);
+    const ttfbPercent = duration === 0 ? 0 : ttfb / duration * 100;
+    const receivePercent = Math.max(100 - ttfbPercent, 0);
+    const availableLane = laneEndTimes.findIndex(
+      (laneEndTime) => laneEndTime <= startTime
+    );
+    const isOverflowingLane = availableLane === -1;
+    const lane = isOverflowingLane ? getEarliestLaneIndex(laneEndTimes) : availableLane;
+    laneEndTimes[lane] = Math.max(laneEndTimes[lane], endTime);
+    return {
+      request,
+      offsetPercent,
+      widthPercent,
+      duration,
+      ttfbPercent,
+      receivePercent,
+      isActive: isRequestActive(request),
+      lane,
+      isOverflowingLane
+    };
+  });
+  return {
+    rows,
+    ticks: getTimelineTicks(rangeDuration, layout),
+    rangeStart,
+    rangeDuration,
+    chartHeight: getTimelineChartHeight(layout),
+    totalRequestCount: requests.length,
+    hiddenRequestCount
+  };
+};
+const REQUEST_TIMELINE_COLORS = {
+  error: "bg-red-400",
+  primary: "bg-gray-400",
+  active: "bg-gray-500",
+  httpTtfb: "bg-gray-200"
+};
+const getPrimaryBarClassName = (request) => {
+  if (request.status === "failed" || request.status === "error") {
+    return REQUEST_TIMELINE_COLORS.error;
+  }
+  return REQUEST_TIMELINE_COLORS.primary;
+};
+const getStyle = (offsetPercent, widthPercent) => ({
+  left: `${offsetPercent}%`,
+  width: `${widthPercent}%`
+});
+const GridLines = ({ ticks }) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pointer-events-none absolute inset-0", children: ticks.map((tick) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: "absolute inset-y-0 border-l border-gray-800",
+      style: { left: `${tick.offsetPercent}%` }
+    },
+    `${tick.label}-${tick.offsetPercent}`
+  )) });
+};
+const getTickLabelStyle = (tick) => {
+  if (tick.offsetPercent === 0) {
+    return {
+      left: 4
+    };
+  }
+  if (tick.offsetPercent === 100) {
+    return {
+      right: 4
+    };
+  }
+  return {
+    left: `${tick.offsetPercent}%`
+  };
+};
+const TimelineTrack = ({
+  row,
+  isSelected,
+  onSelect,
+  shouldSuppressSelect
+}) => {
+  const primaryBarClassName = row.isActive ? REQUEST_TIMELINE_COLORS.active : getPrimaryBarClassName(row.request);
+  const isSplitHttpBar = row.request.type === "http" && row.ttfbPercent > 0 && row.receivePercent > 0;
+  const trackTop = getTimelineTrackTop(row.lane);
+  const barTop = getTimelineBarTopOffset();
+  const positionStyle = {
+    ...getStyle(row.offsetPercent, row.widthPercent),
+    top: trackTop
+  };
+  const durationLabel = row.isActive ? `${formatTimelineOffset(row.duration)}+` : formatTimelineOffset(row.duration);
+  const label = `${row.request.method} ${row.request.name} - ${durationLabel}`;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      title: label,
+      "data-timeline-track": "true",
+      className: "absolute rounded-sm text-left transition-opacity hover:opacity-80",
+      style: {
+        ...positionStyle,
+        height: TIMELINE_LAYOUT.laneHitTargetHeightPx
+      },
+      onClick: (event) => {
+        if (shouldSuppressSelect()) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        onSelect(row.request.id);
+      },
+      children: isSplitHttpBar ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: `absolute flex w-full overflow-hidden rounded-sm ${isSelected ? "ring-1 ring-blue-300 ring-offset-1 ring-offset-gray-950" : ""}`,
+          style: {
+            top: barTop,
+            height: TIMELINE_LAYOUT.laneHeightPx
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: `h-full ${REQUEST_TIMELINE_COLORS.httpTtfb}`,
+                style: { width: `${row.ttfbPercent}%` }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                className: `h-full ${REQUEST_TIMELINE_COLORS.primary}`,
+                style: { width: `${row.receivePercent}%` }
+              }
+            )
+          ]
+        }
+      ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: `absolute w-full rounded-sm ${primaryBarClassName} ${isSelected ? "ring-1 ring-blue-300 ring-offset-1 ring-offset-gray-950" : ""}`,
+          style: {
+            top: barTop,
+            height: TIMELINE_LAYOUT.laneHeightPx
+          }
+        }
+      )
+    }
+  );
+};
+const clampPercent = (value) => Math.min(Math.max(value, 0), 100);
+const getPointerPercent = (event, element) => {
+  const rect = element.getBoundingClientRect();
+  if (rect.width === 0) {
+    return 0;
+  }
+  return clampPercent((event.clientX - rect.left) / rect.width * 100);
+};
+const getSelectionStyle = (range, timeline) => {
+  const startPercent = clampPercent(
+    (range.startTime - timeline.rangeStart) / timeline.rangeDuration * 100
+  );
+  const endPercent = clampPercent(
+    (range.endTime - timeline.rangeStart) / timeline.rangeDuration * 100
+  );
+  const left2 = Math.min(startPercent, endPercent);
+  const width = Math.abs(endPercent - startPercent);
+  return {
+    left: `${left2}%`,
+    width: `${width}%`,
+    top: TIMELINE_LAYOUT.rulerHeightPx
+  };
+};
+const getDraftSelectionStyle = (draft) => {
+  const left2 = Math.min(draft.anchorPercent, draft.currentPercent);
+  const width = Math.abs(draft.currentPercent - draft.anchorPercent);
+  return {
+    left: `${left2}%`,
+    width: `${width}%`,
+    top: TIMELINE_LAYOUT.rulerHeightPx
+  };
+};
+const NetworkTimeline = ({
+  requests,
+  selection,
+  filteredRequestCount,
+  onSelectionChange
+}) => {
+  const actions = useNetworkActivityActions();
+  const selectedRequestId = useSelectedRequestId();
+  const [now, setNow] = reactExports.useState(() => Date.now());
+  const [draftSelection, setDraftSelection] = reactExports.useState(
+    null
+  );
+  const chartRef = reactExports.useRef(null);
+  const suppressTrackClickRef = reactExports.useRef(false);
+  const hasActiveRequests = requests.some(isRequestActive);
+  reactExports.useEffect(() => {
+    if (!hasActiveRequests) {
+      return;
+    }
+    const interval = window.setInterval(() => {
+      setNow(Date.now());
+    }, TIMELINE_LAYOUT.liveRefreshMs);
+    return () => window.clearInterval(interval);
+  }, [hasActiveRequests]);
+  const timeline = reactExports.useMemo(() => {
+    return getTimelineModel(requests, now);
+  }, [requests, now]);
+  const onRequestSelect = (requestId) => {
+    actions.setSelectedRequest(requestId);
+  };
+  const onPointerDown = (event) => {
+    if (event.button !== 0 || requests.length === 0) {
+      return;
+    }
+    const chartElement = chartRef.current;
+    if (!chartElement) {
+      return;
+    }
+    const percent = getPointerPercent(event, chartElement);
+    const target = event.target;
+    const startedOnTrack = target instanceof Element && target.closest('[data-timeline-track="true"]') !== null;
+    setDraftSelection({
+      anchorPercent: percent,
+      currentPercent: percent,
+      startedOnTrack
+    });
+    chartElement.setPointerCapture(event.pointerId);
+  };
+  const onPointerMove = (event) => {
+    if (!draftSelection) {
+      return;
+    }
+    const chartElement = chartRef.current;
+    if (!chartElement) {
+      return;
+    }
+    event.preventDefault();
+    const percent = getPointerPercent(event, chartElement);
+    setDraftSelection(
+      (current) => current ? { ...current, currentPercent: percent } : current
+    );
+  };
+  const onPointerUp = (event) => {
+    if (!draftSelection) {
+      return;
+    }
+    const chartElement = chartRef.current;
+    const currentPercent = chartElement ? getPointerPercent(event, chartElement) : draftSelection.currentPercent;
+    const distance = Math.abs(currentPercent - draftSelection.anchorPercent);
+    if (distance > 1) {
+      const startOffset = Math.min(draftSelection.anchorPercent, currentPercent) / 100 * timeline.rangeDuration;
+      const endOffset = Math.max(draftSelection.anchorPercent, currentPercent) / 100 * timeline.rangeDuration;
+      onSelectionChange({
+        startTime: timeline.rangeStart + startOffset,
+        endTime: timeline.rangeStart + endOffset
+      });
+      suppressTrackClickRef.current = true;
+      window.setTimeout(() => {
+        suppressTrackClickRef.current = false;
+      }, 0);
+    } else if (!draftSelection.startedOnTrack) {
+      onSelectionChange(null);
+    }
+    setDraftSelection(null);
+    if (chartElement?.hasPointerCapture(event.pointerId)) {
+      chartElement.releasePointerCapture(event.pointerId);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border-b border-gray-700 bg-gray-900 p-1.5", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      ref: chartRef,
+      className: "relative overflow-hidden border border-gray-800 bg-gray-950",
+      style: { height: timeline.chartHeight },
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(GridLines, { ticks: timeline.ticks }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "pointer-events-none absolute inset-x-0 border-b border-gray-800",
+            style: { top: TIMELINE_LAYOUT.rulerHeightPx }
+          }
+        ),
+        timeline.ticks.map((tick) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "absolute top-1 whitespace-nowrap tabular-nums text-xs text-gray-200",
+            style: getTickLabelStyle(tick),
+            children: tick.label
+          },
+          `${tick.label}-${tick.offsetPercent}`
+        )),
+        selection && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "pointer-events-none absolute bottom-0 border-x border-blue-300/70 bg-blue-400/10",
+            style: getSelectionStyle(selection, timeline)
+          }
+        ),
+        draftSelection && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: "pointer-events-none absolute bottom-0 border-x border-blue-300/70 bg-blue-400/15",
+            style: getDraftSelectionStyle(draftSelection)
+          }
+        ),
+        timeline.rows.map((row) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          TimelineTrack,
+          {
+            row,
+            isSelected: selectedRequestId === row.request.id,
+            onSelect: onRequestSelect,
+            shouldSuppressSelect: () => suppressTrackClickRef.current
+          },
+          row.request.id
+        )),
+        selection && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute bottom-1 right-1 flex items-center gap-1 rounded border border-gray-700 bg-gray-900/95 px-1.5 py-0.5 text-xs text-gray-400", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
+            filteredRequestCount,
+            " in range"
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "button",
+            {
+              type: "button",
+              title: "Clear timeline selection",
+              "aria-label": "Clear timeline selection",
+              className: "rounded p-0.5 text-gray-400 hover:bg-gray-800 hover:text-gray-100",
+              onClick: () => onSelectionChange(null),
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(X$1, { className: "h-3 w-3" })
+            }
+          )
+        ] }),
+        timeline.hiddenRequestCount > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute bottom-1 left-1 rounded border border-gray-700 bg-gray-900/95 px-1.5 py-0.5 text-xs text-gray-400", children: [
+          "Showing latest ",
+          timeline.rows.length,
+          " of",
+          " ",
+          timeline.totalRequestCount
+        ] })
+      ]
+    }
+  ) });
+};
+const parseThreshold = (value) => {
+  const normalizedValue = value.trim();
+  if (!normalizedValue) {
+    return null;
+  }
+  const parsedValue = Number(normalizedValue);
+  return Number.isFinite(parsedValue) ? parsedValue : null;
+};
+const matchesStatusFilter = (statusCode, statusFilter) => {
+  const normalizedFilter = statusFilter.trim().toLowerCase();
+  if (!normalizedFilter) {
+    return true;
+  }
+  if (statusCode === void 0) {
+    return false;
+  }
+  const statusRangeMatch = normalizedFilter.match(/^(\d{3})\s*-\s*(\d{3})$/);
+  if (statusRangeMatch) {
+    const min2 = Number(statusRangeMatch[1]);
+    const max2 = Number(statusRangeMatch[2]);
+    return statusCode >= min2 && statusCode <= max2;
+  }
+  const statusClassMatch = normalizedFilter.match(/^([1-5])xx$/);
+  if (statusClassMatch) {
+    return Math.floor(statusCode / 100) === Number(statusClassMatch[1]);
+  }
+  const comparisonMatch = normalizedFilter.match(/^(>=|<=|>|<)\s*(\d{3})$/);
+  if (comparisonMatch) {
+    const value = Number(comparisonMatch[2]);
+    switch (comparisonMatch[1]) {
+      case ">=":
+        return statusCode >= value;
+      case "<=":
+        return statusCode <= value;
+      case ">":
+        return statusCode > value;
+      case "<":
+        return statusCode < value;
+    }
+  }
+  return statusCode === Number(normalizedFilter);
+};
+const isInFlightStatus = (status) => {
+  return ["pending", "loading", "connecting", "open"].includes(status);
+};
+const isFailedStatus = (status) => {
+  return ["failed", "error"].includes(status);
+};
+const isHttpMethod = (method) => method !== "WS" && method !== "SSE";
+const extractDomainAndPath = (url) => {
+  try {
+    const { hostname, pathname, search, hash: hash2, port } = new URL(url);
+    return {
+      domain: `${hostname}${port ? `:${port}` : ""}`,
+      path: `${pathname}${search}${hash2}`
+    };
+  } catch {
+    return { domain: "unknown", path: url };
+  }
+};
+const matchesRequestFilter = (request, filter, options = {}) => {
+  if (filter.types.size > 0 && !filter.types.has(request.type)) {
+    return false;
+  }
+  if (filter.advanced.methods.size > 0 && (!isHttpMethod(request.method) || !filter.advanced.methods.has(request.method))) {
+    return false;
+  }
+  if (filter.advanced.sources.size > 0 && (!request.source || !filter.advanced.sources.has(request.source))) {
+    return false;
+  }
+  if (!matchesStatusFilter(request.httpStatus, filter.advanced.status)) {
+    return false;
+  }
+  const { domain, path } = extractDomainAndPath(request.name);
+  const domainFilter = filter.advanced.domain.trim().toLowerCase();
+  if (domainFilter && !domain.toLowerCase().includes(domainFilter)) {
+    return false;
+  }
+  const contentTypeFilter = filter.advanced.contentType.trim().toLowerCase();
+  if (contentTypeFilter && !request.contentType?.toLowerCase().includes(contentTypeFilter)) {
+    return false;
+  }
+  if (filter.advanced.failedOnly && !isFailedStatus(request.status)) {
+    return false;
+  }
+  if (filter.advanced.inFlightOnly && !isInFlightStatus(request.status)) {
+    return false;
+  }
+  if (filter.advanced.overriddenOnly && !options.hasOverride) {
+    return false;
+  }
+  const minSize = parseThreshold(filter.advanced.minSize);
+  if (minSize !== null && (request.size === null || request.size < minSize)) {
+    return false;
+  }
+  const maxSize = parseThreshold(filter.advanced.maxSize);
+  if (maxSize !== null && (request.size === null || request.size > maxSize)) {
+    return false;
+  }
+  const duration = request.duration || 0;
+  const minDuration = parseThreshold(filter.advanced.minDuration);
+  if (minDuration !== null && duration < minDuration) {
+    return false;
+  }
+  const maxDuration = parseThreshold(filter.advanced.maxDuration);
+  if (maxDuration !== null && duration > maxDuration) {
+    return false;
+  }
+  const searchText = filter.text.trim().toLowerCase();
+  if (!searchText) {
+    return true;
+  }
+  const searchableFields = [
+    request.name,
+    request.method,
+    request.status,
+    request.httpStatus,
+    request.source,
+    request.type,
+    request.contentType,
+    domain,
+    path
+  ].filter((value) => value !== void 0 && value !== null).join(" ").toLowerCase();
+  return searchableFields.includes(searchText);
+};
 const InspectorView = ({ client: client2 }) => {
   const actions = useNetworkActivityActions();
   const clientManagement = useNetworkActivityClientManagement();
   const hasSelectedRequest = useHasSelectedRequest();
   const overrides = useOverrides();
+  const processedRequests = useProcessedRequests();
   const [filter, setFilter] = reactExports.useState(
     () => createDefaultFilter()
   );
+  const [timelineSelection, setTimelineSelection] = reactExports.useState(null);
+  const filteredRequests = reactExports.useMemo(() => {
+    return processedRequests.filter(
+      (request) => matchesRequestFilter(request, filter, {
+        hasOverride: overrides.has(request.name)
+      })
+    );
+  }, [processedRequests, filter, overrides]);
+  const visibleRequests = reactExports.useMemo(() => {
+    if (!timelineSelection) {
+      return filteredRequests;
+    }
+    const now = Date.now();
+    return filteredRequests.filter(
+      (request) => requestOverlapsTimelineRange(request, timelineSelection, now)
+    );
+  }, [filteredRequests, timelineSelection]);
   reactExports.useEffect(() => {
     if (!client2) {
       return;
@@ -42103,11 +42841,22 @@ const InspectorView = ({ client: client2 }) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(Toolbar, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(FilterBar, { filter, onFilterChange: setFilter }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-1 overflow-hidden", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "div",
         {
           className: `flex flex-col ${hasSelectedRequest ? "w-1/2" : "w-full"} border-r border-gray-700 overflow-hidden`,
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(RequestList, { filter })
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              NetworkTimeline,
+              {
+                requests: filteredRequests,
+                selection: timelineSelection,
+                filteredRequestCount: visibleRequests.length,
+                onSelectionChange: setTimelineSelection
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(RequestList, { requests: visibleRequests })
+          ]
         }
       ),
       hasSelectedRequest && /* @__PURE__ */ jsxRuntimeExports.jsx(SidePanel, {})