react-native-inapp-inspector 1.1.34 → 1.1.35

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

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
@@ -51,6 +51,8 @@ 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 bundleAnalyzer_1 = require("../../customHooks/bundleAnalyzer");
+const performanceTracker_1 = require("../../customHooks/performanceTracker");
 const reduxLogger_1 = require("../../customHooks/reduxLogger");
 const analyticsLogger_2 = require("../../customHooks/analyticsLogger");
 const i18n_1 = require("../../i18n");
@@ -59,23 +61,113 @@ 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;
+    // Safe Area & Status Bar Padding for All Device Form Factors
+    const statusBarHeight = react_native_1.Platform.OS === 'android' ? react_native_1.StatusBar.currentHeight || 24 : 44;
+    const headerTopPadding = modalHeightPercent >= 95 ? statusBarHeight : 0;
+    const allModules = [
+        {
+            key: 'apis',
+            label: 'APIs (Network)',
+            category: 'core',
+            icon: 'apis',
+            desc: 'HTTP/HTTPS requests, GraphQL, Axios & WebSocket inspector',
+        },
+        {
+            key: 'logs',
+            label: 'Console Logs',
+            category: 'core',
+            icon: 'logs',
+            desc: 'Terminal console logs, warnings, errors & stack traces',
+        },
+        {
+            key: 'performance',
+            label: 'Performance Tracker',
+            category: 'diagnostic',
+            icon: 'performance',
+            desc: '60 FPS monitor, Hermes memory telemetry & re-render profiler',
+        },
+        {
+            key: 'bundle',
+            label: 'Bundle Analyzer',
+            category: 'diagnostic',
+            icon: 'bundle',
+            desc: 'Metro packager dependencies, source maps & asset breakdown',
+        },
+        {
+            key: 'crash',
+            label: 'Crash Protection',
+            category: 'diagnostic',
+            icon: 'crash',
+            desc: 'Runtime exception guard, breadcrumbs & memory snapshot',
+        },
+        {
+            key: 'analytics',
+            label: 'Analytics Logger',
+            category: 'telemetry',
+            icon: 'analytics',
+            desc: 'Firebase & custom analytics events, user properties & params',
+        },
+        {
+            key: 'redux',
+            label: 'Redux Inspector',
+            category: 'telemetry',
+            icon: 'redux',
+            desc: 'Store state diffing, action history & reducer timeline',
+        },
+    ];
+    // Staged selection state for checkboxes before clicking "Save Changes"
+    const [stagedTabVisibility, setStagedTabVisibility] = (0, react_1.useState)(() => ({
+        apis: true,
+        logs: Boolean(tabVisibility?.logs),
+        analytics: Boolean(tabVisibility?.analytics),
+        redux: Boolean(tabVisibility?.redux),
+        bundle: Boolean(tabVisibility?.bundle),
+        performance: Boolean(tabVisibility?.performance),
+        crash: Boolean(tabVisibility?.crash),
+    }));
+    // Synchronize staged state with tabVisibility when tabVisibility updates
+    (0, react_1.useEffect)(() => {
+        setStagedTabVisibility({
+            apis: true,
+            logs: Boolean(tabVisibility?.logs),
+            analytics: Boolean(tabVisibility?.analytics),
+            redux: Boolean(tabVisibility?.redux),
+            bundle: Boolean(tabVisibility?.bundle),
+            performance: Boolean(tabVisibility?.performance),
+            crash: Boolean(tabVisibility?.crash),
+        });
+    }, [tabVisibility]);
+    const hasUnsavedChanges = (0, react_1.useMemo)(() => {
+        return allModules.some(m => Boolean(stagedTabVisibility[m.key]) !==
+            Boolean(tabVisibility?.[m.key]));
+    }, [stagedTabVisibility, tabVisibility, allModules]);
+    const stagedActiveCount = allModules.filter(m => m.key === 'apis' || Boolean(stagedTabVisibility[m.key])).length;
+    const handleSaveChanges = () => {
+        (0, InspectorContext_1.animateNextLayout)();
+        allModules.forEach(m => {
+            if (m.key !== 'apis') {
+                const isStagedOn = Boolean(stagedTabVisibility[m.key]);
+                const isCurrentOn = Boolean(tabVisibility?.[m.key]);
+                if (isStagedOn !== isCurrentOn) {
+                    toggleTabVisibility(m.key);
+                }
+            }
+        });
+        react_native_1.Alert.alert(t('settings.settingsSaved'), t('settings.settingsSavedDesc'));
+    };
     if (settingsPage === 'main') {
-        const settingsTabs = [
-            { key: 'apis', label: 'APIs', icon: 'apis' },
-            { key: 'logs', label: 'Logs', icon: 'logs' },
-            { key: 'analytics', label: 'Analytics', icon: 'analytics' },
-            { key: 'redux', label: 'Redux', icon: 'redux' },
-            { key: 'bundle', label: 'Bundle', icon: 'bundle' },
-            { key: 'performance', label: 'Performance', icon: 'performance' },
-            { key: 'crash', label: 'Crash', icon: 'crash' },
-        ];
-        return (<react_native_1.View style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }}>
-        {/* Settings Header with back button */}
+        return (<react_native_1.View style={{
+                flex: 1,
+                backgroundColor: AppColors_1.AppColors.grayBackground,
+            }}>
+        {/* Modern Floating Gradient Header */}
         <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, AppColors_1.AppColors.brandPurple]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles_1.default.headerGradient}>
           <react_native_1.View style={{ paddingTop: headerTopPadding, width: '100%' }}>
-            <react_native_1.View style={[styles_1.default.header, { paddingHorizontal: 16, gap: 12 }]}>
-            <TouchableScale_1.default onPress={() => {
+            <react_native_1.View style={[
+                styles_1.default.header,
+                { paddingHorizontal: 16, paddingVertical: 12, gap: 12 },
+            ]}>
+              <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={t('settings.back')} onPress={() => {
                 (0, InspectorContext_1.animateNextLayout)();
                 setSettingsPage(null);
                 switchActiveTab('apis');
@@ -84,223 +176,360 @@ const SettingsPanel = () => {
                 borderRadius: 10,
                 backgroundColor: `${AppColors_1.AppColors.white}26`,
                 borderWidth: 1,
-                borderColor: `${AppColors_1.AppColors.white}14`,
+                borderColor: `${AppColors_1.AppColors.white}18`,
             }}>
-              <NetworkIcons_1.WhiteBackNavigation color={AppColors_1.AppColors.white} size={16}/>
-            </TouchableScale_1.default>
-            <react_native_1.View style={{ flex: 1 }}>
-              <react_native_1.Text style={{
+                <NetworkIcons_1.WhiteBackNavigation color={AppColors_1.AppColors.white} size={16}/>
+              </TouchableScale_1.default>
+
+              <react_native_1.View style={{ flex: 1 }}>
+                <react_native_1.View style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 8,
+            }}>
+                  <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: 17,
                 color: AppColors_1.AppColors.white,
+                letterSpacing: -0.3,
+                lineHeight: 22,
             }}>
-                Settings
-              </react_native_1.Text>
-              <react_native_1.Text style={{
+                    {t('settings.mainTitle')}
+                  </react_native_1.Text>
+                  <react_native_1.View style={{
+                backgroundColor: `${AppColors_1.AppColors.white}26`,
+                paddingHorizontal: 7,
+                paddingVertical: 2,
+                borderRadius: 12,
+            }}>
+                    <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 10,
+                color: AppColors_1.AppColors.white,
+                lineHeight: 13,
+            }}>
+                      {stagedActiveCount}/{allModules.length} Active
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+                <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interRegular,
                 fontSize: 11,
-                color: `${AppColors_1.AppColors.white}BF`,
-                marginTop: 1,
+                color: `${AppColors_1.AppColors.white}CC`,
+                marginTop: 2,
+                lineHeight: 15,
             }}>
-                Manage modules and preferences
-              </react_native_1.Text>
-            </react_native_1.View>
-            <react_native_1.View style={{
-                backgroundColor: `${AppColors_1.AppColors.white}26`,
+                  {t('settings.mainSubtitle')}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              <react_native_1.View style={{
+                backgroundColor: `${AppColors_1.AppColors.white}22`,
                 paddingHorizontal: 8,
                 paddingVertical: 4,
                 borderRadius: 8,
                 borderWidth: 1,
                 borderColor: `${AppColors_1.AppColors.white}1A`,
             }}>
-              <react_native_1.Text style={{
+                <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: 10.5,
                 color: AppColors_1.AppColors.white,
+                lineHeight: 14,
             }}>
-                v{constants_1.LIB_VERSION}
-              </react_native_1.Text>
+                  v{constants_1.LIB_VERSION}
+                </react_native_1.Text>
+              </react_native_1.View>
             </react_native_1.View>
           </react_native_1.View>
-        </react_native_1.View>
-      </react_native_linear_gradient_1.default>
+        </react_native_linear_gradient_1.default>
 
-        <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
-          {/* Sub Tabs */}
+        <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 14 }} showsVerticalScrollIndicator={false}>
+          {/* Segmented Top Navigation Sub-Tabs */}
           <react_native_1.View style={{
                 flexDirection: 'row',
                 backgroundColor: AppColors_1.AppColors.primaryLight,
-                borderRadius: 10,
-                padding: 3,
+                borderRadius: 12,
+                padding: 4,
                 borderWidth: 1,
                 borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                marginBottom: 4,
+                shadowColor: AppColors_1.AppColors.black,
+                shadowOpacity: 0.04,
+                shadowRadius: 4,
+                shadowOffset: { width: 0, height: 2 },
             }}>
-            <react_native_1.TouchableOpacity onPress={() => {
+            <TouchableScale_1.default accessible={true} accessibilityRole="tab" accessibilityLabel={t('settings.modulesAndTools')} accessibilityState={{ selected: settingsActiveSubTab === 'module' }} onPress={() => {
                 (0, InspectorContext_1.animateNextLayout)();
                 setSettingsActiveSubTab('module');
             }} style={{
                 flex: 1,
-                paddingVertical: 8,
+                paddingVertical: 9,
+                flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'center',
-                borderRadius: 8,
+                gap: 6,
+                borderRadius: 9,
                 backgroundColor: settingsActiveSubTab === 'module'
                     ? AppColors_1.AppColors.purple
                     : 'transparent',
             }}>
+              <NetworkIcons_1.LayersIcon color={settingsActiveSubTab === 'module'
+                ? AppColors_1.AppColors.white
+                : AppColors_1.AppColors.grayText} size={13}/>
               <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 12,
+                fontSize: 12.5,
+                lineHeight: 16,
                 color: settingsActiveSubTab === 'module'
                     ? AppColors_1.AppColors.white
                     : AppColors_1.AppColors.grayText,
             }}>
-                Module
+                {t('settings.modulesAndTools')}
               </react_native_1.Text>
-            </react_native_1.TouchableOpacity>
-            <react_native_1.TouchableOpacity onPress={() => {
+            </TouchableScale_1.default>
+
+            <TouchableScale_1.default accessible={true} accessibilityRole="tab" accessibilityLabel={t('settings.uiPreferences')} accessibilityState={{ selected: settingsActiveSubTab === 'ui' }} onPress={() => {
                 (0, InspectorContext_1.animateNextLayout)();
                 setSettingsActiveSubTab('ui');
             }} style={{
                 flex: 1,
-                paddingVertical: 8,
+                paddingVertical: 9,
+                flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'center',
-                borderRadius: 8,
+                gap: 6,
+                borderRadius: 9,
                 backgroundColor: settingsActiveSubTab === 'ui'
                     ? AppColors_1.AppColors.purple
                     : 'transparent',
             }}>
+              <NetworkIcons_1.ScreenIcon color={settingsActiveSubTab === 'ui'
+                ? AppColors_1.AppColors.white
+                : AppColors_1.AppColors.grayText} size={13}/>
               <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
-                fontSize: 12,
+                fontSize: 12.5,
+                lineHeight: 16,
                 color: settingsActiveSubTab === 'ui'
                     ? AppColors_1.AppColors.white
                     : AppColors_1.AppColors.grayText,
             }}>
-                UI Preferences
+                {t('settings.uiPreferences')}
               </react_native_1.Text>
-            </react_native_1.TouchableOpacity>
+            </TouchableScale_1.default>
           </react_native_1.View>
 
-          {settingsActiveSubTab === 'module' ? (
-            /* Tab list */
-            <react_native_1.View style={{
-                    backgroundColor: AppColors_1.AppColors.primaryLight,
+          {settingsActiveSubTab === 'module' ? (<react_native_1.View style={{ gap: 12 }}>
+              {/* Performance Advisory Banner */}
+              <react_native_1.View style={{
+                    backgroundColor: `${AppColors_1.AppColors.purple}0A`,
                     borderRadius: 12,
+                    padding: 12,
                     borderWidth: 1,
-                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                    overflow: 'hidden',
-                }}>
-              {/* Table Header */}
-              <react_native_1.View style={{
+                    borderColor: `${AppColors_1.AppColors.purple}20`,
                     flexDirection: 'row',
                     alignItems: 'center',
-                    paddingVertical: 8,
-                    paddingHorizontal: 14,
-                    backgroundColor: AppColors_1.AppColors.grayBackground,
-                    borderBottomWidth: 1,
-                    borderBottomColor: AppColors_1.AppColors.dividerColor,
-                    gap: 12,
+                    gap: 10,
                 }}>
-                <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 10,
-                    color: AppColors_1.AppColors.grayTextWeak,
-                    letterSpacing: 0.6,
-                    flex: 1,
+                <react_native_1.View style={{
+                    width: 32,
+                    height: 32,
+                    borderRadius: 8,
+                    backgroundColor: `${AppColors_1.AppColors.purple}14`,
+                    alignItems: 'center',
+                    justifyContent: 'center',
                 }}>
-                  MODULE
-                </react_native_1.Text>
-                <react_native_1.Text style={{
+                  <NetworkIcons_1.SignalIcon color={AppColors_1.AppColors.purple} size={15}/>
+                </react_native_1.View>
+                <react_native_1.View style={{ flex: 1 }}>
+                  <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 10,
-                    color: AppColors_1.AppColors.grayTextWeak,
-                    letterSpacing: 0.6,
-                    width: 90,
-                    textAlign: 'right',
-                    paddingRight: 4,
+                    fontSize: 12,
+                    color: AppColors_1.AppColors.primaryBlack,
+                    lineHeight: 16,
                 }}>
-                  VISIBILITY
-                </react_native_1.Text>
+                    {t('settings.zeroOverheadTitle')}
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interRegular,
+                    fontSize: 10.5,
+                    color: AppColors_1.AppColors.grayText,
+                    marginTop: 2,
+                    lineHeight: 14,
+                }}>
+                    {t('settings.zeroOverheadDesc')}
+                  </react_native_1.Text>
+                </react_native_1.View>
               </react_native_1.View>
 
-              {settingsTabs.map((tab, idx) => {
+              {/* Enhanced Individual Module Cards with Decorative Checkboxes */}
+              <react_native_1.View style={{ gap: 10 }}>
+                {allModules.map(moduleItem => {
                     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;
-                    return (<react_native_1.View key={tab.key} style={{
+                    const isUnavailable = (moduleItem.key === 'redux' && !isReduxAvail) ||
+                        (moduleItem.key === 'analytics' && !isAnalyticsAvail);
+                    const isLocked = moduleItem.key === 'apis' || isUnavailable;
+                    const isChecked = moduleItem.key === 'apis' ||
+                        (Boolean(stagedTabVisibility?.[moduleItem.key]) &&
+                            !isUnavailable);
+                    const liveStats = moduleItem.key === 'apis'
+                        ? `${logs.length} requests • Limit: ${maxNetworkLogs}`
+                        : moduleItem.key === 'logs'
+                            ? `${consoleLogs.length} logs • Limit: ${maxConsoleLogs}`
+                            : moduleItem.key === 'performance'
+                                ? '60 FPS Target • Memory Telemetry'
+                                : moduleItem.key === 'bundle'
+                                    ? 'Metro Packager • Dependency Map'
+                                    : moduleItem.key === 'crash'
+                                        ? `${crashRecords?.length || 0} crashes recorded • Crash Guard`
+                                        : moduleItem.key === 'analytics'
+                                            ? `${analyticsEvents.length} events logged`
+                                            : moduleItem.key === 'redux'
+                                                ? `${Object.keys(reduxState || {}).length} slices • Depth: ${reduxExpandDepth}`
+                                                : '';
+                    return (<react_native_1.View key={moduleItem.key} style={{
+                            backgroundColor: AppColors_1.AppColors.primaryLight,
+                            borderRadius: 14,
+                            borderWidth: 1.5,
+                            borderColor: isChecked
+                                ? `${AppColors_1.AppColors.purple}38`
+                                : AppColors_1.AppColors.grayBorderSecondary,
+                            padding: 14,
+                            gap: 10,
+                            shadowColor: AppColors_1.AppColors.black,
+                            shadowOpacity: isChecked ? 0.04 : 0.02,
+                            shadowRadius: 5,
+                            shadowOffset: { width: 0, height: 2 },
+                        }}>
+                      {/* Top Row: Icon + Title & Badges + Checkbox */}
+                      <react_native_1.View style={{
                             flexDirection: 'row',
-                            alignItems: 'center',
-                            paddingVertical: 10,
-                            paddingHorizontal: 14,
-                            borderBottomWidth: isLast ? 0 : 1,
-                            borderBottomColor: AppColors_1.AppColors.dividerColor,
-                            gap: 12,
+                            alignItems: 'flex-start',
+                            justifyContent: 'space-between',
+                            gap: 10,
                         }}>
-                    {/* Icon + Label — fills remaining space */}
-                    <react_native_1.View style={{
+                        {/* Tap Zone for Details/Settings */}
+                        <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={`${moduleItem.label} settings`} disabled={isUnavailable} onPress={() => {
+                            (0, InspectorContext_1.animateNextLayout)();
+                            setSettingsPage(moduleItem.key);
+                        }} style={{
                             flex: 1,
                             flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 8,
-                            flexWrap: 'wrap',
+                            alignItems: 'flex-start',
+                            gap: 10,
                         }}>
-                      {/* Small icon tile */}
-                      <react_native_1.View style={{
-                            width: 20,
-                            height: 20,
-                            borderRadius: 6,
+                          {/* Icon Tile */}
+                          <react_native_1.View style={{
+                            width: 36,
+                            height: 36,
+                            borderRadius: 10,
                             backgroundColor: isLocked
-                                ? AppColors_1.AppColors.grayBorderSecondary
-                                : AppColors_1.AppColors.purpleShade50,
+                                ? `${AppColors_1.AppColors.grayBorderSecondary}4D`
+                                : isChecked
+                                    ? `${AppColors_1.AppColors.purple}14`
+                                    : AppColors_1.AppColors.grayBackground,
                             borderWidth: 1,
                             borderColor: isLocked
                                 ? AppColors_1.AppColors.dividerColor
-                                : `${AppColors_1.AppColors.purple}33`,
+                                : isChecked
+                                    ? `${AppColors_1.AppColors.purple}33`
+                                    : AppColors_1.AppColors.grayBorderSecondary,
                             alignItems: 'center',
                             justifyContent: 'center',
+                            marginTop: 1,
                         }}>
-                        {tab.icon === 'apis' && (<NetworkIcons_1.SignalIcon color={isLocked
-                                ? AppColors_1.AppColors.grayTextWeak
-                                : AppColors_1.AppColors.purple} size={11}/>)}
-                        {tab.icon === 'logs' && (<NetworkIcons_1.TerminalIcon color={isLocked
-                                ? AppColors_1.AppColors.grayTextWeak
-                                : AppColors_1.AppColors.purple} size={11}/>)}
-                        {tab.icon === 'analytics' && (<NetworkIcons_1.AnalyticsIcon color={isLocked
-                                ? AppColors_1.AppColors.grayTextWeak
-                                : AppColors_1.AppColors.purple} size={11}/>)}
-                        {tab.icon === 'redux' && (<NetworkIcons_1.ReduxIcon color={isLocked
-                                ? AppColors_1.AppColors.grayTextWeak
-                                : AppColors_1.AppColors.purple} size={11}/>)}
-                        {tab.icon === 'bundle' && (<NetworkIcons_1.PackageIcon color={isLocked
-                                ? AppColors_1.AppColors.grayTextWeak
-                                : AppColors_1.AppColors.purple} size={11}/>)}
-                        {tab.icon === 'performance' && (<NetworkIcons_1.PerformanceIcon color={isLocked
-                                ? AppColors_1.AppColors.grayTextWeak
-                                : AppColors_1.AppColors.purple} size={11}/>)}
-                        {tab.icon === 'crash' && (<NetworkIcons_1.CrashIcon color={isLocked
-                                ? AppColors_1.AppColors.grayTextWeak
-                                : AppColors_1.AppColors.purple} size={11}/>)}
-                      </react_native_1.View>
-                      {/* Label + Required badge */}
-                      <react_native_1.Text style={{
+                            {moduleItem.icon === 'apis' && (<NetworkIcons_1.SignalIcon color={isChecked
+                                ? AppColors_1.AppColors.purple
+                                : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
+                            {moduleItem.icon === 'logs' && (<NetworkIcons_1.TerminalIcon color={isChecked
+                                ? AppColors_1.AppColors.purple
+                                : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
+                            {moduleItem.icon === 'performance' && (<NetworkIcons_1.PerformanceIcon color={isChecked
+                                ? AppColors_1.AppColors.purple
+                                : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
+                            {moduleItem.icon === 'bundle' && (<NetworkIcons_1.PackageIcon color={isChecked
+                                ? AppColors_1.AppColors.purple
+                                : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
+                            {moduleItem.icon === 'crash' && (<NetworkIcons_1.CrashIcon color={isChecked
+                                ? AppColors_1.AppColors.purple
+                                : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
+                            {moduleItem.icon === 'analytics' && (<NetworkIcons_1.AnalyticsIcon color={isChecked
+                                ? AppColors_1.AppColors.purple
+                                : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
+                            {moduleItem.icon === 'redux' && (<NetworkIcons_1.ReduxIcon color={isChecked
+                                ? AppColors_1.AppColors.purple
+                                : AppColors_1.AppColors.grayTextWeak} size={16}/>)}
+                          </react_native_1.View>
+
+                          {/* Titles & Status Pill */}
+                          <react_native_1.View style={{ flex: 1, gap: 2 }}>
+                            <react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 6,
+                            flexWrap: 'wrap',
+                        }}>
+                              <react_native_1.Text style={{
                             fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 13,
+                            fontSize: 14,
+                            lineHeight: 18,
                             color: isLocked
                                 ? AppColors_1.AppColors.grayText
                                 : AppColors_1.AppColors.primaryBlack,
                         }}>
-                        {tab.label}
-                      </react_native_1.Text>
-                      {/* Unavailable badge */}
-                      {isUnavailable && (<react_native_1.View style={{
+                                {moduleItem.label}
+                              </react_native_1.Text>
+
+                              {/* Default Startup Tab Badge */}
+                              {moduleItem.key === defaultTab &&
+                            !isUnavailable && (<react_native_1.View style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                backgroundColor: `${AppColors_1.AppColors.purple}14`,
+                                borderRadius: 12,
+                                paddingHorizontal: 5,
+                                paddingVertical: 1.5,
+                                borderWidth: 1,
+                                borderColor: `${AppColors_1.AppColors.purple}2E`,
+                                gap: 3,
+                            }}>
+                                    <react_native_1.View style={{
+                                width: 4,
+                                height: 4,
+                                borderRadius: 2,
+                                backgroundColor: AppColors_1.AppColors.purple,
+                            }}/>
+                                    <react_native_1.Text style={{
+                                fontFamily: AppFonts_1.AppFonts.interBold,
+                                fontSize: 8,
+                                lineHeight: 11,
+                                color: AppColors_1.AppColors.purple,
+                                letterSpacing: 0.4,
+                            }}>
+                                      {t('settings.defaultBadge')}
+                                    </react_native_1.Text>
+                                  </react_native_1.View>)}
+
+                              {/* Status Pill */}
+                              {moduleItem.key === 'apis' ? (<react_native_1.View style={{
+                                backgroundColor: `${AppColors_1.AppColors.blue500}14`,
+                                borderRadius: 4,
+                                paddingHorizontal: 5,
+                                paddingVertical: 1.5,
+                                borderWidth: 1,
+                                borderColor: `${AppColors_1.AppColors.blue500}33`,
+                            }}>
+                                  <react_native_1.Text style={{
+                                fontFamily: AppFonts_1.AppFonts.interBold,
+                                fontSize: 8,
+                                lineHeight: 11,
+                                color: AppColors_1.AppColors.blue500,
+                                letterSpacing: 0.3,
+                            }}>
+                                    {t('settings.coreBadge')}
+                                  </react_native_1.Text>
+                                </react_native_1.View>) : isUnavailable ? (<react_native_1.View style={{
                                 backgroundColor: `${AppColors_1.AppColors.amber500}18`,
                                 borderRadius: 4,
                                 paddingHorizontal: 5,
@@ -308,181 +537,244 @@ const SettingsPanel = () => {
                                 borderWidth: 1,
                                 borderColor: `${AppColors_1.AppColors.amber500}35`,
                             }}>
-                          <react_native_1.Text style={{
+                                  <react_native_1.Text style={{
                                 fontFamily: AppFonts_1.AppFonts.interBold,
                                 fontSize: 8,
+                                lineHeight: 11,
                                 color: AppColors_1.AppColors.amber700,
                                 letterSpacing: 0.3,
                             }}>
-                            {tab.key === 'redux'
+                                    {moduleItem.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 && !isUnavailable && (<react_native_1.View style={{
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                                backgroundColor: `${AppColors_1.AppColors.purple}14`,
-                                borderRadius: 20,
-                                paddingHorizontal: 6,
-                                paddingVertical: 2,
+                                  </react_native_1.Text>
+                                </react_native_1.View>) : isChecked ? (<react_native_1.View style={{
+                                backgroundColor: `${AppColors_1.AppColors.liveGreen}18`,
+                                borderRadius: 4,
+                                paddingHorizontal: 5,
+                                paddingVertical: 1.5,
                                 borderWidth: 1,
-                                borderColor: `${AppColors_1.AppColors.purple}2E`,
-                                gap: 3,
+                                borderColor: `${AppColors_1.AppColors.liveGreen}38`,
                             }}>
-                          <react_native_1.View style={{
-                                width: 4,
-                                height: 4,
-                                borderRadius: 2,
-                                backgroundColor: AppColors_1.AppColors.purple,
-                                opacity: 0.7,
-                            }}/>
-                          <react_native_1.Text style={{
+                                  <react_native_1.Text style={{
                                 fontFamily: AppFonts_1.AppFonts.interBold,
-                                fontSize: 8.5,
-                                color: AppColors_1.AppColors.purple,
-                                letterSpacing: 0.4,
+                                fontSize: 8,
+                                lineHeight: 11,
+                                color: AppColors_1.AppColors.green700,
+                                letterSpacing: 0.3,
                             }}>
-                            DEFAULT
-                          </react_native_1.Text>
-                        </react_native_1.View>)}
-
-                      {/* Settings gear icon next to label */}
-                      {!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,
+                                    {t('settings.activeBadge')}
+                                  </react_native_1.Text>
+                                </react_native_1.View>) : (<react_native_1.View style={{
+                                backgroundColor: `${AppColors_1.AppColors.grayTextWeak}18`,
+                                borderRadius: 4,
+                                paddingHorizontal: 5,
+                                paddingVertical: 1.5,
                                 borderWidth: 1,
-                                borderColor: `${AppColors_1.AppColors.purple}26`,
-                                alignItems: 'center',
-                                justifyContent: 'center',
+                                borderColor: `${AppColors_1.AppColors.grayTextWeak}2E`,
                             }}>
-                          <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.purple} size={10}/>
-                        </TouchableScale_1.default>)}
-                    </react_native_1.View>
+                                  <react_native_1.Text style={{
+                                fontFamily: AppFonts_1.AppFonts.interBold,
+                                fontSize: 8,
+                                lineHeight: 11,
+                                color: AppColors_1.AppColors.grayTextWeak,
+                                letterSpacing: 0.3,
+                            }}>
+                                    {t('settings.dormantBadge')}
+                                  </react_native_1.Text>
+                                </react_native_1.View>)}
+                            </react_native_1.View>
 
-                    {/* Visibility Switch in VISIBILITY column */}
-                    <react_native_1.View style={{
-                            width: 90,
-                            alignItems: 'flex-end',
-                            justifyContent: 'center',
+                            <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interRegular,
+                            fontSize: 11,
+                            color: AppColors_1.AppColors.grayText,
+                            lineHeight: 15,
+                            marginTop: 1,
                         }}>
-                      <TouchableScale_1.default disabled={isLocked} onPress={() => toggleTabVisibility(tab.key)} style={{
-                            width: 38,
-                            height: 22,
-                            borderRadius: 11,
-                            backgroundColor: isLocked
-                                ? AppColors_1.AppColors.grayBackground
-                                : isVisible
-                                    ? AppColors_1.AppColors.purple
-                                    : AppColors_1.AppColors.grayBorderSecondary,
-                            borderWidth: isLocked ? 1.5 : 0,
+                              {moduleItem.desc}
+                            </react_native_1.Text>
+                          </react_native_1.View>
+                        </TouchableScale_1.default>
+
+                        {/* Decorative Custom Checkbox */}
+                        <TouchableScale_1.default accessible={true} accessibilityRole="checkbox" accessibilityLabel={`Select ${moduleItem.label}`} accessibilityState={{
+                            checked: isChecked,
+                            disabled: isLocked,
+                        }} disabled={isLocked} onPress={() => {
+                            if (isLocked)
+                                return;
+                            setStagedTabVisibility(prev => ({
+                                ...prev,
+                                [moduleItem.key]: !prev[moduleItem.key],
+                            }));
+                        }} style={{
+                            width: 26,
+                            height: 26,
+                            borderRadius: 8,
+                            borderWidth: isChecked ? 0 : 2,
                             borderColor: isLocked
-                                ? AppColors_1.AppColors.grayBorderSecondary
-                                : 'transparent',
-                            borderStyle: isLocked ? 'dashed' : 'solid',
-                            padding: 2,
-                            justifyContent: 'center',
-                            alignItems: isVisible ? 'flex-end' : 'flex-start',
-                            opacity: isLocked ? 0.9 : 1,
-                        }}>
-                        <react_native_1.View style={{
-                            width: 18,
-                            height: 18,
-                            borderRadius: 9,
-                            backgroundColor: isLocked
-                                ? AppColors_1.AppColors.grayBorderSecondary
-                                : AppColors_1.AppColors.white,
+                                ? AppColors_1.AppColors.dividerColor
+                                : AppColors_1.AppColors.grayBorderSecondary,
+                            backgroundColor: moduleItem.key === 'apis'
+                                ? `${AppColors_1.AppColors.blue500}22`
+                                : isChecked
+                                    ? AppColors_1.AppColors.purple
+                                    : AppColors_1.AppColors.grayBackground,
                             alignItems: 'center',
                             justifyContent: 'center',
-                            shadowColor: AppColors_1.AppColors.black,
-                            shadowOpacity: isLocked ? 0 : 0.15,
-                            shadowRadius: 1.5,
+                            shadowColor: isChecked
+                                ? AppColors_1.AppColors.purple
+                                : 'transparent',
+                            shadowOpacity: isChecked ? 0.3 : 0,
+                            shadowRadius: 3,
                             shadowOffset: { width: 0, height: 1 },
+                            elevation: isChecked ? 2 : 0,
                         }}>
-                          {isLocked && (<react_native_svg_1.default width={10} height={10} viewBox="0 0 24 24" fill="none">
+                          {moduleItem.key === 'apis' ? (<NetworkIcons_1.CheckIcon size={14} color={AppColors_1.AppColors.blue500}/>) : isChecked ? (<NetworkIcons_1.CheckIcon size={14} color={AppColors_1.AppColors.white}/>) : isLocked ? (<react_native_svg_1.default width={10} height={10} viewBox="0 0 24 24" fill="none">
                               <react_native_svg_1.Path d="M7 10V7a5 5 0 0 1 10 0v3" stroke={AppColors_1.AppColors.grayText} strokeWidth="2.2" strokeLinecap="round"/>
                               <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}/>
-                            </react_native_svg_1.default>)}
-                        </react_native_1.View>
-                      </TouchableScale_1.default>
-                      {isLocked && (<react_native_1.Text style={{
-                                fontFamily: AppFonts_1.AppFonts.interBold,
-                                fontSize: 7.5,
-                                color: isUnavailable
-                                    ? AppColors_1.AppColors.amber700
+                            </react_native_svg_1.default>) : null}
+                        </TouchableScale_1.default>
+                      </react_native_1.View>
+
+                      {/* Card Footer: Live Stats + Configure Button */}
+                      {!isUnavailable && (<react_native_1.View style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                                paddingTop: 8,
+                                borderTopWidth: 1,
+                                borderTopColor: AppColors_1.AppColors.dividerColor,
+                            }}>
+                          {/* Live Info Pill */}
+                          <react_native_1.View style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                gap: 6,
+                                flex: 1,
+                            }}>
+                            <react_native_1.View style={{
+                                width: 6,
+                                height: 6,
+                                borderRadius: 3,
+                                backgroundColor: isChecked
+                                    ? AppColors_1.AppColors.liveGreen
                                     : AppColors_1.AppColors.grayTextWeak,
-                                letterSpacing: 0.3,
-                                marginTop: 3,
-                                textAlign: 'right',
+                            }}/>
+                            <react_native_1.Text style={{
+                                fontFamily: AppFonts_1.AppFonts.interMedium,
+                                fontSize: 11,
+                                color: AppColors_1.AppColors.grayText,
+                                lineHeight: 14,
                             }}>
-                          {tab.key === 'apis'
-                                ? t('settings.requiredBadge')
-                                : t('settings.readOnlyBadge')}
-                        </react_native_1.Text>)}
-                    </react_native_1.View>
-                  </react_native_1.View>);
+                              {liveStats}
+                            </react_native_1.Text>
+                          </react_native_1.View>
+
+                          {/* Sleek Configure Button */}
+                          <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={`Configure ${moduleItem.label} settings`} onPress={() => {
+                                (0, InspectorContext_1.animateNextLayout)();
+                                setSettingsPage(moduleItem.key);
+                            }} style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                gap: 5,
+                                backgroundColor: `${AppColors_1.AppColors.purple}12`,
+                                paddingHorizontal: 10,
+                                paddingVertical: 5,
+                                borderRadius: 8,
+                                borderWidth: 1,
+                                borderColor: `${AppColors_1.AppColors.purple}26`,
+                            }}>
+                            <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.purple} size={11}/>
+                            <react_native_1.Text style={{
+                                fontFamily: AppFonts_1.AppFonts.interBold,
+                                fontSize: 11,
+                                lineHeight: 14,
+                                color: AppColors_1.AppColors.purple,
+                            }}>
+                              {t('settings.configure')}
+                            </react_native_1.Text>
+                            <NetworkIcons_1.ForwardChevronIcon color={AppColors_1.AppColors.purple} size={9}/>
+                          </TouchableScale_1.default>
+                        </react_native_1.View>)}
+                    </react_native_1.View>);
                 })}
+              </react_native_1.View>
             </react_native_1.View>) : (
-            /* UI Preferences Section */
-            <react_native_1.View style={{
+            /* UI Preferences Subtab */
+            <react_native_1.View style={{ gap: 14 }}>
+              {/* Section 1: Appearance */}
+              <react_native_1.View style={{
                     backgroundColor: AppColors_1.AppColors.primaryLight,
-                    borderRadius: 12,
+                    borderRadius: 14,
                     borderWidth: 1,
                     borderColor: AppColors_1.AppColors.grayBorderSecondary,
                     overflow: 'hidden',
-                }}>
-              <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    paddingVertical: 12,
-                    paddingHorizontal: 14,
+                    padding: 14,
                     gap: 12,
                 }}>
-                {/* Icon + Label */}
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 11,
+                    lineHeight: 14,
+                    color: AppColors_1.AppColors.grayTextWeak,
+                    letterSpacing: 0.8,
+                }}>
+                  {t('settings.appearanceTheme')}
+                </react_native_1.Text>
+
                 <react_native_1.View style={{
-                    flex: 1,
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 8,
+                    justifyContent: 'space-between',
                 }}>
                   <react_native_1.View style={{
-                    width: 20,
-                    height: 20,
-                    borderRadius: 6,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 10,
+                    flex: 1,
+                }}>
+                    <react_native_1.View style={{
+                    width: 32,
+                    height: 32,
+                    borderRadius: 8,
                     backgroundColor: AppColors_1.AppColors.purpleShade50,
-                    borderWidth: 1,
-                    borderColor: `${AppColors_1.AppColors.purple}33`,
                     alignItems: 'center',
                     justifyContent: 'center',
                 }}>
-                    {isDark ? (<NetworkIcons_1.SunIcon color={AppColors_1.AppColors.purple} size={11}/>) : (<NetworkIcons_1.MoonIcon color={AppColors_1.AppColors.purple} size={11}/>)}
-                  </react_native_1.View>
-                  <react_native_1.View style={{ flex: 1 }}>
-                    <react_native_1.Text style={{
+                      {isDark ? (<NetworkIcons_1.SunIcon color={AppColors_1.AppColors.purple} size={15}/>) : (<NetworkIcons_1.MoonIcon color={AppColors_1.AppColors.purple} size={15}/>)}
+                    </react_native_1.View>
+                    <react_native_1.View style={{ flex: 1 }}>
+                      <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 13,
+                    fontSize: 13.5,
+                    lineHeight: 18,
                     color: AppColors_1.AppColors.primaryBlack,
                 }}>
-                      Dark Theme
-                    </react_native_1.Text>
+                        {t('settings.general.darkMode')}
+                      </react_native_1.Text>
+                      <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interRegular,
+                    fontSize: 11,
+                    lineHeight: 15,
+                    color: AppColors_1.AppColors.grayText,
+                    marginTop: 1,
+                }}>
+                        {t('settings.general.darkModeDescription')}
+                      </react_native_1.Text>
+                    </react_native_1.View>
                   </react_native_1.View>
-                </react_native_1.View>
 
-                {/* Toggle Switch */}
-                <TouchableScale_1.default onPress={() => {
+                  <TouchableScale_1.default accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle Dark Theme" accessibilityState={{ checked: isDark }} onPress={() => {
                     const newTheme = !isDark;
                     setIsDark(newTheme);
                     (0, styles_1.toggleGlobalTheme)(newTheme);
                 }} style={{
-                    width: 38,
-                    height: 22,
-                    borderRadius: 11,
+                    width: 42,
+                    height: 24,
+                    borderRadius: 12,
                     backgroundColor: isDark
                         ? AppColors_1.AppColors.purple
                         : AppColors_1.AppColors.grayBorderSecondary,
@@ -490,226 +782,243 @@ const SettingsPanel = () => {
                     justifyContent: 'center',
                     alignItems: isDark ? 'flex-end' : 'flex-start',
                 }}>
-                  <react_native_1.View style={{
-                    width: 18,
-                    height: 18,
-                    borderRadius: 9,
+                    <react_native_1.View style={{
+                    width: 20,
+                    height: 20,
+                    borderRadius: 10,
                     backgroundColor: AppColors_1.AppColors.white,
                     shadowColor: AppColors_1.AppColors.black,
-                    shadowOpacity: 0.15,
-                    shadowRadius: 1.5,
+                    shadowOpacity: 0.18,
+                    shadowRadius: 2,
                     shadowOffset: { width: 0, height: 1 },
                 }}/>
-                </TouchableScale_1.default>
+                  </TouchableScale_1.default>
+                </react_native_1.View>
               </react_native_1.View>
 
-              {/* Divider */}
-              <react_native_1.View style={{
-                    height: 1,
-                    backgroundColor: AppColors_1.AppColors.dividerColor,
-                }}/>
-
-              {/* Modal Height */}
+              {/* Section 2: Window & Layout */}
               <react_native_1.View style={{
-                    paddingVertical: 12,
-                    paddingHorizontal: 14,
+                    backgroundColor: AppColors_1.AppColors.primaryLight,
+                    borderRadius: 14,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                    overflow: 'hidden',
+                    padding: 14,
+                    gap: 14,
                 }}>
-                <react_native_1.View style={{
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 11,
+                    lineHeight: 14,
+                    color: AppColors_1.AppColors.grayTextWeak,
+                    letterSpacing: 0.8,
+                }}>
+                  {t('settings.windowLayout')}
+                </react_native_1.Text>
+
+                {/* Modal Height */}
+                <react_native_1.View style={{ gap: 8 }}>
+                  <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 8,
+                    gap: 10,
                 }}>
-                  <react_native_1.View style={{
-                    width: 20,
-                    height: 20,
-                    borderRadius: 6,
+                    <react_native_1.View style={{
+                    width: 32,
+                    height: 32,
+                    borderRadius: 8,
                     backgroundColor: AppColors_1.AppColors.purpleShade50,
-                    borderWidth: 1,
-                    borderColor: `${AppColors_1.AppColors.purple}33`,
                     alignItems: 'center',
                     justifyContent: 'center',
                 }}>
-                    <NetworkIcons_1.ScreenIcon color={AppColors_1.AppColors.purple} size={11}/>
-                  </react_native_1.View>
-                  <react_native_1.View style={{ flex: 1 }}>
-                    <react_native_1.Text style={{
+                      <NetworkIcons_1.ScreenIcon color={AppColors_1.AppColors.purple} size={15}/>
+                    </react_native_1.View>
+                    <react_native_1.View style={{ flex: 1 }}>
+                      <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 13,
+                    fontSize: 13.5,
+                    lineHeight: 18,
                     color: AppColors_1.AppColors.primaryBlack,
                 }}>
-                      Modal Height
-                    </react_native_1.Text>
-                    <react_native_1.Text style={{
+                        {t('settings.general.modalHeight')}
+                      </react_native_1.Text>
+                      <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interRegular,
                     fontSize: 11,
+                    lineHeight: 15,
                     color: AppColors_1.AppColors.grayText,
                     marginTop: 1,
                 }}>
-                      Height of the inspector panel relative to the screen
-                    </react_native_1.Text>
+                        {t('settings.general.modalHeightDescription')}
+                      </react_native_1.Text>
+                    </react_native_1.View>
                   </react_native_1.View>
-                </react_native_1.View>
 
-                {/* Segmented picker */}
-                <react_native_1.View style={{
+                  <react_native_1.View style={{
                     flexDirection: 'row',
                     backgroundColor: AppColors_1.AppColors.grayBackground,
-                    borderRadius: 8,
-                    padding: 2.5,
-                    marginTop: 10,
+                    borderRadius: 10,
+                    padding: 3,
                     borderWidth: 1,
                     borderColor: AppColors_1.AppColors.dividerColor,
                 }}>
-                  {[50, 70, 90, 100].map(opt => {
+                    {[50, 70, 90, 100].map(opt => {
                     const isActive = modalHeightPercent === opt;
-                    return (<TouchableScale_1.default key={opt} onPress={() => setModalHeightPercent(opt)} style={{
+                    return (<TouchableScale_1.default key={opt} accessible={true} accessibilityRole="button" accessibilityLabel={`Set window height to ${opt} percent`} accessibilityState={{ selected: isActive }} onPress={() => setModalHeightPercent(opt)} style={{
                             flex: 1,
-                            paddingVertical: 6,
+                            paddingVertical: 7,
                             alignItems: 'center',
-                            borderRadius: 6,
+                            borderRadius: 8,
                             backgroundColor: isActive
                                 ? AppColors_1.AppColors.purple
                                 : 'transparent',
                         }}>
-                        <react_native_1.Text style={{
+                          <react_native_1.Text style={{
                             fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 11,
-                            color: isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText,
+                            fontSize: 11.5,
+                            lineHeight: 15,
+                            color: isActive
+                                ? AppColors_1.AppColors.white
+                                : AppColors_1.AppColors.grayText,
                         }}>
-                          {opt}%
-                        </react_native_1.Text>
-                      </TouchableScale_1.default>);
+                            {opt}%
+                          </react_native_1.Text>
+                        </TouchableScale_1.default>);
                 })}
+                  </react_native_1.View>
                 </react_native_1.View>
-              </react_native_1.View>
 
-              {/* Divider */}
-              <react_native_1.View style={{
-                    height: 1,
-                    backgroundColor: AppColors_1.AppColors.dividerColor,
-                }}/>
+                <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
 
-              {/* Modal Animation */}
-              <react_native_1.View style={{
-                    paddingVertical: 12,
-                    paddingHorizontal: 14,
-                }}>
-                <react_native_1.View style={{
+                {/* Modal Animation */}
+                <react_native_1.View style={{ gap: 8 }}>
+                  <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 8,
+                    gap: 10,
                 }}>
-                  <react_native_1.View style={{
-                    width: 20,
-                    height: 20,
-                    borderRadius: 6,
+                    <react_native_1.View style={{
+                    width: 32,
+                    height: 32,
+                    borderRadius: 8,
                     backgroundColor: AppColors_1.AppColors.purpleShade50,
-                    borderWidth: 1,
-                    borderColor: `${AppColors_1.AppColors.purple}33`,
                     alignItems: 'center',
                     justifyContent: 'center',
                 }}>
-                    <NetworkIcons_1.MotionIcon color={AppColors_1.AppColors.purple} size={11}/>
-                  </react_native_1.View>
-                  <react_native_1.View style={{ flex: 1 }}>
-                    <react_native_1.Text style={{
+                      <NetworkIcons_1.MotionIcon color={AppColors_1.AppColors.purple} size={15}/>
+                    </react_native_1.View>
+                    <react_native_1.View style={{ flex: 1 }}>
+                      <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 13,
+                    fontSize: 13.5,
+                    lineHeight: 18,
                     color: AppColors_1.AppColors.primaryBlack,
                 }}>
-                      Modal Animation
-                    </react_native_1.Text>
-                    <react_native_1.Text style={{
+                        {t('settings.general.modalAnimation')}
+                      </react_native_1.Text>
+                      <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interRegular,
                     fontSize: 11,
+                    lineHeight: 15,
                     color: AppColors_1.AppColors.grayText,
                     marginTop: 1,
                 }}>
-                      How the inspector panel enters and exits the screen
-                    </react_native_1.Text>
+                        {t('settings.general.modalAnimationDescription')}
+                      </react_native_1.Text>
+                    </react_native_1.View>
                   </react_native_1.View>
-                </react_native_1.View>
 
-                {/* Segmented picker */}
-                <react_native_1.View style={{
+                  <react_native_1.View style={{
                     flexDirection: 'row',
                     backgroundColor: AppColors_1.AppColors.grayBackground,
-                    borderRadius: 8,
-                    padding: 2.5,
-                    marginTop: 10,
+                    borderRadius: 10,
+                    padding: 3,
                     borderWidth: 1,
                     borderColor: AppColors_1.AppColors.dividerColor,
                 }}>
-                  {([
+                    {[
                     { key: 'slide', label: 'Slide Up' },
                     { key: 'fade', label: 'Fade' },
                     { key: 'none', label: 'None' },
-                ]).map(opt => {
+                ].map(opt => {
                     const isActive = modalAnimationType === opt.key;
-                    return (<TouchableScale_1.default key={opt.key} onPress={() => setModalAnimationType(opt.key)} style={{
+                    return (<TouchableScale_1.default key={opt.key} accessible={true} accessibilityRole="button" accessibilityLabel={`Set transition animation to ${opt.label}`} accessibilityState={{ selected: isActive }} onPress={() => setModalAnimationType(opt.key)} style={{
                             flex: 1,
-                            paddingVertical: 6,
+                            paddingVertical: 7,
                             alignItems: 'center',
-                            borderRadius: 6,
+                            borderRadius: 8,
                             backgroundColor: isActive
                                 ? AppColors_1.AppColors.purple
                                 : 'transparent',
                         }}>
-                        <react_native_1.Text style={{
+                          <react_native_1.Text style={{
                             fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 11,
-                            color: isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText,
+                            fontSize: 11.5,
+                            lineHeight: 15,
+                            color: isActive
+                                ? AppColors_1.AppColors.white
+                                : AppColors_1.AppColors.grayText,
                         }}>
-                          {opt.label}
-                        </react_native_1.Text>
-                      </TouchableScale_1.default>);
+                            {opt.label}
+                          </react_native_1.Text>
+                        </TouchableScale_1.default>);
                 })}
+                  </react_native_1.View>
                 </react_native_1.View>
               </react_native_1.View>
 
-              {/* Divider */}
+              {/* Section 3: Default Startup Tab */}
               <react_native_1.View style={{
-                    height: 1,
-                    backgroundColor: AppColors_1.AppColors.dividerColor,
-                }}/>
-
-              {/* #6 — Default Tab */}
-              <react_native_1.View style={{
-                    paddingVertical: 12,
-                    paddingHorizontal: 14,
+                    backgroundColor: AppColors_1.AppColors.primaryLight,
+                    borderRadius: 14,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                    overflow: 'hidden',
+                    padding: 14,
+                    gap: 12,
+                }}>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 11,
+                    lineHeight: 14,
+                    color: AppColors_1.AppColors.grayTextWeak,
+                    letterSpacing: 0.8,
                 }}>
+                  {t('settings.startupDefault')}
+                </react_native_1.Text>
+
                 <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 8,
+                    gap: 10,
                 }}>
                   <react_native_1.View style={{
-                    width: 20,
-                    height: 20,
-                    borderRadius: 6,
+                    width: 32,
+                    height: 32,
+                    borderRadius: 8,
                     backgroundColor: AppColors_1.AppColors.purpleShade50,
-                    borderWidth: 1,
-                    borderColor: `${AppColors_1.AppColors.purple}33`,
                     alignItems: 'center',
                     justifyContent: 'center',
                 }}>
-                    <NetworkIcons_1.LayersIcon color={AppColors_1.AppColors.purple} size={11}/>
+                    <NetworkIcons_1.LayersIcon color={AppColors_1.AppColors.purple} size={15}/>
                   </react_native_1.View>
                   <react_native_1.View style={{ flex: 1 }}>
                     <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 13,
+                    fontSize: 13.5,
+                    lineHeight: 18,
                     color: AppColors_1.AppColors.primaryBlack,
                 }}>
-                      Default Tab
+                      {t('settings.general.defaultOpeningTab')}
                     </react_native_1.Text>
                     <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interRegular,
                     fontSize: 11,
+                    lineHeight: 15,
                     color: AppColors_1.AppColors.grayText,
                     marginTop: 1,
                 }}>
-                      Tab shown when the inspector opens
+                      {t('settings.general.defaultOpeningTabDesc')}
                     </react_native_1.Text>
                   </react_native_1.View>
                 </react_native_1.View>
@@ -719,13 +1028,15 @@ const SettingsPanel = () => {
                     flexDirection: 'row',
                     flexWrap: 'wrap',
                     gap: 8,
-                    marginTop: 12,
+                    marginTop: 4,
                 }}>
-                  {settingsTabs
-                    .filter(tab => tab.key === 'apis' || tabVisibility?.[tab.key])
+                  {allModules
+                    .filter(tab => tab.key === 'apis' ||
+                    stagedTabVisibility?.[tab.key] ||
+                    tabVisibility?.[tab.key])
                     .map(tab => {
                     const isActive = defaultTab === tab.key;
-                    return (<TouchableScale_1.default key={tab.key} onPress={() => setDefaultTab(tab.key)} style={{
+                    return (<TouchableScale_1.default key={tab.key} accessible={true} accessibilityRole="button" accessibilityLabel={`Set ${tab.label} as default tab`} accessibilityState={{ selected: isActive }} onPress={() => setDefaultTab(tab.key)} style={{
                             flexDirection: 'row',
                             alignItems: 'center',
                             gap: 8,
@@ -733,186 +1044,190 @@ const SettingsPanel = () => {
                             paddingHorizontal: 12,
                             borderRadius: 10,
                             borderWidth: 1.5,
-                            borderColor: isActive ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayBorderSecondary,
-                            backgroundColor: isActive ? `${AppColors_1.AppColors.purple}0F` : AppColors_1.AppColors.primaryLight,
+                            borderColor: isActive
+                                ? AppColors_1.AppColors.purple
+                                : AppColors_1.AppColors.grayBorderSecondary,
+                            backgroundColor: isActive
+                                ? `${AppColors_1.AppColors.purple}0F`
+                                : AppColors_1.AppColors.primaryLight,
                             minWidth: '47%',
                             flex: 1,
                         }}>
-                          <react_native_1.View style={{
-                            width: 22,
-                            height: 22,
-                            borderRadius: 6,
-                            backgroundColor: isActive ? AppColors_1.AppColors.purple : AppColors_1.AppColors.purpleShade50,
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                        }}>
-                            {tab.icon === 'apis' && (<NetworkIcons_1.SignalIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
-                            {tab.icon === 'logs' && (<NetworkIcons_1.TerminalIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
-                            {tab.icon === 'analytics' && (<NetworkIcons_1.AnalyticsIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
-                            {tab.icon === 'redux' && (<NetworkIcons_1.ReduxIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
-                            {tab.icon === 'bundle' && (<NetworkIcons_1.PackageIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
-                            {tab.icon === 'performance' && (<NetworkIcons_1.PerformanceIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
-                            {tab.icon === 'crash' && (<NetworkIcons_1.CrashIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
-                          </react_native_1.View>
                           <react_native_1.Text style={{
                             fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 13,
-                            color: isActive ? AppColors_1.AppColors.purple : AppColors_1.AppColors.primaryBlack,
+                            fontSize: 12.5,
+                            lineHeight: 16,
+                            color: isActive
+                                ? AppColors_1.AppColors.purple
+                                : AppColors_1.AppColors.primaryBlack,
                             flex: 1,
                         }}>
-                              {tab.label}
+                            {tab.label}
                           </react_native_1.Text>
                           {isActive && (<react_native_1.View style={{
-                                width: 14,
-                                height: 14,
-                                borderRadius: 7,
+                                width: 16,
+                                height: 16,
+                                borderRadius: 8,
                                 backgroundColor: AppColors_1.AppColors.purple,
                                 alignItems: 'center',
                                 justifyContent: 'center',
                             }}>
-                              <NetworkIcons_1.CheckIcon size={8} color={AppColors_1.AppColors.white}/>
+                              <NetworkIcons_1.CheckIcon size={9} color={AppColors_1.AppColors.white}/>
                             </react_native_1.View>)}
                         </TouchableScale_1.default>);
                 })}
                 </react_native_1.View>
               </react_native_1.View>
 
-              {/* Divider */}
+              {/* Section 4: Log Deduplication & Levels */}
               <react_native_1.View style={{
-                    height: 1,
-                    backgroundColor: AppColors_1.AppColors.dividerColor,
-                }}/>
+                    backgroundColor: AppColors_1.AppColors.primaryLight,
+                    borderRadius: 14,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                    overflow: 'hidden',
+                    padding: 14,
+                    gap: 14,
+                }}>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 11,
+                    lineHeight: 14,
+                    color: AppColors_1.AppColors.grayTextWeak,
+                    letterSpacing: 0.8,
+                }}>
+                  {t('settings.logFiltersDeduplication')}
+                </react_native_1.Text>
 
-              {/* #9 — Show Duplicate Logs */}
-              <react_native_1.View style={{
+                {/* Show Duplicate Logs */}
+                <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    paddingVertical: 12,
-                    paddingHorizontal: 14,
-                    gap: 12,
+                    justifyContent: 'space-between',
                 }}>
-                <react_native_1.View style={{
-                    flex: 1,
+                  <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 8,
+                    gap: 10,
+                    flex: 1,
                 }}>
-                  <react_native_1.View style={{
-                    width: 20,
-                    height: 20,
-                    borderRadius: 6,
+                    <react_native_1.View style={{
+                    width: 32,
+                    height: 32,
+                    borderRadius: 8,
                     backgroundColor: AppColors_1.AppColors.purpleShade50,
-                    borderWidth: 1,
-                    borderColor: `${AppColors_1.AppColors.purple}33`,
                     alignItems: 'center',
                     justifyContent: 'center',
                 }}>
-                    <NetworkIcons_1.EyeIcon color={AppColors_1.AppColors.purple} size={11}/>
-                  </react_native_1.View>
-                  <react_native_1.View style={{ flex: 1 }}>
-                    <react_native_1.Text style={{
+                      <NetworkIcons_1.EyeIcon color={AppColors_1.AppColors.purple} size={15}/>
+                    </react_native_1.View>
+                    <react_native_1.View style={{ flex: 1 }}>
+                      <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 13,
+                    fontSize: 13.5,
+                    lineHeight: 18,
                     color: AppColors_1.AppColors.primaryBlack,
                 }}>
-                      Show Duplicate Logs
-                    </react_native_1.Text>
-                    <react_native_1.Text style={{
+                        {t('settings.general.duplicateLogs')}
+                      </react_native_1.Text>
+                      <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interRegular,
                     fontSize: 11,
+                    lineHeight: 15,
                     color: AppColors_1.AppColors.grayText,
                     marginTop: 1,
                 }}>
-                      Off: repeated identical entries collapse into one row
-                      with a ×N count
-                    </react_native_1.Text>
+                        {t('settings.general.duplicateLogsDescription')}
+                      </react_native_1.Text>
+                    </react_native_1.View>
                   </react_native_1.View>
-                </react_native_1.View>
 
-                {/* Toggle Switch */}
-                <TouchableScale_1.default onPress={() => setShowDuplicateLogs(prev => !prev)} style={{
-                    width: 38,
-                    height: 22,
-                    borderRadius: 11,
+                  <TouchableScale_1.default accessible={true} accessibilityRole="switch" accessibilityLabel="Toggle show duplicate logs" accessibilityState={{ checked: showDuplicateLogs }} onPress={() => setShowDuplicateLogs(prev => !prev)} style={{
+                    width: 42,
+                    height: 24,
+                    borderRadius: 12,
                     backgroundColor: showDuplicateLogs
                         ? AppColors_1.AppColors.purple
                         : AppColors_1.AppColors.grayBorderSecondary,
                     padding: 2,
                     justifyContent: 'center',
-                    alignItems: showDuplicateLogs ? 'flex-end' : 'flex-start',
+                    alignItems: showDuplicateLogs
+                        ? 'flex-end'
+                        : 'flex-start',
                 }}>
-                  <react_native_1.View style={{
-                    width: 18,
-                    height: 18,
-                    borderRadius: 9,
+                    <react_native_1.View style={{
+                    width: 20,
+                    height: 20,
+                    borderRadius: 10,
                     backgroundColor: AppColors_1.AppColors.white,
                     shadowColor: AppColors_1.AppColors.black,
-                    shadowOpacity: 0.15,
-                    shadowRadius: 1.5,
+                    shadowOpacity: 0.18,
+                    shadowRadius: 2,
                     shadowOffset: { width: 0, height: 1 },
                 }}/>
-                </TouchableScale_1.default>
-              </react_native_1.View>
+                  </TouchableScale_1.default>
+                </react_native_1.View>
 
-              {/* Divider */}
-              <react_native_1.View style={{
-                    height: 1,
-                    backgroundColor: AppColors_1.AppColors.dividerColor,
-                }}/>
+                <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
 
-              {/* Logs Console Levels */}
-              <react_native_1.View style={{
-                    paddingVertical: 12,
-                    paddingHorizontal: 14,
-                }}>
-                <react_native_1.View style={{
+                {/* Console Log Levels */}
+                <react_native_1.View style={{ gap: 8 }}>
+                  <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 8,
+                    gap: 10,
                 }}>
-                  <react_native_1.View style={{
-                    width: 20,
-                    height: 20,
-                    borderRadius: 6,
+                    <react_native_1.View style={{
+                    width: 32,
+                    height: 32,
+                    borderRadius: 8,
                     backgroundColor: AppColors_1.AppColors.purpleShade50,
-                    borderWidth: 1,
-                    borderColor: `${AppColors_1.AppColors.purple}33`,
                     alignItems: 'center',
                     justifyContent: 'center',
                 }}>
-                    <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={11}/>
-                  </react_native_1.View>
-                  <react_native_1.View style={{ flex: 1 }}>
-                    <react_native_1.Text style={{
+                      <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={15}/>
+                    </react_native_1.View>
+                    <react_native_1.View style={{ flex: 1 }}>
+                      <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 13,
+                    fontSize: 13.5,
+                    lineHeight: 18,
                     color: AppColors_1.AppColors.primaryBlack,
                 }}>
-                      Logs Console Levels
-                    </react_native_1.Text>
-                    <react_native_1.Text style={{
+                        {t('settings.general.activeConsoleLogLevels')}
+                      </react_native_1.Text>
+                      <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interRegular,
                     fontSize: 11,
+                    lineHeight: 15,
                     color: AppColors_1.AppColors.grayText,
                     marginTop: 1,
                 }}>
-                      Toggle which log levels are visible in the Logs tab
-                    </react_native_1.Text>
+                        {t('settings.general.activeConsoleLogLevelsDesc')}
+                      </react_native_1.Text>
+                    </react_native_1.View>
                   </react_native_1.View>
-                </react_native_1.View>
 
-                <react_native_1.View style={{
-                    flexDirection: 'row',
-                    gap: 8,
-                    marginTop: 10,
-                }}>
-                  {([
-                    { key: 'info', label: 'Info', color: AppColors_1.AppColors.blue500 },
-                    { key: 'warn', label: 'Warning', color: AppColors_1.AppColors.amber500 },
-                    { key: 'error', label: 'Error', color: AppColors_1.AppColors.errorColor },
-                ]).map(level => {
+                  <react_native_1.View style={{ flexDirection: 'row', gap: 8, marginTop: 4 }}>
+                    {[
+                    {
+                        key: 'info',
+                        label: 'Info',
+                        color: AppColors_1.AppColors.blue500,
+                    },
+                    {
+                        key: 'warn',
+                        label: 'Warning',
+                        color: AppColors_1.AppColors.amber500,
+                    },
+                    {
+                        key: 'error',
+                        label: 'Error',
+                        color: AppColors_1.AppColors.errorColor,
+                    },
+                ].map(level => {
                     const isActive = showConsoleLevels[level.key];
-                    return (<TouchableScale_1.default key={level.key} onPress={() => setShowConsoleLevels(prev => ({
+                    return (<TouchableScale_1.default key={level.key} accessible={true} accessibilityRole="checkbox" accessibilityLabel={`Toggle ${level.label} logs`} accessibilityState={{ checked: isActive }} onPress={() => setShowConsoleLevels(prev => ({
                             ...prev,
                             [level.key]: !prev[level.key],
                         }))} style={{
@@ -922,112 +1237,113 @@ const SettingsPanel = () => {
                             justifyContent: 'center',
                             gap: 6,
                             paddingVertical: 8,
-                            borderRadius: 8,
+                            borderRadius: 9,
                             borderWidth: 1.5,
-                            borderColor: isActive ? level.color : AppColors_1.AppColors.grayBorderSecondary,
-                            backgroundColor: isActive ? `${level.color}0D` : AppColors_1.AppColors.primaryLight,
+                            borderColor: isActive
+                                ? level.color
+                                : AppColors_1.AppColors.grayBorderSecondary,
+                            backgroundColor: isActive
+                                ? `${level.color}0D`
+                                : AppColors_1.AppColors.primaryLight,
                         }}>
-                        <react_native_1.View style={{
+                          <react_native_1.View style={{
                             width: 8,
                             height: 8,
                             borderRadius: 4,
-                            backgroundColor: isActive ? level.color : AppColors_1.AppColors.grayBorderSecondary,
+                            backgroundColor: isActive
+                                ? level.color
+                                : AppColors_1.AppColors.grayBorderSecondary,
                         }}/>
-                        <react_native_1.Text style={{
+                          <react_native_1.Text style={{
                             fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 11,
-                            color: isActive ? level.color : AppColors_1.AppColors.grayText,
+                            fontSize: 11.5,
+                            lineHeight: 15,
+                            color: isActive
+                                ? level.color
+                                : AppColors_1.AppColors.grayText,
                         }}>
-                          {level.label}
-                        </react_native_1.Text>
-                      </TouchableScale_1.default>);
+                            {level.label}
+                          </react_native_1.Text>
+                        </TouchableScale_1.default>);
                 })}
+                  </react_native_1.View>
                 </react_native_1.View>
               </react_native_1.View>
 
-              {/* Divider */}
-              <react_native_1.View style={{
-                    height: 1,
-                    backgroundColor: AppColors_1.AppColors.dividerColor,
-                }}/>
-
-              {/* Reset Settings */}
+              {/* Section 5: Reset Settings */}
               <react_native_1.View style={{
+                    backgroundColor: AppColors_1.AppColors.primaryLight,
+                    borderRadius: 14,
+                    borderWidth: 1,
+                    borderColor: `${AppColors_1.AppColors.errorColor}33`,
+                    overflow: 'hidden',
+                    padding: 14,
                     flexDirection: 'row',
                     alignItems: 'center',
-                    paddingVertical: 12,
-                    paddingHorizontal: 14,
                     gap: 12,
                 }}>
                 <react_native_1.View style={{
-                    flex: 1,
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 8,
-                }}>
-                  <react_native_1.View style={{
-                    width: 20,
-                    height: 20,
-                    borderRadius: 6,
+                    width: 34,
+                    height: 34,
+                    borderRadius: 9,
                     backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
-                    borderWidth: 1,
-                    borderColor: `${AppColors_1.AppColors.errorColor}33`,
                     alignItems: 'center',
                     justifyContent: 'center',
                 }}>
-                    <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={11}/>
-                  </react_native_1.View>
-                  <react_native_1.View style={{ flex: 1 }}>
-                    <react_native_1.Text style={{
+                  <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={15}/>
+                </react_native_1.View>
+                <react_native_1.View style={{ flex: 1 }}>
+                  <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 13,
+                    fontSize: 13.5,
+                    lineHeight: 18,
                     color: AppColors_1.AppColors.primaryBlack,
                 }}>
-                      Reset Settings
-                    </react_native_1.Text>
-                    <react_native_1.Text style={{
+                    {t('settings.resetSettings')}
+                  </react_native_1.Text>
+                  <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interRegular,
                     fontSize: 11,
+                    lineHeight: 15,
                     color: AppColors_1.AppColors.grayText,
                     marginTop: 1,
                 }}>
-                      Wipe custom configurations and load package defaults
-                    </react_native_1.Text>
-                  </react_native_1.View>
+                    {t('settings.resetSettingsDesc')}
+                  </react_native_1.Text>
                 </react_native_1.View>
 
-                <TouchableScale_1.default onPress={resetToDefaults} style={{
-                    paddingHorizontal: 10,
-                    paddingVertical: 5,
-                    borderRadius: 7,
+                <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="Reset all settings to default" onPress={resetToDefaults} style={{
+                    paddingHorizontal: 12,
+                    paddingVertical: 7,
+                    borderRadius: 8,
                     backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
                     borderWidth: 1,
-                    borderColor: `${AppColors_1.AppColors.errorColor}33`,
+                    borderColor: `${AppColors_1.AppColors.errorColor}38`,
                 }}>
                   <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 11,
+                    fontSize: 11.5,
+                    lineHeight: 15,
                     color: AppColors_1.AppColors.errorColor,
                 }}>
-                    Reset
+                    {t('settings.reset')}
                   </react_native_1.Text>
                 </TouchableScale_1.default>
               </react_native_1.View>
             </react_native_1.View>)}
 
-
-          {/* Storage Status */}
+          {/* Storage & Engine Status Card */}
           <react_native_1.View style={{
-                backgroundColor: (0, settingsStore_1.isPersistentStorageAvailable)()
-                    ? `${AppColors_1.AppColors.liveGreen}14`
-                    : `${AppColors_1.AppColors.amber600}14`,
+                backgroundColor: isPersistent
+                    ? `${AppColors_1.AppColors.liveGreen}12`
+                    : `${AppColors_1.AppColors.amber600}12`,
                 borderRadius: 12,
                 borderWidth: 1,
-                borderColor: (0, settingsStore_1.isPersistentStorageAvailable)()
+                borderColor: isPersistent
                     ? `${AppColors_1.AppColors.liveGreen}33`
                     : `${AppColors_1.AppColors.amber600}33`,
                 padding: 12,
-                marginTop: 16,
+                marginBottom: 10,
                 flexDirection: 'row',
                 alignItems: 'center',
                 gap: 10,
@@ -1036,32 +1352,106 @@ const SettingsPanel = () => {
                 width: 8,
                 height: 8,
                 borderRadius: 4,
-                backgroundColor: (0, settingsStore_1.isPersistentStorageAvailable)() ? AppColors_1.AppColors.green500 : AppColors_1.AppColors.amber600,
+                backgroundColor: isPersistent
+                    ? AppColors_1.AppColors.green500
+                    : AppColors_1.AppColors.amber600,
             }}/>
             <react_native_1.View style={{ flex: 1 }}>
               <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: 12,
-                color: (0, settingsStore_1.isPersistentStorageAvailable)() ? AppColors_1.AppColors.green700 : AppColors_1.AppColors.amber800,
+                lineHeight: 16,
+                color: isPersistent
+                    ? AppColors_1.AppColors.green700
+                    : AppColors_1.AppColors.amber800,
             }}>
-                {(0, settingsStore_1.isPersistentStorageAvailable)()
-                ? `Storage: Persistent (${storage ? 'Custom' : 'iOS Settings'})`
-                : 'Storage: Temporary (In-Memory)'}
+                {isPersistent
+                ? t('settings.general.storageStatusEnabled', {
+                    type: storage ? 'Custom Storage' : 'iOS NSUserDefaults',
+                })
+                : t('settings.general.storageStatusDisabled')}
               </react_native_1.Text>
               <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interRegular,
                 fontSize: 10.5,
-                color: (0, settingsStore_1.isPersistentStorageAvailable)() ? AppColors_1.AppColors.green800 : AppColors_1.AppColors.amber800,
+                lineHeight: 14,
+                color: isPersistent
+                    ? AppColors_1.AppColors.green800
+                    : AppColors_1.AppColors.amber800,
                 marginTop: 2,
-                opacity: 0.8,
+                opacity: 0.85,
             }}>
-                {(0, settingsStore_1.isPersistentStorageAvailable)()
-                ? 'Your settings are saved across app restarts.'
-                : 'Settings reset when closed. To persist settings, pass a storage object to <NetworkInspector storage={...} />.'}
+                {isPersistent
+                ? t('settings.general.storageStatusEnabledDesc')
+                : t('settings.general.storageStatusDisabledDesc')}
               </react_native_1.Text>
             </react_native_1.View>
           </react_native_1.View>
         </react_native_1.ScrollView>
+
+        {/* Bottom Sticky Action Bar for Save Changes */}
+        {settingsActiveSubTab === 'module' && (<react_native_1.View style={{
+                    paddingHorizontal: 16,
+                    paddingTop: 12,
+                    paddingBottom: react_native_1.Platform.OS === 'ios' ? 26 : 14,
+                    backgroundColor: AppColors_1.AppColors.primaryLight,
+                    borderTopWidth: 1,
+                    borderTopColor: AppColors_1.AppColors.dividerColor,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 12,
+                    shadowColor: AppColors_1.AppColors.black,
+                    shadowOpacity: 0.08,
+                    shadowRadius: 8,
+                    shadowOffset: { width: 0, height: -3 },
+                    elevation: 8,
+                }}>
+            <react_native_1.View style={{ flex: 1 }}>
+              <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 13,
+                    lineHeight: 17,
+                    color: AppColors_1.AppColors.primaryBlack,
+                }}>
+                {stagedActiveCount} of {allModules.length} Modules Active
+              </react_native_1.Text>
+              <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interRegular,
+                    fontSize: 11,
+                    lineHeight: 15,
+                    color: hasUnsavedChanges
+                        ? AppColors_1.AppColors.purple
+                        : AppColors_1.AppColors.grayText,
+                    marginTop: 1,
+                }}>
+                {hasUnsavedChanges
+                    ? t('settings.unsavedPending')
+                    : t('settings.allSynchronized')}
+              </react_native_1.Text>
+            </react_native_1.View>
+
+            <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel="Save Changes" onPress={handleSaveChanges} style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 6,
+                    backgroundColor: hasUnsavedChanges
+                        ? AppColors_1.AppColors.purple
+                        : `${AppColors_1.AppColors.purple}22`,
+                    paddingHorizontal: 18,
+                    paddingVertical: 10,
+                    borderRadius: 10,
+                }}>
+              <NetworkIcons_1.CheckIcon size={14} color={hasUnsavedChanges ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple}/>
+              <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 13,
+                    lineHeight: 17,
+                    color: hasUnsavedChanges ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple,
+                }}>
+                {t('settings.saveChanges')}
+              </react_native_1.Text>
+            </TouchableScale_1.default>
+          </react_native_1.View>)}
       </react_native_1.View>);
     }
     const goBackToMain = () => {
@@ -1095,6 +1485,7 @@ const SettingsPanel = () => {
           <react_native_1.Text style={{
             fontFamily: AppFonts_1.AppFonts.interBold,
             fontSize: 14,
+            lineHeight: 18,
             color: AppColors_1.AppColors.primaryBlack,
         }}>
             {opts.label}
@@ -1102,6 +1493,7 @@ const SettingsPanel = () => {
           {opts.description ? (<react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interRegular,
                 fontSize: 11,
+                lineHeight: 15,
                 color: AppColors_1.AppColors.grayText,
                 marginTop: 1,
             }}>
@@ -1133,6 +1525,7 @@ const SettingsPanel = () => {
                 <react_native_1.Text style={{
                         fontFamily: AppFonts_1.AppFonts.interBold,
                         fontSize: 11,
+                        lineHeight: 14,
                         color: isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText,
                     }}>
                   {opts.picker.formatLabel
@@ -1148,22 +1541,21 @@ const SettingsPanel = () => {
     let icon = null;
     let rightInfo = '';
     if (settingsPage === 'apis') {
-        title = 'APIs Settings';
+        title = t('settings.apis.title');
         icon = <NetworkIcons_1.SignalIcon color={AppColors_1.AppColors.white} size={16}/>;
-        rightInfo = `Total: ${logs.length}`;
-        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
+        rightInfo = t('settings.apis.total', { count: logs.length });
+        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
         <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
                 padding: 16,
-                borderRadius: 12,
+                borderRadius: 14,
                 borderWidth: 1,
                 borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                gap: 4,
             }}>
           {renderSettingRow({
                 icon: <NetworkIcons_1.SignalIcon color={AppColors_1.AppColors.purple} size={16}/>,
-                label: 'Max Request Logs',
-                description: 'How many network requests to keep in memory',
+                label: t('settings.apis.maxRequestLogs'),
+                description: t('settings.apis.maxRequestLogsDescription'),
                 picker: {
                     options: [50, 100, 200, 500],
                     selectedValue: maxNetworkLogs,
@@ -1175,26 +1567,25 @@ const SettingsPanel = () => {
 
         <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
-                borderRadius: 12,
+                borderRadius: 14,
                 borderWidth: 1,
                 borderColor: AppColors_1.AppColors.grayBorderSecondary,
                 padding: 16,
-                marginTop: 12,
             }}>
           {renderSettingRow({
                 icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
-                label: 'Clear Network Logs',
-                description: `${logs.length} requests stored`,
+                label: t('settings.apis.clearNetworkLogs'),
+                description: t('settings.apis.clearNetworkLogsDescription', { count: logs.length }),
                 isLast: true,
                 onPress: () => {
                     (0, networkLogger_1.clearNetworkLogs)();
                     setSelected(null);
-                    react_native_1.Alert.alert('Success', 'Network logs cleared.');
+                    react_native_1.Alert.alert(t('common.success'), t('settings.apis.networkLogsCleared'));
                 },
                 right: (<react_native_1.View style={{
-                        paddingHorizontal: 10,
-                        paddingVertical: 5,
-                        borderRadius: 7,
+                        paddingHorizontal: 12,
+                        paddingVertical: 6,
+                        borderRadius: 8,
                         backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
                         borderWidth: 1,
                         borderColor: `${AppColors_1.AppColors.errorColor}33`,
@@ -1202,9 +1593,10 @@ const SettingsPanel = () => {
                 <react_native_1.Text style={{
                         fontFamily: AppFonts_1.AppFonts.interBold,
                         fontSize: 11,
+                        lineHeight: 14,
                         color: AppColors_1.AppColors.errorColor,
                     }}>
-                  Clear
+                  {t('common.clear')}
                 </react_native_1.Text>
               </react_native_1.View>),
             })}
@@ -1212,22 +1604,22 @@ const SettingsPanel = () => {
       </react_native_1.ScrollView>);
     }
     else if (settingsPage === 'logs') {
-        title = 'Logs Settings';
+        title = t('settings.logs.title');
         icon = <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.white} size={16}/>;
-        rightInfo = `Total: ${consoleLogs.length}`;
-        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
+        rightInfo = t('settings.logs.total', { count: consoleLogs.length });
+        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
         <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
                 padding: 16,
-                borderRadius: 12,
+                borderRadius: 14,
                 borderWidth: 1,
                 borderColor: AppColors_1.AppColors.grayBorderSecondary,
                 gap: 4,
             }}>
           {renderSettingRow({
                 icon: <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={16}/>,
-                label: 'Max Console Logs',
-                description: 'How many console messages to retain',
+                label: t('settings.logs.maxConsoleLogs'),
+                description: t('settings.logs.maxConsoleLogsDescription'),
                 picker: {
                     options: [100, 200, 500, 1000],
                     selectedValue: maxConsoleLogs,
@@ -1238,10 +1630,11 @@ const SettingsPanel = () => {
           <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: 13,
+                lineHeight: 17,
                 color: AppColors_1.AppColors.primaryBlack,
-                paddingTop: 4,
+                paddingTop: 6,
             }}>
-            Log Levels
+            {t('settings.logs.logLevels')}
           </react_native_1.Text>
           {['info', 'warn', 'error'].map(level => {
                 const isLvlActive = showConsoleLevels?.[level];
@@ -1250,19 +1643,25 @@ const SettingsPanel = () => {
                     : level === 'warn'
                         ? AppColors_1.AppColors.warningIconGold
                         : AppColors_1.AppColors.skyBlue;
+                const label = level === 'info'
+                    ? t('settings.logs.showInfo')
+                    : level === 'warn'
+                        ? t('settings.logs.showWarn')
+                        : t('settings.logs.showError');
+                const desc = level === 'info'
+                    ? t('settings.logs.showInfoDesc')
+                    : level === 'warn'
+                        ? t('settings.logs.showWarnDesc')
+                        : t('settings.logs.showErrorDesc');
                 return renderSettingRow({
                     icon: (<react_native_1.View style={{
-                            width: 10,
-                            height: 10,
-                            borderRadius: 5,
+                            width: 12,
+                            height: 12,
+                            borderRadius: 6,
                             backgroundColor: levelColor,
                         }}/>),
-                    label: `Show ${level.charAt(0).toUpperCase() + level.slice(1)} logs`,
-                    description: level === 'info'
-                        ? 'Informational messages'
-                        : level === 'warn'
-                            ? 'Warning messages'
-                            : 'Error messages',
+                    label,
+                    description: desc,
                     isLast: level === 'error',
                     onPress: () => setShowConsoleLevels(prev => ({
                         ...prev,
@@ -1290,25 +1689,24 @@ const SettingsPanel = () => {
 
         <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
-                borderRadius: 12,
+                borderRadius: 14,
                 borderWidth: 1,
                 borderColor: AppColors_1.AppColors.grayBorderSecondary,
                 padding: 16,
-                marginTop: 12,
             }}>
           {renderSettingRow({
                 icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
-                label: 'Clear Console Logs',
-                description: `${consoleLogs.length} logs stored`,
+                label: t('settings.logs.clearConsoleLogs'),
+                description: t('settings.logs.clearConsoleLogsDescription', { count: consoleLogs.length }),
                 isLast: true,
                 onPress: () => {
                     (0, consoleLogger_1.clearConsoleLogs)();
-                    react_native_1.Alert.alert('Success', 'Console logs cleared.');
+                    react_native_1.Alert.alert(t('common.success'), t('settings.logs.consoleLogsCleared'));
                 },
                 right: (<react_native_1.View style={{
-                        paddingHorizontal: 10,
-                        paddingVertical: 5,
-                        borderRadius: 7,
+                        paddingHorizontal: 12,
+                        paddingVertical: 6,
+                        borderRadius: 8,
                         backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
                         borderWidth: 1,
                         borderColor: `${AppColors_1.AppColors.errorColor}33`,
@@ -1316,9 +1714,10 @@ const SettingsPanel = () => {
                 <react_native_1.Text style={{
                         fontFamily: AppFonts_1.AppFonts.interBold,
                         fontSize: 11,
+                        lineHeight: 14,
                         color: AppColors_1.AppColors.errorColor,
                     }}>
-                  Clear
+                  {t('common.clear')}
                 </react_native_1.Text>
               </react_native_1.View>),
             })}
@@ -1326,47 +1725,45 @@ const SettingsPanel = () => {
       </react_native_1.ScrollView>);
     }
     else if (settingsPage === 'analytics') {
-        title = 'Analytics Settings';
+        title = t('settings.analytics.title');
         icon = <NetworkIcons_1.AnalyticsIcon color={AppColors_1.AppColors.white} size={16}/>;
-        rightInfo = `Events: ${analyticsEvents.length}`;
-        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
+        rightInfo = t('settings.analytics.total', { count: analyticsEvents.length });
+        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
         <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
                 padding: 16,
-                borderRadius: 12,
+                borderRadius: 14,
                 borderWidth: 1,
                 borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                gap: 4,
             }}>
           {renderSettingRow({
                 icon: <NetworkIcons_1.AnalyticsIcon color={AppColors_1.AppColors.purple} size={16}/>,
-                label: 'Events Captured',
-                description: `${analyticsEvents.length} analytics events stored`,
+                label: t('settings.analytics.maxAnalyticsEvents'),
+                description: t('settings.analytics.maxAnalyticsEventsDescription', { count: analyticsEvents.length }),
                 isLast: true,
             })}
         </react_native_1.View>
         <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
-                borderRadius: 12,
+                borderRadius: 14,
                 borderWidth: 1,
                 borderColor: AppColors_1.AppColors.grayBorderSecondary,
                 padding: 16,
-                marginTop: 12,
             }}>
           {renderSettingRow({
                 icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
-                label: 'Clear Analytics History',
-                description: 'Remove all captured events',
+                label: t('settings.analytics.clearAnalyticsEvents'),
+                description: t('settings.analytics.clearAnalyticsEventsDescription'),
                 isLast: true,
                 onPress: () => {
                     (0, analyticsLogger_1.clearAnalyticsEvents)();
                     setSelectedEvent(null);
-                    react_native_1.Alert.alert('Success', 'Analytics events cleared.');
+                    react_native_1.Alert.alert(t('common.success'), t('settings.analytics.analyticsEventsCleared'));
                 },
                 right: (<react_native_1.View style={{
-                        paddingHorizontal: 10,
-                        paddingVertical: 5,
-                        borderRadius: 7,
+                        paddingHorizontal: 12,
+                        paddingVertical: 6,
+                        borderRadius: 8,
                         backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
                         borderWidth: 1,
                         borderColor: `${AppColors_1.AppColors.errorColor}33`,
@@ -1374,9 +1771,10 @@ const SettingsPanel = () => {
                 <react_native_1.Text style={{
                         fontFamily: AppFonts_1.AppFonts.interBold,
                         fontSize: 11,
+                        lineHeight: 14,
                         color: AppColors_1.AppColors.errorColor,
                     }}>
-                  Clear
+                  {t('common.clear')}
                 </react_native_1.Text>
               </react_native_1.View>),
             })}
@@ -1384,22 +1782,22 @@ const SettingsPanel = () => {
       </react_native_1.ScrollView>);
     }
     else if (settingsPage === 'redux') {
-        title = 'Redux Settings';
-        icon = <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.white} size={16}/>;
-        rightInfo = `Reducers: ${Object.keys(reduxState || {}).length}`;
-        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
+        title = t('settings.redux.title');
+        icon = <NetworkIcons_1.ReduxIcon color={AppColors_1.AppColors.white} size={16}/>;
+        rightInfo = t('settings.redux.reducers', { count: Object.keys(reduxState || {}).length });
+        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
         <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
                 padding: 16,
-                borderRadius: 12,
+                borderRadius: 14,
                 borderWidth: 1,
                 borderColor: AppColors_1.AppColors.grayBorderSecondary,
                 gap: 4,
             }}>
           {renderSettingRow({
-                icon: <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={16}/>,
-                label: 'Auto-refresh Store',
-                description: 'Automatically capture Redux store state updates',
+                icon: <NetworkIcons_1.ReduxIcon color={AppColors_1.AppColors.purple} size={16}/>,
+                label: t('settings.redux.autoRefresh'),
+                description: t('settings.redux.autoRefreshDescription'),
                 onPress: () => setReduxAutoRefreshState(prev => !prev),
                 right: (<react_native_1.View style={{
                         width: 22,
@@ -1421,8 +1819,8 @@ const SettingsPanel = () => {
           <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
           {renderSettingRow({
                 icon: <NetworkIcons_1.LayersIcon color={AppColors_1.AppColors.purple} size={16}/>,
-                label: 'Default JSON Expand Depth',
-                description: 'Initial depth of Redux state tree to auto-expand',
+                label: t('settings.redux.defaultJsonExpandDepth'),
+                description: t('settings.redux.defaultJsonExpandDepthDescription'),
                 picker: {
                     options: [1, 2, 3, 5],
                     selectedValue: reduxExpandDepth,
@@ -1434,27 +1832,26 @@ const SettingsPanel = () => {
 
         <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
-                borderRadius: 12,
+                borderRadius: 14,
                 borderWidth: 1,
                 borderColor: AppColors_1.AppColors.grayBorderSecondary,
                 padding: 16,
-                marginTop: 12,
             }}>
           {renderSettingRow({
                 icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
-                label: 'Clear Redux State',
+                label: t('settings.redux.clearReduxState'),
                 description: reduxState
-                    ? 'Reset state snapshot in inspector'
-                    : 'No store snapshot stored',
+                    ? t('settings.redux.clearReduxStateDescription')
+                    : t('settings.redux.clearReduxStateEmpty'),
                 isLast: true,
                 onPress: () => {
                     setReduxState(null);
-                    react_native_1.Alert.alert('Success', 'Redux state snapshot cleared.');
+                    react_native_1.Alert.alert(t('common.success'), t('settings.redux.reduxStateCleared'));
                 },
                 right: (<react_native_1.View style={{
-                        paddingHorizontal: 10,
-                        paddingVertical: 5,
-                        borderRadius: 7,
+                        paddingHorizontal: 12,
+                        paddingVertical: 6,
+                        borderRadius: 8,
                         backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
                         borderWidth: 1,
                         borderColor: `${AppColors_1.AppColors.errorColor}33`,
@@ -1462,9 +1859,10 @@ const SettingsPanel = () => {
                 <react_native_1.Text style={{
                         fontFamily: AppFonts_1.AppFonts.interBold,
                         fontSize: 11,
+                        lineHeight: 14,
                         color: AppColors_1.AppColors.errorColor,
                     }}>
-                  Clear
+                  {t('common.clear')}
                 </react_native_1.Text>
               </react_native_1.View>),
             })}
@@ -1472,22 +1870,22 @@ const SettingsPanel = () => {
       </react_native_1.ScrollView>);
     }
     else if (settingsPage === 'crash') {
-        title = 'Crash Settings';
+        title = t('settings.crash.title');
         icon = <NetworkIcons_1.CrashIcon color={AppColors_1.AppColors.white} size={16}/>;
         rightInfo = `Total: ${crashRecords?.length || 0}`;
-        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
+        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
         <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
                 padding: 16,
-                borderRadius: 12,
+                borderRadius: 14,
                 borderWidth: 1,
                 borderColor: AppColors_1.AppColors.grayBorderSecondary,
                 gap: 4,
             }}>
           {renderSettingRow({
                 icon: <NetworkIcons_1.LayersIcon color={AppColors_1.AppColors.purple} size={16}/>,
-                label: 'Max Crash Logs',
-                description: 'How many crash records to preserve in history',
+                label: t('settings.crash.maxCrashLogs'),
+                description: t('settings.crash.maxCrashLogsDesc'),
                 picker: {
                     options: [25, 50, 100, 200],
                     selectedValue: maxCrashLogs || 100,
@@ -1497,8 +1895,8 @@ const SettingsPanel = () => {
           <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
           {renderSettingRow({
                 icon: <NetworkIcons_1.ShieldAlertIcon color={AppColors_1.AppColors.greenColor} size={16}/>,
-                label: 'Global Crash Guard',
-                description: 'Intercepts native, JS, and render errors directly',
+                label: t('settings.crash.globalGuard'),
+                description: t('settings.crash.globalGuardDesc'),
                 isLast: true,
                 right: (<react_native_1.View style={{
                         paddingHorizontal: 8,
@@ -1509,9 +1907,10 @@ const SettingsPanel = () => {
                 <react_native_1.Text style={{
                         fontFamily: AppFonts_1.AppFonts.interBold,
                         fontSize: 10,
+                        lineHeight: 13,
                         color: AppColors_1.AppColors.greenColor,
                     }}>
-                  PROTECTED
+                  {t('settings.protectedBadge')}
                 </react_native_1.Text>
               </react_native_1.View>),
             })}
@@ -1519,25 +1918,190 @@ const SettingsPanel = () => {
 
         <react_native_1.View style={{
                 backgroundColor: AppColors_1.AppColors.primaryLight,
-                borderRadius: 12,
+                borderRadius: 14,
                 borderWidth: 1,
                 borderColor: AppColors_1.AppColors.grayBorderSecondary,
                 padding: 16,
-                marginTop: 12,
             }}>
           {renderSettingRow({
                 icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
-                label: 'Clear Crash History',
-                description: `${crashRecords?.length || 0} crash logs stored`,
+                label: t('settings.crash.clearHistory'),
+                description: t('settings.crash.clearHistoryDesc', { count: crashRecords?.length || 0 }),
                 isLast: true,
                 onPress: () => {
                     (0, crashHandler_1.clearCrashRecords)();
-                    react_native_1.Alert.alert('Success', 'Crash logs cleared.');
+                    react_native_1.Alert.alert(t('common.success'), t('settings.crash.historyCleared'));
+                },
+                right: (<react_native_1.View style={{
+                        paddingHorizontal: 12,
+                        paddingVertical: 6,
+                        borderRadius: 8,
+                        backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
+                        borderWidth: 1,
+                        borderColor: `${AppColors_1.AppColors.errorColor}33`,
+                    }}>
+                <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 11,
+                        lineHeight: 14,
+                        color: AppColors_1.AppColors.errorColor,
+                    }}>
+                  {t('common.clear')}
+                </react_native_1.Text>
+              </react_native_1.View>),
+            })}
+        </react_native_1.View>
+      </react_native_1.ScrollView>);
+    }
+    else if (settingsPage === 'bundle') {
+        title = t('settings.bundle.title');
+        icon = <NetworkIcons_1.PackageIcon color={AppColors_1.AppColors.white} size={16}/>;
+        rightInfo = 'Metro';
+        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
+        <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                padding: 16,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                gap: 8,
+            }}>
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+            <react_native_1.View style={{
+                width: 36,
+                height: 36,
+                borderRadius: 10,
+                backgroundColor: AppColors_1.AppColors.purpleShade50,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+              <NetworkIcons_1.PackageIcon color={AppColors_1.AppColors.purple} size={16}/>
+            </react_native_1.View>
+            <react_native_1.View style={{ flex: 1 }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 14,
+                lineHeight: 18,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
+                {t('settings.bundle.sourceBundler')}
+              </react_native_1.Text>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors_1.AppColors.grayText,
+                marginTop: 1,
+            }}>
+                {t('settings.bundle.sourceBundlerDesc')}
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                padding: 16,
+            }}>
+          {renderSettingRow({
+                icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
+                label: t('settings.bundle.clearCache'),
+                description: t('settings.bundle.clearCacheDesc'),
+                isLast: true,
+                onPress: () => {
+                    (0, bundleAnalyzer_1.clearCachedBundleAnalysis)();
+                    react_native_1.Alert.alert(t('common.success'), t('settings.bundle.cacheCleared'));
+                },
+                right: (<react_native_1.View style={{
+                        paddingHorizontal: 12,
+                        paddingVertical: 6,
+                        borderRadius: 8,
+                        backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
+                        borderWidth: 1,
+                        borderColor: `${AppColors_1.AppColors.errorColor}33`,
+                    }}>
+                <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 11,
+                        lineHeight: 14,
+                        color: AppColors_1.AppColors.errorColor,
+                    }}>
+                  {t('common.clear')}
+                </react_native_1.Text>
+              </react_native_1.View>),
+            })}
+        </react_native_1.View>
+      </react_native_1.ScrollView>);
+    }
+    else if (settingsPage === 'performance') {
+        title = t('settings.performance.title');
+        icon = <NetworkIcons_1.PerformanceIcon color={AppColors_1.AppColors.white} size={16}/>;
+        rightInfo = '60 FPS Target';
+        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 12 }}>
+        <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                padding: 16,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                gap: 8,
+            }}>
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
+            <react_native_1.View style={{
+                width: 36,
+                height: 36,
+                borderRadius: 10,
+                backgroundColor: AppColors_1.AppColors.purpleShade50,
+                alignItems: 'center',
+                justifyContent: 'center',
+            }}>
+              <NetworkIcons_1.PerformanceIcon color={AppColors_1.AppColors.purple} size={16}/>
+            </react_native_1.View>
+            <react_native_1.View style={{ flex: 1 }}>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 14,
+                lineHeight: 18,
+                color: AppColors_1.AppColors.primaryBlack,
+            }}>
+                {t('settings.performance.frameMeasurement')}
+              </react_native_1.Text>
+              <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 11,
+                lineHeight: 15,
+                color: AppColors_1.AppColors.grayText,
+                marginTop: 1,
+            }}>
+                {t('settings.performance.frameMeasurementDesc')}
+              </react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 14,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                padding: 16,
+            }}>
+          {renderSettingRow({
+                icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
+                label: t('settings.performance.clearEvents'),
+                description: t('settings.performance.clearEventsDesc'),
+                isLast: true,
+                onPress: () => {
+                    (0, performanceTracker_1.clearPerformanceEvents)();
+                    react_native_1.Alert.alert(t('common.success'), t('settings.performance.eventsCleared'));
                 },
                 right: (<react_native_1.View style={{
-                        paddingHorizontal: 10,
-                        paddingVertical: 5,
-                        borderRadius: 7,
+                        paddingHorizontal: 12,
+                        paddingVertical: 6,
+                        borderRadius: 8,
                         backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
                         borderWidth: 1,
                         borderColor: `${AppColors_1.AppColors.errorColor}33`,
@@ -1545,29 +2109,33 @@ const SettingsPanel = () => {
                 <react_native_1.Text style={{
                         fontFamily: AppFonts_1.AppFonts.interBold,
                         fontSize: 11,
+                        lineHeight: 14,
                         color: AppColors_1.AppColors.errorColor,
                     }}>
-                  Clear
+                  {t('common.clear')}
                 </react_native_1.Text>
               </react_native_1.View>),
             })}
         </react_native_1.View>
       </react_native_1.ScrollView>);
     }
-    return (<react_native_1.View style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }}>
+    return (<react_native_1.View style={{
+            flex: 1,
+            backgroundColor: AppColors_1.AppColors.grayBackground,
+        }}>
       <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, AppColors_1.AppColors.brandPurple]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles_1.default.headerGradient}>
         <react_native_1.View style={{ paddingTop: headerTopPadding, width: '100%' }}>
           <react_native_1.View style={[styles_1.default.header, { paddingHorizontal: 16, gap: 12 }]}>
-          <TouchableScale_1.default onPress={goBackToMain} hitSlop={12} style={{
+            <TouchableScale_1.default accessible={true} accessibilityRole="button" accessibilityLabel={t('settings.back')} onPress={goBackToMain} hitSlop={12} style={{
             padding: 8,
             borderRadius: 10,
             backgroundColor: `${AppColors_1.AppColors.white}26`,
             borderWidth: 1,
             borderColor: `${AppColors_1.AppColors.white}14`,
         }}>
-            <NetworkIcons_1.WhiteBackNavigation color={AppColors_1.AppColors.white} size={16}/>
-          </TouchableScale_1.default>
-          {icon && (<react_native_1.View style={{
+              <NetworkIcons_1.WhiteBackNavigation color={AppColors_1.AppColors.white} size={16}/>
+            </TouchableScale_1.default>
+            {icon && (<react_native_1.View style={{
                 width: 30,
                 height: 30,
                 borderRadius: 8,
@@ -1575,18 +2143,19 @@ const SettingsPanel = () => {
                 alignItems: 'center',
                 justifyContent: 'center',
             }}>
-              {icon}
-            </react_native_1.View>)}
-          <react_native_1.View style={{ flex: 1 }}>
-            <react_native_1.Text style={{
+                {icon}
+              </react_native_1.View>)}
+            <react_native_1.View style={{ flex: 1 }}>
+              <react_native_1.Text style={{
             fontFamily: AppFonts_1.AppFonts.interBold,
             fontSize: 17,
+            lineHeight: 22,
             color: AppColors_1.AppColors.white,
         }}>
-              {title}
-            </react_native_1.Text>
-          </react_native_1.View>
-          {rightInfo ? (<react_native_1.View style={{
+                {title}
+              </react_native_1.Text>
+            </react_native_1.View>
+            {rightInfo ? (<react_native_1.View style={{
                 backgroundColor: `${AppColors_1.AppColors.white}26`,
                 paddingHorizontal: 8,
                 paddingVertical: 4,
@@ -1594,17 +2163,18 @@ const SettingsPanel = () => {
                 borderWidth: 1,
                 borderColor: `${AppColors_1.AppColors.white}1A`,
             }}>
-              <react_native_1.Text style={{
+                <react_native_1.Text style={{
                 fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: 11,
+                lineHeight: 14,
                 color: AppColors_1.AppColors.white,
             }}>
-                {rightInfo}
-              </react_native_1.Text>
-            </react_native_1.View>) : null}
+                  {rightInfo}
+                </react_native_1.Text>
+              </react_native_1.View>) : null}
+          </react_native_1.View>
         </react_native_1.View>
-      </react_native_1.View>
-    </react_native_linear_gradient_1.default>
+      </react_native_linear_gradient_1.default>
       {content}
     </react_native_1.View>);
 };