react-native-inapp-inspector 1.0.8 → 1.0.10

package/dist/esm/components/CodeSnippet.js

@@ -224,7 +224,7 @@ const getStyleForType = (type) => {
         case 'value':
             return styles.value;
         default:
-            return styles.plain;
+            return [styles.plain, { color: AppColors.primaryBlack }];
     }
 };
 const ArrowUpIcon = ({ color = '#64748B', size = 16 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
@@ -258,26 +258,32 @@ const CodeSnippetLine = React.memo(({ line, lineIndex, language, search, isActiv
     };
     return (<View style={[styles.lineRow, isActiveMatch && styles.activeMatchRow]}>
         {/* Gutter Line Number */}
-        <View style={[styles.gutter, isActiveMatch && styles.activeMatchGutter]}>
-          <Text style={[styles.lineNumber, isActiveMatch && styles.activeMatchLineNumber]}>{lineIndex + 1}</Text>
+        <View style={[styles.gutter, { backgroundColor: AppColors.grayBackground, borderRightColor: AppColors.grayBorderSecondary }, isActiveMatch && styles.activeMatchGutter]}>
+          <Text style={[styles.lineNumber, { color: AppColors.grayTextWeak }, isActiveMatch && styles.activeMatchLineNumber]}>{lineIndex + 1}</Text>
         </View>
 
         {/* Highlighted Code Line */}
         <View style={styles.codeLine}>
-          <Text style={styles.codeLineText}>
-            {tokens.length === 0 ? (<Text style={styles.plain}> </Text>) : (tokens.map((token, tokenIdx) => (<React.Fragment key={tokenIdx}>
+          <Text style={[styles.codeLineText, { color: AppColors.primaryBlack }]}>
+            {tokens.length === 0 ? (<Text style={[styles.plain, { color: AppColors.primaryBlack }]}> </Text>) : (tokens.map((token, tokenIdx) => (<React.Fragment key={tokenIdx}>
                   {renderTokenText(token.text, token.type)}
                 </React.Fragment>)))}
           </Text>
         </View>
       </View>);
 });
-const CodeSnippet = ({ code, language, }) => {
+const CodeSnippet = ({ code, language, search, }) => {
     const [searchQuery, setSearchQuery] = useState('');
     const [debouncedQuery, setDebouncedQuery] = useState('');
     const [currentMatchIdx, setCurrentMatchIdx] = useState(-1);
     const [visibleLinesCount, setVisibleLinesCount] = useState(200);
     const flatListRef = useRef(null);
+    // Sync prop search to searchQuery
+    useEffect(() => {
+        if (search !== undefined) {
+            setSearchQuery(search);
+        }
+    }, [search]);
     // Debounce search query updates
     useEffect(() => {
         const timer = setTimeout(() => {
@@ -322,7 +328,7 @@ const CodeSnippet = ({ code, language, }) => {
     // Reset scroll and states on code/language changes
     useEffect(() => {
         setVisibleLinesCount(200);
-        setSearchQuery('');
+        setSearchQuery(search || '');
         setCurrentMatchIdx(-1);
     }, [code, language]);
     // Auto-scroll to the first match when search query returns matches
@@ -348,32 +354,32 @@ const CodeSnippet = ({ code, language, }) => {
             try {
                 flatListRef.current?.scrollToIndex({
                     index: lineIdx,
-                    animated: true,
-                    viewPosition: 0.5,
+                    animated: false,
+                    viewPosition: 0.3,
                 });
             }
             catch (e) {
                 // Fallback recovery is handled by onScrollToIndexFailed
             }
-        }, 100);
+        }, 50);
     };
     const onScrollToIndexFailed = (error) => {
         flatListRef.current?.scrollToOffset({
             offset: error.averageItemLength * error.index,
-            animated: true,
+            animated: false,
         });
         setTimeout(() => {
             try {
                 flatListRef.current?.scrollToIndex({
                     index: error.index,
-                    animated: true,
-                    viewPosition: 0.5,
+                    animated: false,
+                    viewPosition: 0.3,
                 });
             }
             catch (err) {
                 console.warn('Scroll to line index failed after fallback retry:', err);
             }
-        }, 120);
+        }, 60);
     };
     const handleNextMatch = () => {
         if (matches.length === 0)
@@ -404,12 +410,12 @@ const CodeSnippet = ({ code, language, }) => {
     return (<View style={{ flex: 1 }}>
       {/* Search Header Row */}
       <View style={styles.searchRow}>
-        <View style={styles.searchBar}>
+        <View style={[styles.searchBar, { backgroundColor: AppColors.primaryLight, borderColor: AppColors.grayBorderSecondary }]}>
           <SearchIcon color={AppColors.grayTextWeak} size={15}/>
-          <TextInput placeholder={`Search ${language.toUpperCase()}...`} placeholderTextColor={AppColors.grayTextWeak} value={searchQuery} onChangeText={setSearchQuery} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+          <TextInput placeholder={`Search ${language.toUpperCase()}...`} placeholderTextColor={AppColors.grayTextWeak} value={searchQuery} onChangeText={setSearchQuery} style={[styles.searchInput, { color: AppColors.primaryBlack }]} autoCorrect={false} autoCapitalize="none"/>
 
           {/* Matches Info */}
-          {debouncedQuery.length >= 2 && (<Text style={styles.matchCountText}>
+          {debouncedQuery.length >= 2 && (<Text style={[styles.matchCountText, { backgroundColor: AppColors.grayBackground, color: AppColors.grayTextWeak }]}>
               {matches.length > 0 ? `${currentMatchIdx + 1}/${matches.length}` : '0/0'}
             </Text>)}
 
@@ -419,12 +425,12 @@ const CodeSnippet = ({ code, language, }) => {
         </View>
 
         {/* Up / Down Arrow Navigation Buttons */}
-        {matches.length > 0 && (<View style={styles.navArrowsGroup}>
+        {matches.length > 0 && (<View style={[styles.navArrowsGroup, { backgroundColor: AppColors.primaryLight, borderColor: AppColors.grayBorderSecondary }]}>
             <TouchableScale onPress={handlePrevMatch} hitSlop={8} style={styles.navArrowBtn}>
-              <ArrowUpIcon color="#475569" size={14}/>
+              <ArrowUpIcon color={AppColors.grayTextStrong} size={14}/>
             </TouchableScale>
             <TouchableScale onPress={handleNextMatch} hitSlop={8} style={styles.navArrowBtn}>
-              <ArrowDownIcon color="#475569" size={14}/>
+              <ArrowDownIcon color={AppColors.grayTextStrong} size={14}/>
             </TouchableScale>
           </View>)}
 
@@ -432,7 +438,7 @@ const CodeSnippet = ({ code, language, }) => {
       </View>
 
       {/* Code Snippet list container */}
-      <View style={styles.container}>
+      <View style={[styles.container, { backgroundColor: AppColors.grayBackground, borderColor: AppColors.grayBorderSecondary }]}>
         <FlatList ref={flatListRef} data={visibleLines} renderItem={renderLine} keyExtractor={(_, index) => String(index)} maxToRenderPerBatch={30} windowSize={5} initialNumToRender={50} removeClippedSubviews={Platform.OS === 'android'} onEndReached={handleEndReached} onEndReachedThreshold={0.5} onScrollToIndexFailed={onScrollToIndexFailed}/>
       </View>
     </View>);
@@ -508,7 +514,9 @@ const styles = StyleSheet.create({
         paddingVertical: 1,
     },
     activeMatchRow: {
-        backgroundColor: 'rgba(234, 179, 8, 0.15)',
+        backgroundColor: 'rgba(234, 179, 8, 0.22)',
+        borderLeftWidth: 4,
+        borderLeftColor: '#EAB308',
     },
     gutter: {
         width: 40,
@@ -521,8 +529,8 @@ const styles = StyleSheet.create({
         paddingTop: 1,
     },
     activeMatchGutter: {
-        backgroundColor: 'rgba(234, 179, 8, 0.25)',
-        borderRightColor: 'rgba(234, 179, 8, 0.4)',
+        backgroundColor: 'rgba(234, 179, 8, 0.35)',
+        borderRightColor: 'rgba(234, 179, 8, 0.5)',
     },
     lineNumber: {
         fontFamily: monoFont,

package/dist/esm/components/ConsoleLogCard.js

@@ -115,6 +115,7 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
     const isUserLog = !isWebView && item.sourceMethod === 'log';
     const caller = 'caller' in item ? item.caller : undefined;
     const getLogColors = () => {
+        const isDark = AppColors.primaryLight !== '#FFFFFF';
         if (isWebView) {
             const label = item.type.toUpperCase();
             switch (item.type) {
@@ -124,7 +125,7 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
                         badgeBg: `${AppColors.errorColor}15`,
                         badgeText: AppColors.errorColor,
                         label,
-                        cardBg: '#FFF5F6',
+                        cardBg: isDark ? 'rgba(239, 68, 68, 0.15)' : '#FFF5F6',
                     };
                 case 'warn':
                     return {
@@ -132,15 +133,15 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
                         badgeBg: `${AppColors.lightOrange}15`,
                         badgeText: AppColors.darkOrange || AppColors.lightOrange,
                         label,
-                        cardBg: '#FFFDF6',
+                        cardBg: isDark ? 'rgba(245, 158, 11, 0.15)' : '#FFFDF6',
                     };
                 default:
                     return {
                         border: '#475569',
-                        badgeBg: '#F1F5F9',
-                        badgeText: '#475569',
+                        badgeBg: isDark ? '#374151' : '#F1F5F9',
+                        badgeText: isDark ? '#9CA3AF' : '#475569',
                         label,
-                        cardBg: '#F8FAFC',
+                        cardBg: isDark ? '#1E1E24' : '#F8FAFC',
                     };
             }
         }
@@ -150,7 +151,7 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
                 badgeBg: `${AppColors.skyBlue}15`,
                 badgeText: AppColors.skyBlue,
                 label: 'ERROR',
-                cardBg: '#E6F2FF', // light sky blue background for analytics errors
+                cardBg: isDark ? 'rgba(96, 165, 250, 0.15)' : '#E6F2FF',
             };
         }
         switch (item.type) {
@@ -160,7 +161,7 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
                     badgeBg: `${AppColors.errorColor}15`,
                     badgeText: AppColors.errorColor,
                     label: 'ERROR',
-                    cardBg: '#FFF5F6', // light red background
+                    cardBg: isDark ? 'rgba(239, 68, 68, 0.15)' : '#FFF5F6',
                 };
             case 'warn':
                 return {
@@ -168,16 +169,16 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
                     badgeBg: `${AppColors.lightOrange}15`,
                     badgeText: AppColors.darkOrange || AppColors.lightOrange,
                     label: 'WARN',
-                    cardBg: '#FFFDF6', // light yellow/orange background
+                    cardBg: isDark ? 'rgba(245, 158, 11, 0.15)' : '#FFFDF6',
                 };
             default:
                 if (isUserLog) {
                     return {
                         border: '#475569',
-                        badgeBg: '#E2E8F0',
-                        badgeText: '#334155',
+                        badgeBg: isDark ? '#374151' : '#E2E8F0',
+                        badgeText: isDark ? '#D1D5DB' : '#334155',
                         label: 'INFO',
-                        cardBg: '#F1F5F9', // slate-blue / steel-blue background for user log
+                        cardBg: isDark ? '#1E1E24' : '#F1F5F9',
                     };
                 }
                 return {
@@ -185,7 +186,7 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
                     badgeBg: `${AppColors.purple}15`,
                     badgeText: AppColors.purple,
                     label: 'INFO',
-                    cardBg: '#F9F5FF', // light purple background for general info
+                    cardBg: isDark ? 'rgba(167, 139, 250, 0.12)' : '#F9F5FF',
                 };
         }
     };
@@ -204,84 +205,138 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
                 borderLeftWidth: 4,
                 borderLeftColor: colors.border,
                 backgroundColor: colors.cardBg,
+                borderColor: AppColors.grayBorderSecondary,
+                flexDirection: 'row',
+                alignItems: 'center',
+                paddingRight: 4,
             },
         ]}>
-        <Pressable onPress={() => setExpanded(prev => !prev)} style={styles.cardHeader}>
-          <View style={styles.headerLeft}>
-            <CopyButton value={item.message} label="Log message"/>
-            <View style={[styles.badge, { backgroundColor: colors.badgeBg }]}>
-              <Text style={[styles.badgeText, { color: colors.badgeText }]}>
-                {colors.label}
-              </Text>
-            </View>
-            {isAnalyticsError && (<View style={[
+        
+        {/* Left Content Area */}
+        <Pressable onPress={() => setExpanded(prev => !prev)} style={{ flex: 1, paddingRight: 6 }}>
+          
+          <View style={styles.cardHeader}>
+            <View style={styles.headerLeft}>
+              <CopyButton value={item.message} label="Log message"/>
+              <View style={[styles.badge, { backgroundColor: colors.badgeBg }]}>
+                <Text style={[styles.badgeText, { color: colors.badgeText }]}>
+                  {colors.label}
+                </Text>
+              </View>
+              <View style={[
+            styles.badge,
+            {
+                backgroundColor: 'rgba(107, 78, 255, 0.08)',
+                borderColor: 'rgba(107, 78, 255, 0.2)',
+                borderWidth: 1,
+            },
+        ]}>
+                <Text style={[styles.badgeText, { color: '#6B4EFF' }]}>
+                  console.{('sourceMethod' in item ? item.sourceMethod : undefined) || item.type || 'log'}
+                </Text>
+              </View>
+              {jsonContent && (<View style={[
+                styles.badge,
+                {
+                    backgroundColor: 'rgba(13, 148, 136, 0.08)',
+                    borderColor: 'rgba(13, 148, 136, 0.18)',
+                    borderWidth: 1,
+                },
+            ]}>
+                  <Text style={[styles.badgeText, { color: '#0D9488' }]}>
+                    {Array.isArray(jsonContent.data) ? `Array[${jsonContent.data.length}]` : `Object{${Object.keys(jsonContent.data).length}}`}
+                  </Text>
+                </View>)}
+              {isAnalyticsError && (<View style={[
                 styles.badge,
                 { backgroundColor: `${AppColors.skyBlue}15` },
             ]}>
-                <Text style={[styles.badgeText, { color: AppColors.skyBlue }]}>
-                  Analytics
-                </Text>
-              </View>)}
-            {isUserLog && (<View style={[
+                  <Text style={[styles.badgeText, { color: AppColors.skyBlue }]}>
+                    Analytics
+                  </Text>
+                </View>)}
+              {isUserLog && (<View style={[
                 styles.badge,
                 {
-                    backgroundColor: '#F3F4F6',
-                    borderColor: '#D1D5DB',
+                    backgroundColor: AppColors.grayBackground,
+                    borderColor: AppColors.grayBorderSecondary,
                     borderWidth: 1,
                 },
             ]}>
-                <Text style={[styles.badgeText, { color: '#4B5563' }]}>
-                  user-log
-                </Text>
-              </View>)}
-            {isWebView && (<View style={[
+                  <Text style={[styles.badgeText, { color: AppColors.grayTextStrong }]}>
+                    user-log
+                  </Text>
+                </View>)}
+              {isWebView && (<View style={[
                 styles.badge,
                 {
-                    backgroundColor: '#F1F5F9',
-                    borderColor: '#E2E8F0',
+                    backgroundColor: AppColors.grayBackground,
+                    borderColor: AppColors.grayBorderSecondary,
                     borderWidth: 1,
                 },
             ]}>
-                <Text style={[styles.badgeText, { color: '#475569' }]}>
-                  webview
-                </Text>
-              </View>)}
-            <Text style={styles.serialNumber}>#{item.id + 1}</Text>
-            <Text style={styles.timestamp}>{formatTime(item.timestamp)}</Text>
-          </View>
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-            {caller && caller !== 'Unknown' && (<Text style={styles.callerText} numberOfLines={1} ellipsizeMode="middle">
+                  <Text style={[styles.badgeText, { color: AppColors.grayText }]}>
+                    webview
+                  </Text>
+                </View>)}
+              <Text style={[styles.serialNumber, { color: AppColors.grayTextWeak }]}>#{item.id + 1}</Text>
+              <Text style={[styles.timestamp, { color: AppColors.grayTextWeak }]}>{formatTime(item.timestamp)}</Text>
+            </View>
+            
+            {caller && caller !== 'Unknown' && (<Text style={[styles.callerText, { color: AppColors.grayTextWeak, marginRight: 4 }]} numberOfLines={1} ellipsizeMode="middle">
                 {caller.split('/').pop() || caller}
               </Text>)}
-            <View style={{ transform: [{ rotate: expanded ? '180deg' : '0deg' }] }}>
-              <ChevronIcon size={14} color={AppColors.grayTextWeak}/>
-            </View>
           </View>
+
+          <View style={[styles.cardBody, { backgroundColor: AppColors.primaryLight, borderColor: AppColors.dividerColor }]}>
+            {jsonContent ? (<>
+                {jsonContent.header ? (<Pressable onPress={() => setExpanded(prev => !prev)}>
+                    {getLogMessageWithBadges(jsonContent.header, searchStr, [styles.messageText, { color: AppColors.primaryBlack }], styles.highlight, numLines)}
+                  </Pressable>) : null}
+                {expanded ? (<View style={[styles.jsonContainer, { backgroundColor: AppColors.grayBackground, borderColor: AppColors.dividerColor }]}>
+                    <JsonViewer data={jsonContent.data} search={searchStr} forceOpen={expanded}/>
+                  </View>) : (<Pressable onPress={() => setExpanded(prev => !prev)} style={[styles.jsonPreviewContainer, { backgroundColor: AppColors.grayBackground, borderColor: AppColors.dividerColor }]}>
+                    <HighlightText text={getJsonPreviewText(jsonContent.data).text} search={searchStr} style={[styles.jsonPreviewText, { color: AppColors.primaryBlack }]} highlightStyle={styles.highlight} detectLinks={true}/>
+                  </Pressable>)}
+              </>) : (<Pressable onPress={() => setExpanded(prev => !prev)}>
+                {getLogMessageWithBadges(item.message, searchStr, [styles.messageText, { color: AppColors.primaryBlack }], styles.highlight, numLines)}
+              </Pressable>)}
+            {hasLongMessage && (<Pressable onPress={() => setExpanded(prev => !prev)} style={styles.seeMoreBtn} hitSlop={8}>
+                <Text style={styles.seeMoreText}>
+                  {expanded ? 'See Less' : 'See More'}
+                </Text>
+              </Pressable>)}
+          </View>
+
+          {expanded && (<View style={[styles.cardFooter, { borderTopColor: AppColors.dividerColor, gap: 6 }]}>
+              <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Text style={{ fontFamily: AppFonts.interRegular, fontSize: 10.5, color: AppColors.grayTextWeak }}>
+                  Length: {item.message.length} chars • Size: {encodeURIComponent(item.message).replace(/%[0-9A-F]{2}/g, 'a').length} bytes
+                </Text>
+              </View>
+              {caller && caller !== 'Unknown' && (<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: 4 }}>
+                  <Text style={[styles.fullCallerText, { color: AppColors.grayText, flex: 1, marginRight: 8 }]} numberOfLines={2}>
+                    Caller: {caller}
+                  </Text>
+                  <CopyButton value={caller} label="Caller stack frame"/>
+                </View>)}
+            </View>)}
         </Pressable>
 
-        <View style={styles.cardBody}>
-          {jsonContent ? (<>
-              {jsonContent.header ? (<Pressable onPress={() => setExpanded(prev => !prev)}>
-                  {getLogMessageWithBadges(jsonContent.header, searchStr, styles.messageText, styles.highlight, numLines)}
-                </Pressable>) : null}
-              {expanded ? (<View style={styles.jsonContainer}>
-                  <JsonViewer data={jsonContent.data} search={searchStr} forceOpen={expanded}/>
-                </View>) : (<Pressable onPress={() => setExpanded(prev => !prev)} style={styles.jsonPreviewContainer}>
-                  <HighlightText text={getJsonPreviewText(jsonContent.data).text} search={searchStr} style={styles.jsonPreviewText} highlightStyle={styles.highlight} detectLinks={true}/>
-                </Pressable>)}
-            </>) : (<Pressable onPress={() => setExpanded(prev => !prev)}>
-              {getLogMessageWithBadges(item.message, searchStr, styles.messageText, styles.highlight, numLines)}
-            </Pressable>)}
-          {hasLongMessage && (<Pressable onPress={() => setExpanded(prev => !prev)} style={styles.seeMoreBtn} hitSlop={8}>
-              <Text style={styles.seeMoreText}>
-                {expanded ? 'See Less' : 'See More'}
-              </Text>
-            </Pressable>)}
-        </View>
+        {/* Right Isolated Chevron Area */}
+        <Pressable onPress={() => setExpanded(prev => !prev)} style={{
+            width: 28,
+            alignItems: 'center',
+            justifyContent: 'center',
+            alignSelf: expanded ? 'flex-start' : 'center',
+            marginTop: expanded ? 8 : 0,
+            height: expanded ? 32 : undefined,
+        }} hitSlop={12}>
+          <View style={{ transform: [{ rotate: expanded ? '180deg' : '0deg' }] }}>
+            <ChevronIcon size={16} color={AppColors.grayTextWeak}/>
+          </View>
+        </Pressable>
 
-        {caller && caller !== 'Unknown' && expanded && (<View style={styles.cardFooter}>
-            <Text style={styles.fullCallerText}>Caller: {caller}</Text>
-          </View>)}
       </View>
     </View>);
 });
@@ -314,7 +369,9 @@ const styles = StyleSheet.create({
     headerLeft: {
         flexDirection: 'row',
         alignItems: 'center',
-        gap: 8,
+        flexWrap: 'wrap',
+        gap: 6,
+        flex: 1,
     },
     badge: {
         paddingHorizontal: 6,

package/dist/esm/components/JsonViewer.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-declare const JsonViewer: ({ data, search, forceOpen, }: {
+declare const JsonViewer: ({ data, search, forceOpen, defaultExpandDepth, }: {
     data: unknown;
     search?: string;
     forceOpen?: boolean;
+    defaultExpandDepth?: number;
 }) => React.JSX.Element;
 export default JsonViewer;

package/dist/esm/components/JsonViewer.js

@@ -4,10 +4,10 @@ import { ScrollView, View } from 'react-native';
 import TreeNode from './TreeNode';
 // Stylesheet
 import styles from '../styles';
-const JsonViewer = ({ data, search, forceOpen, }) => {
+const JsonViewer = ({ data, search, forceOpen, defaultExpandDepth, }) => {
     return (<ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles.codeBlockScroll}>
       <View style={styles.codeBlock}>
-        <TreeNode data={data} search={search} forceOpen={forceOpen}/>
+        <TreeNode data={data} search={search} forceOpen={forceOpen} defaultExpandDepth={defaultExpandDepth}/>
       </View>
     </ScrollView>);
 };

package/dist/esm/components/MetaAccordion.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { MetaAccordionProps } from '../types';
-declare const MetaAccordion: ({ status, statusColor, duration, size, triggeredAt, }: MetaAccordionProps) => React.JSX.Element;
+declare const MetaAccordion: ({ status, statusColor, duration, size, triggeredAt, method, contentType, url, }: MetaAccordionProps) => React.JSX.Element;
 export default MetaAccordion;

package/dist/esm/components/MetaAccordion.js

@@ -7,12 +7,13 @@ import useAccordion from '../customHooks/useAccordion';
 // Helpers
 import { getDurationColor } from '../helpers';
 // Assets
-import { ChevronIcon, CalendarIcon, StatusIcon, ClockIcon, SizeIcon, } from './NetworkIcons';
+import { ChevronIcon, CalendarIcon, StatusIcon, ClockIcon, SizeIcon, TerminalIcon, GlobeIcon, } from './NetworkIcons';
 // Stylesheet
 import { AppColors } from '../styles/AppColors';
 import styles from '../styles';
-const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, }) => {
-    const { toggleOpen, chevronStyle, bodyStyle } = useAccordion(true, 400, 260);
+import { AppFonts } from '../styles/AppFonts';
+const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, method, contentType, url, }) => {
+    const { toggleOpen, chevronStyle, bodyStyle } = useAccordion(true, 400, 390);
     const isFailed = status === 0 || status == null;
     return (<View style={styles.metaContainer}>
       <Pressable onPress={toggleOpen} hitSlop={12}>
@@ -39,6 +40,26 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, }) =>
             </Text>
           </View>
           <View style={styles.metaDivider}/>
+          
+          <View style={styles.metaRow}>
+            <View style={styles.metaLabelRow}>
+              <TerminalIcon color={AppColors.grayTextWeak} size={14}/>
+              <Text style={styles.metaLabel}>Method</Text>
+            </View>
+            <View style={[
+            styles.statusChip,
+            {
+                borderColor: 'rgba(107, 78, 255, 0.25)',
+                backgroundColor: 'rgba(107, 78, 255, 0.08)',
+            }
+        ]}>
+              <Text style={[styles.statusText, { color: AppColors.purple, fontFamily: AppFonts.interBold }]}>
+                {method || 'GET'}
+              </Text>
+            </View>
+          </View>
+          <View style={styles.metaDivider}/>
+
           <View style={styles.metaRow}>
             <View style={styles.metaLabelRow}>
               <StatusIcon color={AppColors.grayTextWeak}/>
@@ -64,6 +85,16 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, }) =>
             </View>
           </View>
           <View style={styles.metaDivider}/>
+
+          <View style={styles.metaRow}>
+            <View style={styles.metaLabelRow}>
+              <GlobeIcon color={AppColors.grayTextWeak} size={14}/>
+              <Text style={styles.metaLabel}>Content Type</Text>
+            </View>
+            <Text style={styles.metaValue}>{contentType || 'application/json'}</Text>
+          </View>
+          <View style={styles.metaDivider}/>
+
           <View style={styles.metaRow}>
             <View style={styles.metaLabelRow}>
               <ClockIcon color={AppColors.grayTextWeak} size={14}/>
@@ -94,6 +125,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, }) =>
             </View>
           </View>
           <View style={styles.metaDivider}/>
+          
           <View style={styles.metaRow}>
             <View style={styles.metaLabelRow}>
               <SizeIcon color={AppColors.grayTextWeak}/>
@@ -101,6 +133,17 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, }) =>
             </View>
             <Text style={styles.metaValue}>{size}</Text>
           </View>
+          <View style={styles.metaDivider}/>
+
+          <View style={[styles.metaRow, { alignItems: 'flex-start' }]}>
+            <View style={styles.metaLabelRow}>
+              <GlobeIcon color={AppColors.grayTextWeak} size={14}/>
+              <Text style={styles.metaLabel}>Full URL</Text>
+            </View>
+            <Text selectable={true} numberOfLines={3} ellipsizeMode="tail" style={[styles.metaValue, { fontSize: 11.5, color: AppColors.grayTextWeak, flex: 1, textAlign: 'right', lineHeight: 16 }]}>
+              {url || '—'}
+            </Text>
+          </View>
         </View>
       </Animated.View>
     </View>);

package/dist/esm/components/NetworkIcons.d.ts

@@ -34,3 +34,11 @@ export declare const InsightsIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const DebugIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const SunIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const MoonIcon: ({ color, size }: any) => React.JSX.Element;
+export { BrandCircleIcon } from './BrandCircleIcon';
+export { BrandSquareIcon } from './BrandSquareIcon';
+export declare const HtmlIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const CssIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const JsIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const EyeIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const SettingsIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const FolderIcon: ({ color, size }: any) => React.JSX.Element;

package/dist/esm/components/NetworkIcons.js

@@ -213,3 +213,38 @@ export const MoonIcon = ({ color = '#FFFFFF', size = 16 }) => {
       <Path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" fill={color} stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
     </Svg>);
 };
+export { BrandCircleIcon } from './BrandCircleIcon';
+export { BrandSquareIcon } from './BrandSquareIcon';
+export const HtmlIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M17.5 8.5L21 12l-3.5 3.5M6.5 8.5L3 12l3.5 3.5M14 4.5l-4 15" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const CssIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const JsIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Rect x="3" y="3" width="18" height="18" rx="4" stroke={color} strokeWidth="2"/>
+      <Path d="M8 12v2.5a1.5 1.5 0 003 0V11M13 15.5a1 1 0 001.5.8h.5a1 1 0 001-1v-.5a1 1 0 00-1-1h-1a1 1 0 01-1-1v-.5a1 1 0 011-1h.5a1 1 0 011.5.8" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </Svg>);
+};
+export const EyeIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <Circle cx="12" cy="12" r="3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export const SettingsIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <Circle cx="12" cy="12" r="3" stroke={color} strokeWidth="2"/>
+    </Svg>);
+};
+export const FolderIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => {
+    return (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <Path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};

package/dist/esm/components/ReduxTreeView.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const ReduxTreeView: ({ state, lastActionMap, search, }: {
+    state: any;
+    lastActionMap: Record<string, any>;
+    search?: string;
+}) => React.JSX.Element;