react-native-inapp-inspector 1.1.4 → 1.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +4 -0
  2. package/assets/walkthrough.gif +0 -0
  3. package/dist/commonjs/constants/version.d.ts +1 -1
  4. package/dist/commonjs/constants/version.js +1 -1
  5. package/dist/commonjs/index.js +902 -742
  6. package/dist/esm/constants/version.d.ts +1 -1
  7. package/dist/esm/constants/version.js +1 -1
  8. package/dist/esm/index.js +902 -742
  9. package/package.json +1 -1
package/dist/commonjs/index.js CHANGED
@@ -266,6 +266,8 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
266
266
  const [inspectedElement, setInspectedElement] = (0, react_1.useState)(null);
267
267
  // ─── Settings state ──────────────────────────────────────────────────────────
268
268
  const [settingsPage, setSettingsPage] = (0, react_1.useState)(null);
269
+ const [settingsActiveSubTab, setSettingsActiveSubTab] = (0, react_1.useState)('module');
270
+ const [insightsActiveSubTab, setInsightsActiveSubTab] = (0, react_1.useState)('apis');
269
271
  const [tabVisibility, setTabVisibility] = (0, react_1.useState)({
270
272
  insights: true,
271
273
  apis: true,
@@ -459,6 +461,9 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
459
461
  if (!nextVal && defaultTab === key) {
460
462
  setDefaultTab('apis');
461
463
  }
464
+ if (!nextVal && insightsActiveSubTab === key) {
465
+ setInsightsActiveSubTab('apis');
466
+ }
462
467
  return newVisibility;
463
468
  });
464
469
  };
@@ -1410,267 +1415,315 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
1410
1415
  </react_native_linear_gradient_1.default>
1411
1416
 
1412
1417
  <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
1413
- {/* Tab list */}
1418
+ {/* Sub Tabs */}
1414
1419
  <react_native_1.View style={{
1420
+ flexDirection: 'row',
1415
1421
  backgroundColor: AppColors_1.AppColors.primaryLight,
1416
- borderRadius: 12,
1422
+ borderRadius: 10,
1423
+ padding: 3,
1417
1424
  borderWidth: 1,
1418
1425
  borderColor: AppColors_1.AppColors.grayBorderSecondary,
1419
- overflow: 'hidden',
1426
+ marginBottom: 4,
1420
1427
  }}>
1421
- {/* Table Header */}
1422
- <react_native_1.View style={{
1423
- flexDirection: 'row',
1424
- alignItems: 'center',
1428
+ <react_native_1.TouchableOpacity onPress={() => {
1429
+ animateNextLayout();
1430
+ setSettingsActiveSubTab('module');
1431
+ }} style={{
1432
+ flex: 1,
1425
1433
  paddingVertical: 8,
1426
- paddingHorizontal: 14,
1427
- backgroundColor: AppColors_1.AppColors.grayBackground,
1428
- borderBottomWidth: 1,
1429
- borderBottomColor: AppColors_1.AppColors.dividerColor,
1430
- gap: 12,
1434
+ alignItems: 'center',
1435
+ justifyContent: 'center',
1436
+ borderRadius: 8,
1437
+ backgroundColor: settingsActiveSubTab === 'module'
1438
+ ? AppColors_1.AppColors.purple
1439
+ : 'transparent',
1431
1440
  }}>
1432
1441
  <react_native_1.Text style={{
1433
1442
  fontFamily: AppFonts_1.AppFonts.interBold,
1434
- fontSize: 10,
1435
- color: AppColors_1.AppColors.grayTextWeak,
1436
- letterSpacing: 0.6,
1437
- flex: 1,
1443
+ fontSize: 12,
1444
+ color: settingsActiveSubTab === 'module'
1445
+ ? '#FFFFFF'
1446
+ : AppColors_1.AppColors.grayText,
1438
1447
  }}>
1439
- MODULE
1448
+ Module
1440
1449
  </react_native_1.Text>
1450
+ </react_native_1.TouchableOpacity>
1451
+ <react_native_1.TouchableOpacity onPress={() => {
1452
+ animateNextLayout();
1453
+ setSettingsActiveSubTab('ui');
1454
+ }} style={{
1455
+ flex: 1,
1456
+ paddingVertical: 8,
1457
+ alignItems: 'center',
1458
+ justifyContent: 'center',
1459
+ borderRadius: 8,
1460
+ backgroundColor: settingsActiveSubTab === 'ui'
1461
+ ? AppColors_1.AppColors.purple
1462
+ : 'transparent',
1463
+ }}>
1441
1464
  <react_native_1.Text style={{
1442
1465
  fontFamily: AppFonts_1.AppFonts.interBold,
1443
- fontSize: 10,
1444
- color: AppColors_1.AppColors.grayTextWeak,
1445
- letterSpacing: 0.6,
1446
- width: 90,
1447
- textAlign: 'right',
1448
- paddingRight: 4,
1466
+ fontSize: 12,
1467
+ color: settingsActiveSubTab === 'ui'
1468
+ ? '#FFFFFF'
1469
+ : AppColors_1.AppColors.grayText,
1449
1470
  }}>
1450
- VISIBILITY
1471
+ UI Preferences
1451
1472
  </react_native_1.Text>
1452
- </react_native_1.View>
1473
+ </react_native_1.TouchableOpacity>
1474
+ </react_native_1.View>
1453
1475
 
1454
- {settingsTabs.map((tab, idx) => {
1455
- const isVisible = tab.key === 'apis' || tabVisibility?.[tab.key];
1456
- const isLast = idx === settingsTabs.length - 1;
1457
- const isLocked = tab.key === 'apis';
1458
- return (<react_native_1.View key={tab.key} style={{
1459
- flexDirection: 'row',
1460
- alignItems: 'center',
1461
- paddingVertical: 10,
1462
- paddingHorizontal: 14,
1463
- borderBottomWidth: isLast ? 0 : 1,
1464
- borderBottomColor: AppColors_1.AppColors.dividerColor,
1465
- gap: 12,
1466
- }}>
1467
- {/* Icon + Label — fills remaining space */}
1468
- <react_native_1.View style={{
1469
- flex: 1,
1470
- flexDirection: 'row',
1471
- alignItems: 'center',
1472
- gap: 8,
1473
- }}>
1474
- {/* Small icon tile */}
1476
+ {settingsActiveSubTab === 'module' ? (
1477
+ /* Tab list */
1478
+ <react_native_1.View style={{
1479
+ backgroundColor: AppColors_1.AppColors.primaryLight,
1480
+ borderRadius: 12,
1481
+ borderWidth: 1,
1482
+ borderColor: AppColors_1.AppColors.grayBorderSecondary,
1483
+ overflow: 'hidden',
1484
+ }}>
1485
+ {/* Table Header */}
1486
+ <react_native_1.View style={{
1487
+ flexDirection: 'row',
1488
+ alignItems: 'center',
1489
+ paddingVertical: 8,
1490
+ paddingHorizontal: 14,
1491
+ backgroundColor: AppColors_1.AppColors.grayBackground,
1492
+ borderBottomWidth: 1,
1493
+ borderBottomColor: AppColors_1.AppColors.dividerColor,
1494
+ gap: 12,
1495
+ }}>
1496
+ <react_native_1.Text style={{
1497
+ fontFamily: AppFonts_1.AppFonts.interBold,
1498
+ fontSize: 10,
1499
+ color: AppColors_1.AppColors.grayTextWeak,
1500
+ letterSpacing: 0.6,
1501
+ flex: 1,
1502
+ }}>
1503
+ MODULE
1504
+ </react_native_1.Text>
1505
+ <react_native_1.Text style={{
1506
+ fontFamily: AppFonts_1.AppFonts.interBold,
1507
+ fontSize: 10,
1508
+ color: AppColors_1.AppColors.grayTextWeak,
1509
+ letterSpacing: 0.6,
1510
+ width: 90,
1511
+ textAlign: 'right',
1512
+ paddingRight: 4,
1513
+ }}>
1514
+ VISIBILITY
1515
+ </react_native_1.Text>
1516
+ </react_native_1.View>
1517
+
1518
+ {settingsTabs.map((tab, idx) => {
1519
+ const isVisible = tab.key === 'apis' || tabVisibility?.[tab.key];
1520
+ const isLast = idx === settingsTabs.length - 1;
1521
+ const isLocked = tab.key === 'apis';
1522
+ return (<react_native_1.View key={tab.key} style={{
1523
+ flexDirection: 'row',
1524
+ alignItems: 'center',
1525
+ paddingVertical: 10,
1526
+ paddingHorizontal: 14,
1527
+ borderBottomWidth: isLast ? 0 : 1,
1528
+ borderBottomColor: AppColors_1.AppColors.dividerColor,
1529
+ gap: 12,
1530
+ }}>
1531
+ {/* Icon + Label — fills remaining space */}
1475
1532
  <react_native_1.View style={{
1476
- width: 20,
1477
- height: 20,
1478
- borderRadius: 6,
1479
- backgroundColor: isLocked
1480
- ? AppColors_1.AppColors.grayBorderSecondary
1481
- : AppColors_1.AppColors.purpleShade50,
1482
- borderWidth: 1,
1483
- borderColor: isLocked
1484
- ? AppColors_1.AppColors.dividerColor
1485
- : 'rgba(104,75,155,0.2)',
1486
- alignItems: 'center',
1487
- justifyContent: 'center',
1488
- }}>
1489
- {tab.icon === 'insights' && (<NetworkIcons_1.InsightsIcon color={isLocked
1490
- ? AppColors_1.AppColors.grayTextWeak
1491
- : AppColors_1.AppColors.purple} size={11}/>)}
1492
- {tab.icon === 'apis' && (<NetworkIcons_1.SignalIcon color={isLocked
1493
- ? AppColors_1.AppColors.grayTextWeak
1494
- : AppColors_1.AppColors.purple} size={11}/>)}
1495
- {tab.icon === 'logs' && (<NetworkIcons_1.TerminalIcon color={isLocked
1496
- ? AppColors_1.AppColors.grayTextWeak
1497
- : AppColors_1.AppColors.purple} size={11}/>)}
1498
- {tab.icon === 'analytics' && (<NetworkIcons_1.AnalyticsIcon color={isLocked
1499
- ? AppColors_1.AppColors.grayTextWeak
1500
- : AppColors_1.AppColors.purple} size={11}/>)}
1501
- {tab.icon === 'webview' && (<NetworkIcons_1.GlobeIcon color={isLocked
1502
- ? AppColors_1.AppColors.grayTextWeak
1503
- : AppColors_1.AppColors.purple} size={11}/>)}
1504
- {tab.icon === 'redux' && (<NetworkIcons_1.TerminalIcon color={isLocked
1505
- ? AppColors_1.AppColors.grayTextWeak
1506
- : AppColors_1.AppColors.purple} size={11}/>)}
1507
- </react_native_1.View>
1508
- {/* Label + Required badge */}
1509
- <react_native_1.Text style={{
1510
- fontFamily: AppFonts_1.AppFonts.interBold,
1511
- fontSize: 13,
1512
- color: isLocked
1513
- ? AppColors_1.AppColors.grayText
1514
- : AppColors_1.AppColors.primaryBlack,
1515
- }}>
1516
- {tab.label}
1517
- </react_native_1.Text>
1518
- {/* #6 — badge marks the configured default tab */}
1519
- {tab.key === defaultTab && (<react_native_1.View style={{
1533
+ flex: 1,
1520
1534
  flexDirection: 'row',
1521
1535
  alignItems: 'center',
1522
- backgroundColor: 'rgba(104,75,155,0.08)',
1523
- borderRadius: 20,
1524
- paddingHorizontal: 6,
1525
- paddingVertical: 2,
1536
+ gap: 8,
1537
+ }}>
1538
+ {/* Small icon tile */}
1539
+ <react_native_1.View style={{
1540
+ width: 20,
1541
+ height: 20,
1542
+ borderRadius: 6,
1543
+ backgroundColor: isLocked
1544
+ ? AppColors_1.AppColors.grayBorderSecondary
1545
+ : AppColors_1.AppColors.purpleShade50,
1526
1546
  borderWidth: 1,
1527
- borderColor: 'rgba(104,75,155,0.18)',
1528
- gap: 3,
1547
+ borderColor: isLocked
1548
+ ? AppColors_1.AppColors.dividerColor
1549
+ : 'rgba(104,75,155,0.2)',
1550
+ alignItems: 'center',
1551
+ justifyContent: 'center',
1529
1552
  }}>
1530
- <react_native_1.View style={{
1531
- width: 4,
1532
- height: 4,
1533
- borderRadius: 2,
1534
- backgroundColor: AppColors_1.AppColors.purple,
1535
- opacity: 0.7,
1536
- }}/>
1537
- <react_native_1.Text style={{
1553
+ {tab.icon === 'insights' && (<NetworkIcons_1.InsightsIcon color={isLocked
1554
+ ? AppColors_1.AppColors.grayTextWeak
1555
+ : AppColors_1.AppColors.purple} size={11}/>)}
1556
+ {tab.icon === 'apis' && (<NetworkIcons_1.SignalIcon color={isLocked
1557
+ ? AppColors_1.AppColors.grayTextWeak
1558
+ : AppColors_1.AppColors.purple} size={11}/>)}
1559
+ {tab.icon === 'logs' && (<NetworkIcons_1.TerminalIcon color={isLocked
1560
+ ? AppColors_1.AppColors.grayTextWeak
1561
+ : AppColors_1.AppColors.purple} size={11}/>)}
1562
+ {tab.icon === 'analytics' && (<NetworkIcons_1.AnalyticsIcon color={isLocked
1563
+ ? AppColors_1.AppColors.grayTextWeak
1564
+ : AppColors_1.AppColors.purple} size={11}/>)}
1565
+ {tab.icon === 'webview' && (<NetworkIcons_1.GlobeIcon color={isLocked
1566
+ ? AppColors_1.AppColors.grayTextWeak
1567
+ : AppColors_1.AppColors.purple} size={11}/>)}
1568
+ {tab.icon === 'redux' && (<NetworkIcons_1.TerminalIcon color={isLocked
1569
+ ? AppColors_1.AppColors.grayTextWeak
1570
+ : AppColors_1.AppColors.purple} size={11}/>)}
1571
+ </react_native_1.View>
1572
+ {/* Label + Required badge */}
1573
+ <react_native_1.Text style={{
1538
1574
  fontFamily: AppFonts_1.AppFonts.interBold,
1539
- fontSize: 8.5,
1540
- color: AppColors_1.AppColors.purple,
1541
- letterSpacing: 0.4,
1575
+ fontSize: 13,
1576
+ color: isLocked
1577
+ ? AppColors_1.AppColors.grayText
1578
+ : AppColors_1.AppColors.primaryBlack,
1542
1579
  }}>
1543
- DEFAULT
1544
- </react_native_1.Text>
1545
- </react_native_1.View>)}
1546
-
1547
- {/* Settings gear icon next to label */}
1548
- <TouchableScale_1.default onPress={() => {
1549
- animateNextLayout();
1550
- setSettingsPage(tab.key);
1551
- }} hitSlop={8} style={{
1552
- marginLeft: 4,
1553
- padding: 4,
1554
- borderRadius: 6,
1555
- backgroundColor: AppColors_1.AppColors.purpleShade50,
1556
- borderWidth: 1,
1557
- borderColor: 'rgba(104,75,155,0.15)',
1558
- alignItems: 'center',
1559
- justifyContent: 'center',
1560
- }}>
1561
- <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.purple} size={10}/>
1562
- </TouchableScale_1.default>
1563
- </react_native_1.View>
1580
+ {tab.label}
1581
+ </react_native_1.Text>
1582
+ {/* #6 — badge marks the configured default tab */}
1583
+ {tab.key === defaultTab && (<react_native_1.View style={{
1584
+ flexDirection: 'row',
1585
+ alignItems: 'center',
1586
+ backgroundColor: 'rgba(104,75,155,0.08)',
1587
+ borderRadius: 20,
1588
+ paddingHorizontal: 6,
1589
+ paddingVertical: 2,
1590
+ borderWidth: 1,
1591
+ borderColor: 'rgba(104,75,155,0.18)',
1592
+ gap: 3,
1593
+ }}>
1594
+ <react_native_1.View style={{
1595
+ width: 4,
1596
+ height: 4,
1597
+ borderRadius: 2,
1598
+ backgroundColor: AppColors_1.AppColors.purple,
1599
+ opacity: 0.7,
1600
+ }}/>
1601
+ <react_native_1.Text style={{
1602
+ fontFamily: AppFonts_1.AppFonts.interBold,
1603
+ fontSize: 8.5,
1604
+ color: AppColors_1.AppColors.purple,
1605
+ letterSpacing: 0.4,
1606
+ }}>
1607
+ DEFAULT
1608
+ </react_native_1.Text>
1609
+ </react_native_1.View>)}
1564
1610
 
1565
- {/* Visibility Switch in VISIBILITY column */}
1566
- <react_native_1.View style={{
1567
- width: 90,
1568
- alignItems: 'flex-end',
1569
- justifyContent: 'center',
1570
- }}>
1571
- <TouchableScale_1.default disabled={isLocked} onPress={() => toggleTabVisibility(tab.key)} style={{
1572
- width: 38,
1573
- height: 22,
1574
- borderRadius: 11,
1575
- backgroundColor: isLocked
1576
- ? AppColors_1.AppColors.grayBackground
1577
- : isVisible
1578
- ? AppColors_1.AppColors.purple
1579
- : AppColors_1.AppColors.grayBorderSecondary,
1580
- borderWidth: isLocked ? 1.5 : 0,
1581
- borderColor: isLocked
1582
- ? AppColors_1.AppColors.grayBorderSecondary
1583
- : 'transparent',
1584
- borderStyle: isLocked ? 'dashed' : 'solid',
1585
- padding: 2,
1586
- justifyContent: 'center',
1587
- alignItems: isVisible ? 'flex-end' : 'flex-start',
1588
- opacity: isLocked ? 0.9 : 1,
1589
- }}>
1590
- <react_native_1.View style={{
1591
- width: 18,
1592
- height: 18,
1593
- borderRadius: 9,
1594
- backgroundColor: isLocked
1595
- ? AppColors_1.AppColors.grayBorderSecondary
1596
- : '#FFFFFF',
1597
- alignItems: 'center',
1598
- justifyContent: 'center',
1599
- shadowColor: '#000',
1600
- shadowOpacity: isLocked ? 0 : 0.15,
1601
- shadowRadius: 1.5,
1602
- shadowOffset: { width: 0, height: 1 },
1603
- }}>
1604
- {isLocked && (<react_native_svg_1.default width={10} height={10} viewBox="0 0 24 24" fill="none">
1605
- <react_native_svg_1.Path d="M7 10V7a5 5 0 0 1 10 0v3" stroke={AppColors_1.AppColors.grayText} strokeWidth="2.2" strokeLinecap="round"/>
1606
- <react_native_svg_1.Path d="M5 10h14v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z" fill={AppColors_1.AppColors.grayText}/>
1607
- </react_native_svg_1.default>)}
1608
- </react_native_1.View>
1609
- </TouchableScale_1.default>
1610
- {isLocked && (<react_native_1.Text style={{
1611
- fontFamily: AppFonts_1.AppFonts.interBold,
1612
- fontSize: 8,
1613
- color: AppColors_1.AppColors.grayTextWeak,
1614
- letterSpacing: 0.4,
1615
- marginTop: 3,
1611
+ {/* Settings gear icon next to label */}
1612
+ <TouchableScale_1.default onPress={() => {
1613
+ animateNextLayout();
1614
+ setSettingsPage(tab.key);
1615
+ }} hitSlop={8} style={{
1616
+ marginLeft: 4,
1617
+ padding: 4,
1618
+ borderRadius: 6,
1619
+ backgroundColor: AppColors_1.AppColors.purpleShade50,
1620
+ borderWidth: 1,
1621
+ borderColor: 'rgba(104,75,155,0.15)',
1622
+ alignItems: 'center',
1623
+ justifyContent: 'center',
1616
1624
  }}>
1617
- REQUIRED
1618
- </react_native_1.Text>)}
1619
- </react_native_1.View>
1620
- </react_native_1.View>);
1621
- })}
1622
- </react_native_1.View>
1625
+ <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.purple} size={10}/>
1626
+ </TouchableScale_1.default>
1627
+ </react_native_1.View>
1623
1628
 
1624
- {/* UI Preferences Section */}
1625
- <react_native_1.View style={{ marginTop: 8 }}>
1626
- <react_native_1.Text style={{
1627
- fontFamily: AppFonts_1.AppFonts.interBold,
1628
- fontSize: 10,
1629
- color: AppColors_1.AppColors.grayTextWeak,
1630
- letterSpacing: 0.6,
1631
- marginBottom: 8,
1632
- }}>
1633
- UI PREFERENCES
1634
- </react_native_1.Text>
1635
- <react_native_1.View style={{
1636
- backgroundColor: AppColors_1.AppColors.primaryLight,
1637
- borderRadius: 12,
1638
- borderWidth: 1,
1639
- borderColor: AppColors_1.AppColors.grayBorderSecondary,
1640
- overflow: 'hidden',
1641
- }}>
1629
+ {/* Visibility Switch in VISIBILITY column */}
1630
+ <react_native_1.View style={{
1631
+ width: 90,
1632
+ alignItems: 'flex-end',
1633
+ justifyContent: 'center',
1634
+ }}>
1635
+ <TouchableScale_1.default disabled={isLocked} onPress={() => toggleTabVisibility(tab.key)} style={{
1636
+ width: 38,
1637
+ height: 22,
1638
+ borderRadius: 11,
1639
+ backgroundColor: isLocked
1640
+ ? AppColors_1.AppColors.grayBackground
1641
+ : isVisible
1642
+ ? AppColors_1.AppColors.purple
1643
+ : AppColors_1.AppColors.grayBorderSecondary,
1644
+ borderWidth: isLocked ? 1.5 : 0,
1645
+ borderColor: isLocked
1646
+ ? AppColors_1.AppColors.grayBorderSecondary
1647
+ : 'transparent',
1648
+ borderStyle: isLocked ? 'dashed' : 'solid',
1649
+ padding: 2,
1650
+ justifyContent: 'center',
1651
+ alignItems: isVisible ? 'flex-end' : 'flex-start',
1652
+ opacity: isLocked ? 0.9 : 1,
1653
+ }}>
1654
+ <react_native_1.View style={{
1655
+ width: 18,
1656
+ height: 18,
1657
+ borderRadius: 9,
1658
+ backgroundColor: isLocked
1659
+ ? AppColors_1.AppColors.grayBorderSecondary
1660
+ : '#FFFFFF',
1661
+ alignItems: 'center',
1662
+ justifyContent: 'center',
1663
+ shadowColor: '#000',
1664
+ shadowOpacity: isLocked ? 0 : 0.15,
1665
+ shadowRadius: 1.5,
1666
+ shadowOffset: { width: 0, height: 1 },
1667
+ }}>
1668
+ {isLocked && (<react_native_svg_1.default width={10} height={10} viewBox="0 0 24 24" fill="none">
1669
+ <react_native_svg_1.Path d="M7 10V7a5 5 0 0 1 10 0v3" stroke={AppColors_1.AppColors.grayText} strokeWidth="2.2" strokeLinecap="round"/>
1670
+ <react_native_svg_1.Path d="M5 10h14v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z" fill={AppColors_1.AppColors.grayText}/>
1671
+ </react_native_svg_1.default>)}
1672
+ </react_native_1.View>
1673
+ </TouchableScale_1.default>
1674
+ {isLocked && (<react_native_1.Text style={{
1675
+ fontFamily: AppFonts_1.AppFonts.interBold,
1676
+ fontSize: 8,
1677
+ color: AppColors_1.AppColors.grayTextWeak,
1678
+ letterSpacing: 0.4,
1679
+ marginTop: 3,
1680
+ }}>
1681
+ REQUIRED
1682
+ </react_native_1.Text>)}
1683
+ </react_native_1.View>
1684
+ </react_native_1.View>);
1685
+ })}
1686
+ </react_native_1.View>) : (
1687
+ /* UI Preferences Section */
1642
1688
  <react_native_1.View style={{
1643
- flexDirection: 'row',
1644
- alignItems: 'center',
1645
- paddingVertical: 12,
1646
- paddingHorizontal: 14,
1647
- gap: 12,
1648
- }}>
1689
+ backgroundColor: AppColors_1.AppColors.primaryLight,
1690
+ borderRadius: 12,
1691
+ borderWidth: 1,
1692
+ borderColor: AppColors_1.AppColors.grayBorderSecondary,
1693
+ overflow: 'hidden',
1694
+ }}>
1695
+ <react_native_1.View style={{
1696
+ flexDirection: 'row',
1697
+ alignItems: 'center',
1698
+ paddingVertical: 12,
1699
+ paddingHorizontal: 14,
1700
+ gap: 12,
1701
+ }}>
1649
1702
  {/* Icon + Label */}
1650
1703
  <react_native_1.View style={{
1651
- flex: 1,
1652
- flexDirection: 'row',
1653
- alignItems: 'center',
1654
- gap: 8,
1655
- }}>
1704
+ flex: 1,
1705
+ flexDirection: 'row',
1706
+ alignItems: 'center',
1707
+ gap: 8,
1708
+ }}>
1656
1709
  <react_native_1.View style={{
1657
- width: 20,
1658
- height: 20,
1659
- borderRadius: 6,
1660
- backgroundColor: AppColors_1.AppColors.purpleShade50,
1661
- borderWidth: 1,
1662
- borderColor: 'rgba(104,75,155,0.2)',
1663
- alignItems: 'center',
1664
- justifyContent: 'center',
1665
- }}>
1710
+ width: 20,
1711
+ height: 20,
1712
+ borderRadius: 6,
1713
+ backgroundColor: AppColors_1.AppColors.purpleShade50,
1714
+ borderWidth: 1,
1715
+ borderColor: 'rgba(104,75,155,0.2)',
1716
+ alignItems: 'center',
1717
+ justifyContent: 'center',
1718
+ }}>
1666
1719
  {isDark ? (<NetworkIcons_1.SunIcon color={AppColors_1.AppColors.purple} size={11}/>) : (<NetworkIcons_1.MoonIcon color={AppColors_1.AppColors.purple} size={11}/>)}
1667
1720
  </react_native_1.View>
1668
1721
  <react_native_1.View style={{ flex: 1 }}>
1669
1722
  <react_native_1.Text style={{
1670
- fontFamily: AppFonts_1.AppFonts.interBold,
1671
- fontSize: 13,
1672
- color: AppColors_1.AppColors.primaryBlack,
1673
- }}>
1723
+ fontFamily: AppFonts_1.AppFonts.interBold,
1724
+ fontSize: 13,
1725
+ color: AppColors_1.AppColors.primaryBlack,
1726
+ }}>
1674
1727
  Dark Theme
1675
1728
  </react_native_1.Text>
1676
1729
  </react_native_1.View>
@@ -1678,75 +1731,75 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
1678
1731
 
1679
1732
  {/* Toggle Switch */}
1680
1733
  <TouchableScale_1.default onPress={() => {
1681
- const newTheme = !isDark;
1682
- setIsDark(newTheme);
1683
- (0, styles_1.toggleGlobalTheme)(newTheme);
1684
- }} style={{
1685
- width: 38,
1686
- height: 22,
1687
- borderRadius: 11,
1688
- backgroundColor: isDark
1689
- ? AppColors_1.AppColors.purple
1690
- : AppColors_1.AppColors.grayBorderSecondary,
1691
- padding: 2,
1692
- justifyContent: 'center',
1693
- alignItems: isDark ? 'flex-end' : 'flex-start',
1694
- }}>
1734
+ const newTheme = !isDark;
1735
+ setIsDark(newTheme);
1736
+ (0, styles_1.toggleGlobalTheme)(newTheme);
1737
+ }} style={{
1738
+ width: 38,
1739
+ height: 22,
1740
+ borderRadius: 11,
1741
+ backgroundColor: isDark
1742
+ ? AppColors_1.AppColors.purple
1743
+ : AppColors_1.AppColors.grayBorderSecondary,
1744
+ padding: 2,
1745
+ justifyContent: 'center',
1746
+ alignItems: isDark ? 'flex-end' : 'flex-start',
1747
+ }}>
1695
1748
  <react_native_1.View style={{
1696
- width: 18,
1697
- height: 18,
1698
- borderRadius: 9,
1699
- backgroundColor: '#FFFFFF',
1700
- shadowColor: '#000',
1701
- shadowOpacity: 0.15,
1702
- shadowRadius: 1.5,
1703
- shadowOffset: { width: 0, height: 1 },
1704
- }}/>
1749
+ width: 18,
1750
+ height: 18,
1751
+ borderRadius: 9,
1752
+ backgroundColor: '#FFFFFF',
1753
+ shadowColor: '#000',
1754
+ shadowOpacity: 0.15,
1755
+ shadowRadius: 1.5,
1756
+ shadowOffset: { width: 0, height: 1 },
1757
+ }}/>
1705
1758
  </TouchableScale_1.default>
1706
1759
  </react_native_1.View>
1707
1760
 
1708
1761
  {/* Divider */}
1709
1762
  <react_native_1.View style={{
1710
- height: 1,
1711
- backgroundColor: AppColors_1.AppColors.dividerColor,
1712
- }}/>
1763
+ height: 1,
1764
+ backgroundColor: AppColors_1.AppColors.dividerColor,
1765
+ }}/>
1713
1766
 
1714
1767
  {/* Modal Height */}
1715
1768
  <react_native_1.View style={{
1716
- paddingVertical: 12,
1717
- paddingHorizontal: 14,
1718
- }}>
1769
+ paddingVertical: 12,
1770
+ paddingHorizontal: 14,
1771
+ }}>
1719
1772
  <react_native_1.View style={{
1720
- flexDirection: 'row',
1721
- alignItems: 'center',
1722
- gap: 8,
1723
- }}>
1773
+ flexDirection: 'row',
1774
+ alignItems: 'center',
1775
+ gap: 8,
1776
+ }}>
1724
1777
  <react_native_1.View style={{
1725
- width: 20,
1726
- height: 20,
1727
- borderRadius: 6,
1728
- backgroundColor: AppColors_1.AppColors.purpleShade50,
1729
- borderWidth: 1,
1730
- borderColor: 'rgba(104,75,155,0.2)',
1731
- alignItems: 'center',
1732
- justifyContent: 'center',
1733
- }}>
1734
- <NetworkIcons_1.ScreenIcon color={AppColors_1.AppColors.purple} size={11}/>
1735
- </react_native_1.View>
1778
+ width: 20,
1779
+ height: 20,
1780
+ borderRadius: 6,
1781
+ backgroundColor: AppColors_1.AppColors.purpleShade50,
1782
+ borderWidth: 1,
1783
+ borderColor: 'rgba(104,75,155,0.2)',
1784
+ alignItems: 'center',
1785
+ justifyContent: 'center',
1786
+ }}>
1787
+ <NetworkIcons_1.ScreenIcon color={AppColors_1.AppColors.purple} size={11}/>
1788
+ </react_native_1.View>
1736
1789
  <react_native_1.View style={{ flex: 1 }}>
1737
1790
  <react_native_1.Text style={{
1738
- fontFamily: AppFonts_1.AppFonts.interBold,
1739
- fontSize: 13,
1740
- color: AppColors_1.AppColors.primaryBlack,
1741
- }}>
1791
+ fontFamily: AppFonts_1.AppFonts.interBold,
1792
+ fontSize: 13,
1793
+ color: AppColors_1.AppColors.primaryBlack,
1794
+ }}>
1742
1795
  Modal Height
1743
1796
  </react_native_1.Text>
1744
1797
  <react_native_1.Text style={{
1745
- fontFamily: AppFonts_1.AppFonts.interRegular,
1746
- fontSize: 11,
1747
- color: AppColors_1.AppColors.grayText,
1748
- marginTop: 1,
1749
- }}>
1798
+ fontFamily: AppFonts_1.AppFonts.interRegular,
1799
+ fontSize: 11,
1800
+ color: AppColors_1.AppColors.grayText,
1801
+ marginTop: 1,
1802
+ }}>
1750
1803
  Height of the inspector panel relative to the screen
1751
1804
  </react_native_1.Text>
1752
1805
  </react_native_1.View>
@@ -1754,79 +1807,79 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
1754
1807
 
1755
1808
  {/* Segmented picker */}
1756
1809
  <react_native_1.View style={{
1757
- flexDirection: 'row',
1758
- backgroundColor: AppColors_1.AppColors.grayBackground,
1759
- borderRadius: 8,
1760
- padding: 2.5,
1761
- marginTop: 10,
1762
- borderWidth: 1,
1763
- borderColor: AppColors_1.AppColors.dividerColor,
1764
- }}>
1810
+ flexDirection: 'row',
1811
+ backgroundColor: AppColors_1.AppColors.grayBackground,
1812
+ borderRadius: 8,
1813
+ padding: 2.5,
1814
+ marginTop: 10,
1815
+ borderWidth: 1,
1816
+ borderColor: AppColors_1.AppColors.dividerColor,
1817
+ }}>
1765
1818
  {[50, 70, 90, 100].map(opt => {
1766
- const isActive = modalHeightPercent === opt;
1767
- return (<TouchableScale_1.default key={opt} onPress={() => setModalHeightPercent(opt)} style={{
1768
- flex: 1,
1769
- paddingVertical: 6,
1770
- alignItems: 'center',
1771
- borderRadius: 6,
1772
- backgroundColor: isActive
1773
- ? AppColors_1.AppColors.purple
1774
- : 'transparent',
1775
- }}>
1819
+ const isActive = modalHeightPercent === opt;
1820
+ return (<TouchableScale_1.default key={opt} onPress={() => setModalHeightPercent(opt)} style={{
1821
+ flex: 1,
1822
+ paddingVertical: 6,
1823
+ alignItems: 'center',
1824
+ borderRadius: 6,
1825
+ backgroundColor: isActive
1826
+ ? AppColors_1.AppColors.purple
1827
+ : 'transparent',
1828
+ }}>
1776
1829
  <react_native_1.Text style={{
1777
- fontFamily: AppFonts_1.AppFonts.interBold,
1778
- fontSize: 11,
1779
- color: isActive ? '#FFFFFF' : AppColors_1.AppColors.grayText,
1780
- }}>
1830
+ fontFamily: AppFonts_1.AppFonts.interBold,
1831
+ fontSize: 11,
1832
+ color: isActive ? '#FFFFFF' : AppColors_1.AppColors.grayText,
1833
+ }}>
1781
1834
  {opt}%
1782
1835
  </react_native_1.Text>
1783
1836
  </TouchableScale_1.default>);
1784
- })}
1837
+ })}
1785
1838
  </react_native_1.View>
1786
1839
  </react_native_1.View>
1787
1840
 
1788
1841
  {/* Divider */}
1789
1842
  <react_native_1.View style={{
1790
- height: 1,
1791
- backgroundColor: AppColors_1.AppColors.dividerColor,
1792
- }}/>
1843
+ height: 1,
1844
+ backgroundColor: AppColors_1.AppColors.dividerColor,
1845
+ }}/>
1793
1846
 
1794
1847
  {/* #6 — Default Tab */}
1795
1848
  <react_native_1.View style={{
1796
- paddingVertical: 12,
1797
- paddingHorizontal: 14,
1798
- }}>
1849
+ paddingVertical: 12,
1850
+ paddingHorizontal: 14,
1851
+ }}>
1799
1852
  <react_native_1.View style={{
1800
- flexDirection: 'row',
1801
- alignItems: 'center',
1802
- gap: 8,
1803
- }}>
1853
+ flexDirection: 'row',
1854
+ alignItems: 'center',
1855
+ gap: 8,
1856
+ }}>
1804
1857
  <react_native_1.View style={{
1805
- width: 20,
1806
- height: 20,
1807
- borderRadius: 6,
1808
- backgroundColor: AppColors_1.AppColors.purpleShade50,
1809
- borderWidth: 1,
1810
- borderColor: 'rgba(104,75,155,0.2)',
1811
- alignItems: 'center',
1812
- justifyContent: 'center',
1813
- }}>
1858
+ width: 20,
1859
+ height: 20,
1860
+ borderRadius: 6,
1861
+ backgroundColor: AppColors_1.AppColors.purpleShade50,
1862
+ borderWidth: 1,
1863
+ borderColor: 'rgba(104,75,155,0.2)',
1864
+ alignItems: 'center',
1865
+ justifyContent: 'center',
1866
+ }}>
1814
1867
  <NetworkIcons_1.LayersIcon color={AppColors_1.AppColors.purple} size={11}/>
1815
1868
  </react_native_1.View>
1816
1869
  <react_native_1.View style={{ flex: 1 }}>
1817
1870
  <react_native_1.Text style={{
1818
- fontFamily: AppFonts_1.AppFonts.interBold,
1819
- fontSize: 13,
1820
- color: AppColors_1.AppColors.primaryBlack,
1821
- }}>
1871
+ fontFamily: AppFonts_1.AppFonts.interBold,
1872
+ fontSize: 13,
1873
+ color: AppColors_1.AppColors.primaryBlack,
1874
+ }}>
1822
1875
  Default Tab
1823
1876
  </react_native_1.Text>
1824
1877
  <react_native_1.Text style={{
1825
- fontFamily: AppFonts_1.AppFonts.interRegular,
1826
- fontSize: 11,
1827
- color: AppColors_1.AppColors.grayText,
1828
- marginTop: 1,
1829
- }}>
1878
+ fontFamily: AppFonts_1.AppFonts.interRegular,
1879
+ fontSize: 11,
1880
+ color: AppColors_1.AppColors.grayText,
1881
+ marginTop: 1,
1882
+ }}>
1830
1883
  Tab shown when the inspector opens
1831
1884
  </react_native_1.Text>
1832
1885
  </react_native_1.View>
@@ -1834,36 +1887,36 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
1834
1887
 
1835
1888
  {/* Grid of Default Tab Cards */}
1836
1889
  <react_native_1.View style={{
1837
- flexDirection: 'row',
1838
- flexWrap: 'wrap',
1839
- gap: 8,
1840
- marginTop: 12,
1841
- }}>
1890
+ flexDirection: 'row',
1891
+ flexWrap: 'wrap',
1892
+ gap: 8,
1893
+ marginTop: 12,
1894
+ }}>
1842
1895
  {settingsTabs
1843
- .filter(tab => tab.key === 'apis' || tabVisibility?.[tab.key])
1844
- .map(tab => {
1845
- const isActive = defaultTab === tab.key;
1846
- return (<TouchableScale_1.default key={tab.key} onPress={() => setDefaultTab(tab.key)} style={{
1847
- flexDirection: 'row',
1848
- alignItems: 'center',
1849
- gap: 8,
1850
- paddingVertical: 10,
1851
- paddingHorizontal: 12,
1852
- borderRadius: 10,
1853
- borderWidth: 1.5,
1854
- borderColor: isActive ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayBorderSecondary,
1855
- backgroundColor: isActive ? 'rgba(104,75,155,0.06)' : AppColors_1.AppColors.primaryLight,
1856
- minWidth: '47%',
1857
- flex: 1,
1858
- }}>
1896
+ .filter(tab => tab.key === 'apis' || tabVisibility?.[tab.key])
1897
+ .map(tab => {
1898
+ const isActive = defaultTab === tab.key;
1899
+ return (<TouchableScale_1.default key={tab.key} onPress={() => setDefaultTab(tab.key)} style={{
1900
+ flexDirection: 'row',
1901
+ alignItems: 'center',
1902
+ gap: 8,
1903
+ paddingVertical: 10,
1904
+ paddingHorizontal: 12,
1905
+ borderRadius: 10,
1906
+ borderWidth: 1.5,
1907
+ borderColor: isActive ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayBorderSecondary,
1908
+ backgroundColor: isActive ? 'rgba(104,75,155,0.06)' : AppColors_1.AppColors.primaryLight,
1909
+ minWidth: '47%',
1910
+ flex: 1,
1911
+ }}>
1859
1912
  <react_native_1.View style={{
1860
- width: 22,
1861
- height: 22,
1862
- borderRadius: 6,
1863
- backgroundColor: isActive ? AppColors_1.AppColors.purple : AppColors_1.AppColors.purpleShade50,
1864
- alignItems: 'center',
1865
- justifyContent: 'center',
1866
- }}>
1913
+ width: 22,
1914
+ height: 22,
1915
+ borderRadius: 6,
1916
+ backgroundColor: isActive ? AppColors_1.AppColors.purple : AppColors_1.AppColors.purpleShade50,
1917
+ alignItems: 'center',
1918
+ justifyContent: 'center',
1919
+ }}>
1867
1920
  {tab.icon === 'insights' && (<NetworkIcons_1.InsightsIcon color={isActive ? '#FFFFFF' : AppColors_1.AppColors.purple} size={11}/>)}
1868
1921
  {tab.icon === 'apis' && (<NetworkIcons_1.SignalIcon color={isActive ? '#FFFFFF' : AppColors_1.AppColors.purple} size={11}/>)}
1869
1922
  {tab.icon === 'logs' && (<NetworkIcons_1.TerminalIcon color={isActive ? '#FFFFFF' : AppColors_1.AppColors.purple} size={11}/>)}
@@ -1872,74 +1925,74 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
1872
1925
  {tab.icon === 'redux' && (<NetworkIcons_1.TerminalIcon color={isActive ? '#FFFFFF' : AppColors_1.AppColors.purple} size={11}/>)}
1873
1926
  </react_native_1.View>
1874
1927
  <react_native_1.Text style={{
1875
- fontFamily: AppFonts_1.AppFonts.interBold,
1876
- fontSize: 13,
1877
- color: isActive ? AppColors_1.AppColors.purple : AppColors_1.AppColors.primaryBlack,
1878
- flex: 1,
1879
- }}>
1928
+ fontFamily: AppFonts_1.AppFonts.interBold,
1929
+ fontSize: 13,
1930
+ color: isActive ? AppColors_1.AppColors.purple : AppColors_1.AppColors.primaryBlack,
1931
+ flex: 1,
1932
+ }}>
1880
1933
  {tab.label}
1881
1934
  </react_native_1.Text>
1882
1935
  {isActive && (<react_native_1.View style={{
1883
- width: 14,
1884
- height: 14,
1885
- borderRadius: 7,
1886
- backgroundColor: AppColors_1.AppColors.purple,
1887
- alignItems: 'center',
1888
- justifyContent: 'center',
1889
- }}>
1936
+ width: 14,
1937
+ height: 14,
1938
+ borderRadius: 7,
1939
+ backgroundColor: AppColors_1.AppColors.purple,
1940
+ alignItems: 'center',
1941
+ justifyContent: 'center',
1942
+ }}>
1890
1943
  <NetworkIcons_1.CheckIcon size={8} color="#FFFFFF"/>
1891
1944
  </react_native_1.View>)}
1892
1945
  </TouchableScale_1.default>);
1893
- })}
1946
+ })}
1894
1947
  </react_native_1.View>
1895
1948
  </react_native_1.View>
1896
1949
 
1897
1950
  {/* Divider */}
1898
1951
  <react_native_1.View style={{
1899
- height: 1,
1900
- backgroundColor: AppColors_1.AppColors.dividerColor,
1901
- }}/>
1952
+ height: 1,
1953
+ backgroundColor: AppColors_1.AppColors.dividerColor,
1954
+ }}/>
1902
1955
 
1903
1956
  {/* #9 — Show Duplicate Logs */}
1904
1957
  <react_native_1.View style={{
1905
- flexDirection: 'row',
1906
- alignItems: 'center',
1907
- paddingVertical: 12,
1908
- paddingHorizontal: 14,
1909
- gap: 12,
1910
- }}>
1958
+ flexDirection: 'row',
1959
+ alignItems: 'center',
1960
+ paddingVertical: 12,
1961
+ paddingHorizontal: 14,
1962
+ gap: 12,
1963
+ }}>
1911
1964
  <react_native_1.View style={{
1912
- flex: 1,
1913
- flexDirection: 'row',
1914
- alignItems: 'center',
1915
- gap: 8,
1916
- }}>
1965
+ flex: 1,
1966
+ flexDirection: 'row',
1967
+ alignItems: 'center',
1968
+ gap: 8,
1969
+ }}>
1917
1970
  <react_native_1.View style={{
1918
- width: 20,
1919
- height: 20,
1920
- borderRadius: 6,
1921
- backgroundColor: AppColors_1.AppColors.purpleShade50,
1922
- borderWidth: 1,
1923
- borderColor: 'rgba(104,75,155,0.2)',
1924
- alignItems: 'center',
1925
- justifyContent: 'center',
1926
- }}>
1971
+ width: 20,
1972
+ height: 20,
1973
+ borderRadius: 6,
1974
+ backgroundColor: AppColors_1.AppColors.purpleShade50,
1975
+ borderWidth: 1,
1976
+ borderColor: 'rgba(104,75,155,0.2)',
1977
+ alignItems: 'center',
1978
+ justifyContent: 'center',
1979
+ }}>
1927
1980
  <NetworkIcons_1.EyeIcon color={AppColors_1.AppColors.purple} size={11}/>
1928
1981
  </react_native_1.View>
1929
1982
  <react_native_1.View style={{ flex: 1 }}>
1930
1983
  <react_native_1.Text style={{
1931
- fontFamily: AppFonts_1.AppFonts.interBold,
1932
- fontSize: 13,
1933
- color: AppColors_1.AppColors.primaryBlack,
1934
- }}>
1984
+ fontFamily: AppFonts_1.AppFonts.interBold,
1985
+ fontSize: 13,
1986
+ color: AppColors_1.AppColors.primaryBlack,
1987
+ }}>
1935
1988
  Show Duplicate Logs
1936
1989
  </react_native_1.Text>
1937
1990
  <react_native_1.Text style={{
1938
- fontFamily: AppFonts_1.AppFonts.interRegular,
1939
- fontSize: 11,
1940
- color: AppColors_1.AppColors.grayText,
1941
- marginTop: 1,
1942
- }}>
1991
+ fontFamily: AppFonts_1.AppFonts.interRegular,
1992
+ fontSize: 11,
1993
+ color: AppColors_1.AppColors.grayText,
1994
+ marginTop: 1,
1995
+ }}>
1943
1996
  Off: repeated identical entries collapse into one row
1944
1997
  with a ×N count
1945
1998
  </react_native_1.Text>
@@ -1948,99 +2001,99 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
1948
2001
 
1949
2002
  {/* Toggle Switch */}
1950
2003
  <TouchableScale_1.default onPress={() => setShowDuplicateLogs(prev => !prev)} style={{
1951
- width: 38,
1952
- height: 22,
1953
- borderRadius: 11,
1954
- backgroundColor: showDuplicateLogs
1955
- ? AppColors_1.AppColors.purple
1956
- : AppColors_1.AppColors.grayBorderSecondary,
1957
- padding: 2,
1958
- justifyContent: 'center',
1959
- alignItems: showDuplicateLogs ? 'flex-end' : 'flex-start',
1960
- }}>
2004
+ width: 38,
2005
+ height: 22,
2006
+ borderRadius: 11,
2007
+ backgroundColor: showDuplicateLogs
2008
+ ? AppColors_1.AppColors.purple
2009
+ : AppColors_1.AppColors.grayBorderSecondary,
2010
+ padding: 2,
2011
+ justifyContent: 'center',
2012
+ alignItems: showDuplicateLogs ? 'flex-end' : 'flex-start',
2013
+ }}>
1961
2014
  <react_native_1.View style={{
1962
- width: 18,
1963
- height: 18,
1964
- borderRadius: 9,
1965
- backgroundColor: '#FFFFFF',
1966
- shadowColor: '#000',
1967
- shadowOpacity: 0.15,
1968
- shadowRadius: 1.5,
1969
- shadowOffset: { width: 0, height: 1 },
1970
- }}/>
2015
+ width: 18,
2016
+ height: 18,
2017
+ borderRadius: 9,
2018
+ backgroundColor: '#FFFFFF',
2019
+ shadowColor: '#000',
2020
+ shadowOpacity: 0.15,
2021
+ shadowRadius: 1.5,
2022
+ shadowOffset: { width: 0, height: 1 },
2023
+ }}/>
1971
2024
  </TouchableScale_1.default>
1972
2025
  </react_native_1.View>
1973
2026
 
1974
2027
  {/* Divider */}
1975
2028
  <react_native_1.View style={{
1976
- height: 1,
1977
- backgroundColor: AppColors_1.AppColors.dividerColor,
1978
- }}/>
2029
+ height: 1,
2030
+ backgroundColor: AppColors_1.AppColors.dividerColor,
2031
+ }}/>
1979
2032
 
1980
2033
  {/* Reset Settings */}
1981
2034
  <react_native_1.View style={{
1982
- flexDirection: 'row',
1983
- alignItems: 'center',
1984
- paddingVertical: 12,
1985
- paddingHorizontal: 14,
1986
- gap: 12,
1987
- }}>
2035
+ flexDirection: 'row',
2036
+ alignItems: 'center',
2037
+ paddingVertical: 12,
2038
+ paddingHorizontal: 14,
2039
+ gap: 12,
2040
+ }}>
1988
2041
  <react_native_1.View style={{
1989
- flex: 1,
1990
- flexDirection: 'row',
1991
- alignItems: 'center',
1992
- gap: 8,
1993
- }}>
2042
+ flex: 1,
2043
+ flexDirection: 'row',
2044
+ alignItems: 'center',
2045
+ gap: 8,
2046
+ }}>
1994
2047
  <react_native_1.View style={{
1995
- width: 20,
1996
- height: 20,
1997
- borderRadius: 6,
1998
- backgroundColor: 'rgba(239,68,68,0.08)',
1999
- borderWidth: 1,
2000
- borderColor: 'rgba(239,68,68,0.2)',
2001
- alignItems: 'center',
2002
- justifyContent: 'center',
2003
- }}>
2048
+ width: 20,
2049
+ height: 20,
2050
+ borderRadius: 6,
2051
+ backgroundColor: 'rgba(239,68,68,0.08)',
2052
+ borderWidth: 1,
2053
+ borderColor: 'rgba(239,68,68,0.2)',
2054
+ alignItems: 'center',
2055
+ justifyContent: 'center',
2056
+ }}>
2004
2057
  <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={11}/>
2005
2058
  </react_native_1.View>
2006
2059
  <react_native_1.View style={{ flex: 1 }}>
2007
2060
  <react_native_1.Text style={{
2008
- fontFamily: AppFonts_1.AppFonts.interBold,
2009
- fontSize: 13,
2010
- color: AppColors_1.AppColors.primaryBlack,
2011
- }}>
2061
+ fontFamily: AppFonts_1.AppFonts.interBold,
2062
+ fontSize: 13,
2063
+ color: AppColors_1.AppColors.primaryBlack,
2064
+ }}>
2012
2065
  Reset Settings
2013
2066
  </react_native_1.Text>
2014
2067
  <react_native_1.Text style={{
2015
- fontFamily: AppFonts_1.AppFonts.interRegular,
2016
- fontSize: 11,
2017
- color: AppColors_1.AppColors.grayText,
2018
- marginTop: 1,
2019
- }}>
2068
+ fontFamily: AppFonts_1.AppFonts.interRegular,
2069
+ fontSize: 11,
2070
+ color: AppColors_1.AppColors.grayText,
2071
+ marginTop: 1,
2072
+ }}>
2020
2073
  Wipe custom configurations and load package defaults
2021
2074
  </react_native_1.Text>
2022
2075
  </react_native_1.View>
2023
2076
  </react_native_1.View>
2024
2077
 
2025
2078
  <TouchableScale_1.default onPress={resetToDefaults} style={{
2026
- paddingHorizontal: 10,
2027
- paddingVertical: 5,
2028
- borderRadius: 7,
2029
- backgroundColor: 'rgba(255,46,87,0.08)',
2030
- borderWidth: 1,
2031
- borderColor: 'rgba(255,46,87,0.2)',
2032
- }}>
2079
+ paddingHorizontal: 10,
2080
+ paddingVertical: 5,
2081
+ borderRadius: 7,
2082
+ backgroundColor: 'rgba(255,46,87,0.08)',
2083
+ borderWidth: 1,
2084
+ borderColor: 'rgba(255,46,87,0.2)',
2085
+ }}>
2033
2086
  <react_native_1.Text style={{
2034
- fontFamily: AppFonts_1.AppFonts.interBold,
2035
- fontSize: 11,
2036
- color: AppColors_1.AppColors.errorColor,
2037
- }}>
2087
+ fontFamily: AppFonts_1.AppFonts.interBold,
2088
+ fontSize: 11,
2089
+ color: AppColors_1.AppColors.errorColor,
2090
+ }}>
2038
2091
  Reset
2039
2092
  </react_native_1.Text>
2040
2093
  </TouchableScale_1.default>
2041
2094
  </react_native_1.View>
2042
- </react_native_1.View>
2043
- </react_native_1.View>
2095
+ </react_native_1.View>)}
2096
+
2044
2097
 
2045
2098
  {/* Storage Status */}
2046
2099
  <react_native_1.View style={{
@@ -2882,296 +2935,403 @@ const NetworkInspector = ({ enabled = true, storage, }) => {
2882
2935
  </react_native_1.View>
2883
2936
  </react_native_1.View>
2884
2937
 
2885
- {/* Module 1: APIs */}
2886
- {tabVisibility?.apis && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('apis')}>
2887
- <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
2888
- <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
2889
- <NetworkIcons_1.SignalIcon color={AppColors_1.AppColors.purple} size={18}/>
2890
- <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>APIs & Network</react_native_1.Text>
2891
- </react_native_1.View>
2892
- <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
2893
- </react_native_1.View>
2894
- <react_native_1.View style={styles_1.default.dashboardModuleGrid}>
2895
- <react_native_1.View style={styles_1.default.dashboardGridItem}>
2896
- <react_native_1.Text style={styles_1.default.dashboardGridVal}>{apiTotal}</react_native_1.Text>
2897
- <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Requests</react_native_1.Text>
2898
- </react_native_1.View>
2899
- <react_native_1.View style={styles_1.default.dashboardGridItem}>
2900
- <react_native_1.Text style={[
2901
- styles_1.default.dashboardGridVal,
2902
- apiSuccessRate < 90 && { color: AppColors_1.AppColors.warningIconGold },
2903
- ]}>
2904
- {apiSuccessRate}%
2905
- </react_native_1.Text>
2906
- <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Success Rate</react_native_1.Text>
2907
- </react_native_1.View>
2908
- <react_native_1.View style={styles_1.default.dashboardGridItem}>
2909
- <react_native_1.Text style={[
2910
- styles_1.default.dashboardGridVal,
2911
- apiErrors > 0 && { color: AppColors_1.AppColors.errorColor },
2912
- ]}>
2913
- {apiErrors}
2914
- </react_native_1.Text>
2915
- <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Errors</react_native_1.Text>
2916
- </react_native_1.View>
2917
- <react_native_1.View style={styles_1.default.dashboardGridItem}>
2918
- <react_native_1.Text style={styles_1.default.dashboardGridVal}>
2919
- {avgTime != null ? `${avgTime}ms` : '—'}
2920
- </react_native_1.Text>
2921
- <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Avg Latency</react_native_1.Text>
2922
- </react_native_1.View>
2923
- </react_native_1.View>
2924
-
2925
- {/* Status-class breakdown + latency range */}
2926
- <react_native_1.View style={{
2927
- marginTop: 10,
2928
- paddingTop: 10,
2929
- borderTopWidth: 1,
2930
- borderTopColor: AppColors_1.AppColors.dividerColor,
2931
- flexDirection: 'row',
2932
- alignItems: 'center',
2933
- flexWrap: 'wrap',
2934
- gap: 6,
2935
- }}>
2936
- {[
2937
- { label: '2xx', value: status2xx, color: AppColors_1.AppColors.greenColor },
2938
- { label: '3xx', value: status3xx, color: AppColors_1.AppColors.skyBlue },
2938
+ {/* ── Insights Sub-Tab Selector ── */}
2939
+ {(() => {
2940
+ const insightTabs = [
2939
2941
  {
2940
- label: '4xx',
2941
- value: status4xx,
2942
- color: AppColors_1.AppColors.warningIconGold,
2942
+ key: 'apis',
2943
+ label: 'APIs',
2944
+ icon: (c, s) => <NetworkIcons_1.SignalIcon color={c} size={s}/>,
2945
+ color: AppColors_1.AppColors.purple,
2946
+ count: apiTotal,
2947
+ visible: !!tabVisibility?.apis,
2943
2948
  },
2944
- { label: '5xx', value: status5xx, color: AppColors_1.AppColors.errorColor },
2945
- ].map(s => (<react_native_1.View key={s.label} style={{
2946
- flexDirection: 'row',
2947
- alignItems: 'center',
2948
- gap: 4,
2949
- backgroundColor: AppColors_1.AppColors.grayBackground,
2950
- borderRadius: 6,
2951
- borderWidth: 1,
2952
- borderColor: AppColors_1.AppColors.dividerColor,
2953
- paddingHorizontal: 7,
2954
- paddingVertical: 3,
2955
- }}>
2956
- <react_native_1.View style={{
2957
- width: 6,
2958
- height: 6,
2959
- borderRadius: 3,
2960
- backgroundColor: s.color,
2961
- }}/>
2962
- <react_native_1.Text style={{
2963
- fontFamily: AppFonts_1.AppFonts.interBold,
2964
- fontSize: 10,
2965
- color: AppColors_1.AppColors.grayTextStrong,
2966
- }}>
2967
- {s.label} {s.value}
2968
- </react_native_1.Text>
2969
- </react_native_1.View>))}
2970
- {slowestTime != null && (<react_native_1.View style={{
2971
- marginLeft: 'auto',
2972
- flexDirection: 'row',
2973
- alignItems: 'center',
2974
- gap: 4,
2975
- }}>
2976
- <react_native_1.Text style={{
2977
- fontFamily: AppFonts_1.AppFonts.interRegular,
2978
- fontSize: 10,
2979
- color: AppColors_1.AppColors.grayTextWeak,
2980
- }}>
2981
- Range
2982
- </react_native_1.Text>
2983
- <react_native_1.Text style={{
2984
- fontFamily: AppFonts_1.AppFonts.interBold,
2985
- fontSize: 10,
2986
- color: AppColors_1.AppColors.grayTextStrong,
2949
+ {
2950
+ key: 'logs',
2951
+ label: 'Logs',
2952
+ icon: (c, s) => <NetworkIcons_1.TerminalIcon color={c} size={s}/>,
2953
+ color: '#0D9488',
2954
+ count: logTotal,
2955
+ visible: !!tabVisibility?.logs,
2956
+ },
2957
+ {
2958
+ key: 'analytics',
2959
+ label: 'Analytics',
2960
+ icon: (c, s) => <NetworkIcons_1.AnalyticsIcon color={c} size={s}/>,
2961
+ color: '#EA580C',
2962
+ count: analyticsTotal,
2963
+ visible: !!tabVisibility?.analytics,
2964
+ },
2965
+ {
2966
+ key: 'webview',
2967
+ label: 'WebView',
2968
+ icon: (c, s) => <NetworkIcons_1.GlobeIcon color={c} size={s}/>,
2969
+ color: '#2563EB',
2970
+ count: webviewTotal,
2971
+ visible: !!tabVisibility?.webview,
2972
+ },
2973
+ {
2974
+ key: 'redux',
2975
+ label: 'Redux',
2976
+ icon: (c, s) => <NetworkIcons_1.TerminalIcon color={c} size={s}/>,
2977
+ color: AppColors_1.AppColors.purple,
2978
+ count: reduxState ? Object.keys(reduxState).length : 0,
2979
+ visible: !!tabVisibility?.redux,
2980
+ },
2981
+ ];
2982
+ const visibleTabs = insightTabs.filter(t => t.visible);
2983
+ if (visibleTabs.length === 0)
2984
+ return null;
2985
+ return (<>
2986
+ <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
2987
+ paddingHorizontal: 2,
2988
+ paddingVertical: 2,
2989
+ gap: 8,
2990
+ }} style={{
2991
+ marginBottom: 12,
2992
+ flexGrow: 0,
2987
2993
  }}>
2988
- {fastestTime}–{slowestTime}ms
2989
- </react_native_1.Text>
2990
- </react_native_1.View>)}
2991
- </react_native_1.View>
2992
- </TouchableScale_1.default>)}
2993
- {tabVisibility?.logs && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('logs')}>
2994
- <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
2995
- <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
2996
- <NetworkIcons_1.TerminalIcon color="#0D9488" size={18}/>
2997
- <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>Console Logs</react_native_1.Text>
2998
- </react_native_1.View>
2999
- <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
3000
- </react_native_1.View>
3001
- <react_native_1.View style={styles_1.default.dashboardModuleGrid}>
3002
- <react_native_1.View style={styles_1.default.dashboardGridItem}>
3003
- <react_native_1.Text style={styles_1.default.dashboardGridVal}>{logTotal}</react_native_1.Text>
3004
- <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Total Logs</react_native_1.Text>
3005
- </react_native_1.View>
3006
- <react_native_1.View style={styles_1.default.dashboardGridItem}>
3007
- <react_native_1.Text style={[styles_1.default.dashboardGridVal, { color: '#0D9488' }]}>
3008
- {logInfos}
3009
- </react_native_1.Text>
3010
- <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Info</react_native_1.Text>
3011
- </react_native_1.View>
3012
- <react_native_1.View style={styles_1.default.dashboardGridItem}>
3013
- <react_native_1.Text style={[
3014
- styles_1.default.dashboardGridVal,
3015
- logWarns > 0 && { color: AppColors_1.AppColors.warningIconGold },
3016
- ]}>
3017
- {logWarns}
3018
- </react_native_1.Text>
3019
- <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Warnings</react_native_1.Text>
3020
- </react_native_1.View>
3021
- <react_native_1.View style={styles_1.default.dashboardGridItem}>
3022
- <react_native_1.Text style={[
3023
- styles_1.default.dashboardGridVal,
3024
- logErrors > 0 && { color: AppColors_1.AppColors.errorColor },
3025
- ]}>
3026
- {logErrors}
3027
- </react_native_1.Text>
3028
- <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Errors</react_native_1.Text>
3029
- </react_native_1.View>
3030
- </react_native_1.View>
3031
- </TouchableScale_1.default>)}
3032
-
3033
- {/* Module 3: Analytics */}
3034
- {tabVisibility?.analytics && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('analytics')}>
3035
- <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
3036
- <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
3037
- <NetworkIcons_1.AnalyticsIcon color="#EA580C" size={18}/>
3038
- <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>
3039
- Analytics Events
3040
- </react_native_1.Text>
3041
- </react_native_1.View>
3042
- <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
3043
- </react_native_1.View>
3044
- <react_native_1.View style={styles_1.default.dashboardModuleGrid}>
3045
- <react_native_1.View style={styles_1.default.dashboardGridItem}>
3046
- <react_native_1.Text style={styles_1.default.dashboardGridVal}>{analyticsTotal}</react_native_1.Text>
3047
- <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Total Events</react_native_1.Text>
3048
- </react_native_1.View>
3049
- <react_native_1.View style={styles_1.default.dashboardGridItem}>
3050
- <react_native_1.Text style={[styles_1.default.dashboardGridVal, { color: '#EA580C' }]}>
3051
- {uniqueEvents}
3052
- </react_native_1.Text>
3053
- <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Unique Names</react_native_1.Text>
3054
- </react_native_1.View>
3055
- <react_native_1.View style={styles_1.default.dashboardGridItem}>
3056
- <react_native_1.Text style={styles_1.default.dashboardGridVal}>{screenViews}</react_native_1.Text>
3057
- <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Screen Views</react_native_1.Text>
3058
- </react_native_1.View>
3059
- <react_native_1.View style={styles_1.default.dashboardGridItem}>
3060
- <react_native_1.Text style={styles_1.default.dashboardGridVal}>
3061
- {analyticsTotal > 0
3062
- ? Math.round(analyticsTotal / Math.max(1, logs.length / 5))
3063
- : 0}
3064
- </react_native_1.Text>
3065
- <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Events Ratio</react_native_1.Text>
3066
- </react_native_1.View>
3067
- </react_native_1.View>
3068
- </TouchableScale_1.default>)}
2994
+ {visibleTabs.map(tab => {
2995
+ const isActive = insightsActiveSubTab === tab.key;
2996
+ return (<react_native_1.TouchableOpacity key={tab.key} onPress={() => {
2997
+ animateNextLayout();
2998
+ setInsightsActiveSubTab(tab.key);
2999
+ }} activeOpacity={0.7} style={{
3000
+ flexDirection: 'row',
3001
+ alignItems: 'center',
3002
+ gap: 6,
3003
+ paddingHorizontal: 14,
3004
+ paddingVertical: 8,
3005
+ borderRadius: 20,
3006
+ backgroundColor: isActive
3007
+ ? tab.color
3008
+ : AppColors_1.AppColors.primaryLight,
3009
+ borderWidth: 1,
3010
+ borderColor: isActive
3011
+ ? tab.color
3012
+ : AppColors_1.AppColors.grayBorderSecondary,
3013
+ }}>
3014
+ {tab.icon(isActive ? '#FFFFFF' : tab.color, 14)}
3015
+ <react_native_1.Text style={{
3016
+ fontFamily: AppFonts_1.AppFonts.interBold,
3017
+ fontSize: 11.5,
3018
+ color: isActive ? '#FFFFFF' : AppColors_1.AppColors.grayTextStrong,
3019
+ }}>
3020
+ {tab.label}
3021
+ </react_native_1.Text>
3022
+ <react_native_1.View style={{
3023
+ minWidth: 20,
3024
+ height: 18,
3025
+ borderRadius: 9,
3026
+ paddingHorizontal: 5,
3027
+ alignItems: 'center',
3028
+ justifyContent: 'center',
3029
+ backgroundColor: isActive
3030
+ ? 'rgba(255,255,255,0.25)'
3031
+ : AppColors_1.AppColors.grayBackground,
3032
+ }}>
3033
+ <react_native_1.Text style={{
3034
+ fontFamily: AppFonts_1.AppFonts.interBold,
3035
+ fontSize: 9.5,
3036
+ color: isActive ? '#FFFFFF' : AppColors_1.AppColors.grayTextWeak,
3037
+ }}>
3038
+ {tab.count}
3039
+ </react_native_1.Text>
3040
+ </react_native_1.View>
3041
+ </react_native_1.TouchableOpacity>);
3042
+ })}
3043
+ </react_native_1.ScrollView>
3069
3044
 
3070
- {/* Module 4: WebView */}
3071
- {tabVisibility?.webview && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('webview')}>
3072
- <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
3073
- <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
3074
- <NetworkIcons_1.GlobeIcon color="#2563EB" size={18}/>
3075
- <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>
3076
- WebView Captures
3077
- </react_native_1.Text>
3078
- </react_native_1.View>
3079
- <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
3080
- </react_native_1.View>
3081
- <react_native_1.View style={styles_1.default.dashboardModuleGrid}>
3082
- <react_native_1.View style={styles_1.default.dashboardGridItem}>
3083
- <react_native_1.Text style={styles_1.default.dashboardGridVal}>{webviewTotal}</react_native_1.Text>
3084
- <react_native_1.Text style={styles_1.default.dashboardGridLbl}>History Size</react_native_1.Text>
3085
- </react_native_1.View>
3086
- <react_native_1.View style={styles_1.default.dashboardGridItem}>
3087
- <react_native_1.Text style={[styles_1.default.dashboardGridVal, { color: '#16A34A' }]}>
3088
- Active
3089
- </react_native_1.Text>
3090
- <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Status</react_native_1.Text>
3091
- </react_native_1.View>
3092
- <react_native_1.View style={styles_1.default.dashboardGridItem}>
3093
- <react_native_1.Text numberOfLines={1} style={styles_1.default.dashboardGridVal}>
3094
- {webviewTotal > 0
3095
- ? `${webViewNavHistory[0]?.title?.substring(0, 10) ?? ''}...`
3096
- : '—'}
3097
- </react_native_1.Text>
3098
- <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Last URL</react_native_1.Text>
3099
- </react_native_1.View>
3100
- </react_native_1.View>
3101
- </TouchableScale_1.default>)}
3045
+ {/* ── Active Module Card ── */}
3046
+ {insightsActiveSubTab === 'apis' && tabVisibility?.apis && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('apis')}>
3047
+ <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
3048
+ <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
3049
+ <NetworkIcons_1.SignalIcon color={AppColors_1.AppColors.purple} size={18}/>
3050
+ <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>APIs & Network</react_native_1.Text>
3051
+ </react_native_1.View>
3052
+ <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
3053
+ </react_native_1.View>
3054
+ <react_native_1.View style={styles_1.default.dashboardModuleGrid}>
3055
+ <react_native_1.View style={styles_1.default.dashboardGridItem}>
3056
+ <react_native_1.Text style={styles_1.default.dashboardGridVal}>{apiTotal}</react_native_1.Text>
3057
+ <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Requests</react_native_1.Text>
3058
+ </react_native_1.View>
3059
+ <react_native_1.View style={styles_1.default.dashboardGridItem}>
3060
+ <react_native_1.Text style={[
3061
+ styles_1.default.dashboardGridVal,
3062
+ apiSuccessRate < 90 && { color: AppColors_1.AppColors.warningIconGold },
3063
+ ]}>
3064
+ {apiSuccessRate}%
3065
+ </react_native_1.Text>
3066
+ <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Success Rate</react_native_1.Text>
3067
+ </react_native_1.View>
3068
+ <react_native_1.View style={styles_1.default.dashboardGridItem}>
3069
+ <react_native_1.Text style={[
3070
+ styles_1.default.dashboardGridVal,
3071
+ apiErrors > 0 && { color: AppColors_1.AppColors.errorColor },
3072
+ ]}>
3073
+ {apiErrors}
3074
+ </react_native_1.Text>
3075
+ <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Errors</react_native_1.Text>
3076
+ </react_native_1.View>
3077
+ <react_native_1.View style={styles_1.default.dashboardGridItem}>
3078
+ <react_native_1.Text style={styles_1.default.dashboardGridVal}>
3079
+ {avgTime != null ? `${avgTime}ms` : '—'}
3080
+ </react_native_1.Text>
3081
+ <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Avg Latency</react_native_1.Text>
3082
+ </react_native_1.View>
3083
+ </react_native_1.View>
3102
3084
 
3103
- {/* Module 5: Redux Store */}
3104
- {tabVisibility?.redux && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('redux')}>
3105
- <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
3106
- <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
3107
- <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={18}/>
3108
- <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>
3109
- Redux Store State
3110
- </react_native_1.Text>
3111
- </react_native_1.View>
3112
- <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
3113
- </react_native_1.View>
3114
- {reduxState ? (<react_native_1.View style={{ paddingHorizontal: 12, paddingBottom: 12, gap: 6 }}>
3115
- <react_native_1.View style={{
3116
- flexDirection: 'row',
3117
- justifyContent: 'space-between',
3118
- marginBottom: 4,
3119
- }}>
3120
- <react_native_1.Text style={{
3121
- fontFamily: AppFonts_1.AppFonts.interBold,
3122
- fontSize: 10,
3123
- color: AppColors_1.AppColors.grayTextWeak,
3124
- letterSpacing: 0.5,
3125
- }}>
3126
- REDUCER NAME
3127
- </react_native_1.Text>
3128
- <react_native_1.Text style={{
3129
- fontFamily: AppFonts_1.AppFonts.interBold,
3130
- fontSize: 10,
3131
- color: AppColors_1.AppColors.grayTextWeak,
3132
- letterSpacing: 0.5,
3133
- }}>
3134
- SIZE / FIELDS
3135
- </react_native_1.Text>
3136
- </react_native_1.View>
3137
- {Object.keys(reduxState).map(key => {
3138
- const val = reduxState[key];
3139
- const fieldsCount = typeof val === 'object' && val !== null
3140
- ? Object.keys(val).length
3141
- : 0;
3142
- const sizeStr = (0, helpers_1.getSize)(val);
3143
- return (<react_native_1.View key={key} style={{
3085
+ {/* Status-class breakdown + latency range */}
3086
+ <react_native_1.View style={{
3087
+ marginTop: 10,
3088
+ paddingTop: 10,
3089
+ borderTopWidth: 1,
3090
+ borderTopColor: AppColors_1.AppColors.dividerColor,
3091
+ flexDirection: 'row',
3092
+ alignItems: 'center',
3093
+ flexWrap: 'wrap',
3094
+ gap: 6,
3095
+ }}>
3096
+ {[
3097
+ { label: '2xx', value: status2xx, color: AppColors_1.AppColors.greenColor },
3098
+ { label: '3xx', value: status3xx, color: AppColors_1.AppColors.skyBlue },
3099
+ {
3100
+ label: '4xx',
3101
+ value: status4xx,
3102
+ color: AppColors_1.AppColors.warningIconGold,
3103
+ },
3104
+ { label: '5xx', value: status5xx, color: AppColors_1.AppColors.errorColor },
3105
+ ].map(s => (<react_native_1.View key={s.label} style={{
3144
3106
  flexDirection: 'row',
3145
- justifyContent: 'space-between',
3146
3107
  alignItems: 'center',
3147
- paddingVertical: 2,
3108
+ gap: 4,
3109
+ backgroundColor: AppColors_1.AppColors.grayBackground,
3110
+ borderRadius: 6,
3111
+ borderWidth: 1,
3112
+ borderColor: AppColors_1.AppColors.dividerColor,
3113
+ paddingHorizontal: 7,
3114
+ paddingVertical: 3,
3148
3115
  }}>
3149
- <react_native_1.Text style={{
3150
- fontFamily: AppFonts_1.AppFonts.interMedium,
3151
- fontSize: 12,
3116
+ <react_native_1.View style={{
3117
+ width: 6,
3118
+ height: 6,
3119
+ borderRadius: 3,
3120
+ backgroundColor: s.color,
3121
+ }}/>
3122
+ <react_native_1.Text style={{
3123
+ fontFamily: AppFonts_1.AppFonts.interBold,
3124
+ fontSize: 10,
3125
+ color: AppColors_1.AppColors.grayTextStrong,
3126
+ }}>
3127
+ {s.label} {s.value}
3128
+ </react_native_1.Text>
3129
+ </react_native_1.View>))}
3130
+ {slowestTime != null && (<react_native_1.View style={{
3131
+ marginLeft: 'auto',
3132
+ flexDirection: 'row',
3133
+ alignItems: 'center',
3134
+ gap: 4,
3135
+ }}>
3136
+ <react_native_1.Text style={{
3137
+ fontFamily: AppFonts_1.AppFonts.interRegular,
3138
+ fontSize: 10,
3139
+ color: AppColors_1.AppColors.grayTextWeak,
3140
+ }}>
3141
+ Range
3142
+ </react_native_1.Text>
3143
+ <react_native_1.Text style={{
3144
+ fontFamily: AppFonts_1.AppFonts.interBold,
3145
+ fontSize: 10,
3152
3146
  color: AppColors_1.AppColors.grayTextStrong,
3153
3147
  }}>
3154
- {key}
3148
+ {fastestTime}–{slowestTime}ms
3149
+ </react_native_1.Text>
3150
+ </react_native_1.View>)}
3151
+ </react_native_1.View>
3152
+ </TouchableScale_1.default>)}
3153
+
3154
+ {insightsActiveSubTab === 'logs' && tabVisibility?.logs && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('logs')}>
3155
+ <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
3156
+ <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
3157
+ <NetworkIcons_1.TerminalIcon color="#0D9488" size={18}/>
3158
+ <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>Console Logs</react_native_1.Text>
3159
+ </react_native_1.View>
3160
+ <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
3161
+ </react_native_1.View>
3162
+ <react_native_1.View style={styles_1.default.dashboardModuleGrid}>
3163
+ <react_native_1.View style={styles_1.default.dashboardGridItem}>
3164
+ <react_native_1.Text style={styles_1.default.dashboardGridVal}>{logTotal}</react_native_1.Text>
3165
+ <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Total Logs</react_native_1.Text>
3166
+ </react_native_1.View>
3167
+ <react_native_1.View style={styles_1.default.dashboardGridItem}>
3168
+ <react_native_1.Text style={[styles_1.default.dashboardGridVal, { color: '#0D9488' }]}>
3169
+ {logInfos}
3155
3170
  </react_native_1.Text>
3171
+ <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Info</react_native_1.Text>
3172
+ </react_native_1.View>
3173
+ <react_native_1.View style={styles_1.default.dashboardGridItem}>
3174
+ <react_native_1.Text style={[
3175
+ styles_1.default.dashboardGridVal,
3176
+ logWarns > 0 && { color: AppColors_1.AppColors.warningIconGold },
3177
+ ]}>
3178
+ {logWarns}
3179
+ </react_native_1.Text>
3180
+ <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Warnings</react_native_1.Text>
3181
+ </react_native_1.View>
3182
+ <react_native_1.View style={styles_1.default.dashboardGridItem}>
3183
+ <react_native_1.Text style={[
3184
+ styles_1.default.dashboardGridVal,
3185
+ logErrors > 0 && { color: AppColors_1.AppColors.errorColor },
3186
+ ]}>
3187
+ {logErrors}
3188
+ </react_native_1.Text>
3189
+ <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Errors</react_native_1.Text>
3190
+ </react_native_1.View>
3191
+ </react_native_1.View>
3192
+ </TouchableScale_1.default>)}
3193
+
3194
+ {insightsActiveSubTab === 'analytics' && tabVisibility?.analytics && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('analytics')}>
3195
+ <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
3196
+ <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
3197
+ <NetworkIcons_1.AnalyticsIcon color="#EA580C" size={18}/>
3198
+ <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>
3199
+ Analytics Events
3200
+ </react_native_1.Text>
3201
+ </react_native_1.View>
3202
+ <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
3203
+ </react_native_1.View>
3204
+ <react_native_1.View style={styles_1.default.dashboardModuleGrid}>
3205
+ <react_native_1.View style={styles_1.default.dashboardGridItem}>
3206
+ <react_native_1.Text style={styles_1.default.dashboardGridVal}>{analyticsTotal}</react_native_1.Text>
3207
+ <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Total Events</react_native_1.Text>
3208
+ </react_native_1.View>
3209
+ <react_native_1.View style={styles_1.default.dashboardGridItem}>
3210
+ <react_native_1.Text style={[styles_1.default.dashboardGridVal, { color: '#EA580C' }]}>
3211
+ {uniqueEvents}
3212
+ </react_native_1.Text>
3213
+ <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Unique Names</react_native_1.Text>
3214
+ </react_native_1.View>
3215
+ <react_native_1.View style={styles_1.default.dashboardGridItem}>
3216
+ <react_native_1.Text style={styles_1.default.dashboardGridVal}>{screenViews}</react_native_1.Text>
3217
+ <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Screen Views</react_native_1.Text>
3218
+ </react_native_1.View>
3219
+ <react_native_1.View style={styles_1.default.dashboardGridItem}>
3220
+ <react_native_1.Text style={styles_1.default.dashboardGridVal}>
3221
+ {analyticsTotal > 0
3222
+ ? Math.round(analyticsTotal / Math.max(1, logs.length / 5))
3223
+ : 0}
3224
+ </react_native_1.Text>
3225
+ <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Events Ratio</react_native_1.Text>
3226
+ </react_native_1.View>
3227
+ </react_native_1.View>
3228
+ </TouchableScale_1.default>)}
3229
+
3230
+ {insightsActiveSubTab === 'webview' && tabVisibility?.webview && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('webview')}>
3231
+ <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
3232
+ <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
3233
+ <NetworkIcons_1.GlobeIcon color="#2563EB" size={18}/>
3234
+ <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>
3235
+ WebView Captures
3236
+ </react_native_1.Text>
3237
+ </react_native_1.View>
3238
+ <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
3239
+ </react_native_1.View>
3240
+ <react_native_1.View style={styles_1.default.dashboardModuleGrid}>
3241
+ <react_native_1.View style={styles_1.default.dashboardGridItem}>
3242
+ <react_native_1.Text style={styles_1.default.dashboardGridVal}>{webviewTotal}</react_native_1.Text>
3243
+ <react_native_1.Text style={styles_1.default.dashboardGridLbl}>History Size</react_native_1.Text>
3244
+ </react_native_1.View>
3245
+ <react_native_1.View style={styles_1.default.dashboardGridItem}>
3246
+ <react_native_1.Text style={[styles_1.default.dashboardGridVal, { color: '#16A34A' }]}>
3247
+ Active
3248
+ </react_native_1.Text>
3249
+ <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Status</react_native_1.Text>
3250
+ </react_native_1.View>
3251
+ <react_native_1.View style={styles_1.default.dashboardGridItem}>
3252
+ <react_native_1.Text numberOfLines={1} style={styles_1.default.dashboardGridVal}>
3253
+ {webviewTotal > 0
3254
+ ? `${webViewNavHistory[0]?.title?.substring(0, 10) ?? ''}...`
3255
+ : '—'}
3256
+ </react_native_1.Text>
3257
+ <react_native_1.Text style={styles_1.default.dashboardGridLbl}>Last URL</react_native_1.Text>
3258
+ </react_native_1.View>
3259
+ </react_native_1.View>
3260
+ </TouchableScale_1.default>)}
3261
+
3262
+ {insightsActiveSubTab === 'redux' && tabVisibility?.redux && (<TouchableScale_1.default style={styles_1.default.dashboardModuleCard} onPress={() => switchActiveTab('redux')}>
3263
+ <react_native_1.View style={styles_1.default.dashboardModuleHeader}>
3264
+ <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
3265
+ <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={18}/>
3266
+ <react_native_1.Text style={styles_1.default.dashboardModuleTitle}>
3267
+ Redux Store State
3268
+ </react_native_1.Text>
3269
+ </react_native_1.View>
3270
+ <react_native_1.Text style={styles_1.default.dashboardModuleGoText}>View Details →</react_native_1.Text>
3271
+ </react_native_1.View>
3272
+ {reduxState ? (<react_native_1.View style={{ paddingHorizontal: 12, paddingBottom: 12, gap: 6 }}>
3273
+ <react_native_1.View style={{
3274
+ flexDirection: 'row',
3275
+ justifyContent: 'space-between',
3276
+ marginBottom: 4,
3277
+ }}>
3278
+ <react_native_1.Text style={{
3279
+ fontFamily: AppFonts_1.AppFonts.interBold,
3280
+ fontSize: 10,
3281
+ color: AppColors_1.AppColors.grayTextWeak,
3282
+ letterSpacing: 0.5,
3283
+ }}>
3284
+ REDUCER NAME
3285
+ </react_native_1.Text>
3286
+ <react_native_1.Text style={{
3287
+ fontFamily: AppFonts_1.AppFonts.interBold,
3288
+ fontSize: 10,
3289
+ color: AppColors_1.AppColors.grayTextWeak,
3290
+ letterSpacing: 0.5,
3291
+ }}>
3292
+ SIZE / FIELDS
3293
+ </react_native_1.Text>
3294
+ </react_native_1.View>
3295
+ {Object.keys(reduxState).map(key => {
3296
+ const val = reduxState[key];
3297
+ const fieldsCount = typeof val === 'object' && val !== null
3298
+ ? Object.keys(val).length
3299
+ : 0;
3300
+ const sizeStr = (0, helpers_1.getSize)(val);
3301
+ return (<react_native_1.View key={key} style={{
3302
+ flexDirection: 'row',
3303
+ justifyContent: 'space-between',
3304
+ alignItems: 'center',
3305
+ paddingVertical: 2,
3306
+ }}>
3307
+ <react_native_1.Text style={{
3308
+ fontFamily: AppFonts_1.AppFonts.interMedium,
3309
+ fontSize: 12,
3310
+ color: AppColors_1.AppColors.grayTextStrong,
3311
+ }}>
3312
+ {key}
3313
+ </react_native_1.Text>
3314
+ <react_native_1.Text style={{
3315
+ fontFamily: AppFonts_1.AppFonts.interRegular,
3316
+ fontSize: 11,
3317
+ color: AppColors_1.AppColors.grayTextWeak,
3318
+ }}>
3319
+ {sizeStr} ({fieldsCount} fields)
3320
+ </react_native_1.Text>
3321
+ </react_native_1.View>);
3322
+ })}
3323
+ </react_native_1.View>) : (<react_native_1.View style={{ padding: 12, alignItems: 'center' }}>
3156
3324
  <react_native_1.Text style={{
3157
3325
  fontFamily: AppFonts_1.AppFonts.interRegular,
3158
- fontSize: 11,
3326
+ fontSize: 12,
3159
3327
  color: AppColors_1.AppColors.grayTextWeak,
3160
3328
  }}>
3161
- {sizeStr} ({fieldsCount} fields)
3329
+ No connected Redux store.
3162
3330
  </react_native_1.Text>
3163
- </react_native_1.View>);
3164
- })}
3165
- </react_native_1.View>) : (<react_native_1.View style={{ padding: 12, alignItems: 'center' }}>
3166
- <react_native_1.Text style={{
3167
- fontFamily: AppFonts_1.AppFonts.interRegular,
3168
- fontSize: 12,
3169
- color: AppColors_1.AppColors.grayTextWeak,
3170
- }}>
3171
- No connected Redux store.
3172
- </react_native_1.Text>
3173
- </react_native_1.View>)}
3174
- </TouchableScale_1.default>)}
3331
+ </react_native_1.View>)}
3332
+ </TouchableScale_1.default>)}
3333
+ </>);
3334
+ })()}
3175
3335
  </react_native_1.View>);
3176
3336
  };
3177
3337
  const renderReduxTab = () => {