react-native-vconsole 0.3.0 → 0.4.0

package/lib/module/VConsole.js

@@ -1,14 +1,14 @@
 "use strict";
 
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, Clipboard, Dimensions, FlatList, NativeModules, PanResponder, Platform, Pressable, StatusBar, StyleSheet, Text, View, ScrollView } from 'react-native';
+import { Animated, Clipboard, Dimensions, FlatList, Keyboard, NativeModules, PanResponder, Platform, Pressable, TextInput, StatusBar, StyleSheet, Text, ToastAndroid, View, ScrollView } from 'react-native';
 import { clearLogEntries, getLogEntries, installConsoleProxy, subscribeLogEntries, uninstallConsoleProxy } from "./core/consoleProxy.js";
 import { clearNetworkEntries, getNetworkEntries, installXhrProxy, subscribeNetworkEntries, uninstallXhrProxy } from "./core/xhrProxy.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const BUTTON_WIDTH = 88;
 const BUTTON_HEIGHT = 36;
 const PANEL_HEIGHT_RATIO = 7 / 9;
-const EMPTY_FILTER = [];
+const EMPTY_EXCLUDE = {};
 const LOG_SUB_TABS = ['All', 'log', 'info', 'warn', 'error'];
 const ROOT_TABS = ['Log', 'Network', 'System', 'App'];
 const LOG_THEME = {
@@ -45,6 +45,33 @@ function getDisplayValue(value) {
 function copyToClipboard(value) {
   Clipboard.setString(value);
 }
+function copyToClipboardWithFeedback(value) {
+  copyToClipboard(value);
+  if (Platform.OS === 'android') {
+    ToastAndroid.show('Copied', ToastAndroid.SHORT);
+  }
+}
+function formatMemorySize(bytes) {
+  if (typeof bytes !== 'number' || !Number.isFinite(bytes) || bytes < 0) {
+    return '-';
+  }
+  const mb = bytes / (1024 * 1024);
+  if (mb >= 1024) {
+    return `${(mb / 1024).toFixed(2)} GB`;
+  }
+  return `${mb.toFixed(2)} MB`;
+}
+function formatLogTime(timestamp) {
+  const date = new Date(timestamp);
+  if (Number.isNaN(date.getTime())) {
+    return '--:--:--.---';
+  }
+  const hh = String(date.getHours()).padStart(2, '0');
+  const mm = String(date.getMinutes()).padStart(2, '0');
+  const ss = String(date.getSeconds()).padStart(2, '0');
+  const ms = String(date.getMilliseconds()).padStart(3, '0');
+  return `${hh}:${mm}:${ss}.${ms}`;
+}
 function prettyText(value) {
   if (value === undefined) {
     return '';
@@ -58,10 +85,74 @@ function prettyText(value) {
     return String(value);
   }
 }
+function isNetworkErrorEntry(item) {
+  return item.isError === true;
+}
 function buildNetworkCopyText(item) {
   const status = item.status ?? '-';
   const duration = typeof item.durationMs === 'number' ? `${item.durationMs}ms` : '-';
-  return [`${item.method} ${item.url}`, `status ${status} duration ${duration}`, `request headers\n${prettyText(item.requestHeaders)}`, `request body\n${prettyText(item.requestBody)}`, `response headers\n${prettyText(item.responseHeaders)}`, `response data\n${prettyText(item.responseData)}`].join('\n');
+  const isError = isNetworkErrorEntry(item);
+  const segments = [`${item.method} ${item.url}`, `status ${status} duration ${duration}`, `request headers\n${prettyText(item.requestHeaders)}`, `request body\n${prettyText(item.requestBody)}`];
+  if (isError) {
+    segments.push(`error reason\n${item.errorReason ?? 'Network request failed'}`);
+  } else {
+    segments.push(`response headers\n${prettyText(item.responseHeaders)}`);
+    segments.push(`response data\n${prettyText(item.responseData)}`);
+  }
+  return segments.join('\n');
+}
+const FORBIDDEN_RETRY_HEADERS = new Set(['host', 'content-length', 'accept-encoding', 'connection', 'origin', 'referer']);
+function normalizeRetryUrl(rawUrl) {
+  if (!rawUrl) {
+    return '';
+  }
+  if (/^\/\//.test(rawUrl)) {
+    return `https:${rawUrl}`;
+  }
+  return rawUrl;
+}
+function buildRetryHeaders(headers) {
+  const nextHeaders = {};
+  if (!headers) {
+    return nextHeaders;
+  }
+  Object.entries(headers).forEach(([key, value]) => {
+    if (!FORBIDDEN_RETRY_HEADERS.has(key.toLowerCase())) {
+      nextHeaders[key] = value;
+    }
+  });
+  return nextHeaders;
+}
+function buildRetryBody(payload, method) {
+  if (method === 'GET' || method === 'HEAD' || payload == null) {
+    return undefined;
+  }
+  if (typeof payload === 'string') {
+    return payload;
+  }
+  if (typeof payload === 'number' || typeof payload === 'boolean') {
+    return String(payload);
+  }
+  if (typeof FormData !== 'undefined' && payload instanceof FormData) {
+    return payload;
+  }
+  if (typeof URLSearchParams !== 'undefined' && payload instanceof URLSearchParams) {
+    return payload;
+  }
+  if (typeof Blob !== 'undefined' && payload instanceof Blob) {
+    return payload;
+  }
+  if (typeof ArrayBuffer !== 'undefined' && payload instanceof ArrayBuffer) {
+    return payload;
+  }
+  if (ArrayBuffer.isView(payload)) {
+    return payload;
+  }
+  try {
+    return JSON.stringify(payload);
+  } catch {
+    return String(payload);
+  }
 }
 function ObjectTree({
   value,
@@ -77,10 +168,24 @@ function ObjectTree({
   }
   const valueType = typeof value;
   if (valueType !== 'object') {
+    const displayValue = getDisplayValue(value);
+    if (Platform.OS === 'android') {
+      return /*#__PURE__*/_jsx(Pressable, {
+        onLongPress: () => copyToClipboardWithFeedback(displayValue),
+        delayLongPress: 250,
+        android_ripple: {
+          color: '#D0D0D0'
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.valuePrimitive,
+          children: displayValue
+        })
+      });
+    }
     return /*#__PURE__*/_jsx(Text, {
       style: styles.valuePrimitive,
       selectable: true,
-      children: getDisplayValue(value)
+      children: displayValue
     });
   }
   const isArray = Array.isArray(value);
@@ -136,7 +241,7 @@ function useFlatListRefs() {
 }
 export function VConsole({
   enable = true,
-  filter = EMPTY_FILTER
+  exclude = EMPTY_EXCLUDE
 }) {
   const nativeModule = NativeModules.Vconsole;
   const {
@@ -171,6 +276,11 @@ export function VConsole({
   const [logSubTab, setLogSubTab] = useState('All');
   const [logEntries, setLogEntries] = useState([]);
   const [networkEntries, setNetworkEntries] = useState([]);
+  const [logFilterInput, setLogFilterInput] = useState('');
+  const [networkFilterInput, setNetworkFilterInput] = useState('');
+  const [debouncedLogFilter, setDebouncedLogFilter] = useState('');
+  const [debouncedNetworkFilter, setDebouncedNetworkFilter] = useState('');
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
   const [expandedMap, setExpandedMap] = useState({});
   const [systemInfo, setSystemInfo] = useState(null);
   const [appInfo, setAppInfo] = useState(null);
@@ -178,7 +288,8 @@ export function VConsole({
   const panelTranslateY = useRef(new Animated.Value(panelHeight)).current;
   const logListRefs = useFlatListRefs();
   const networkListRef = useRef(null);
-  const normalizedFilter = useMemo(() => filter.map(item => item.trim().toLowerCase()).filter(Boolean), [filter]);
+  const normalizedExcludeDomains = useMemo(() => (exclude.domains ?? []).map(item => item.trim().toLowerCase()).filter(Boolean), [exclude.domains]);
+  const shouldExcludeIp = exclude.ip === true;
   useEffect(() => {
     if (!enable) {
       setPanelVisible(false);
@@ -186,7 +297,8 @@ export function VConsole({
     }
     installConsoleProxy();
     installXhrProxy({
-      filterHosts: normalizedFilter
+      excludeHosts: normalizedExcludeDomains,
+      excludeIp: shouldExcludeIp
     });
     const unsubscribeLog = subscribeLogEntries(setLogEntries);
     const unsubscribeNetwork = subscribeNetworkEntries(setNetworkEntries);
@@ -198,7 +310,7 @@ export function VConsole({
       uninstallConsoleProxy();
       uninstallXhrProxy();
     };
-  }, [enable, normalizedFilter]);
+  }, [enable, normalizedExcludeDomains, shouldExcludeIp]);
   useEffect(() => {
     dragPosition.stopAnimation(value => {
       const nextX = clamp(value.x, minX, maxX);
@@ -221,6 +333,32 @@ export function VConsole({
       nativeModule?.getAppInfo?.().then(result => setAppInfo(result)).catch(() => undefined);
     }
   }, [activeTab, appInfo, nativeModule, panelVisible, systemInfo]);
+  useEffect(() => {
+    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    const showSubscription = Keyboard.addListener(showEvent, event => {
+      setKeyboardHeight(event.endCoordinates?.height ?? 0);
+    });
+    const hideSubscription = Keyboard.addListener(hideEvent, () => {
+      setKeyboardHeight(0);
+    });
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedLogFilter(logFilterInput);
+    }, 1000);
+    return () => clearTimeout(timer);
+  }, [logFilterInput]);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedNetworkFilter(networkFilterInput);
+    }, 1000);
+    return () => clearTimeout(timer);
+  }, [networkFilterInput]);
   const panResponder = useMemo(() => PanResponder.create({
     onMoveShouldSetPanResponder: () => true,
     onPanResponderGrant: () => {
@@ -270,13 +408,27 @@ export function VConsole({
       }
     });
   };
+  const normalizedLogFilter = debouncedLogFilter.trim().toLowerCase();
+  const normalizedNetworkFilter = debouncedNetworkFilter.trim().toLowerCase();
+  const filteredLogEntries = useMemo(() => {
+    if (!normalizedLogFilter) {
+      return logEntries;
+    }
+    return logEntries.filter(item => item.text.toLowerCase().includes(normalizedLogFilter));
+  }, [logEntries, normalizedLogFilter]);
+  const filteredNetworkEntries = useMemo(() => {
+    if (!normalizedNetworkFilter) {
+      return networkEntries;
+    }
+    return networkEntries.filter(item => item.url.toLowerCase().includes(normalizedNetworkFilter));
+  }, [networkEntries, normalizedNetworkFilter]);
   const logDataByTab = useMemo(() => ({
-    All: logEntries,
-    log: logEntries.filter(item => item.level === 'log'),
-    info: logEntries.filter(item => item.level === 'info'),
-    warn: logEntries.filter(item => item.level === 'warn'),
-    error: logEntries.filter(item => item.level === 'error')
-  }), [logEntries]);
+    All: filteredLogEntries,
+    log: filteredLogEntries.filter(item => item.level === 'log'),
+    info: filteredLogEntries.filter(item => item.level === 'info'),
+    warn: filteredLogEntries.filter(item => item.level === 'warn'),
+    error: filteredLogEntries.filter(item => item.level === 'error')
+  }), [filteredLogEntries]);
   const onToggleNode = key => {
     setExpandedMap(prev => ({
       ...prev,
@@ -305,6 +457,27 @@ export function VConsole({
       animated: true
     });
   };
+  const retryNetworkRequest = item => {
+    const method = (item.method || 'GET').toUpperCase();
+    const url = normalizeRetryUrl(item.url);
+    if (!url) {
+      console.error('[vConsole] Retry failed: empty request URL');
+      return;
+    }
+    const headers = buildRetryHeaders(item.requestHeaders);
+    const body = buildRetryBody(item.requestBody, method);
+    const hasContentType = Object.keys(headers).some(key => key.toLowerCase() === 'content-type');
+    if (body && typeof body === 'string' && typeof item.requestBody === 'object' && item.requestBody !== null && !hasContentType) {
+      headers['Content-Type'] = 'application/json';
+    }
+    fetch(url, {
+      method,
+      headers,
+      body: body
+    }).catch(error => {
+      console.error('[vConsole] Retry request failed', error);
+    });
+  };
   const renderRootTab = tab => /*#__PURE__*/_jsx(Pressable, {
     style: [styles.topTabButton, activeTab === tab && styles.topTabButtonActive],
     onPress: () => setActiveTab(tab),
@@ -335,7 +508,10 @@ export function VConsole({
           style: [styles.logLevelText, {
             color: levelTheme.color
           }],
-          children: ["[", item.level.toUpperCase(), "]"]
+          children: ["[", item.level.toUpperCase(), "]", /*#__PURE__*/_jsxs(Text, {
+            style: styles.logTimeText,
+            children: [' ', formatLogTime(item.timestamp)]
+          })]
         }), /*#__PURE__*/_jsx(View, {
           style: styles.logPayload,
           children: item.args.map((arg, index) => /*#__PURE__*/_jsx(ObjectTree, {
@@ -347,10 +523,10 @@ export function VConsole({
         })]
       }), /*#__PURE__*/_jsx(Pressable, {
         style: styles.copyButton,
-        onPress: () => copyToClipboard(item.text),
+        onPress: () => copyToClipboardWithFeedback(item.text),
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.copyButtonText,
-          children: "\u590D\u5236"
+          children: "Copy"
         })
       })]
     });
@@ -358,8 +534,13 @@ export function VConsole({
   const renderNetworkItem = ({
     item
   }) => {
+    const isError = isNetworkErrorEntry(item);
+    const startedTime = formatLogTime(item.startedAt);
+    const finishedTime = typeof item.finishedAt === 'number' ? formatLogTime(item.finishedAt) : '-';
     return /*#__PURE__*/_jsxs(View, {
-      style: styles.listItem,
+      style: [styles.listItem, isError ? {
+        backgroundColor: LOG_THEME.error.backgroundColor
+      } : null],
       children: [/*#__PURE__*/_jsxs(View, {
         style: styles.listItemMain,
         children: [/*#__PURE__*/_jsxs(Text, {
@@ -367,7 +548,10 @@ export function VConsole({
           children: [item.method, " ", item.url]
         }), /*#__PURE__*/_jsxs(Text, {
           style: styles.networkLabel,
-          children: ["Status: ", item.status ?? '-', '   ', "Duration:", ' ', typeof item.durationMs === 'number' ? `${item.durationMs}ms` : '-']
+          children: ["Time: ", startedTime, finishedTime !== '-' ? ` ~ ${finishedTime}` : '', '   ', "Duration:", ' ', typeof item.durationMs === 'number' ? `${item.durationMs}ms` : '-']
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.networkLabel,
+          children: ["Status: ", item.status ?? '-']
         }), /*#__PURE__*/_jsxs(View, {
           style: styles.networkBlock,
           children: [/*#__PURE__*/_jsx(Text, {
@@ -390,44 +574,62 @@ export function VConsole({
             expandedMap: expandedMap,
             onToggle: onToggleNode
           })]
-        }), /*#__PURE__*/_jsxs(View, {
+        }), isError ? /*#__PURE__*/_jsxs(View, {
           style: styles.networkBlock,
           children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.networkLabel,
-            children: "Response Headers"
-          }), /*#__PURE__*/_jsx(ObjectTree, {
-            value: item.responseHeaders,
-            nodeKey: `${item.id}.responseHeaders`,
-            expandedMap: expandedMap,
-            onToggle: onToggleNode
+            style: [styles.networkLabel, styles.networkErrorLabel],
+            children: "Error Reason"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.networkErrorText,
+            children: item.errorReason ?? 'Network request failed'
           })]
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.networkBlock,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.networkLabel,
-            children: "Response Data"
-          }), /*#__PURE__*/_jsx(ScrollView, {
-            horizontal: true,
-            children: /*#__PURE__*/_jsx(ObjectTree, {
-              value: item.responseData ?? '',
-              nodeKey: `${item.id}.responseData`,
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.networkBlock,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.networkLabel,
+              children: "Response Headers"
+            }), /*#__PURE__*/_jsx(ObjectTree, {
+              value: item.responseHeaders,
+              nodeKey: `${item.id}.responseHeaders`,
               expandedMap: expandedMap,
               onToggle: onToggleNode
-            })
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.networkBlock,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.networkLabel,
+              children: "Response Data"
+            }), /*#__PURE__*/_jsx(ScrollView, {
+              horizontal: true,
+              children: /*#__PURE__*/_jsx(ObjectTree, {
+                value: item.responseData ?? '',
+                nodeKey: `${item.id}.responseData`,
+                expandedMap: expandedMap,
+                onToggle: onToggleNode
+              })
+            })]
           })]
         })]
       }), /*#__PURE__*/_jsx(Pressable, {
         style: styles.copyButton,
-        onPress: () => copyToClipboard(buildNetworkCopyText(item)),
+        onPress: () => copyToClipboardWithFeedback(buildNetworkCopyText(item)),
         children: /*#__PURE__*/_jsx(Text, {
           style: styles.copyButtonText,
-          children: "\u590D\u5236"
+          children: "Copy"
+        })
+      }), /*#__PURE__*/_jsx(Pressable, {
+        style: styles.retryButton,
+        onPress: () => retryNetworkRequest(item),
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.retryButtonText,
+          children: "Retry"
         })
       })]
     });
   };
-  const renderLogPanel = () => /*#__PURE__*/_jsxs(View, {
-    style: styles.contentArea,
+  const renderLogPanel = visible => /*#__PURE__*/_jsxs(View, {
+    style: [styles.contentArea, visible ? {} : styles.hidden],
     children: [/*#__PURE__*/_jsx(View, {
       style: styles.subTabRow,
       children: LOG_SUB_TABS.map(tab => /*#__PURE__*/_jsx(Pressable, {
@@ -450,6 +652,16 @@ export function VConsole({
           ItemSeparatorComponent: ListSeparator
         })
       }, tab))
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.filterInputWrap,
+      children: /*#__PURE__*/_jsx(TextInput, {
+        style: styles.filterInput,
+        textAlignVertical: "center",
+        value: logFilterInput,
+        onChangeText: setLogFilterInput,
+        placeholder: "filter...",
+        placeholderTextColor: "#999999"
+      })
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.actionsRow,
       children: [renderActionButton('Clear', () => {
@@ -458,14 +670,23 @@ export function VConsole({
       }), renderActionButton('Top', scrollLogTop), renderActionButton('Bottom', scrollLogBottom), renderActionButton('Hide', closePanel)]
     })]
   });
-  const renderNetworkPanel = () => /*#__PURE__*/_jsxs(View, {
-    style: styles.contentArea,
+  const renderNetworkPanel = visible => /*#__PURE__*/_jsxs(View, {
+    style: [styles.contentArea, visible ? {} : styles.hidden],
     children: [/*#__PURE__*/_jsx(FlatList, {
       ref: networkListRef,
-      data: networkEntries,
+      data: filteredNetworkEntries,
       keyExtractor: item => `network-${item.id}`,
       renderItem: renderNetworkItem,
       ItemSeparatorComponent: ListSeparator
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.filterInputWrap,
+      children: /*#__PURE__*/_jsx(TextInput, {
+        style: styles.filterInput,
+        value: networkFilterInput,
+        onChangeText: setNetworkFilterInput,
+        placeholder: "filter",
+        placeholderTextColor: "#999999"
+      })
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.actionsRow,
       children: [renderActionButton('Clear', () => {
@@ -474,39 +695,39 @@ export function VConsole({
       }), renderActionButton('Top', scrollNetworkTop), renderActionButton('Bottom', scrollNetworkBottom), renderActionButton('Hide', closePanel)]
     })]
   });
-  const renderSystemPanel = () => /*#__PURE__*/_jsxs(View, {
-    style: styles.contentArea,
+  const renderSystemPanel = visible => /*#__PURE__*/_jsxs(View, {
+    style: [styles.contentArea, visible ? {} : styles.hidden],
     children: [/*#__PURE__*/_jsxs(View, {
       style: styles.infoCard,
       children: [/*#__PURE__*/_jsxs(Text, {
         style: styles.infoText,
-        children: ["\u5382\u5546/\u54C1\u724C: ", systemInfo?.manufacturer ?? '-']
+        children: ["Brand: ", systemInfo?.manufacturer ?? '-']
       }), /*#__PURE__*/_jsxs(Text, {
         style: styles.infoText,
-        children: ["\u673A\u578B: ", systemInfo?.model ?? '-']
+        children: ["Model: ", systemInfo?.model ?? '-']
       }), /*#__PURE__*/_jsxs(Text, {
         style: styles.infoText,
-        children: ["\u7CFB\u7EDF\u7248\u672C: ", systemInfo?.osVersion ?? '-']
+        children: ["System Version: ", Platform.OS === 'android' ? 'Android' : 'iOS', ' ', systemInfo?.osVersion ?? '-']
       }), Platform.OS === 'android' ? /*#__PURE__*/_jsxs(Text, {
         style: styles.infoText,
-        children: ["\u7F51\u7EDC\u7C7B\u578B: ", systemInfo?.networkType ?? '-']
+        children: ["Network Type: ", systemInfo?.networkType ?? '-']
       }) : null, Platform.OS === 'android' ? /*#__PURE__*/_jsxs(Text, {
         style: styles.infoText,
-        children: ["\u7F51\u7EDC\u53EF\u8FBE: ", systemInfo?.isNetworkReachable ? 'true' : 'false']
+        children: ["Network Reachable: ", systemInfo?.isNetworkReachable ?? 'unknown']
       }) : null, /*#__PURE__*/_jsxs(Text, {
         style: styles.infoText,
-        children: ["\u603B\u5185\u5B58: ", systemInfo?.totalMemory ?? 0]
+        children: ["Total Memory: ", formatMemorySize(systemInfo?.totalMemory)]
       }), Platform.OS === 'android' ? /*#__PURE__*/_jsxs(Text, {
         style: styles.infoText,
-        children: ["\u53EF\u7528\u5185\u5B58: ", systemInfo?.availableMemory ?? 0]
+        children: ["Available Memory: ", formatMemorySize(systemInfo?.availableMemory)]
       }) : null]
     }), /*#__PURE__*/_jsx(View, {
       style: styles.actionsRow,
       children: renderActionButton('Hide', closePanel)
     })]
   });
-  const renderAppPanel = () => /*#__PURE__*/_jsxs(View, {
-    style: styles.contentArea,
+  const renderAppPanel = visible => /*#__PURE__*/_jsxs(View, {
+    style: [styles.contentArea, visible ? {} : styles.hidden],
     children: [/*#__PURE__*/_jsxs(View, {
       style: styles.infoCard,
       children: [/*#__PURE__*/_jsxs(Text, {
@@ -548,6 +769,7 @@ export function VConsole({
       }), /*#__PURE__*/_jsxs(Animated.View, {
         style: [styles.panel, {
           height: panelHeight,
+          marginBottom: keyboardHeight,
           transform: [{
             translateY: panelTranslateY
           }]
@@ -555,7 +777,7 @@ export function VConsole({
         children: [/*#__PURE__*/_jsx(View, {
           style: styles.topTabRow,
           children: ROOT_TABS.map(renderRootTab)
-        }), activeTab === 'Log' ? renderLogPanel() : null, activeTab === 'Network' ? renderNetworkPanel() : null, activeTab === 'System' ? renderSystemPanel() : null, activeTab === 'App' ? renderAppPanel() : null]
+        }), renderLogPanel(activeTab === 'Log'), renderNetworkPanel(activeTab === 'Network'), renderSystemPanel(activeTab === 'System'), renderAppPanel(activeTab === 'App')]
       })]
     }) : null]
   });
@@ -568,7 +790,7 @@ const styles = StyleSheet.create({
   floatingButton: {
     width: BUTTON_WIDTH,
     height: BUTTON_HEIGHT,
-    borderRadius: 12,
+    borderRadius: 8,
     backgroundColor: '#22A455',
     justifyContent: 'center',
     alignItems: 'center'
@@ -618,7 +840,7 @@ const styles = StyleSheet.create({
   },
   contentArea: {
     flex: 1,
-    paddingBottom: 16
+    paddingBottom: Platform.OS === 'android' ? 42 : 16
   },
   subTabRow: {
     flexDirection: 'row',
@@ -671,6 +893,11 @@ const styles = StyleSheet.create({
     fontWeight: '700',
     marginBottom: 4
   },
+  logTimeText: {
+    fontSize: 11,
+    fontWeight: '400',
+    color: '#888888'
+  },
   logPayload: {
     flex: 1
   },
@@ -688,11 +915,31 @@ const styles = StyleSheet.create({
     fontSize: 11,
     color: '#333333'
   },
+  retryButton: {
+    position: 'absolute',
+    right: 8,
+    top: 40,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#D0D0D0',
+    borderRadius: 6,
+    paddingVertical: 4,
+    paddingHorizontal: 8
+  },
+  retryButtonText: {
+    fontSize: 11,
+    color: '#333333'
+  },
   valuePrimitive: {
     color: '#222222',
     fontSize: 12,
     flexShrink: 1
   },
+  valuePrimitiveInput: {
+    paddingVertical: 0,
+    paddingHorizontal: 0,
+    margin: 0,
+    textAlignVertical: 'top'
+  },
   treeNode: {
     flexDirection: 'column',
     marginBottom: 4
@@ -744,6 +991,32 @@ const styles = StyleSheet.create({
     color: '#444444',
     marginBottom: 2
   },
+  networkErrorLabel: {
+    color: LOG_THEME.error.color,
+    fontWeight: '600'
+  },
+  networkErrorText: {
+    color: LOG_THEME.error.color,
+    fontSize: 12
+  },
+  filterInputWrap: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: '#E1E1E1',
+    paddingHorizontal: 8,
+    paddingTop: 8,
+    paddingBottom: 6
+  },
+  filterInput: {
+    height: 34,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#D0D0D0',
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    fontSize: 12,
+    color: '#222222',
+    backgroundColor: '#FFFFFF',
+    paddingVertical: 0
+  },
   actionsRow: {
     borderTopWidth: StyleSheet.hairlineWidth,
     borderTopColor: '#E1E1E1',