react-native-inapp-inspector 2.3.19 → 2.3.21

package/dist/commonjs/components/Inspector/NetworkTab.js

@@ -1,581 +1,151 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const InspectorContext_1 = require("./InspectorContext");
-const TouchableScale_1 = __importDefault(require("../TouchableScale"));
-const AnimatedEntrance_1 = __importDefault(require("../AnimatedEntrance"));
-const DomainHeader_1 = __importDefault(require("../DomainHeader"));
-const LogCard_1 = __importDefault(require("../LogCard"));
-const EmptyState_1 = __importDefault(require("../EmptyState"));
-const EndOfListFooter_1 = __importDefault(require("../EndOfListFooter"));
-const NetworkFilterModal_1 = __importDefault(require("./NetworkFilterModal"));
-const styles_1 = __importDefault(require("../../styles"));
-const AppColors_1 = require("../../styles/AppColors");
-const AppFonts_1 = require("../../styles/AppFonts");
-const constants_1 = require("../../constants");
-const i18n_1 = require("../../i18n");
-const NetworkIcons_1 = require("../NetworkIcons");
-const NetworkTab = react_1.default.memo(() => {
-    const { groupedData, search, setSearch, searchScope, setSearchScope, isRegexSearch, setIsRegexSearch, isCaseSensitive, setIsCaseSensitive, quickFilter, setQuickFilter, handleDelete, selectedLogs, sortOrder, setSortOrder, statusFilters, setStatusFilters, methodFilters, setMethodFilters, availableMethods, filteredLogs, logs, toggleSectionFilter, toggleSectionCollapse, minStart, totalRange, newLogIds, toggleSelect, setSelected, isNetworkPaused, setIsNetworkPaused, } = (0, InspectorContext_1.useInspector)();
-    const { t } = (0, i18n_1.useTranslation)();
-    const apisListRef = (0, react_1.useRef)(null);
-    const [isFilterModalOpen, setIsFilterModalOpen] = react_1.default.useState(false);
-    const [isSearchFocused, setIsSearchFocused] = react_1.default.useState(false);
-    const modalFilterState = (0, react_1.useMemo)(() => ({
-        statusCodes: statusFilters.size > 0 ? new Set(statusFilters) : new Set(['all']),
-        methods: methodFilters.size > 0 ? new Set(methodFilters) : new Set(['all']),
-        latency: 'all',
-        protocol: 'all',
-        sortBy: sortOrder === 'newest' ? 'time_desc' : 'time_asc',
-    }), [statusFilters, methodFilters, sortOrder]);
-    const handleApplyNetworkFilters = (0, react_1.useCallback)((newFilters) => {
-        if (newFilters.statusCodes.has('all') ||
-            newFilters.statusCodes.size === 0) {
-            setStatusFilters(new Set());
-        }
-        else {
-            setStatusFilters(new Set(newFilters.statusCodes));
-        }
-        if (newFilters.methods.has('all') || newFilters.methods.size === 0) {
-            setMethodFilters(new Set());
-        }
-        else {
-            setMethodFilters(new Set([...newFilters.methods].map(m => m)));
-        }
-        if (newFilters.sortBy === 'time_asc') {
-            setSortOrder('oldest');
-        }
-        else {
-            setSortOrder('newest');
-        }
-    }, [setStatusFilters, setMethodFilters, setSortOrder]);
-    const quickCounts = (0, react_1.useMemo)(() => {
-        let errorCount = 0;
-        let successCount = 0;
-        let slowCount = 0;
-        let postCount = 0;
-        let getCount = 0;
-        let gqlCount = 0;
-        logs.forEach(l => {
-            const s = typeof l.status === 'number'
-                ? l.status
-                : parseInt(String(l.status), 10);
-            if (l.status === 0 || l.status == null || (!isNaN(s) && s >= 400)) {
-                errorCount++;
-            }
-            else if (!isNaN(s) && s >= 200 && s < 400) {
-                successCount++;
-            }
-            if ((l.duration || 0) >= 500) {
-                slowCount++;
-            }
-            const m = (l.method || '').toUpperCase();
-            if (m === 'POST')
-                postCount++;
-            if (m === 'GET')
-                getCount++;
-            const u = (l.url || '').toLowerCase();
-            const c = (l.client || '').toLowerCase();
-            if (u.includes('graphql') ||
-                c.includes('graphql') ||
-                c.includes('apollo')) {
-                gqlCount++;
-            }
-        });
-        return {
-            all: logs.length,
-            errors: errorCount,
-            success: successCount,
-            slow: slowCount,
-            post: postCount,
-            get: getCount,
-            graphql: gqlCount,
-        };
-    }, [logs]);
-    const QUICK_CHIPS = (0, react_1.useMemo)(() => [
-        {
-            id: 'all',
-            label: 'All',
-            count: quickCounts.all,
-            color: AppColors_1.AppColors.purple,
-        },
-        {
-            id: 'errors',
-            label: 'Errors',
-            count: quickCounts.errors,
-            color: AppColors_1.AppColors.errorColor,
-        },
-        {
-            id: 'success',
-            label: '2xx OK',
-            count: quickCounts.success,
-            color: AppColors_1.AppColors.greenColor,
-        },
-        {
-            id: 'slow',
-            label: 'Slow >500ms',
-            count: quickCounts.slow,
-            color: AppColors_1.AppColors.warningIconGold,
-        },
-        {
-            id: 'POST',
-            label: 'POST',
-            count: quickCounts.post,
-            color: constants_1.METHOD_COLORS.POST || '#3B82F6',
-        },
-        {
-            id: 'GET',
-            label: 'GET',
-            count: quickCounts.get,
-            color: constants_1.METHOD_COLORS.GET || '#10B981',
-        },
-        {
-            id: 'graphql',
-            label: 'GraphQL',
-            count: quickCounts.graphql,
-            color: '#E10098',
-        },
-    ], [quickCounts]);
-    const networkMetrics = (0, react_1.useMemo)(() => {
-        if (!logs || logs.length === 0)
-            return null;
-        let successCount = 0;
-        let completedCount = 0;
-        let totalDuration = 0;
-        let totalBytes = 0;
-        const durations = [];
-        logs.forEach(log => {
-            if (log.status != null) {
-                completedCount++;
-                const s = typeof log.status === 'number' ? log.status : parseInt(String(log.status), 10);
-                if (!isNaN(s)) {
-                    if (s >= 200 && s < 400) {
-                        successCount++;
-                    }
-                }
-            }
-            if (typeof log.duration === 'number' && log.duration > 0) {
-                durations.push(log.duration);
-                totalDuration += log.duration;
-            }
-        });
-        durations.sort((a, b) => a - b);
-        const avgDuration = durations.length > 0 ? Math.round(totalDuration / durations.length) : 0;
-        const p95 = durations.length > 0 ? durations[Math.floor(durations.length * 0.95)] : 0;
-        const successRate = completedCount > 0 ? Math.round((successCount / completedCount) * 100) : 100;
-        return {
-            successRate,
-            avgDuration,
-            p95,
-            totalCount: logs.length,
-        };
-    }, [logs]);
-    const renderItem = (0, react_1.useCallback)(({ item, index }) => {
-        if (item.type === 'header') {
-            return (<AnimatedEntrance_1.default index={index} distance={8}>
-            <DomainHeader_1.default pageName={item.pageName} color={item.color} stats={item.stats} activeFilters={item.activeFilters} onToggleFilter={toggleSectionFilter} isCollapsed={item.isCollapsed} onToggleCollapse={toggleSectionCollapse} isFirst={item.isFirst} timestamp={item.timestamp}/>
-          </AnimatedEntrance_1.default>);
-        }
-        const { log, isLast, color } = item;
-        return (<AnimatedEntrance_1.default index={index} distance={8} style={[
-                styles_1.default.treeNodeRow,
-                isLast && styles_1.default.treeNodeRowLast,
-            ]}>
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(o,t,l,s){s===void 0&&(s=l);var n=Object.getOwnPropertyDescriptor(t,l);(!n||("get"in n?!t.__esModule:n.writable||n.configurable))&&(n={enumerable:!0,get:function(){return t[l]}}),Object.defineProperty(o,s,n)}):(function(o,t,l,s){s===void 0&&(s=l),o[s]=t[l]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(o,t){Object.defineProperty(o,"default",{enumerable:!0,value:t})}):function(o,t){o.default=t}),__importStar=this&&this.__importStar||(function(){var o=function(t){return o=Object.getOwnPropertyNames||function(l){var s=[];for(var n in l)Object.prototype.hasOwnProperty.call(l,n)&&(s[s.length]=n);return s},o(t)};return function(t){if(t&&t.__esModule)return t;var l={};if(t!=null)for(var s=o(t),n=0;n<s.length;n++)s[n]!=="default"&&__createBinding(l,t,s[n]);return __setModuleDefault(l,t),l}})(),__importDefault=this&&this.__importDefault||function(o){return o&&o.__esModule?o:{default:o}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),InspectorContext_1=require("./InspectorContext"),TouchableScale_1=__importDefault(require("../TouchableScale")),AnimatedEntrance_1=__importDefault(require("../AnimatedEntrance")),DomainHeader_1=__importDefault(require("../DomainHeader")),LogCard_1=__importDefault(require("../LogCard")),EmptyState_1=__importDefault(require("../EmptyState")),EndOfListFooter_1=__importDefault(require("../EndOfListFooter")),NetworkFilterModal_1=__importDefault(require("./NetworkFilterModal")),styles_1=__importDefault(require("../../styles")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),constants_1=require("../../constants"),i18n_1=require("../../i18n"),NetworkIcons_1=require("../NetworkIcons"),NetworkTab=react_1.default.memo(()=>{const{groupedData:o,search:t,setSearch:l,searchScope:s,setSearchScope:n,isRegexSearch:U,setIsRegexSearch:X,isCaseSensitive:J,setIsCaseSensitive:Y,quickFilter:z,setQuickFilter:v,handleDelete:E,selectedLogs:A,sortOrder:x,setSortOrder:m,statusFilters:c,setStatusFilters:y,methodFilters:p,setMethodFilters:S,availableMethods:Z,filteredLogs:b,logs:g,toggleSectionFilter:I,toggleSectionCollapse:k,minStart:R,totalRange:B,newLogIds:O,toggleSelect:P,setSelected:q,isNetworkPaused:V,setIsNetworkPaused:H}=(0,InspectorContext_1.useInspector)(),{t:D}=(0,i18n_1.useTranslation)(),W=(0,react_1.useRef)(null),[$,F]=react_1.default.useState(!1),[L,M]=react_1.default.useState(!1),j=(0,react_1.useMemo)(()=>({statusCodes:c.size>0?new Set(c):new Set(["all"]),methods:p.size>0?new Set(p):new Set(["all"]),latency:"all",protocol:"all",sortBy:x==="newest"?"time_desc":"time_asc"}),[c,p,x]),G=(0,react_1.useCallback)(e=>{e.statusCodes.has("all")||e.statusCodes.size===0?y(new Set):y(new Set(e.statusCodes)),e.methods.has("all")||e.methods.size===0?S(new Set):S(new Set([...e.methods].map(r=>r))),e.sortBy==="time_asc"?m("oldest"):m("newest")},[y,S,m]),C=(0,react_1.useMemo)(()=>{let e=0,r=0,a=0,i=0,u=0,T=0;return g.forEach(f=>{const w=typeof f.status=="number"?f.status:parseInt(String(f.status),10);f.status===0||f.status==null||!isNaN(w)&&w>=400?e++:!isNaN(w)&&w>=200&&w<400&&r++,(f.duration||0)>=500&&a++;const d=(f.method||"").toUpperCase();d==="POST"&&i++,d==="GET"&&u++;const h=(f.url||"").toLowerCase(),N=(f.client||"").toLowerCase();(h.includes("graphql")||N.includes("graphql")||N.includes("apollo"))&&T++}),{all:g.length,errors:e,success:r,slow:a,post:i,get:u,graphql:T}},[g]),Q=(0,react_1.useMemo)(()=>[{id:"all",label:"All",count:C.all,color:AppColors_1.AppColors.purple},{id:"errors",label:"Errors",count:C.errors,color:AppColors_1.AppColors.errorColor},{id:"success",label:"2xx OK",count:C.success,color:AppColors_1.AppColors.greenColor},{id:"slow",label:"Slow >500ms",count:C.slow,color:AppColors_1.AppColors.warningIconGold},{id:"POST",label:"POST",count:C.post,color:constants_1.METHOD_COLORS.POST||"#3B82F6"},{id:"GET",label:"GET",count:C.get,color:constants_1.METHOD_COLORS.GET||"#10B981"},{id:"graphql",label:"GraphQL",count:C.graphql,color:"#E10098"}],[C]),_=(0,react_1.useMemo)(()=>{if(!g||g.length===0)return null;let e=0,r=0,a=0,i=0;const u=[];g.forEach(d=>{if(d.status!=null){r++;const h=typeof d.status=="number"?d.status:parseInt(String(d.status),10);isNaN(h)||h>=200&&h<400&&e++}typeof d.duration=="number"&&d.duration>0&&(u.push(d.duration),a+=d.duration)}),u.sort((d,h)=>d-h);const T=u.length>0?Math.round(a/u.length):0,f=u.length>0?u[Math.floor(u.length*.95)]:0;return{successRate:r>0?Math.round(e/r*100):100,avgDuration:T,p95:f,totalCount:g.length}},[g]),K=(0,react_1.useCallback)(({item:e,index:r})=>{if(e.type==="header")return<AnimatedEntrance_1.default index={r}distance={8}>
+            <DomainHeader_1.default pageName={e.pageName}color={e.color}stats={e.stats}activeFilters={e.activeFilters}onToggleFilter={I}isCollapsed={e.isCollapsed}onToggleCollapse={k}isFirst={e.isFirst}timestamp={e.timestamp}/>
+          </AnimatedEntrance_1.default>;const{log:a,isLast:i,color:u}=e;return<AnimatedEntrance_1.default index={r}distance={8}style={[styles_1.default.treeNodeRow,i&&styles_1.default.treeNodeRowLast]}>
           <react_native_1.View style={styles_1.default.treeLines}>
-            <react_native_1.View style={[
-                styles_1.default.modernTreeLine,
-                { borderColor: color },
-                isLast && styles_1.default.modernTreeLineLast,
-            ]}/>
-            {!isLast && (<react_native_1.View style={[styles_1.default.modernTreeBranch, { borderColor: color }]}/>)}
+            <react_native_1.View style={[styles_1.default.modernTreeLine,{borderColor:u},i&&styles_1.default.modernTreeLineLast]}/>
+            {!i&&<react_native_1.View style={[styles_1.default.modernTreeBranch,{borderColor:u}]}/>}
           </react_native_1.View>
           <react_native_1.View style={styles_1.default.treeCardWrapper}>
-            <LogCard_1.default item={log} isSelected={selectedLogs.has(log.id)} onToggleSelect={toggleSelect} onPress={() => {
-                setSelected(log);
-            }} timelineMinStart={minStart} timelineTotalRange={totalRange} isNew={newLogIds.has(log.id)} searchStr={search}/>
+            <LogCard_1.default item={a}isSelected={A.has(a.id)}onToggleSelect={P}onPress={()=>{q(a)}}timelineMinStart={R}timelineTotalRange={B}isNew={O.has(a.id)}searchStr={t}/>
           </react_native_1.View>
-        </AnimatedEntrance_1.default>);
-    }, [
-        minStart,
-        totalRange,
-        newLogIds,
-        selectedLogs,
-        toggleSelect,
-        search,
-        toggleSectionFilter,
-        toggleSectionCollapse,
-        setSelected,
-    ]);
-    return (<react_native_1.View style={{ flex: 1 }}>
-      <react_native_1.View style={{ marginTop: 6 }}>
+        </AnimatedEntrance_1.default>},[R,B,O,A,P,t,I,k,q]);return<react_native_1.View style={{flex:1}}>
+      <react_native_1.View style={{marginTop:6}}>
             
-            {networkMetrics != null && networkMetrics.totalCount > 0 && (<react_native_1.View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                backgroundColor: AppColors_1.AppColors.grayBackground,
-                borderRadius: 8,
-                paddingHorizontal: 10,
-                paddingVertical: 5.5,
-                marginHorizontal: 12,
-                marginBottom: 6,
-                borderWidth: 1,
-                borderColor: AppColors_1.AppColors.dividerColor,
-            }}>
+            {_!=null&&_.totalCount>0&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:AppColors_1.AppColors.grayBackground,borderRadius:8,paddingHorizontal:10,paddingVertical:5.5,marginHorizontal:12,marginBottom:6,borderWidth:1,borderColor:AppColors_1.AppColors.dividerColor}}>
                 
-                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4.5 }}>
-                  <react_native_1.View style={{
-                width: 6,
-                height: 6,
-                borderRadius: 3,
-                backgroundColor: networkMetrics.successRate >= 95
-                    ? AppColors_1.AppColors.greenColor
-                    : networkMetrics.successRate >= 80
-                        ? AppColors_1.AppColors.amber500
-                        : AppColors_1.AppColors.errorColor,
-            }}/>
-                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 10.5, color: AppColors_1.AppColors.primaryBlack }}>
-                    {networkMetrics.successRate}%
+                <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4.5}}>
+                  <react_native_1.View style={{width:6,height:6,borderRadius:3,backgroundColor:_.successRate>=95?AppColors_1.AppColors.greenColor:_.successRate>=80?AppColors_1.AppColors.amber500:AppColors_1.AppColors.errorColor}}/>
+                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:AppColors_1.AppColors.primaryBlack}}>
+                    {_.successRate}%
                   </react_native_1.Text>
-                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 10, color: AppColors_1.AppColors.grayTextWeak }}>
-                    {t('network.successRate')}
+                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:10,color:AppColors_1.AppColors.grayTextWeak}}>
+                    {D("network.successRate")}
                   </react_native_1.Text>
                 </react_native_1.View>
 
-                <react_native_1.View style={{ width: 1, height: 11, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
+                <react_native_1.View style={{width:1,height:11,backgroundColor:AppColors_1.AppColors.dividerColor}}/>
 
                 
-                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
-                  <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.purple} size={10}/>
-                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 10.5, color: AppColors_1.AppColors.purple }}>
-                    {networkMetrics.avgDuration}ms
+                <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                  <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.purple}size={10}/>
+                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:AppColors_1.AppColors.purple}}>
+                    {_.avgDuration}ms
                   </react_native_1.Text>
-                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 10, color: AppColors_1.AppColors.grayTextWeak }}>
-                    {t('network.avgLatency')}
+                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:10,color:AppColors_1.AppColors.grayTextWeak}}>
+                    {D("network.avgLatency")}
                   </react_native_1.Text>
                 </react_native_1.View>
 
-                <react_native_1.View style={{ width: 1, height: 11, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
+                <react_native_1.View style={{width:1,height:11,backgroundColor:AppColors_1.AppColors.dividerColor}}/>
 
                 
-                <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
-                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interBold, fontSize: 10.5, color: AppColors_1.AppColors.primaryBlack }}>
-                    {networkMetrics.p95}ms
+                <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:AppColors_1.AppColors.primaryBlack}}>
+                    {_.p95}ms
                   </react_native_1.Text>
-                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 10, color: AppColors_1.AppColors.grayTextWeak }}>
+                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:10,color:AppColors_1.AppColors.grayTextWeak}}>
                     P95
                   </react_native_1.Text>
                 </react_native_1.View>
-              </react_native_1.View>)}
+              </react_native_1.View>}
 
             
             <react_native_1.View style={styles_1.default.toolbarRow}>
-              <react_native_1.View style={[
-            styles_1.default.searchContainer,
-            isSearchFocused && {
-                borderColor: AppColors_1.AppColors.purple,
-                borderWidth: 1.5,
-            },
-        ]}>
-                <NetworkIcons_1.SearchIcon color={isSearchFocused
-            ? AppColors_1.AppColors.purple
-            : AppColors_1.AppColors.grayTextWeak} size={15}/>
-                <react_native_1.TextInput placeholder="Search URL, status, method, headers, body..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} onFocus={() => setIsSearchFocused(true)} onBlur={() => setIsSearchFocused(false)} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+              <react_native_1.View style={[styles_1.default.searchContainer,L&&{borderColor:AppColors_1.AppColors.purple,borderWidth:1.5}]}>
+                <NetworkIcons_1.SearchIcon color={L?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayTextWeak}size={15}/>
+                <react_native_1.TextInput placeholder="Search URL, status, method, headers, body..."placeholderTextColor={AppColors_1.AppColors.grayTextWeak}value={t}onChangeText={l}onFocus={()=>M(!0)}onBlur={()=>M(!1)}style={styles_1.default.searchInput}autoCorrect={!1}autoCapitalize="none"/>
 
-                {search.length > 0 && (<react_native_1.View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 4,
-            }}>
-                    <react_native_1.View style={{
-                backgroundColor: `${AppColors_1.AppColors.purple}20`,
-                borderRadius: 10,
-                paddingHorizontal: 6,
-                paddingVertical: 1.5,
-            }}>
-                      <react_native_1.Text style={{
-                color: AppColors_1.AppColors.purple,
-                fontSize: 9.5,
-                fontFamily: AppFonts_1.AppFonts.interBold,
-            }}>
-                        {filteredLogs.length}
+                {t.length>0&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                    <react_native_1.View style={{backgroundColor:`${AppColors_1.AppColors.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
+                      <react_native_1.Text style={{color:AppColors_1.AppColors.purple,fontSize:9.5,fontFamily:AppFonts_1.AppFonts.interBold}}>
+                        {b.length}
                       </react_native_1.Text>
                     </react_native_1.View>
-                    <react_native_1.Pressable onPress={() => setSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
-                      <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={13}/>
+                    <react_native_1.Pressable onPress={()=>l("")}hitSlop={10}style={styles_1.default.clearBtn}>
+                      <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak}size={13}/>
                     </react_native_1.Pressable>
-                  </react_native_1.View>)}
+                  </react_native_1.View>}
               </react_native_1.View>
 
               <react_native_1.View style={styles_1.default.toolbarRight}>
-                <TouchableScale_1.default style={[
-            styles_1.default.toolbarBtn,
-            isNetworkPaused && {
-                borderColor: `${AppColors_1.AppColors.darkOrange}50`,
-                backgroundColor: `${AppColors_1.AppColors.darkOrange}18`,
-            },
-        ]} onPress={() => setIsNetworkPaused(p => !p)} hitSlop={6}>
-                  <NetworkIcons_1.HeaderPauseIcon isPaused={isNetworkPaused} color={isNetworkPaused
-            ? AppColors_1.AppColors.darkOrange
-            : AppColors_1.AppColors.grayTextStrong} size={16}/>
+                <TouchableScale_1.default style={[styles_1.default.toolbarBtn,V&&{borderColor:`${AppColors_1.AppColors.darkOrange}50`,backgroundColor:`${AppColors_1.AppColors.darkOrange}18`}]}onPress={()=>H(e=>!e)}hitSlop={6}>
+                  <NetworkIcons_1.HeaderPauseIcon isPaused={V}color={V?AppColors_1.AppColors.darkOrange:AppColors_1.AppColors.grayTextStrong}size={16}/>
                 </TouchableScale_1.default>
 
-                <TouchableScale_1.default style={[
-            styles_1.default.toolbarBtn,
-            {
-                borderColor: `${AppColors_1.AppColors.errorColor}38`,
-                backgroundColor: `${AppColors_1.AppColors.errorColor}0F`,
-            },
-        ]} onPress={handleDelete} hitSlop={6}>
-                  <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={15}/>
-                  {selectedLogs.size > 0 && (<react_native_1.View style={styles_1.default.trashBadge}>
+                <TouchableScale_1.default style={[styles_1.default.toolbarBtn,{borderColor:`${AppColors_1.AppColors.errorColor}38`,backgroundColor:`${AppColors_1.AppColors.errorColor}0F`}]}onPress={E}hitSlop={6}>
+                  <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor}size={15}/>
+                  {A.size>0&&<react_native_1.View style={styles_1.default.trashBadge}>
                       <react_native_1.Text style={styles_1.default.trashBadgeText}>
-                        {selectedLogs.size}
+                        {A.size}
                       </react_native_1.Text>
-                    </react_native_1.View>)}
+                    </react_native_1.View>}
                 </TouchableScale_1.default>
 
-                <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={() => setSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
-                  <NetworkIcons_1.SortArrowIcon direction={sortOrder === 'newest' ? 'down' : 'up'} color={AppColors_1.AppColors.grayTextStrong} size={18}/>
+                <TouchableScale_1.default style={styles_1.default.toolbarBtn}onPress={()=>m(e=>e==="newest"?"oldest":"newest")}hitSlop={10}>
+                  <NetworkIcons_1.SortArrowIcon direction={x==="newest"?"down":"up"}color={AppColors_1.AppColors.grayTextStrong}size={18}/>
                 </TouchableScale_1.default>
 
-                <TouchableScale_1.default style={[
-            styles_1.default.toolbarBtn,
-            (statusFilters.size > 0 || methodFilters.size > 0) && {
-                borderColor: AppColors_1.AppColors.purple,
-                backgroundColor: `${AppColors_1.AppColors.purple}15`,
-            },
-        ]} onPress={() => setIsFilterModalOpen(true)} hitSlop={6}>
-                  <NetworkIcons_1.FilterIcon color={statusFilters.size > 0 || methodFilters.size > 0
-            ? AppColors_1.AppColors.purple
-            : AppColors_1.AppColors.grayTextStrong} size={16}/>
-                  {(statusFilters.size > 0 ||
-            methodFilters.size > 0) && (<react_native_1.View style={styles_1.default.activeFilterDot}/>)}
+                <TouchableScale_1.default style={[styles_1.default.toolbarBtn,(c.size>0||p.size>0)&&{borderColor:AppColors_1.AppColors.purple,backgroundColor:`${AppColors_1.AppColors.purple}15`}]}onPress={()=>F(!0)}hitSlop={6}>
+                  <NetworkIcons_1.FilterIcon color={c.size>0||p.size>0?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayTextStrong}size={16}/>
+                  {(c.size>0||p.size>0)&&<react_native_1.View style={styles_1.default.activeFilterDot}/>}
                 </TouchableScale_1.default>
               </react_native_1.View>
             </react_native_1.View>
 
             
-            <react_native_1.View style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            marginBottom: 8,
-            paddingHorizontal: 12,
-            gap: 6,
-        }}>
-              <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ flex: 1 }} contentContainerStyle={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 6,
-            paddingRight: 6,
-        }}>
-                {QUICK_CHIPS.map(chip => {
-            const isActive = quickFilter === chip.id;
-            const chipColor = chip.color || AppColors_1.AppColors.purple;
-            const iconColor = isActive ? AppColors_1.AppColors.white : chipColor;
-            return (<TouchableScale_1.default key={chip.id} onPress={() => {
-                    setQuickFilter(isActive ? 'all' : chip.id);
-                }}>
-                      <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    paddingHorizontal: 9,
-                    paddingVertical: 4.5,
-                    borderRadius: 8,
-                    backgroundColor: isActive
-                        ? chipColor
-                        : `${chipColor}12`,
-                    borderWidth: 1,
-                    borderColor: isActive
-                        ? chipColor
-                        : `${chipColor}30`,
-                    gap: 5,
-                }}>
-                        {chip.id === 'all' && <NetworkIcons_1.LayersIcon size={11} color={iconColor}/>}
-                        {chip.id === 'errors' && <NetworkIcons_1.CircleXIcon size={11} color={iconColor}/>}
-                        {chip.id === 'success' && <NetworkIcons_1.CircleCheckIcon size={11} color={iconColor}/>}
-                        {chip.id === 'slow' && <NetworkIcons_1.ClockIcon size={11} color={iconColor}/>}
-                        {chip.id === 'POST' && <NetworkIcons_1.RequestIcon size={11} color={iconColor}/>}
-                        {chip.id === 'GET' && <NetworkIcons_1.ResponseIcon size={11} color={iconColor}/>}
-                        {chip.id === 'graphql' && <NetworkIcons_1.AtomIcon size={11} color={iconColor}/>}
-                        <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 10.5,
-                    color: isActive
-                        ? AppColors_1.AppColors.white
-                        : AppColors_1.AppColors.primaryBlack,
-                }}>
-                          {chip.label}
+            <react_native_1.View style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:12,gap:6}}>
+              <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
+                {Q.map(e=>{const r=z===e.id,a=e.color||AppColors_1.AppColors.purple,i=r?AppColors_1.AppColors.white:a;return<TouchableScale_1.default key={e.id}onPress={()=>{v(r?"all":e.id)}}>
+                      <react_native_1.View style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:r?a:`${a}12`,borderWidth:1,borderColor:r?a:`${a}30`,gap:5}}>
+                        {e.id==="all"&&<NetworkIcons_1.LayersIcon size={11}color={i}/>}
+                        {e.id==="errors"&&<NetworkIcons_1.CircleXIcon size={11}color={i}/>}
+                        {e.id==="success"&&<NetworkIcons_1.CircleCheckIcon size={11}color={i}/>}
+                        {e.id==="slow"&&<NetworkIcons_1.ClockIcon size={11}color={i}/>}
+                        {e.id==="POST"&&<NetworkIcons_1.RequestIcon size={11}color={i}/>}
+                        {e.id==="GET"&&<NetworkIcons_1.ResponseIcon size={11}color={i}/>}
+                        {e.id==="graphql"&&<NetworkIcons_1.AtomIcon size={11}color={i}/>}
+                        <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:r?AppColors_1.AppColors.white:AppColors_1.AppColors.primaryBlack}}>
+                          {e.label}
                         </react_native_1.Text>
-                        <react_native_1.View style={{
-                    backgroundColor: isActive
-                        ? 'rgba(255,255,255,0.25)'
-                        : `${chipColor}20`,
-                    paddingHorizontal: 5,
-                    paddingVertical: 1,
-                    borderRadius: 8,
-                }}>
-                          <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 9,
-                    color: isActive ? AppColors_1.AppColors.white : chipColor,
-                }}>
-                            {chip.count}
+                        <react_native_1.View style={{backgroundColor:r?"rgba(255,255,255,0.25)":`${a}20`,paddingHorizontal:5,paddingVertical:1,borderRadius:8}}>
+                          <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:9,color:r?AppColors_1.AppColors.white:a}}>
+                            {e.count}
                           </react_native_1.Text>
                         </react_native_1.View>
                       </react_native_1.View>
-                    </TouchableScale_1.default>);
-        })}
+                    </TouchableScale_1.default>})}
               </react_native_1.ScrollView>
 
-              <TouchableScale_1.default onPress={() => setIsFilterModalOpen(true)} style={{ flexShrink: 0 }}>
-                <react_native_1.View style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            paddingHorizontal: 10,
-            paddingVertical: 4.5,
-            borderRadius: 8,
-            backgroundColor: statusFilters.size > 0 || methodFilters.size > 0
-                ? `${AppColors_1.AppColors.purple}20`
-                : AppColors_1.AppColors.grayBackground,
-            borderWidth: 1,
-            borderColor: statusFilters.size > 0 || methodFilters.size > 0
-                ? AppColors_1.AppColors.purple
-                : AppColors_1.AppColors.grayBorderSecondary,
-            gap: 5,
-            shadowColor: AppColors_1.AppColors.black,
-            shadowOpacity: 0.04,
-            shadowRadius: 2,
-            shadowOffset: { width: 0, height: 1 },
-            elevation: 1,
-        }}>
-                  <NetworkIcons_1.FilterIcon size={11} color={statusFilters.size > 0 || methodFilters.size > 0
-            ? AppColors_1.AppColors.purple
-            : AppColors_1.AppColors.grayText}/>
-                  <react_native_1.Text style={{
-            fontFamily: AppFonts_1.AppFonts.interBold,
-            fontSize: 10.5,
-            color: statusFilters.size > 0 || methodFilters.size > 0
-                ? AppColors_1.AppColors.purple
-                : AppColors_1.AppColors.grayText,
-        }}>
+              <TouchableScale_1.default onPress={()=>F(!0)}style={{flexShrink:0}}>
+                <react_native_1.View style={{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:4.5,borderRadius:8,backgroundColor:c.size>0||p.size>0?`${AppColors_1.AppColors.purple}20`:AppColors_1.AppColors.grayBackground,borderWidth:1,borderColor:c.size>0||p.size>0?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayBorderSecondary,gap:5,shadowColor:AppColors_1.AppColors.black,shadowOpacity:.04,shadowRadius:2,shadowOffset:{width:0,height:1},elevation:1}}>
+                  <NetworkIcons_1.FilterIcon size={11}color={c.size>0||p.size>0?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayText}/>
+                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:c.size>0||p.size>0?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayText}}>
                     More Filters
                   </react_native_1.Text>
-                  {(statusFilters.size > 0 || methodFilters.size > 0) && (<react_native_1.View style={{
-                backgroundColor: AppColors_1.AppColors.purple,
-                paddingHorizontal: 4.5,
-                paddingVertical: 1,
-                borderRadius: 6,
-            }}>
-                      <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 8.5,
-                color: AppColors_1.AppColors.white,
-            }}>
-                        {statusFilters.size + methodFilters.size}
+                  {(c.size>0||p.size>0)&&<react_native_1.View style={{backgroundColor:AppColors_1.AppColors.purple,paddingHorizontal:4.5,paddingVertical:1,borderRadius:6}}>
+                      <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:8.5,color:AppColors_1.AppColors.white}}>
+                        {c.size+p.size}
                       </react_native_1.Text>
-                    </react_native_1.View>)}
+                    </react_native_1.View>}
                 </react_native_1.View>
               </TouchableScale_1.default>
             </react_native_1.View>
 
             
-            {(quickFilter !== 'all' ||
-            search.trim().length > 0 ||
-            statusFilters.size > 0 ||
-            methodFilters.size > 0 ||
-            filteredLogs.length !== logs.length) && (<react_native_1.View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                marginHorizontal: 12,
-                marginBottom: 8,
-                paddingHorizontal: 10,
-                paddingVertical: 5.5,
-                backgroundColor: `${AppColors_1.AppColors.purple}10`,
-                borderRadius: 8,
-                borderWidth: 1,
-                borderColor: `${AppColors_1.AppColors.purple}25`,
-            }}>
-                <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interMedium,
-                fontSize: 10.5,
-                color: AppColors_1.AppColors.purple,
-            }}>
-                  Showing {filteredLogs.length} of {logs.length} requests
+            {(z!=="all"||t.trim().length>0||c.size>0||p.size>0||b.length!==g.length)&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginHorizontal:12,marginBottom:8,paddingHorizontal:10,paddingVertical:5.5,backgroundColor:`${AppColors_1.AppColors.purple}10`,borderRadius:8,borderWidth:1,borderColor:`${AppColors_1.AppColors.purple}25`}}>
+                <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10.5,color:AppColors_1.AppColors.purple}}>
+                  Showing {b.length} of {g.length} requests
                 </react_native_1.Text>
-                <TouchableScale_1.default onPress={() => {
-                setSearch('');
-                setQuickFilter('all');
-                setStatusFilters(new Set());
-                setMethodFilters(new Set());
-            }}>
-                  <react_native_1.Text style={{
-                fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 10.5,
-                color: AppColors_1.AppColors.errorColor,
-            }}>
+                <TouchableScale_1.default onPress={()=>{l(""),v("all"),y(new Set),S(new Set)}}>
+                  <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:AppColors_1.AppColors.errorColor}}>
                     Clear All Filters
                   </react_native_1.Text>
                 </TouchableScale_1.default>
-              </react_native_1.View>)}
+              </react_native_1.View>}
           </react_native_1.View>
 
-        <react_native_1.FlatList ref={apisListRef} data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={react_native_1.Platform.OS === 'android'} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState_1.default isSearch={search.length > 0 ||
-                statusFilters.size > 0 ||
-                methodFilters.size > 0 ||
-                quickFilter !== 'all'} searchQuery={search} customTitle={search.length > 0
-                ? 'No matching API requests'
-                : 'No network activity'} onClearSearch={() => {
-                setSearch('');
-                setStatusFilters(new Set());
-                setMethodFilters(new Set());
-                setQuickFilter('all');
-                setSearchScope('all');
-            }}/>} ListFooterComponent={groupedData.length > 0 ? (<EndOfListFooter_1.default count={filteredLogs.length} label="requests"/>) : null} contentContainerStyle={[
-            styles_1.default.listContent,
-            filteredLogs.length === 0 && { flexGrow: 1 },
-        ]} keyboardShouldPersistTaps="handled"/>
+        <react_native_1.FlatList ref={W}data={o}keyExtractor={e=>e?.id?.toString()}renderItem={K}initialNumToRender={12}maxToRenderPerBatch={8}windowSize={5}removeClippedSubviews={react_native_1.Platform.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<EmptyState_1.default isSearch={t.length>0||c.size>0||p.size>0||z!=="all"}searchQuery={t}customTitle={t.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{l(""),y(new Set),S(new Set),v("all"),n("all")}}/>}ListFooterComponent={o.length>0?<EndOfListFooter_1.default count={b.length}label="requests"/>:null}contentContainerStyle={[styles_1.default.listContent,b.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
 
       
-      <NetworkFilterModal_1.default visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)} filters={modalFilterState} onApply={handleApplyNetworkFilters} searchQuery={search}/>
-    </react_native_1.View>);
-});
-exports.default = NetworkTab;
+      <NetworkFilterModal_1.default visible={$}onClose={()=>F(!1)}filters={j}onApply={G}searchQuery={t}/>
+    </react_native_1.View>});exports.default=NetworkTab;