react-native-inapp-inspector 1.1.13 → 1.1.15

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

@@ -0,0 +1,757 @@
+"use strict";
+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_native_1 = require("react-native");
+const InspectorContext_1 = require("./InspectorContext");
+const TouchableScale_1 = __importDefault(require("../TouchableScale"));
+const AnimatedEntrance_1 = __importDefault(require("../AnimatedEntrance"));
+const EmptyState_1 = __importDefault(require("../EmptyState"));
+const HighlightText_1 = __importDefault(require("../HighlightText"));
+const CodeSnippet_1 = __importDefault(require("../CodeSnippet"));
+const CopyButton_1 = __importDefault(require("../CopyButton"));
+const styles_1 = __importDefault(require("../../styles"));
+const AppColors_1 = require("../../styles/AppColors");
+const AppFonts_1 = require("../../styles/AppFonts");
+const webViewLogger_1 = require("../../customHooks/webViewLogger");
+const NetworkIcons_1 = require("../NetworkIcons");
+let OriginalWebView = null;
+try {
+    const RNWebView = require('react-native-webview');
+    OriginalWebView = RNWebView.WebView || RNWebView.default;
+}
+catch (e) {
+    // Silent fail
+}
+const previewInspectScript = `
+(function() {
+  var style = document.createElement('style');
+  style.innerHTML = '* { cursor: pointer !important; }';
+  document.head.appendChild(style);
+
+  document.addEventListener('click', function(e) {
+    var el = e.target;
+    if (!el) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    var oldOutline = el.style.outline;
+    var oldTransition = el.style.transition;
+    el.style.transition = 'outline 0.15s ease';
+    el.style.outline = '3px solid #684B9B';
+    setTimeout(function() {
+      el.style.outline = oldOutline;
+      el.style.transition = oldTransition;
+    }, 600);
+
+    var tagName = el.tagName.toLowerCase();
+    var searchStr = '<' + tagName;
+    
+    if (el.id) {
+      searchStr += ' id="' + el.id + '"';
+    } else if (el.className && typeof el.className === 'string') {
+      var firstClass = el.className.trim().split(/\\s+/)[0];
+      if (firstClass) {
+        searchStr += ' class="' + firstClass;
+      }
+    } else {
+      var text = (el.textContent || '').trim().substring(0, 25);
+      if (text) {
+        searchStr = text;
+      }
+    }
+
+    if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
+      window.ReactNativeWebView.postMessage(JSON.stringify({
+        type: 'preview-inspect',
+        tagName: tagName,
+        id: el.id || '',
+        className: typeof el.className === 'string' ? el.className : '',
+        searchStr: searchStr
+      }));
+    }
+  }, true);
+})();
+true;
+`;
+const WebViewTab = () => {
+    const { webViewNavHistory, webViewSearch, webViewSubTab, setWebViewSubTab, webViewLogs, webViewHtml, webViewCss, webViewJs, webViewHtmlUrl, htmlSubTab, setHtmlSubTab, isHtmlTabReady, inspectedElement, setInspectedElement, getSearchTermForTab, filteredNavHistory, isDark, } = (0, InspectorContext_1.useInspector)();
+    if (webViewNavHistory.length === 0) {
+        return (<react_native_1.View style={styles_1.default.emptyContainer}>
+        <react_native_1.View style={styles_1.default.emptyIconWrap}>
+          <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.purple} size={32}/>
+        </react_native_1.View>
+        <react_native_1.Text style={styles_1.default.emptyTitle}>
+          No WebView Activity
+        </react_native_1.Text>
+        <react_native_1.Text style={styles_1.default.emptySub}>
+          Load a webpage within a connected WebView component to
+          inspect pages, page source, and console logs.
+        </react_native_1.Text>
+      </react_native_1.View>);
+    }
+    return (<react_native_1.View style={{ flex: 1 }}>
+      {/* ─── Current Page Address Bar (Now on top) ─── */}
+      {(() => {
+            const currentUrl = webViewNavHistory[0]?.url;
+            if (!currentUrl)
+                return null;
+            return (<react_native_1.View style={{
+                    paddingHorizontal: 12,
+                    paddingTop: 6,
+                    paddingBottom: 6,
+                    backgroundColor: AppColors_1.AppColors.primaryLight,
+                    borderBottomWidth: 1,
+                    borderBottomColor: AppColors_1.AppColors.dividerColor,
+                }}>
+            <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderRadius: 8,
+                    borderWidth: 1.5,
+                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                    paddingHorizontal: 10,
+                    paddingVertical: 5,
+                    gap: 8,
+                }}>
+              {/* Left: Lock and HTTPS label */}
+              <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 4,
+                }}>
+                <react_native_1.Text style={{ fontSize: 11 }}>🔒</react_native_1.Text>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9.5,
+                    color: AppColors_1.AppColors.greenColor,
+                    letterSpacing: 0.5,
+                }}>
+                  HTTPS
+                </react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={{
+                    width: 1.5,
+                    height: 12,
+                    backgroundColor: AppColors_1.AppColors.grayBorderSecondary,
+                }}/>
+
+              {/* Middle: URL text (Address style) */}
+              <react_native_1.View style={{ flex: 1 }}>
+                <HighlightText_1.default text={currentUrl} search={webViewSearch} numberOfLines={1} ellipsizeMode="tail" style={{
+                    fontFamily: AppFonts_1.AppFonts.interMedium,
+                    fontSize: 11.5,
+                    color: AppColors_1.AppColors.primaryBlack,
+                }} highlightStyle={styles_1.default.highlight} detectLinks={false}/>
+              </react_native_1.View>
+
+              {/* Right: Copy Button */}
+              <CopyButton_1.default value={currentUrl} label="URL"/>
+
+              {/* Right: Globe Icon button to open browser */}
+              <TouchableScale_1.default onPress={() => react_native_1.Linking.openURL(currentUrl)} hitSlop={8} style={{
+                    width: 26,
+                    height: 26,
+                    borderRadius: 13,
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}>
+                <NetworkIcons_1.GlobeIcon size={11} color={AppColors_1.AppColors.purple}/>
+              </TouchableScale_1.default>
+            </react_native_1.View>
+          </react_native_1.View>);
+        })()}
+
+      {/* ─── WebView Sub-Tabs (Now below Address Bar) ─── */}
+      <react_native_1.View style={{
+            backgroundColor: AppColors_1.AppColors.primaryLight,
+            borderBottomWidth: 1,
+            borderBottomColor: AppColors_1.AppColors.dividerColor,
+            paddingVertical: 6,
+        }}>
+        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+            paddingHorizontal: 12,
+            flexDirection: 'row',
+            gap: 8,
+        }}>
+          {/* Sub-tab 1: Preview */}
+          <react_native_1.Pressable style={[
+            {
+                paddingVertical: 6,
+                paddingHorizontal: 14,
+                borderRadius: 8,
+                alignItems: 'center',
+                flexDirection: 'row',
+                gap: 6,
+                backgroundColor: 'rgba(0, 0, 0, 0.03)',
+                borderWidth: 1,
+                borderColor: 'transparent',
+            },
+            webViewSubTab === 'preview' && {
+                backgroundColor: AppColors_1.AppColors.purple,
+                borderColor: AppColors_1.AppColors.purple,
+            },
+        ]} onPress={() => {
+            (0, InspectorContext_1.animateNextLayout)();
+            setWebViewSubTab('preview');
+        }}>
+            <NetworkIcons_1.EyeIcon color={webViewSubTab === 'preview'
+            ? '#FFFFFF'
+            : AppColors_1.AppColors.grayTextWeak} size={13}/>
+            <react_native_1.Text style={{
+            fontFamily: webViewSubTab === 'preview'
+                ? AppFonts_1.AppFonts.interBold
+                : AppFonts_1.AppFonts.interMedium,
+            fontSize: 12,
+            color: webViewSubTab === 'preview'
+                ? '#FFFFFF'
+                : AppColors_1.AppColors.grayTextStrong,
+        }}>
+              Preview
+            </react_native_1.Text>
+          </react_native_1.Pressable>
+
+          {/* Sub-tab 2: Page Source */}
+          <react_native_1.Pressable style={[
+            {
+                paddingVertical: 6,
+                paddingHorizontal: 14,
+                borderRadius: 8,
+                alignItems: 'center',
+                flexDirection: 'row',
+                gap: 6,
+                backgroundColor: 'rgba(0, 0, 0, 0.03)',
+                borderWidth: 1,
+                borderColor: 'transparent',
+            },
+            webViewSubTab === 'html' && {
+                backgroundColor: AppColors_1.AppColors.purple,
+                borderColor: AppColors_1.AppColors.purple,
+            },
+        ]} onPress={() => {
+            (0, InspectorContext_1.animateNextLayout)();
+            setWebViewSubTab('html');
+        }}>
+            <NetworkIcons_1.HtmlIcon color={webViewSubTab === 'html'
+            ? '#FFFFFF'
+            : AppColors_1.AppColors.grayTextWeak} size={13}/>
+            <react_native_1.Text style={{
+            fontFamily: webViewSubTab === 'html'
+                ? AppFonts_1.AppFonts.interBold
+                : AppFonts_1.AppFonts.interMedium,
+            fontSize: 12,
+            color: webViewSubTab === 'html'
+                ? '#FFFFFF'
+                : AppColors_1.AppColors.grayTextStrong,
+        }}>
+              Page Source
+            </react_native_1.Text>
+          </react_native_1.Pressable>
+
+          {/* Sub-tab 3: History */}
+          <react_native_1.Pressable style={[
+            {
+                paddingVertical: 6,
+                paddingHorizontal: 14,
+                borderRadius: 8,
+                alignItems: 'center',
+                flexDirection: 'row',
+                gap: 6,
+                backgroundColor: 'rgba(0, 0, 0, 0.03)',
+                borderWidth: 1,
+                borderColor: 'transparent',
+            },
+            webViewSubTab === 'navigation' && {
+                backgroundColor: AppColors_1.AppColors.purple,
+                borderColor: AppColors_1.AppColors.purple,
+            },
+        ]} onPress={() => {
+            (0, InspectorContext_1.animateNextLayout)();
+            setWebViewSubTab('navigation');
+        }}>
+            <NetworkIcons_1.ClockIcon color={webViewSubTab === 'navigation'
+            ? '#FFFFFF'
+            : AppColors_1.AppColors.grayTextWeak} size={13}/>
+            <react_native_1.Text style={{
+            fontFamily: webViewSubTab === 'navigation'
+                ? AppFonts_1.AppFonts.interBold
+                : AppFonts_1.AppFonts.interMedium,
+            fontSize: 12,
+            color: webViewSubTab === 'navigation'
+                ? '#FFFFFF'
+                : AppColors_1.AppColors.grayTextStrong,
+        }}>
+              History ({webViewNavHistory.length})
+            </react_native_1.Text>
+          </react_native_1.Pressable>
+
+          {/* Sub-tab 4: Console */}
+          <react_native_1.Pressable style={[
+            {
+                paddingVertical: 6,
+                paddingHorizontal: 14,
+                borderRadius: 8,
+                alignItems: 'center',
+                flexDirection: 'row',
+                gap: 6,
+                backgroundColor: 'rgba(0, 0, 0, 0.03)',
+                borderWidth: 1,
+                borderColor: 'transparent',
+            },
+            webViewSubTab === 'console' && {
+                backgroundColor: AppColors_1.AppColors.purple,
+                borderColor: AppColors_1.AppColors.purple,
+            },
+        ]} onPress={() => {
+            (0, InspectorContext_1.animateNextLayout)();
+            setWebViewSubTab('console');
+        }}>
+            <NetworkIcons_1.TerminalIcon color={webViewSubTab === 'console'
+            ? '#FFFFFF'
+            : AppColors_1.AppColors.grayTextWeak} size={13}/>
+            <react_native_1.Text style={{
+            fontFamily: webViewSubTab === 'console'
+                ? AppFonts_1.AppFonts.interBold
+                : AppFonts_1.AppFonts.interMedium,
+            fontSize: 12,
+            color: webViewSubTab === 'console'
+                ? '#FFFFFF'
+                : AppColors_1.AppColors.grayTextStrong,
+        }}>
+              Console ({webViewLogs.length})
+            </react_native_1.Text>
+          </react_native_1.Pressable>
+        </react_native_1.ScrollView>
+      </react_native_1.View>
+
+      {webViewSubTab === 'html' ? (<react_native_1.View style={{ flex: 1 }}>
+          {webViewHtml || webViewCss || webViewJs ? (<react_native_1.View style={{ flex: 1 }}>
+              {/* Clear Inspect Banner */}
+              {inspectedElement && (<react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        backgroundColor: AppColors_1.AppColors.purpleShade50,
+                        paddingHorizontal: 12,
+                        paddingVertical: 6,
+                        borderBottomWidth: 1,
+                        borderBottomColor: AppColors_1.AppColors.dividerColor,
+                    }}>
+                  <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interMedium,
+                        fontSize: 11.5,
+                        color: AppColors_1.AppColors.purple,
+                        flex: 1,
+                    }}>
+                    Inspecting element:{' '}
+                    <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                    }}>
+                      &lt;{inspectedElement.tagName}
+                      {inspectedElement.id
+                        ? ` id="${inspectedElement.id}"`
+                        : ''}
+                      {inspectedElement.className
+                        ? ` class="${inspectedElement.className
+                            .trim()
+                            .split(/\s+/)[0]}"`
+                        : ''}
+                      &gt;
+                    </react_native_1.Text>
+                  </react_native_1.Text>
+                  <react_native_1.Pressable onPress={() => setInspectedElement(null)} style={{
+                        paddingHorizontal: 8,
+                        paddingVertical: 4,
+                    }}>
+                    <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 11,
+                        color: AppColors_1.AppColors.purple,
+                    }}>
+                      Clear Inspect
+                    </react_native_1.Text>
+                  </react_native_1.Pressable>
+                </react_native_1.View>)}
+
+              {/* Inner sub-tabs inside HTML source view */}
+              <react_native_1.View style={{
+                    flexDirection: 'row',
+                    borderBottomWidth: 1,
+                    borderBottomColor: AppColors_1.AppColors.dividerColor,
+                    backgroundColor: AppColors_1.AppColors.primaryLight,
+                    paddingHorizontal: 12,
+                    gap: 12,
+                }}>
+                {['html', 'css', 'javascript'].map(tab => {
+                    const active = htmlSubTab === tab;
+                    const label = tab === 'html'
+                        ? 'HTML'
+                        : tab === 'css'
+                            ? 'CSS'
+                            : 'JavaScript';
+                    const activeColor = tab === 'html'
+                        ? '#EA580C' // Orange
+                        : tab === 'css'
+                            ? '#2563EB' // Blue
+                            : '#D97706'; // Dark Yellow/Amber
+                    return (<react_native_1.Pressable key={tab} onPress={() => {
+                            (0, InspectorContext_1.animateNextLayout)();
+                            setHtmlSubTab(tab);
+                        }} style={{
+                            paddingVertical: 8,
+                            paddingHorizontal: 4,
+                            borderBottomWidth: 2,
+                            borderBottomColor: active
+                                ? activeColor
+                                : 'transparent',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 4,
+                        }}>
+                        {tab === 'html' && (<NetworkIcons_1.HtmlIcon color={active
+                                ? activeColor
+                                : AppColors_1.AppColors.grayTextWeak} size={14}/>)}
+                        {tab === 'css' && (<NetworkIcons_1.CssIcon color={active
+                                ? activeColor
+                                : AppColors_1.AppColors.grayTextWeak} size={14}/>)}
+                        {tab === 'javascript' && (<NetworkIcons_1.JsIcon color={active
+                                ? activeColor
+                                : AppColors_1.AppColors.grayTextWeak} size={14}/>)}
+                        <react_native_1.Text style={{
+                            fontFamily: active
+                                ? AppFonts_1.AppFonts.interBold
+                                : AppFonts_1.AppFonts.interMedium,
+                            fontSize: 13,
+                            color: active
+                                ? activeColor
+                                : AppColors_1.AppColors.grayTextWeak,
+                        }}>
+                          {label}
+                        </react_native_1.Text>
+                      </react_native_1.Pressable>);
+                })}
+              </react_native_1.View>
+              <react_native_1.View style={{ flex: 1, padding: 12 }}>
+                {!isHtmlTabReady ? (<react_native_1.View style={{
+                        flex: 1,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        minHeight: 200,
+                    }}>
+                    <react_native_1.ActivityIndicator size="large" color={AppColors_1.AppColors.purple}/>
+                  </react_native_1.View>) : htmlSubTab === 'html' ? (webViewHtml ? (<CodeSnippet_1.default code={webViewHtml} language="html" search={getSearchTermForTab()}/>) : (<react_native_1.Text style={{
+                        fontFamily: 'monospace',
+                        fontSize: 11,
+                        color: '#94A3B8',
+                        padding: 12,
+                    }}>
+                      No HTML content captured.
+                    </react_native_1.Text>)) : htmlSubTab === 'css' ? (webViewCss ? (<CodeSnippet_1.default code={webViewCss} language="css" search={getSearchTermForTab()}/>) : (<react_native_1.Text style={{
+                        fontFamily: 'monospace',
+                        fontSize: 11,
+                        color: '#94A3B8',
+                        padding: 12,
+                    }}>
+                      No CSS styles detected on this page.
+                    </react_native_1.Text>)) : webViewJs ? (<CodeSnippet_1.default code={webViewJs} language="javascript" search={getSearchTermForTab()}/>) : (<react_native_1.Text style={{
+                        fontFamily: 'monospace',
+                        fontSize: 11,
+                        color: '#94A3B8',
+                        padding: 12,
+                    }}>
+                    No scripts detected on this page.
+                  </react_native_1.Text>)}
+              </react_native_1.View>
+            </react_native_1.View>) : (<react_native_1.View style={styles_1.default.emptyContainer}>
+              <react_native_1.View style={styles_1.default.emptyIconWrap}>
+                <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.purple} size={32}/>
+              </react_native_1.View>
+              <react_native_1.Text style={styles_1.default.emptyTitle}>
+                No Page Source Captured
+              </react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.emptySub}>
+                Load a page in the WebView to inspect its
+                HTML, CSS, or Javascript source.
+              </react_native_1.Text>
+            </react_native_1.View>)}
+        </react_native_1.View>) : webViewSubTab === 'navigation' ? (<react_native_1.FlatList data={filteredNavHistory} keyExtractor={(item, index) => `${index}-${item.timestamp}`} style={{
+                flex: 1,
+                backgroundColor: AppColors_1.AppColors.grayBackground,
+            }} ListHeaderComponent={<react_native_1.View style={{
+                    paddingHorizontal: 16,
+                    paddingTop: 12,
+                    paddingBottom: 8,
+                }}>
+              <react_native_1.Text style={styles_1.default.resultCount}>
+                Navigation History ({webViewNavHistory.length}
+                )
+              </react_native_1.Text>
+            </react_native_1.View>} renderItem={({ item, index, }) => {
+                const isLatest = index === 0;
+                const formatNavTime = (ts) => {
+                    const d = new Date(ts);
+                    return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
+                };
+                return (<AnimatedEntrance_1.default index={index} distance={8} style={{
+                        marginHorizontal: 16,
+                        marginVertical: 6,
+                        borderRadius: 12,
+                        borderWidth: 1,
+                        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                        backgroundColor: isLatest
+                            ? AppColors_1.AppColors.purpleShade50
+                            : AppColors_1.AppColors.primaryLight,
+                        padding: 14,
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        gap: 12,
+                        shadowColor: '#000000',
+                        shadowOffset: { width: 0, height: 2 },
+                        shadowOpacity: isDark ? 0.2 : 0.04,
+                        shadowRadius: 4,
+                        elevation: 2,
+                    }}>
+                <react_native_1.View style={{ flex: 1, gap: 8 }}>
+                  {/* Top row: Title and Badge */}
+                  <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 8,
+                        flexWrap: 'wrap',
+                    }}>
+                    <react_native_1.Text numberOfLines={1} ellipsizeMode="tail" style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 14,
+                        color: AppColors_1.AppColors.primaryBlack,
+                        flexShrink: 1,
+                    }}>
+                      {item.title || 'Untitled Page'}
+                    </react_native_1.Text>
+                    {isLatest && (<react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: 4,
+                            backgroundColor: AppColors_1.AppColors.greenStatus,
+                            paddingHorizontal: 8,
+                            paddingVertical: 3,
+                            borderRadius: 12,
+                        }}>
+                        <react_native_1.View style={{
+                            width: 6,
+                            height: 6,
+                            borderRadius: 3,
+                            backgroundColor: AppColors_1.AppColors.greenBaggageText,
+                        }}/>
+                        <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 9.5,
+                            color: AppColors_1.AppColors.greenBaggageText,
+                        }}>
+                          Active
+                        </react_native_1.Text>
+                      </react_native_1.View>)}
+                  </react_native_1.View>
+
+                  {/* Middle row: URL with Globe Icon */}
+                  <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 6,
+                    }}>
+                    <NetworkIcons_1.GlobeIcon size={12} color={AppColors_1.AppColors.grayTextWeak}/>
+                    <HighlightText_1.default text={item.url} search={webViewSearch} numberOfLines={2} ellipsizeMode="tail" style={{
+                        fontFamily: AppFonts_1.AppFonts.interRegular,
+                        fontSize: 12,
+                        color: AppColors_1.AppColors.grayText,
+                        flex: 1,
+                    }} highlightStyle={styles_1.default.highlight} detectLinks={true}/>
+                  </react_native_1.View>
+
+                  {/* Bottom row: Time */}
+                  <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 6,
+                    }}>
+                    <NetworkIcons_1.ClockIcon size={11} color={AppColors_1.AppColors.grayTextWeak}/>
+                    <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interRegular,
+                        fontSize: 11,
+                        color: AppColors_1.AppColors.grayTextWeak,
+                    }}>
+                      {formatNavTime(item.timestamp)}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+                <CopyButton_1.default value={item.url} label="URL"/>
+              </AnimatedEntrance_1.default>);
+            }} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState_1.default isSearch={webViewSearch.length > 0}/>} contentContainerStyle={[
+                styles_1.default.listContent,
+                filteredNavHistory.length === 0 && {
+                    flexGrow: 1,
+                },
+            ]} keyboardShouldPersistTaps="handled"/>) : webViewSubTab === 'console' ? (<react_native_1.View style={{
+                flex: 1,
+                backgroundColor: AppColors_1.AppColors.grayBackground,
+            }}>
+          {webViewLogs.length > 0 ? (<react_native_1.FlatList data={webViewLogs} keyExtractor={(item) => String(item.id)} style={{ flex: 1 }} ListHeaderComponent={<react_native_1.View style={{
+                        paddingHorizontal: 16,
+                        paddingTop: 12,
+                        paddingBottom: 8,
+                        flexDirection: 'row',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                    }}>
+                  <react_native_1.Text style={styles_1.default.resultCount}>
+                    Console Logs ({webViewLogs.length})
+                  </react_native_1.Text>
+                  <TouchableScale_1.default onPress={() => (0, webViewLogger_1.clearWebViewData)()} style={{
+                        padding: 6,
+                        borderRadius: 6,
+                        backgroundColor: AppColors_1.AppColors.primaryLight,
+                        borderWidth: 1,
+                        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                    }}>
+                    <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={14}/>
+                  </TouchableScale_1.default>
+                </react_native_1.View>} renderItem={({ item }) => {
+                    const logColor = item.type === 'error'
+                        ? AppColors_1.AppColors.errorColor
+                        : item.type === 'warn'
+                            ? AppColors_1.AppColors.warningIconGold
+                            : item.type === 'info'
+                                ? AppColors_1.AppColors.skyBlue
+                                : AppColors_1.AppColors.grayTextWeak;
+                    const bgColor = item.type === 'error'
+                        ? 'rgba(255, 46, 87, 0.06)'
+                        : item.type === 'warn'
+                            ? 'rgba(191, 162, 82, 0.08)'
+                            : AppColors_1.AppColors.primaryLight;
+                    const d = new Date(item.timestamp);
+                    const timeStr = `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
+                    return (<AnimatedEntrance_1.default index={item.id} distance={8} style={{
+                            marginHorizontal: 12,
+                            marginVertical: 3,
+                            borderRadius: 8,
+                            borderWidth: 1,
+                            borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                            borderLeftWidth: 3,
+                            borderLeftColor: logColor,
+                            backgroundColor: bgColor,
+                            padding: 10,
+                            flexDirection: 'row',
+                            gap: 8,
+                            alignItems: 'flex-start',
+                        }}>
+                    <react_native_1.View style={{ paddingTop: 1 }}>
+                      <NetworkIcons_1.TerminalIcon color={logColor} size={11}/>
+                    </react_native_1.View>
+                    <react_native_1.View style={{ flex: 1, gap: 3 }}>
+                      <react_native_1.View style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                        }}>
+                        <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 10,
+                            color: logColor,
+                            textTransform: 'uppercase',
+                            letterSpacing: 0.5,
+                        }}>
+                          {item.type}
+                        </react_native_1.Text>
+                        <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interRegular,
+                            fontSize: 10,
+                            color: AppColors_1.AppColors.grayTextWeak,
+                        }}>
+                          {timeStr}
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                      <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interRegular,
+                            fontSize: 12,
+                            color: AppColors_1.AppColors.primaryBlack,
+                            lineHeight: 16,
+                        }}>
+                        {item.message}
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </AnimatedEntrance_1.default>);
+                }} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={7} contentContainerStyle={[
+                    styles_1.default.listContent,
+                    webViewLogs.length === 0 && { flexGrow: 1 },
+                ]}/>) : (<react_native_1.View style={styles_1.default.emptyContainer}>
+              <react_native_1.View style={styles_1.default.emptyIconWrap}>
+                <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={32}/>
+              </react_native_1.View>
+              <react_native_1.Text style={styles_1.default.emptyTitle}>
+                No Console Logs
+              </react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.emptySub}>
+                Console logs from the WebView will appear
+                here.
+              </react_native_1.Text>
+            </react_native_1.View>)}
+        </react_native_1.View>) : (<react_native_1.View style={{
+                flex: 1,
+                backgroundColor: AppColors_1.AppColors.grayBackground,
+            }}>
+          {webViewHtml ? (OriginalWebView ? (<OriginalWebView source={{
+                    html: webViewHtml,
+                    baseUrl: webViewHtmlUrl,
+                }} injectedJavaScript={previewInspectScript} onMessage={(event) => {
+                    try {
+                        const data = JSON.parse(event.nativeEvent.data);
+                        if (data.type === 'preview-inspect') {
+                            setInspectedElement({
+                                tagName: data.tagName,
+                                id: data.id,
+                                className: data.className,
+                                searchStr: data.searchStr,
+                            });
+                            setWebViewSubTab('html');
+                            setHtmlSubTab('html');
+                        }
+                    }
+                    catch (err) { }
+                }} style={{ flex: 1 }}/>) : (<react_native_1.View style={{
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    padding: 20,
+                }}>
+                <react_native_1.Text style={{
+                    color: AppColors_1.AppColors.grayText,
+                    textAlign: 'center',
+                    fontFamily: AppFonts_1.AppFonts.interMedium,
+                }}>
+                  react-native-webview is not installed in the
+                  target project. Install it to enable Preview
+                  mode.
+                </react_native_1.Text>
+              </react_native_1.View>)) : (<react_native_1.View style={styles_1.default.emptyContainer}>
+              <react_native_1.View style={styles_1.default.emptyIconWrap}>
+                <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.purple} size={32}/>
+              </react_native_1.View>
+              <react_native_1.Text style={styles_1.default.emptyTitle}>
+                No Preview Available
+              </react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.emptySub}>
+                Load a page in the WebView to see its visual
+                preview.
+              </react_native_1.Text>
+            </react_native_1.View>)}
+        </react_native_1.View>)}
+    </react_native_1.View>);
+};
+exports.default = WebViewTab;