react-native-inapp-inspector 1.1.27 → 1.1.29

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

@@ -51,8 +51,12 @@ const networkLogger_1 = require("../../customHooks/networkLogger");
 const consoleLogger_1 = require("../../customHooks/consoleLogger");
 const analyticsLogger_1 = require("../../customHooks/analyticsLogger");
 const crashHandler_1 = require("../../customHooks/crashHandler");
+const reduxLogger_1 = require("../../customHooks/reduxLogger");
+const analyticsLogger_2 = require("../../customHooks/analyticsLogger");
+const i18n_1 = require("../../i18n");
 const NetworkIcons_1 = require("../NetworkIcons");
 const SettingsPanel = () => {
+    const { t } = (0, i18n_1.useTranslation)();
     const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, } = (0, InspectorContext_1.useInspector)();
     const isPersistent = (0, settingsStore_1.isPersistentStorageAvailable)();
     const headerTopPadding = react_native_1.Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
@@ -223,9 +227,14 @@ const SettingsPanel = () => {
               </react_native_1.View>
 
               {settingsTabs.map((tab, idx) => {
-                    const isVisible = tab.key === 'apis' || tabVisibility?.[tab.key];
+                    const isReduxAvail = (0, reduxLogger_1.isReduxConnected)();
+                    const isAnalyticsAvail = (0, analyticsLogger_2.isAnalyticsConnected)();
+                    const isUnavailable = (tab.key === 'redux' && !isReduxAvail) ||
+                        (tab.key === 'analytics' && !isAnalyticsAvail);
+                    const isLocked = tab.key === 'apis' || isUnavailable;
+                    const isVisible = tab.key === 'apis' ||
+                        (Boolean(tabVisibility?.[tab.key]) && !isUnavailable);
                     const isLast = idx === settingsTabs.length - 1;
-                    const isLocked = tab.key === 'apis';
                     return (<react_native_1.View key={tab.key} style={{
                             flexDirection: 'row',
                             alignItems: 'center',
@@ -241,6 +250,7 @@ const SettingsPanel = () => {
                             flexDirection: 'row',
                             alignItems: 'center',
                             gap: 8,
+                            flexWrap: 'wrap',
                         }}>
                       {/* Small icon tile */}
                       <react_native_1.View style={{
@@ -289,8 +299,28 @@ const SettingsPanel = () => {
                         }}>
                         {tab.label}
                       </react_native_1.Text>
+                      {/* Unavailable badge */}
+                      {isUnavailable && (<react_native_1.View style={{
+                                backgroundColor: `${AppColors_1.AppColors.amber500}18`,
+                                borderRadius: 4,
+                                paddingHorizontal: 5,
+                                paddingVertical: 1.5,
+                                borderWidth: 1,
+                                borderColor: `${AppColors_1.AppColors.amber500}35`,
+                            }}>
+                          <react_native_1.Text style={{
+                                fontFamily: AppFonts_1.AppFonts.interBold,
+                                fontSize: 8,
+                                color: AppColors_1.AppColors.amber700,
+                                letterSpacing: 0.3,
+                            }}>
+                            {tab.key === 'redux'
+                                ? t('settings.notConnectedBadge')
+                                : t('settings.notDetectedBadge')}
+                          </react_native_1.Text>
+                        </react_native_1.View>)}
                       {/* #6 — badge marks the configured default tab */}
-                      {tab.key === defaultTab && (<react_native_1.View style={{
+                      {tab.key === defaultTab && !isUnavailable && (<react_native_1.View style={{
                                 flexDirection: 'row',
                                 alignItems: 'center',
                                 backgroundColor: `${AppColors_1.AppColors.purple}14`,
@@ -319,21 +349,21 @@ const SettingsPanel = () => {
                         </react_native_1.View>)}
 
                       {/* Settings gear icon next to label */}
-                      <TouchableScale_1.default onPress={() => {
-                            (0, InspectorContext_1.animateNextLayout)();
-                            setSettingsPage(tab.key);
-                        }} hitSlop={8} style={{
-                            marginLeft: 4,
-                            padding: 4,
-                            borderRadius: 6,
-                            backgroundColor: AppColors_1.AppColors.purpleShade50,
-                            borderWidth: 1,
-                            borderColor: `${AppColors_1.AppColors.purple}26`,
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                        }}>
-                        <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.purple} size={10}/>
-                      </TouchableScale_1.default>
+                      {!isUnavailable && (<TouchableScale_1.default onPress={() => {
+                                (0, InspectorContext_1.animateNextLayout)();
+                                setSettingsPage(tab.key);
+                            }} hitSlop={8} style={{
+                                marginLeft: 4,
+                                padding: 4,
+                                borderRadius: 6,
+                                backgroundColor: AppColors_1.AppColors.purpleShade50,
+                                borderWidth: 1,
+                                borderColor: `${AppColors_1.AppColors.purple}26`,
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }}>
+                          <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.purple} size={10}/>
+                        </TouchableScale_1.default>)}
                     </react_native_1.View>
 
                     {/* Visibility Switch in VISIBILITY column */}
@@ -383,12 +413,17 @@ const SettingsPanel = () => {
                       </TouchableScale_1.default>
                       {isLocked && (<react_native_1.Text style={{
                                 fontFamily: AppFonts_1.AppFonts.interBold,
-                                fontSize: 8,
-                                color: AppColors_1.AppColors.grayTextWeak,
-                                letterSpacing: 0.4,
+                                fontSize: 7.5,
+                                color: isUnavailable
+                                    ? AppColors_1.AppColors.amber700
+                                    : AppColors_1.AppColors.grayTextWeak,
+                                letterSpacing: 0.3,
                                 marginTop: 3,
+                                textAlign: 'right',
                             }}>
-                          REQUIRED
+                          {tab.key === 'apis'
+                                ? t('settings.requiredBadge')
+                                : t('settings.readOnlyBadge')}
                         </react_native_1.Text>)}
                     </react_native_1.View>
                   </react_native_1.View>);

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

@@ -10,8 +10,12 @@ const TouchableScale_1 = __importDefault(require("../TouchableScale"));
 const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const NetworkIcons_1 = require("../NetworkIcons");
+const reduxLogger_1 = require("../../customHooks/reduxLogger");
+const analyticsLogger_1 = require("../../customHooks/analyticsLogger");
 const TabBar = react_1.default.memo(() => {
     const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, crashRecords, lastReadApisCount, lastReadLogsCount, lastReadCrashesCount, unreadPulseAnim, } = (0, InspectorContext_1.useInspector)();
+    const isReduxAvail = (0, reduxLogger_1.isReduxConnected)();
+    const isAnalyticsAvail = (0, analyticsLogger_1.isAnalyticsConnected)();
     return (<react_native_1.View style={styles_1.default.tabBarContainer}>
       <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingRight: 16 }}>
         {[
@@ -58,7 +62,15 @@ const TabBar = react_1.default.memo(() => {
                 icon: 'crash',
             },
         ]
-            .filter(tab => tabVisibility?.[tab.key])
+            .filter(tab => {
+            if (!tabVisibility?.[tab.key])
+                return false;
+            if (tab.key === 'redux' && !isReduxAvail)
+                return false;
+            if (tab.key === 'analytics' && !isAnalyticsAvail)
+                return false;
+            return true;
+        })
             .map(tab => {
             const isActive = activeTab === tab.key;
             const iconColor = isActive

package/dist/commonjs/components/JsonViewer.js

@@ -95,7 +95,7 @@ const JsonTableRow = react_1.default.memo(({ itemKey, val, search, }) => {
 // ── JsonViewer Component ─────────────────────────────────────────────────────
 const JsonViewer = react_1.default.memo(({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight = false, maxHeight, mode: externalMode, onModeChange, hideTabs = false, }) => {
     const { t } = (0, i18n_1.useTranslation)();
-    const [internalMode, setInternalMode] = (0, react_1.useState)('pretty');
+    const [internalMode, setInternalMode] = (0, react_1.useState)('raw');
     const mode = externalMode ?? internalMode;
     const setMode = (newMode) => {
         if (onModeChange) {
@@ -116,6 +116,10 @@ const JsonViewer = react_1.default.memo(({ data, search, forceOpen, defaultExpan
             return String(data);
         }
     }, [data]);
+    const [showFullRaw, setShowFullRaw] = (0, react_1.useState)(false);
+    const RAW_LIMIT = 50000;
+    const isTruncated = rawText.length > RAW_LIMIT && !showFullRaw;
+    const displayRawText = isTruncated ? rawText.slice(0, RAW_LIMIT) : rawText;
     (0, react_1.useEffect)(() => {
         if (externalMode) {
             setInternalMode(externalMode);
@@ -186,7 +190,7 @@ const JsonViewer = react_1.default.memo(({ data, search, forceOpen, defaultExpan
       <react_native_1.View style={contentWrapperStyle}>
         {mode === 'pretty' && (isEmpty ? (<react_native_1.View style={localStyles.emptyTable}>
               <react_native_1.Text style={localStyles.emptyTableText}>
-                {t('network.emptyResponse')}
+                {t('network.jsonViewer.emptyPayload')}
               </react_native_1.Text>
             </react_native_1.View>) : (wrap ? (fullHeight ? (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
                 <react_native_1.View style={[styles_1.default.codeBlock, { width: '100%' }]}>{tree}</react_native_1.View>
@@ -201,12 +205,30 @@ const JsonViewer = react_1.default.memo(({ data, search, forceOpen, defaultExpan
               </react_native_1.ScrollView>))))}
 
         {mode === 'raw' && (<react_native_1.ScrollView style={scrollStyle} contentContainerStyle={localStyles.rawContainer} showsVerticalScrollIndicator={true} nestedScrollEnabled={true}>
-            <HighlightText_1.default text={rawText} search={search} detectLinks={true} style={localStyles.rawPlainText} highlightStyle={{
+            <HighlightText_1.default text={displayRawText} search={search} detectLinks={rawText.length < 20000} style={localStyles.rawPlainText} selectable={true} highlightStyle={{
                 backgroundColor: AppColors_1.AppColors.yellowHighlight,
                 color: AppColors_1.AppColors.primaryBlack,
                 borderRadius: 3,
                 paddingHorizontal: 2,
             }}/>
+            {isTruncated && (<react_native_1.TouchableOpacity onPress={() => setShowFullRaw(true)} style={{
+                    marginTop: 10,
+                    backgroundColor: `${AppColors_1.AppColors.brandPurple}15`,
+                    paddingVertical: 8,
+                    paddingHorizontal: 12,
+                    borderRadius: 6,
+                    alignItems: 'center',
+                    borderWidth: 1,
+                    borderColor: `${AppColors_1.AppColors.brandPurple}30`,
+                }}>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 11,
+                    color: AppColors_1.AppColors.brandPurple,
+                }}>
+                  Showing first 50 KB ({Math.round(rawText.length / 1024)} KB total) · Tap to load full
+                </react_native_1.Text>
+              </react_native_1.TouchableOpacity>)}
           </react_native_1.ScrollView>)}
 
         {mode === 'table' && (fullHeight ? (<react_native_1.ScrollView style={scrollStyle}>

package/dist/commonjs/components/LogCard.js

@@ -43,6 +43,7 @@ const AppColors_1 = require("../styles/AppColors");
 const constants_1 = require("../constants");
 const helpers_1 = require("../helpers");
 const NetworkIcons_1 = require("./NetworkIcons");
+const AppFonts_1 = require("../styles/AppFonts");
 const styles_1 = __importDefault(require("../styles"));
 const HighlightText_1 = __importDefault(require("./HighlightText"));
 const TouchableScale_1 = __importDefault(require("./TouchableScale"));
@@ -50,6 +51,27 @@ const i18n_1 = require("../i18n");
 const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineMinStart, timelineTotalRange, isNew, isSelected, onToggleSelect, searchStr, }) {
     const { t } = (0, i18n_1.useTranslation)();
     const methodColor = constants_1.METHOD_COLORS[item.method] ?? constants_1.METHOD_COLORS.ALL;
+    const handleOpenUrl = (e) => {
+        e?.stopPropagation?.();
+        react_native_1.Alert.alert(t('common.openInBrowser') || 'Open in Browser', `${t('common.openInBrowserPrompt') || 'Are you sure you want to open this URL in your external browser?'}\n\n${item.url}`, [
+            { text: t('common.cancel') || 'Cancel', style: 'cancel' },
+            {
+                text: t('common.open') || 'Open',
+                onPress: () => {
+                    react_native_1.Linking.canOpenURL(item.url)
+                        .then(supported => {
+                        if (supported) {
+                            react_native_1.Linking.openURL(item.url);
+                        }
+                        else {
+                            react_native_1.Linking.openURL(item.url).catch(() => { });
+                        }
+                    })
+                        .catch(() => { });
+                },
+            },
+        ]);
+    };
     const isFailed = item.status === 0 || (item.status != null && item.status >= 400);
     const isLoading = item.status == null;
     const statusColor = (0, helpers_1.getStatusColor)(item.status);
@@ -75,10 +97,6 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
             }).start();
         }
     }, [isNew]);
-    const path = (0, helpers_1.getPath)(item.url);
-    const baseUrl = (0, helpers_1.getBaseUrl)(item.url) || item.url;
-    const slug = path && path !== '/' ? path : item.url;
-    const showSlug = slug !== baseUrl && slug !== item.url;
     const triggeredAt = (0, helpers_1.formatDateTime)(item.startTime);
     const isJson = item.url.split('?')[0].toLowerCase().endsWith('.json');
     return (<TouchableScale_1.default onPress={onPress} style={[
@@ -89,7 +107,7 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
             },
         ]}>
       <react_native_1.View style={styles_1.default.cardBody}>
-        {/* Row 1: Header (Checkbox, Serial, Method Badge, Base URL / Host with HTTPS, Status Pill) */}
+        {/* Row 1: Header (Checkbox, Serial, Method Badge, Client Tag, Status Pill) */}
         <react_native_1.View style={styles_1.default.cardHeaderRow}>
           <react_native_1.View style={styles_1.default.cardHeaderLeft}>
             <react_native_1.Pressable onPress={() => onToggleSelect(item.id)} hitSlop={12} style={[
@@ -109,7 +127,122 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
               </react_native_1.Text>
             </react_native_1.View>
 
-            <HighlightText_1.default text={baseUrl || item.url} search={searchStr} style={styles_1.default.cardHostText} highlightStyle={styles_1.default.highlight} numberOfLines={1} ellipsizeMode="tail"/>
+            {item.client && (<react_native_1.View style={[
+                styles_1.default.chip,
+                {
+                    backgroundColor: item.client === 'axios'
+                        ? `${AppColors_1.AppColors.purple}14`
+                        : item.client === 'apollo' || item.client === 'graphql'
+                            ? `${AppColors_1.AppColors.pink500}14`
+                            : item.client === 'xhr'
+                                ? `${AppColors_1.AppColors.amber500}14`
+                                : `${AppColors_1.AppColors.sky500}14`,
+                    borderColor: item.client === 'axios'
+                        ? `${AppColors_1.AppColors.purple}30`
+                        : item.client === 'apollo' || item.client === 'graphql'
+                            ? `${AppColors_1.AppColors.pink500}30`
+                            : item.client === 'xhr'
+                                ? `${AppColors_1.AppColors.amber500}30`
+                                : `${AppColors_1.AppColors.sky500}30`,
+                    paddingHorizontal: 4.5,
+                    paddingVertical: 1,
+                    borderRadius: 4,
+                },
+            ]}>
+                <react_native_1.Text style={[
+                styles_1.default.chipText,
+                {
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 8.5,
+                    color: item.client === 'axios'
+                        ? AppColors_1.AppColors.purple
+                        : item.client === 'apollo' || item.client === 'graphql'
+                            ? AppColors_1.AppColors.pink500
+                            : item.client === 'xhr'
+                                ? AppColors_1.AppColors.amber700
+                                : AppColors_1.AppColors.sky600,
+                },
+            ]}>
+                  {item.client.toUpperCase()}
+                </react_native_1.Text>
+              </react_native_1.View>)}
+
+            {/* Protocol / HTTPS Badge */}
+            <react_native_1.View style={[
+            styles_1.default.chip,
+            {
+                backgroundColor: item.url.toLowerCase().startsWith('https')
+                    ? '#ECFDF5'
+                    : '#FFFBEB',
+                borderColor: item.url.toLowerCase().startsWith('https')
+                    ? '#A7F3D0'
+                    : '#FDE68A',
+                paddingHorizontal: 4,
+                paddingVertical: 1,
+                borderRadius: 4,
+            },
+        ]}>
+              <react_native_1.Text style={[
+            styles_1.default.chipText,
+            {
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 8,
+                color: item.url.toLowerCase().startsWith('https')
+                    ? '#059669'
+                    : '#D97706',
+            },
+        ]}>
+                {item.url.toLowerCase().startsWith('https') ? 'HTTPS' : 'HTTP'}
+              </react_native_1.Text>
+            </react_native_1.View>
+
+            {/* GraphQL Indicator */}
+            {(item.url.toLowerCase().includes('graphql') ||
+            item.client === 'apollo' ||
+            item.client === 'graphql') && (<react_native_1.View style={[
+                styles_1.default.chip,
+                {
+                    backgroundColor: '#FDF2F8',
+                    borderColor: '#FBCFE8',
+                    paddingHorizontal: 4,
+                    paddingVertical: 1,
+                    borderRadius: 4,
+                },
+            ]}>
+                <react_native_1.Text style={[
+                styles_1.default.chipText,
+                {
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 8,
+                    color: '#DB2777',
+                },
+            ]}>
+                  GQL
+                </react_native_1.Text>
+              </react_native_1.View>)}
+
+            {/* In-Line Duration / Latency Pill */}
+            {item.duration != null && !isFailed && (<react_native_1.View style={[
+                styles_1.default.chip,
+                {
+                    backgroundColor: `${durationColor}12`,
+                    borderColor: `${durationColor}2E`,
+                    paddingHorizontal: 4.5,
+                    paddingVertical: 1,
+                    borderRadius: 4,
+                },
+            ]}>
+                <react_native_1.Text style={[
+                styles_1.default.chipText,
+                {
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 8.5,
+                    color: durationColor,
+                },
+            ]}>
+                  {item.duration}ms
+                </react_native_1.Text>
+              </react_native_1.View>)}
           </react_native_1.View>
 
           <react_native_1.View style={[
@@ -146,42 +279,42 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
           </react_native_1.View>
         </react_native_1.View>
 
-        {/* Row 2: Improved Slug Capsule Container */}
-        {showSlug && (<react_native_1.View style={styles_1.default.cardSlugBox}>
-            <react_native_1.View style={styles_1.default.slugLeft}>
-              <react_native_1.Text style={styles_1.default.slugTag}>PATH</react_native_1.Text>
-              <HighlightText_1.default text={slug} search={searchStr} style={styles_1.default.slugText} highlightStyle={styles_1.default.highlight} numberOfLines={1} ellipsizeMode="tail"/>
-            </react_native_1.View>
+        {/* Row 2: Full URL Capsule Container (Clickable with link prompt) */}
+        <react_native_1.View style={styles_1.default.cardSlugBox}>
+          <react_native_1.Pressable onPress={handleOpenUrl} style={styles_1.default.slugLeft} hitSlop={6}>
+            <react_native_1.Text style={styles_1.default.slugTag}>URL ↗</react_native_1.Text>
+            <HighlightText_1.default text={item.url} search={searchStr} style={[styles_1.default.slugText, { color: AppColors_1.AppColors.skyBlue, textDecorationLine: 'underline' }]} highlightStyle={styles_1.default.highlight} numberOfLines={2} ellipsizeMode="middle"/>
+          </react_native_1.Pressable>
 
-            <react_native_1.View style={styles_1.default.slugRight}>
-              {isJson && (<react_native_1.View style={[
-                    styles_1.default.chip,
-                    {
-                        backgroundColor: `${AppColors_1.AppColors.darkOrange}12`,
-                        borderColor: `${AppColors_1.AppColors.darkOrange}28`,
-                    },
-                ]}>
-                  <react_native_1.Text style={[styles_1.default.chipText, { color: AppColors_1.AppColors.darkOrange }]}>
-                    .json
-                  </react_native_1.Text>
-                </react_native_1.View>)}
+          <react_native_1.View style={styles_1.default.slugRight}>
+            {isJson && (<react_native_1.View style={[
+                styles_1.default.chip,
+                {
+                    backgroundColor: `${AppColors_1.AppColors.darkOrange}12`,
+                    borderColor: `${AppColors_1.AppColors.darkOrange}28`,
+                },
+            ]}>
+                <react_native_1.Text style={[styles_1.default.chipText, { color: AppColors_1.AppColors.darkOrange }]}>
+                  .json
+                </react_native_1.Text>
+              </react_native_1.View>)}
 
-              {item.duplicateCount != null && item.duplicateCount > 1 && (<react_native_1.View style={[
-                    styles_1.default.chip,
-                    {
-                        backgroundColor: `${AppColors_1.AppColors.purple}12`,
-                        borderColor: `${AppColors_1.AppColors.purple}28`,
-                    },
-                ]}>
-                  <react_native_1.Text style={[
-                    styles_1.default.chipText,
-                    { color: AppColors_1.AppColors.purple, fontWeight: '700' },
-                ]}>
-                    ×{item.duplicateCount}
-                  </react_native_1.Text>
-                </react_native_1.View>)}
-            </react_native_1.View>
-          </react_native_1.View>)}
+            {item.duplicateCount != null && item.duplicateCount > 1 && (<react_native_1.View style={[
+                styles_1.default.chip,
+                {
+                    backgroundColor: `${AppColors_1.AppColors.purple}12`,
+                    borderColor: `${AppColors_1.AppColors.purple}28`,
+                },
+            ]}>
+                <react_native_1.Text style={[
+                styles_1.default.chipText,
+                { color: AppColors_1.AppColors.purple, fontWeight: '700' },
+            ]}>
+                  ×{item.duplicateCount}
+                </react_native_1.Text>
+              </react_native_1.View>)}
+          </react_native_1.View>
+        </react_native_1.View>
 
         {/* Row 3: Footer (Timestamp on Left, Response Size & Duration on Right) */}
         <react_native_1.View style={styles_1.default.cardFooterRow}>