react-native-inapp-inspector 1.0.8 → 1.0.10

package/dist/commonjs/components/CodeSnippet.js

@@ -262,7 +262,7 @@ const getStyleForType = (type) => {
         case 'value':
             return styles.value;
         default:
-            return styles.plain;
+            return [styles.plain, { color: AppColors_1.AppColors.primaryBlack }];
     }
 };
 const ArrowUpIcon = ({ color = '#64748B', size = 16 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
@@ -296,26 +296,32 @@ const CodeSnippetLine = react_1.default.memo(({ line, lineIndex, language, searc
     };
     return (<react_native_1.View style={[styles.lineRow, isActiveMatch && styles.activeMatchRow]}>
         {/* Gutter Line Number */}
-        <react_native_1.View style={[styles.gutter, isActiveMatch && styles.activeMatchGutter]}>
-          <react_native_1.Text style={[styles.lineNumber, isActiveMatch && styles.activeMatchLineNumber]}>{lineIndex + 1}</react_native_1.Text>
+        <react_native_1.View style={[styles.gutter, { backgroundColor: AppColors_1.AppColors.grayBackground, borderRightColor: AppColors_1.AppColors.grayBorderSecondary }, isActiveMatch && styles.activeMatchGutter]}>
+          <react_native_1.Text style={[styles.lineNumber, { color: AppColors_1.AppColors.grayTextWeak }, isActiveMatch && styles.activeMatchLineNumber]}>{lineIndex + 1}</react_native_1.Text>
         </react_native_1.View>
 
         {/* Highlighted Code Line */}
         <react_native_1.View style={styles.codeLine}>
-          <react_native_1.Text style={styles.codeLineText}>
-            {tokens.length === 0 ? (<react_native_1.Text style={styles.plain}> </react_native_1.Text>) : (tokens.map((token, tokenIdx) => (<react_1.default.Fragment key={tokenIdx}>
+          <react_native_1.Text style={[styles.codeLineText, { color: AppColors_1.AppColors.primaryBlack }]}>
+            {tokens.length === 0 ? (<react_native_1.Text style={[styles.plain, { color: AppColors_1.AppColors.primaryBlack }]}> </react_native_1.Text>) : (tokens.map((token, tokenIdx) => (<react_1.default.Fragment key={tokenIdx}>
                   {renderTokenText(token.text, token.type)}
                 </react_1.default.Fragment>)))}
           </react_native_1.Text>
         </react_native_1.View>
       </react_native_1.View>);
 });
-const CodeSnippet = ({ code, language, }) => {
+const CodeSnippet = ({ code, language, search, }) => {
     const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
     const [debouncedQuery, setDebouncedQuery] = (0, react_1.useState)('');
     const [currentMatchIdx, setCurrentMatchIdx] = (0, react_1.useState)(-1);
     const [visibleLinesCount, setVisibleLinesCount] = (0, react_1.useState)(200);
     const flatListRef = (0, react_1.useRef)(null);
+    // Sync prop search to searchQuery
+    (0, react_1.useEffect)(() => {
+        if (search !== undefined) {
+            setSearchQuery(search);
+        }
+    }, [search]);
     // Debounce search query updates
     (0, react_1.useEffect)(() => {
         const timer = setTimeout(() => {
@@ -360,7 +366,7 @@ const CodeSnippet = ({ code, language, }) => {
     // Reset scroll and states on code/language changes
     (0, react_1.useEffect)(() => {
         setVisibleLinesCount(200);
-        setSearchQuery('');
+        setSearchQuery(search || '');
         setCurrentMatchIdx(-1);
     }, [code, language]);
     // Auto-scroll to the first match when search query returns matches
@@ -386,32 +392,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)
@@ -442,12 +448,12 @@ const CodeSnippet = ({ code, language, }) => {
     return (<react_native_1.View style={{ flex: 1 }}>
       {/* Search Header Row */}
       <react_native_1.View style={styles.searchRow}>
-        <react_native_1.View style={styles.searchBar}>
+        <react_native_1.View style={[styles.searchBar, { backgroundColor: AppColors_1.AppColors.primaryLight, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
           <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={15}/>
-          <react_native_1.TextInput placeholder={`Search ${language.toUpperCase()}...`} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={searchQuery} onChangeText={setSearchQuery} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+          <react_native_1.TextInput placeholder={`Search ${language.toUpperCase()}...`} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={searchQuery} onChangeText={setSearchQuery} style={[styles.searchInput, { color: AppColors_1.AppColors.primaryBlack }]} autoCorrect={false} autoCapitalize="none"/>
 
           {/* Matches Info */}
-          {debouncedQuery.length >= 2 && (<react_native_1.Text style={styles.matchCountText}>
+          {debouncedQuery.length >= 2 && (<react_native_1.Text style={[styles.matchCountText, { backgroundColor: AppColors_1.AppColors.grayBackground, color: AppColors_1.AppColors.grayTextWeak }]}>
               {matches.length > 0 ? `${currentMatchIdx + 1}/${matches.length}` : '0/0'}
             </react_native_1.Text>)}
 
@@ -457,12 +463,12 @@ const CodeSnippet = ({ code, language, }) => {
         </react_native_1.View>
 
         {/* Up / Down Arrow Navigation Buttons */}
-        {matches.length > 0 && (<react_native_1.View style={styles.navArrowsGroup}>
+        {matches.length > 0 && (<react_native_1.View style={[styles.navArrowsGroup, { backgroundColor: AppColors_1.AppColors.primaryLight, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
             <TouchableScale_1.default onPress={handlePrevMatch} hitSlop={8} style={styles.navArrowBtn}>
-              <ArrowUpIcon color="#475569" size={14}/>
+              <ArrowUpIcon color={AppColors_1.AppColors.grayTextStrong} size={14}/>
             </TouchableScale_1.default>
             <TouchableScale_1.default onPress={handleNextMatch} hitSlop={8} style={styles.navArrowBtn}>
-              <ArrowDownIcon color="#475569" size={14}/>
+              <ArrowDownIcon color={AppColors_1.AppColors.grayTextStrong} size={14}/>
             </TouchableScale_1.default>
           </react_native_1.View>)}
 
@@ -470,7 +476,7 @@ const CodeSnippet = ({ code, language, }) => {
       </react_native_1.View>
 
       {/* Code Snippet list container */}
-      <react_native_1.View style={styles.container}>
+      <react_native_1.View style={[styles.container, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
         <react_native_1.FlatList ref={flatListRef} data={visibleLines} renderItem={renderLine} keyExtractor={(_, index) => String(index)} maxToRenderPerBatch={30} windowSize={5} initialNumToRender={50} removeClippedSubviews={react_native_1.Platform.OS === 'android'} onEndReached={handleEndReached} onEndReachedThreshold={0.5} onScrollToIndexFailed={onScrollToIndexFailed}/>
       </react_native_1.View>
     </react_native_1.View>);
@@ -546,7 +552,9 @@ const styles = react_native_1.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,
@@ -559,8 +567,8 @@ const styles = react_native_1.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/commonjs/components/ConsoleLogCard.js

@@ -154,6 +154,7 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
     const isUserLog = !isWebView && item.sourceMethod === 'log';
     const caller = 'caller' in item ? item.caller : undefined;
     const getLogColors = () => {
+        const isDark = AppColors_1.AppColors.primaryLight !== '#FFFFFF';
         if (isWebView) {
             const label = item.type.toUpperCase();
             switch (item.type) {
@@ -163,7 +164,7 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                         badgeBg: `${AppColors_1.AppColors.errorColor}15`,
                         badgeText: AppColors_1.AppColors.errorColor,
                         label,
-                        cardBg: '#FFF5F6',
+                        cardBg: isDark ? 'rgba(239, 68, 68, 0.15)' : '#FFF5F6',
                     };
                 case 'warn':
                     return {
@@ -171,15 +172,15 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                         badgeBg: `${AppColors_1.AppColors.lightOrange}15`,
                         badgeText: AppColors_1.AppColors.darkOrange || AppColors_1.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',
                     };
             }
         }
@@ -189,7 +190,7 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                 badgeBg: `${AppColors_1.AppColors.skyBlue}15`,
                 badgeText: AppColors_1.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) {
@@ -199,7 +200,7 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                     badgeBg: `${AppColors_1.AppColors.errorColor}15`,
                     badgeText: AppColors_1.AppColors.errorColor,
                     label: 'ERROR',
-                    cardBg: '#FFF5F6', // light red background
+                    cardBg: isDark ? 'rgba(239, 68, 68, 0.15)' : '#FFF5F6',
                 };
             case 'warn':
                 return {
@@ -207,16 +208,16 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                     badgeBg: `${AppColors_1.AppColors.lightOrange}15`,
                     badgeText: AppColors_1.AppColors.darkOrange || AppColors_1.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 {
@@ -224,7 +225,7 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                     badgeBg: `${AppColors_1.AppColors.purple}15`,
                     badgeText: AppColors_1.AppColors.purple,
                     label: 'INFO',
-                    cardBg: '#F9F5FF', // light purple background for general info
+                    cardBg: isDark ? 'rgba(167, 139, 250, 0.12)' : '#F9F5FF',
                 };
         }
     };
@@ -243,84 +244,138 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                 borderLeftWidth: 4,
                 borderLeftColor: colors.border,
                 backgroundColor: colors.cardBg,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                flexDirection: 'row',
+                alignItems: 'center',
+                paddingRight: 4,
             },
         ]}>
-        <react_native_1.Pressable onPress={() => setExpanded(prev => !prev)} style={styles.cardHeader}>
-          <react_native_1.View style={styles.headerLeft}>
-            <CopyButton_1.default value={item.message} label="Log message"/>
-            <react_native_1.View style={[styles.badge, { backgroundColor: colors.badgeBg }]}>
-              <react_native_1.Text style={[styles.badgeText, { color: colors.badgeText }]}>
-                {colors.label}
-              </react_native_1.Text>
-            </react_native_1.View>
-            {isAnalyticsError && (<react_native_1.View style={[
+        
+        {/* Left Content Area */}
+        <react_native_1.Pressable onPress={() => setExpanded(prev => !prev)} style={{ flex: 1, paddingRight: 6 }}>
+          
+          <react_native_1.View style={styles.cardHeader}>
+            <react_native_1.View style={styles.headerLeft}>
+              <CopyButton_1.default value={item.message} label="Log message"/>
+              <react_native_1.View style={[styles.badge, { backgroundColor: colors.badgeBg }]}>
+                <react_native_1.Text style={[styles.badgeText, { color: colors.badgeText }]}>
+                  {colors.label}
+                </react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={[
+            styles.badge,
+            {
+                backgroundColor: 'rgba(107, 78, 255, 0.08)',
+                borderColor: 'rgba(107, 78, 255, 0.2)',
+                borderWidth: 1,
+            },
+        ]}>
+                <react_native_1.Text style={[styles.badgeText, { color: '#6B4EFF' }]}>
+                  console.{('sourceMethod' in item ? item.sourceMethod : undefined) || item.type || 'log'}
+                </react_native_1.Text>
+              </react_native_1.View>
+              {jsonContent && (<react_native_1.View style={[
+                styles.badge,
+                {
+                    backgroundColor: 'rgba(13, 148, 136, 0.08)',
+                    borderColor: 'rgba(13, 148, 136, 0.18)',
+                    borderWidth: 1,
+                },
+            ]}>
+                  <react_native_1.Text style={[styles.badgeText, { color: '#0D9488' }]}>
+                    {Array.isArray(jsonContent.data) ? `Array[${jsonContent.data.length}]` : `Object{${Object.keys(jsonContent.data).length}}`}
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+              {isAnalyticsError && (<react_native_1.View style={[
                 styles.badge,
                 { backgroundColor: `${AppColors_1.AppColors.skyBlue}15` },
             ]}>
-                <react_native_1.Text style={[styles.badgeText, { color: AppColors_1.AppColors.skyBlue }]}>
-                  Analytics
-                </react_native_1.Text>
-              </react_native_1.View>)}
-            {isUserLog && (<react_native_1.View style={[
+                  <react_native_1.Text style={[styles.badgeText, { color: AppColors_1.AppColors.skyBlue }]}>
+                    Analytics
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+              {isUserLog && (<react_native_1.View style={[
                 styles.badge,
                 {
-                    backgroundColor: '#F3F4F6',
-                    borderColor: '#D1D5DB',
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
                     borderWidth: 1,
                 },
             ]}>
-                <react_native_1.Text style={[styles.badgeText, { color: '#4B5563' }]}>
-                  user-log
-                </react_native_1.Text>
-              </react_native_1.View>)}
-            {isWebView && (<react_native_1.View style={[
+                  <react_native_1.Text style={[styles.badgeText, { color: AppColors_1.AppColors.grayTextStrong }]}>
+                    user-log
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+              {isWebView && (<react_native_1.View style={[
                 styles.badge,
                 {
-                    backgroundColor: '#F1F5F9',
-                    borderColor: '#E2E8F0',
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
                     borderWidth: 1,
                 },
             ]}>
-                <react_native_1.Text style={[styles.badgeText, { color: '#475569' }]}>
-                  webview
-                </react_native_1.Text>
-              </react_native_1.View>)}
-            <react_native_1.Text style={styles.serialNumber}>#{item.id + 1}</react_native_1.Text>
-            <react_native_1.Text style={styles.timestamp}>{formatTime(item.timestamp)}</react_native_1.Text>
-          </react_native_1.View>
-          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-            {caller && caller !== 'Unknown' && (<react_native_1.Text style={styles.callerText} numberOfLines={1} ellipsizeMode="middle">
+                  <react_native_1.Text style={[styles.badgeText, { color: AppColors_1.AppColors.grayText }]}>
+                    webview
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+              <react_native_1.Text style={[styles.serialNumber, { color: AppColors_1.AppColors.grayTextWeak }]}>#{item.id + 1}</react_native_1.Text>
+              <react_native_1.Text style={[styles.timestamp, { color: AppColors_1.AppColors.grayTextWeak }]}>{formatTime(item.timestamp)}</react_native_1.Text>
+            </react_native_1.View>
+            
+            {caller && caller !== 'Unknown' && (<react_native_1.Text style={[styles.callerText, { color: AppColors_1.AppColors.grayTextWeak, marginRight: 4 }]} numberOfLines={1} ellipsizeMode="middle">
                 {caller.split('/').pop() || caller}
               </react_native_1.Text>)}
-            <react_native_1.View style={{ transform: [{ rotate: expanded ? '180deg' : '0deg' }] }}>
-              <NetworkIcons_1.ChevronIcon size={14} color={AppColors_1.AppColors.grayTextWeak}/>
-            </react_native_1.View>
           </react_native_1.View>
+
+          <react_native_1.View style={[styles.cardBody, { backgroundColor: AppColors_1.AppColors.primaryLight, borderColor: AppColors_1.AppColors.dividerColor }]}>
+            {jsonContent ? (<>
+                {jsonContent.header ? (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)}>
+                    {getLogMessageWithBadges(jsonContent.header, searchStr, [styles.messageText, { color: AppColors_1.AppColors.primaryBlack }], styles.highlight, numLines)}
+                  </react_native_1.Pressable>) : null}
+                {expanded ? (<react_native_1.View style={[styles.jsonContainer, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.dividerColor }]}>
+                    <JsonViewer_1.default data={jsonContent.data} search={searchStr} forceOpen={expanded}/>
+                  </react_native_1.View>) : (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)} style={[styles.jsonPreviewContainer, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.dividerColor }]}>
+                    <HighlightText_1.default text={getJsonPreviewText(jsonContent.data).text} search={searchStr} style={[styles.jsonPreviewText, { color: AppColors_1.AppColors.primaryBlack }]} highlightStyle={styles.highlight} detectLinks={true}/>
+                  </react_native_1.Pressable>)}
+              </>) : (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)}>
+                {getLogMessageWithBadges(item.message, searchStr, [styles.messageText, { color: AppColors_1.AppColors.primaryBlack }], styles.highlight, numLines)}
+              </react_native_1.Pressable>)}
+            {hasLongMessage && (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)} style={styles.seeMoreBtn} hitSlop={8}>
+                <react_native_1.Text style={styles.seeMoreText}>
+                  {expanded ? 'See Less' : 'See More'}
+                </react_native_1.Text>
+              </react_native_1.Pressable>)}
+          </react_native_1.View>
+
+          {expanded && (<react_native_1.View style={[styles.cardFooter, { borderTopColor: AppColors_1.AppColors.dividerColor, gap: 6 }]}>
+              <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
+                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 10.5, color: AppColors_1.AppColors.grayTextWeak }}>
+                  Length: {item.message.length} chars • Size: {encodeURIComponent(item.message).replace(/%[0-9A-F]{2}/g, 'a').length} bytes
+                </react_native_1.Text>
+              </react_native_1.View>
+              {caller && caller !== 'Unknown' && (<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: 4 }}>
+                  <react_native_1.Text style={[styles.fullCallerText, { color: AppColors_1.AppColors.grayText, flex: 1, marginRight: 8 }]} numberOfLines={2}>
+                    Caller: {caller}
+                  </react_native_1.Text>
+                  <CopyButton_1.default value={caller} label="Caller stack frame"/>
+                </react_native_1.View>)}
+            </react_native_1.View>)}
         </react_native_1.Pressable>
 
-        <react_native_1.View style={styles.cardBody}>
-          {jsonContent ? (<>
-              {jsonContent.header ? (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)}>
-                  {getLogMessageWithBadges(jsonContent.header, searchStr, styles.messageText, styles.highlight, numLines)}
-                </react_native_1.Pressable>) : null}
-              {expanded ? (<react_native_1.View style={styles.jsonContainer}>
-                  <JsonViewer_1.default data={jsonContent.data} search={searchStr} forceOpen={expanded}/>
-                </react_native_1.View>) : (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)} style={styles.jsonPreviewContainer}>
-                  <HighlightText_1.default text={getJsonPreviewText(jsonContent.data).text} search={searchStr} style={styles.jsonPreviewText} highlightStyle={styles.highlight} detectLinks={true}/>
-                </react_native_1.Pressable>)}
-            </>) : (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)}>
-              {getLogMessageWithBadges(item.message, searchStr, styles.messageText, styles.highlight, numLines)}
-            </react_native_1.Pressable>)}
-          {hasLongMessage && (<react_native_1.Pressable onPress={() => setExpanded(prev => !prev)} style={styles.seeMoreBtn} hitSlop={8}>
-              <react_native_1.Text style={styles.seeMoreText}>
-                {expanded ? 'See Less' : 'See More'}
-              </react_native_1.Text>
-            </react_native_1.Pressable>)}
-        </react_native_1.View>
+        {/* Right Isolated Chevron Area */}
+        <react_native_1.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}>
+          <react_native_1.View style={{ transform: [{ rotate: expanded ? '180deg' : '0deg' }] }}>
+            <NetworkIcons_1.ChevronIcon size={16} color={AppColors_1.AppColors.grayTextWeak}/>
+          </react_native_1.View>
+        </react_native_1.Pressable>
 
-        {caller && caller !== 'Unknown' && expanded && (<react_native_1.View style={styles.cardFooter}>
-            <react_native_1.Text style={styles.fullCallerText}>Caller: {caller}</react_native_1.Text>
-          </react_native_1.View>)}
       </react_native_1.View>
     </react_native_1.View>);
 });
@@ -353,7 +408,9 @@ const styles = react_native_1.StyleSheet.create({
     headerLeft: {
         flexDirection: 'row',
         alignItems: 'center',
-        gap: 8,
+        flexWrap: 'wrap',
+        gap: 6,
+        flex: 1,
     },
     badge: {
         paddingHorizontal: 6,

package/dist/commonjs/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/commonjs/components/JsonViewer.js

@@ -9,10 +9,10 @@ const react_native_1 = require("react-native");
 const TreeNode_1 = __importDefault(require("./TreeNode"));
 // Stylesheet
 const styles_1 = __importDefault(require("../styles"));
-const JsonViewer = ({ data, search, forceOpen, }) => {
+const JsonViewer = ({ data, search, forceOpen, defaultExpandDepth, }) => {
     return (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles_1.default.codeBlockScroll}>
       <react_native_1.View style={styles_1.default.codeBlock}>
-        <TreeNode_1.default data={data} search={search} forceOpen={forceOpen}/>
+        <TreeNode_1.default data={data} search={search} forceOpen={forceOpen} defaultExpandDepth={defaultExpandDepth}/>
       </react_native_1.View>
     </react_native_1.ScrollView>);
 };

package/dist/commonjs/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/commonjs/components/MetaAccordion.js

@@ -16,8 +16,9 @@ const NetworkIcons_1 = require("./NetworkIcons");
 // Stylesheet
 const AppColors_1 = require("../styles/AppColors");
 const styles_1 = __importDefault(require("../styles"));
-const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, }) => {
-    const { toggleOpen, chevronStyle, bodyStyle } = (0, useAccordion_1.default)(true, 400, 260);
+const AppFonts_1 = require("../styles/AppFonts");
+const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, method, contentType, url, }) => {
+    const { toggleOpen, chevronStyle, bodyStyle } = (0, useAccordion_1.default)(true, 400, 390);
     const isFailed = status === 0 || status == null;
     return (<react_native_1.View style={styles_1.default.metaContainer}>
       <react_native_1.Pressable onPress={toggleOpen} hitSlop={12}>
@@ -44,6 +45,26 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, }) =>
             </react_native_1.Text>
           </react_native_1.View>
           <react_native_1.View style={styles_1.default.metaDivider}/>
+          
+          <react_native_1.View style={styles_1.default.metaRow}>
+            <react_native_1.View style={styles_1.default.metaLabelRow}>
+              <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+              <react_native_1.Text style={styles_1.default.metaLabel}>Method</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={[
+            styles_1.default.statusChip,
+            {
+                borderColor: 'rgba(107, 78, 255, 0.25)',
+                backgroundColor: 'rgba(107, 78, 255, 0.08)',
+            }
+        ]}>
+              <react_native_1.Text style={[styles_1.default.statusText, { color: AppColors_1.AppColors.purple, fontFamily: AppFonts_1.AppFonts.interBold }]}>
+                {method || 'GET'}
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+          <react_native_1.View style={styles_1.default.metaDivider}/>
+
           <react_native_1.View style={styles_1.default.metaRow}>
             <react_native_1.View style={styles_1.default.metaLabelRow}>
               <NetworkIcons_1.StatusIcon color={AppColors_1.AppColors.grayTextWeak}/>
@@ -69,6 +90,16 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, }) =>
             </react_native_1.View>
           </react_native_1.View>
           <react_native_1.View style={styles_1.default.metaDivider}/>
+
+          <react_native_1.View style={styles_1.default.metaRow}>
+            <react_native_1.View style={styles_1.default.metaLabelRow}>
+              <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+              <react_native_1.Text style={styles_1.default.metaLabel}>Content Type</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.Text style={styles_1.default.metaValue}>{contentType || 'application/json'}</react_native_1.Text>
+          </react_native_1.View>
+          <react_native_1.View style={styles_1.default.metaDivider}/>
+
           <react_native_1.View style={styles_1.default.metaRow}>
             <react_native_1.View style={styles_1.default.metaLabelRow}>
               <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
@@ -99,6 +130,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, }) =>
             </react_native_1.View>
           </react_native_1.View>
           <react_native_1.View style={styles_1.default.metaDivider}/>
+          
           <react_native_1.View style={styles_1.default.metaRow}>
             <react_native_1.View style={styles_1.default.metaLabelRow}>
               <NetworkIcons_1.SizeIcon color={AppColors_1.AppColors.grayTextWeak}/>
@@ -106,6 +138,17 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, }) =>
             </react_native_1.View>
             <react_native_1.Text style={styles_1.default.metaValue}>{size}</react_native_1.Text>
           </react_native_1.View>
+          <react_native_1.View style={styles_1.default.metaDivider}/>
+
+          <react_native_1.View style={[styles_1.default.metaRow, { alignItems: 'flex-start' }]}>
+            <react_native_1.View style={styles_1.default.metaLabelRow}>
+              <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+              <react_native_1.Text style={styles_1.default.metaLabel}>Full URL</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.Text selectable={true} numberOfLines={3} ellipsizeMode="tail" style={[styles_1.default.metaValue, { fontSize: 11.5, color: AppColors_1.AppColors.grayTextWeak, flex: 1, textAlign: 'right', lineHeight: 16 }]}>
+              {url || '—'}
+            </react_native_1.Text>
+          </react_native_1.View>
         </react_native_1.View>
       </react_native_1.Animated.View>
     </react_native_1.View>);

package/dist/commonjs/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;