reactoradar 1.6.8 → 1.6.11

package/AGENTS.md

@@ -1,8 +1,10 @@
 # ReactoRadar — Architecture & Coding Rules
 
-> **Read this file before making ANY code changes.**
+> **Read this file COMPLETELY before making ANY code changes.**
 > This document defines the architecture, panel ownership, state contracts, and rules
 > that must be followed to avoid breaking existing functionality.
+>
+> **NEVER release without passing the Pre-Release Checklist at the bottom.**
 
 ---
 
@@ -27,7 +29,7 @@
 | `panels/performance.js` | Performance + Memory panels — `perfState`, `handlePerfEvent`, `handleMemoryEvent`, `initMemoryPanel` |
 | `panels/native.js` | Native Logs panel — `_nativeState`, `initNativeLogsPanel`, `_appendNativeLog` |
 | `panels/react.js` | React Tree panel — just a connect button |
-| `panels/sources.js` | Sources panel — Metro source file browser |
+| `panels/sources.js` | Sources panel — Metro source file browser (NOT initialized by default — no `panel-sources` in HTML) |
 | `init.js` | **Boot script** (loaded LAST) — IPC wiring, button handlers, memory monitor, settings apply, panel init calls |
 
 ### Other
@@ -40,7 +42,7 @@
 
 ### Script Load Order (critical)
 ```
-1. app.js          — state, $, esc, ts, clearAll, freeMemory (no panel dependencies)
+1. app.js            — state, $, esc, ts, clearAll, freeMemory (no panel dependencies)
 2. panels/settings.js — TAB_CONFIG, isTabEnabled, localStorage helpers (used by all panels)
 3. panels/console.js  — createTreeNode, showContextMenu, addConsoleLog (used by other panels)
 4. panels/network.js  — depends on: console.js (showToast, showContextMenu, createTreeNode)
@@ -56,120 +58,119 @@
 
 ---
 
-## Critical Rule: Do NOT Break Other Panels
+## Current Working State (v1.6.10)
 
-**Every panel is currently in a single `app.js` file.** Changes to one panel can silently
-break another. Before making any change, check:
+> **This section documents exactly what works. Any change MUST preserve all of this.**
 
-1. **Shared state** — Is the variable you're touching read/written by other panels?
-2. **Shared functions** — Is the function you're modifying called from other panels?
-3. **IPC listeners** — The preload `on()` method calls `removeAllListeners(channel)`.
-   Registering the same channel twice **kills the first listener**.
-4. **Array sync** — `state.redux.actions` and `state.redux.states` MUST have the same length.
-   Never empty one without emptying the other.
+### Panel Status
+
+| Panel | Status | Init Function | File | DOM ID |
+|-------|--------|---------------|------|--------|
+| Console | WORKING | `initConsolePanel()` | `panels/console.js` | `panel-console` |
+| Network | WORKING | `initNetworkPanel()` | `panels/network.js` | `panel-network` |
+| Redux | WORKING | `initReduxPanel()` | `panels/redux.js` | `panel-redux` |
+| GA4 Events | WORKING | `initGA4Panel()` | `panels/ga4.js` | `panel-ga4` |
+| AsyncStorage | WORKING | `initStoragePanel()` | `panels/storage.js` | `panel-storage` |
+| Performance | WORKING | `initPerformancePanel()` | `panels/performance.js` | `panel-performance` |
+| Memory | WORKING | `initMemoryPanel()` | `panels/performance.js` | `panel-memory` |
+| Native Logs | WORKING | `initNativeLogsPanel()` | `panels/native.js` | `panel-native` |
+| React Tree | WORKING | `initReactPanel()` | `panels/react.js` | `panel-react` |
+| Settings | WORKING | `initSettingsPanel()` | `panels/settings.js` | `panel-settings` |
+| Sources | NOT INITIALIZED | `initSourcesPanel()` | `panels/sources.js` | NO DOM element — `panel-sources` does NOT exist in `index.html` |
+
+### Init Sequence (in `init.js`)
+```
+initConsolePanel();
+initNetworkPanel();
+initGA4Panel();
+initPerformancePanel();
+initMemoryPanel();
+initReduxPanel();
+initStoragePanel();
+initReactPanel();
+initNativeLogsPanel();
+initSettingsPanel();
+```
+**`initSourcesPanel()` is NOT called — intentional. No DOM element exists for it.**
+
+### IPC Channels Currently Registered (in `init.js`)
+All inside `if (window.electronAPI) { }` block:
+```
+ports, cdp-targets, redux-event, network-event, storage-event,
+console-event, ga4-event, perf-event, clear-all-ui,
+device-all-disconnected, redux-connected, network-connected,
+storage-connected, react-dt-status, focus-search, app-version,
+update-available, update-downloaded, trigger-open-cdp, theme-changed
+```
+Native panel registers `native-log` and `native-status` inside `initNativeLogsPanel()`.
+
+### SDK Platform Detection
+The SDK (`sdk/RNDebugSDK.js`) auto-detects the platform at runtime:
+- **Android emulator** → `10.0.2.2` (requires `adb reverse` on ports 9090, 9091, 9092, 8097)
+- **iOS simulator** → `127.0.0.1`
+- **Real device** → Set `HOST_OVERRIDE` in SDK to Mac's LAN IP
+- Detection uses `require('react-native').Platform.OS`
+
+### Setup Script (`bin/setup.js`) Behavior
+1. Copies `sdk/RNDebugSDK.js` → user's `src/debug/RNDebugSDK.js`
+2. Patches `index.js` to import SDK
+3. Store file detection order:
+   - Step 1: Common directories (`src/store/`, `src/redux/`, etc.) with filenames `store.*`, `index.*`
+   - Step 2: Root app files (`src/App.tsx`, `src/App.js`, `App.tsx`, `App.js`)
+   - Step 3: Deep recursive scan for files with `createStore(` or `configureStore(` call syntax
+4. Auto-patches RTK `configureStore` (adds middleware field)
+5. Auto-patches legacy `createStore` if `const middleware = [...]` pattern found
+6. Falls back to manual instructions if auto-patch fails
+7. Runs `adb reverse` for Android ports
+8. Only sets `HOST_OVERRIDE` for real device LAN IP; emulator/simulator uses auto-detect
+
+### Redux Integration Requirements
+- Connection to port 9090 ("RN app connected") does NOT mean events are flowing
+- `reduxMiddleware` or `reduxEnhancer` MUST be wired into the store
+- Events only flow when `store.dispatch()` goes through the middleware/enhancer
+- Thunk/function actions are safely serialized as `{type: "[Function: thunk]"}`
+- State > 1MB is truncated to `{__truncated: true, sizeBytes, keys}`
 
 ---
 
-## Panels — Ownership & State
+## Critical Rules — DO NOT VIOLATE
 
-### Console Panel
-- **Init:** `initConsolePanel()` (app.js)
-- **State owned:**
-  - `state.console.logs` — array of log entries
-  - `state.console.levelFilters` — `{log, info, warn, error, debug}` booleans
-  - `state.console.searchFilter` — string
-  - `state.console.showRedux` — boolean (show redux actions in console)
-  - `_consolePending` — batch queue for rAF rendering
-  - `_consoleRAF` — pending requestAnimationFrame ID
-  - `_lastLogMsg`, `_lastLogRow`, `_lastLogCount` — log grouping state
-- **IPC channels:** `console-event` (line 921)
-- **Key functions:** `addConsoleLog()`, `flushConsoleBatch()`, `renderConsole()`, `buildLogRow()`, `buildLogBody()`
-- **Cross-panel dependency:** Called by Redux (`handleReduxEvent` → `addConsoleLog`)
-- **Constants:** `MAX_CONSOLE_LOGS = 5000`
+### 1. Every init function MUST have a null guard
+```js
+function initXxxPanel() {
+  const panel = $('panel-xxx');
+  if (!panel) return;  // ← REQUIRED — prevents crash if DOM element is missing
+  panel.innerHTML = `...`;
+}
+```
 
-### Network Panel
-- **Init:** `initNetworkPanel()` (app.js)
-- **State owned:**
-  - `state.network.requests` — `{id: requestObj}` map
-  - `state.network.order` — array of request IDs
-  - `state.network.selectedId`, `statusFilter`, `typeFilter`, `searchFilter`, `throttle`, `enabled`, `sortCol`, `sortDir`
-  - `_netRAF` — pending requestAnimationFrame ID
-- **IPC channels:** `network-event` (line 357)
-- **Key functions:** `handleNetworkEvent()`, `renderNetwork()`, `buildNetRow()`, `selectNetRequest()`, `closeNetDetail()`
-- **Cross-panel dependency:** Calls `addConsoleLog()` for error toasts; calls `showToast()`
-- **Constants:** `NET_COLS` (column definitions)
-
-### Redux Panel
-- **Init:** `initReduxPanel()` (app.js)
-- **State owned:**
-  - `state.redux.actions` — array of action entries
-  - `state.redux.states` — array of full state snapshots (**MUST be same length as actions**)
-  - `state.redux.selected` — selected action index (-1 = none)
-  - `state.redux.searchFilter`, `sortDir`
-  - `_reduxCatColors`, `_reduxColorIdx` — action category color cache
-- **IPC channels:** `redux-event` (line 356)
-- **Key functions:** `handleReduxEvent()`, `renderRedux()`, `_createHighlightedTree()`, `_deepEqual()`, `_findLeafChanges()`
-- **Cross-panel dependency:** Calls `addConsoleLog()` to mirror actions in console
-- **CRITICAL:** `actions` and `states` arrays must always be the same length. Never clear one without the other.
-- **Constants:** `MAX_REDUX_HISTORY = 500`
+### 2. Redux arrays MUST stay in sync
+`state.redux.actions` and `state.redux.states` MUST have the same length.
+Never empty one without emptying the other. In `freeMemory()`, always trim both together.
 
-### GA4 Events Panel
-- **Init:** `initGA4Panel()` (app.js)
-- **State owned:**
-  - `ga4State` — standalone object: `{events, selected, searchFilter, sortDir, _raf}`
-  - `_ga4EventColors`, `_ga4ColorIdx` — event color cache
-- **IPC channels:** `ga4-event` (line 360)
-- **Key functions:** `handleGA4Event()`, `renderGA4List()`, `renderGA4Detail()`, `renderGA4Summary()`
-
-### Storage Panel
-- **Init:** `initStoragePanel()` (app.js)
-- **State owned:**
-  - `state.storage.entries` — `{key: value}` map
-  - `state.storage.keys` — ordered key array
-  - `state.storage.selected`, `searchFilter`
-  - `_storageRAF` — pending requestAnimationFrame ID
-- **IPC channels:** `storage-event` (line 358)
-- **Key functions:** `handleStorageEvent()`, `renderStorage()`, `renderStorageValue()`
-
-### Performance Panel
-- **Init:** `initPerformancePanel()` (app.js)
-- **State owned:**
-  - `perfState` — standalone object: `{fps, jsThread, uiThread, recording, data}`
-- **IPC channels:** `perf-event` (line 362, shared with Memory)
-- **Key functions:** `handlePerfEvent()`, `drawPerfGraph()`, `clearPerfCanvas()`
-
-### Memory Panel
-- **Init:** `initMemoryPanel()` (app.js)
-- **State owned:** None (displays live values from perf events)
-- **IPC channels:** `perf-event` (line 362, shared with Performance)
-- **Key functions:** `handleMemoryEvent()`
-
-### Native Logs Panel
-- **Init:** `initNativeLogsPanel()` (app.js)
-- **State owned:**
-  - `_nativeState` — standalone object: `{logs, connected, platform, levelFilter, searchFilter}`
-- **IPC channels:** `native-log`, `native-status` (registered inside init, lines 3429, 3440)
-- **Key functions:** `_clearNativeLogs()`, `_appendNativeLog()`, `_renderNativeLogs()`, `_autoDetectNative()`
-- **Constants:** `MAX_NATIVE_LOGS`
-
-### Settings Panel
-- **Init:** `initSettingsPanel()` (app.js)
-- **State owned:** All localStorage accessors (theme, font, app name, metro port, tab visibility, tab order, hidden URLs)
-- **Key functions:** `applyTheme()`, `applyFontSize()`, `applyFontFamily()`, `applyAppName()`, `applyTabVisibility()`, `_buildTabVisGrid()`, `_loadVersionHistory()`
-- **Constants:** `TAB_CONFIG`, `FONT_FAMILIES`
-
-### Sources Panel
-- **Init:** `initSourcesPanel()` (app.js)
-- **Key functions:** `fetchSourceFileList()`, `renderSourceFileList()`, `buildSourceTreeNode()`, `loadSourceFile()`
-
-### React Tree Panel
-- **Init:** `initReactPanel()` (app.js)
-- **Minimal** — just a connect button for React DevTools
+### 3. IPC channels MUST be in preload allowlist
+Every new IPC channel MUST be added to the `allowed` array in `preload.js`.
+If a channel is not in this array, the listener is **silently dropped** — no error, no warning.
 
----
+### 4. IPC listeners MUST NOT be registered twice
+The preload `on()` method calls `removeAllListeners(channel)` before adding.
+Registering the same channel twice **kills the first listener**.
+ALL IPC listeners go in `init.js` inside the `if (window.electronAPI) {}` block — nowhere else.
 
-## Shared Utilities — DO NOT MODIFY without checking all callers
+### 5. CSS variables — use ONLY defined variables
+Themes define: `--bg`, `--bg2`, `--bg3`, `--bg4` (NOT `--bg1`)
+`--text`, `--text-mid`, `--text-dim`, `--text-bright`
+`--accent`, `--accent2`, `--border`, `--border2`
+`--green`, `--yellow`, `--red`
+**Never use `--bg1`** — it resolves to transparent/empty.
 
+### 6. clearAll() and freeMemory() — check ALL panels
+- `clearAll()` wipes everything + re-renders — used for Cmd+K
+- `freeMemory()` trims heavy data without clearing UI — used on disconnect/quit
+- After modifying either, verify ALL panels still render correctly
+- Cancel pending `requestAnimationFrame` IDs before clearing data
+
+### 7. Shared functions — check ALL callers before modifying
 | Function | Used By |
 |----------|---------|
 | `$(id)` | Every panel |
@@ -178,75 +179,76 @@ break another. Before making any change, check:
 | `collectEntries(val)` | `objPreview()`, `createTreeNode()` |
 | `objPreview(val)` | `createTreeNode()` |
 | `createTreeNode(key, val, collapsed)` | Console, Network, Redux, Storage, GA4 |
-| `createPrimitiveSpan(val)` | `createTreeNode()`, `renderConsoleArg()` |
 | `showContextMenu(e, items)` | Console, Network, Redux, Storage, GA4, Native |
-| `clearAll()` | IPC `clear-all-ui`, memory warning |
-| `freeMemory()` | IPC `device-all-disconnected` (debounced) |
-| `clearActiveTab()` | Keyboard shortcut Cmd+K |
+| `addConsoleLog(entry)` | Console IPC, Redux (`handleReduxEvent`), Network (error toasts) |
 | `isTabEnabled(tabId)` | Redux, GA4, Storage, Native, Performance |
 | `formatSize(bytes)` | Storage, Network, Memory |
-| `switchPanel(panel)` | Navigation, tab visibility, toasts |
-| `updateDeviceBanner(service, on)` | IPC connection handlers |
-| `showToast(msg, type, panel)` | Network |
+
+### 8. package.json `files` field MUST include all runtime files
+Current required entries:
+```json
+"files": ["main.js", "preload.js", "index.html", "app.js", "init.js", "panels/", "styles.css", "sdk/", "bin/", "assets/", "AGENTS.md"]
+```
+**If you add a new file, add it here or it won't be published to npm.**
 
 ---
 
-## IPC Channel Registry
-
-### Renderer listens (app.js → via preload allowlist)
-
-| Channel | Handler | Panel |
-|---------|---------|-------|
-| `ports` | Sets `state.ports` | Global |
-| `cdp-targets` | Updates CDP button | Global |
-| `redux-event` | `handleReduxEvent` | Redux |
-| `network-event` | `handleNetworkEvent` | Network |
-| `storage-event` | `handleStorageEvent` | Storage |
-| `console-event` | `addConsoleLog` | Console |
-| `ga4-event` | `handleGA4Event` | GA4 |
-| `perf-event` | `handlePerfEvent` + `handleMemoryEvent` | Perf + Memory |
-| `redux-connected` | `updateDeviceBanner` + cancel disconnect timer | Global |
-| `network-connected` | `updateDeviceBanner` + cancel disconnect timer | Global |
-| `storage-connected` | `updateDeviceBanner` + cancel disconnect timer | Global |
-| `react-dt-status` | `updateDeviceBanner` | Global |
-| `clear-all-ui` | `clearAll()` | Global |
-| `device-all-disconnected` | debounced `freeMemory()` | Global |
-| `app-version` | Sets `state._appVersion`, `state._isPackaged` | Settings |
-| `update-available` | `_applyUpdateBanner()` | Settings |
-| `update-downloaded` | `_applyUpdateBanner()` | Settings |
-| `trigger-open-cdp` | Opens CDP | Global |
-| `theme-changed` | Applies theme | Settings |
-| `focus-search` | Focuses active panel search | Global |
-| `native-log` | Appends native log | Native (registered inside init) |
-| `native-status` | Updates native connection status | Native (registered inside init) |
-
-### Preload allowlist (preload.js)
-
-**Every new IPC channel MUST be added to the `allowed` array in `preload.js` line 10-14.**
-If a channel is not in this array, the listener is silently dropped — no error, no warning.
-
-### Main process sends (main.js)
-
-| Channel | Sent from |
-|---------|-----------|
-| `redux-event` | `startBridge` callback for Redux bridge (port 9090) |
-| `network-event` | `startBridge` callback for Network bridge (port 9092) |
-| `storage-event` | `startBridge` callback for Storage bridge (port 9091) |
-| `console-event` | `startBridge` callback for Network bridge (type=console) |
-| `perf-event` | `startBridge` callback for Network bridge (type=perf) |
-| `ga4-event` | `startBridge` callback for Network bridge (type=ga4) |
-| `*-connected` | `startBridge` on WS connect/disconnect |
-| `device-all-disconnected` | `startBridge` when all 3 bridges have 0 clients |
-| `clear-all-ui` | Menu Cmd+K handler |
-| `app-version` | `createMainWindow` on `did-finish-load` |
-| `native-log` | Native log process stdout parser |
-| `native-status` | Native log start/stop/error |
+## Panels — Ownership & State
 
----
+### Console Panel (`panels/console.js`)
+- **State:** `state.console.logs`, `state.console.levelFilters`, `state.console.searchFilter`, `state.console.showRedux`
+- **Private state:** `_consolePending`, `_consoleRAF`, `_lastLogMsg`, `_lastLogRow`, `_lastLogCount`
+- **IPC:** `console-event` → `addConsoleLog()`
+- **Cross-panel:** Called by Redux (`handleReduxEvent` → `addConsoleLog`)
+- **Constants:** `MAX_CONSOLE_LOGS = 5000`
 
-## Main Process (main.js) — Structure
+### Network Panel (`panels/network.js`)
+- **State:** `state.network.requests`, `state.network.order`, `state.network.selectedId`, `statusFilter`, `typeFilter`, `searchFilter`, `sortCol`, `sortDir`
+- **Private state:** `_netRAF`
+- **IPC:** `network-event` → `handleNetworkEvent()`
+- **Cross-panel:** Calls `addConsoleLog()`, `showToast()`, `showContextMenu()`
 
-### WebSocket Bridges
+### Redux Panel (`panels/redux.js`)
+- **State:** `state.redux.actions`, `state.redux.states` (MUST be same length), `state.redux.selected`
+- **IPC:** `redux-event` → `handleReduxEvent()`
+- **Cross-panel:** Calls `addConsoleLog()` to mirror actions in console
+- **Constants:** `MAX_REDUX_HISTORY = 500`
+
+### GA4 Events Panel (`panels/ga4.js`)
+- **State:** `ga4State` standalone object
+- **IPC:** `ga4-event` → `handleGA4Event()`
+
+### AsyncStorage Panel (`panels/storage.js`)
+- **State:** `state.storage.entries`, `state.storage.keys`, `state.storage.selected`
+- **Private state:** `_storageRAF`
+- **IPC:** `storage-event` → `handleStorageEvent()`
+
+### Performance Panel (`panels/performance.js`)
+- **State:** `perfState` standalone object
+- **IPC:** `perf-event` → `handlePerfEvent()`
+
+### Memory Panel (`panels/performance.js`)
+- **IPC:** `perf-event` → `handleMemoryEvent()` (shared channel with Performance)
+
+### Native Logs Panel (`panels/native.js`)
+- **State:** `_nativeState` standalone object
+- **IPC:** `native-log`, `native-status` (registered inside `initNativeLogsPanel`, NOT in init.js)
+- **Constants:** `MAX_NATIVE_LOGS = 2000`
+
+### Settings Panel (`panels/settings.js`)
+- **State:** All localStorage accessors
+- **Shared utilities:** `TAB_CONFIG`, `isTabEnabled()`, `applyTheme()`, `getTabVisibility()`, `applyTabVisibility()`
+
+### React Tree Panel (`panels/react.js`)
+- Minimal — just a connect button for React DevTools
+
+### Sources Panel (`panels/sources.js`)
+- **NOT INITIALIZED** — `panel-sources` does not exist in `index.html`
+- `initSourcesPanel()` has a null guard and returns early
+
+---
+
+## WebSocket Bridges (main.js)
 
 | Port | Name | Client Set | Events Carried |
 |------|------|------------|----------------|
@@ -260,82 +262,103 @@ If a channel is not in this array, the listener is silently dropped — no error
 2. Destroy `devtoolsWindow`
 3. Close `reactDTServer` + clients
 4. Close all bridge servers + clients
-5. Kill `_nativeLogProcess` (second `before-quit` handler inside `setupIPC`)
+5. Kill `_nativeLogProcess`
 
 ---
 
 ## Rules for Making Changes
 
-### 1. Adding a new panel
-- Add init function: `initXxxPanel()`
-- Add to `TAB_CONFIG` array
-- Add to init sequence at bottom of app.js
-- Add state to `clearAll()` and `freeMemory()` if the panel stores data
-- Add case to `clearActiveTab()` if the panel has clearable data
-
-### 2. Adding a new IPC channel
-- Add `ipcMain.on/handle` in `main.js` `setupIPC()`
-- Add channel name to `preload.js` allowed array (line 10-14)
-- Add `window.electronAPI.on()` in app.js or expose send method in preload
-- **Test:** Verify the listener fires by adding a `console.log` in the handler
-
-### 3. Modifying shared state
-- Check all panels that read/write the field (see tables above)
-- **Redux arrays:** `actions` and `states` must stay in sync
-- **rAF IDs:** Cancel with `cancelAnimationFrame()` before clearing data
-- **freeMemory():** Only trim, never wipe arrays that other panels index into
-
-### 4. Modifying clearAll() or freeMemory()
-- `clearAll()` wipes everything + re-renders — used for explicit user action (Cmd+K)
-- `freeMemory()` trims heavy data without clearing UI — used on disconnect/quit
-- After modifying either, verify ALL panels still render correctly
-- Test: Cmd+K clears all panels, device disconnect doesn't break subsequent events
+### Adding a new panel
+1. Create `panels/newpanel.js` with `function initNewPanel() { const panel = $('panel-new'); if (!panel) return; ... }`
+2. Add `<div id="panel-new" class="panel"></div>` to `index.html`
+3. Add `<script src="panels/newpanel.js"></script>` to `index.html` BEFORE `init.js`
+4. Add `initNewPanel();` to `init.js` init sequence
+5. Add to `TAB_CONFIG` array in `panels/settings.js`
+6. Add state to `clearAll()` and `freeMemory()` in `app.js`
+7. Add case to `clearActiveTab()` in `app.js`
+
+### Adding a new IPC channel
+1. Add `ipcMain.on/handle` in `main.js` `setupIPC()`
+2. Add channel name to `preload.js` allowed array
+3. Add `window.electronAPI.on()` in `init.js` inside the `if (window.electronAPI)` block
+4. **Test:** Verify the listener fires
+
+### Modifying the SDK
+1. Test on BOTH Android emulator AND iOS simulator
+2. Verify `adb reverse` works for Android
+3. Test hot reload — ensure no timer/WebSocket leaks
+4. Test with Redux Thunk actions (function dispatches)
+5. Test with large Redux state (>1MB)
+6. Test with binary network responses (images, videos)
 
-### 5. Modifying the object tree renderer
-- `collectEntries()`, `objPreview()`, `createTreeNode()` are used by Console, Network, Redux, Storage, GA4
-- **Any change to these functions affects ALL panels** that render object trees
-- `_createHighlightedTree()` in Redux is a SEPARATE tree renderer — changes to `createTreeNode` do NOT automatically apply to Redux diff trees
+---
 
-### 6. CSS variable naming
-- Themes define: `--bg`, `--bg2`, `--bg3`, `--bg4` (NOT `--bg1`)
-- `--text`, `--text-mid`, `--text-dim`, `--text-bright`
-- `--accent`, `--accent2`, `--border`, `--border2`
-- `--green`, `--yellow`, `--red`
-- **Never use undefined variables** — the value resolves to transparent/empty
+## Pre-Release Checklist
 
----
+> **MANDATORY — Do NOT publish without passing ALL checks.**
 
-## SDK Integration (in user's React Native app)
+### Automated Checks (run these commands)
+```bash
+# 1. Syntax check all files
+for f in app.js init.js main.js preload.js panels/*.js sdk/RNDebugSDK.js bin/setup.js; do
+  node -c "$f" || echo "FAIL: $f"
+done
 
-The SDK (`RNDebugSDK.js`) has two parts:
-1. **Auto-connect** — WebSocket connections to ports 9090/9091/9092 open on import
-2. **Manual wiring** — Redux requires adding `reduxMiddleware` or `reduxEnhancer` to the store
+# 2. No duplicate functions
+grep -rhn "^function [a-zA-Z_]" app.js init.js panels/*.js | sed 's/(.*//' | sort | uniq -c | sort -rn | awk '$1 > 1'
 
-`npx reactoradar setup` handles:
-- Copying SDK to `src/debug/RNDebugSDK.js`
-- Patching entry file (`index.js`) to import SDK
-- Auto-patching RTK `configureStore` with middleware
-- **Legacy `createStore`**: Only prints manual instructions (does NOT auto-patch)
+# 3. No duplicate top-level variables
+grep -rhn "^const [a-zA-Z_]\|^let [a-zA-Z_]" app.js init.js panels/*.js | sed 's/ =.*//' | sort | uniq -c | sort -rn | awk '$1 > 1'
 
-If Redux is not working:
-1. Check if `reduxMiddleware` or `reduxEnhancer` is wired into the store
-2. Connection to port 9090 ("RN app connected") does NOT mean events are flowing
-3. Events only flow when `store.dispatch()` goes through the middleware/enhancer
+# 4. All critical functions exist
+for fn in handleReduxEvent handleNetworkEvent handleStorageEvent handleGA4Event handlePerfEvent handleMemoryEvent clearAll freeMemory updateDeviceBanner initConsolePanel initNetworkPanel initGA4Panel initPerformancePanel initMemoryPanel initReduxPanel initStoragePanel initReactPanel initNativeLogsPanel initSettingsPanel addConsoleLog renderConsole renderNetwork renderRedux renderStorage renderGA4List closeNetDetail clearPerfCanvas showContextMenu createTreeNode isTabEnabled formatSize showToast takeScreenshot collectEntries _applyUpdateBanner _showChangelog; do
+  found=$(grep -rln "function $fn\b" app.js init.js panels/*.js 2>/dev/null | head -1)
+  [ -z "$found" ] && echo "MISSING: $fn"
+done
+
+# 5. npm pack includes all files
+npm pack --dry-run 2>&1 | grep -c "panels/\|init.js\|sdk/\|bin/"
+# Expected: 15+ files
+
+# 6. IPC channels all in preload allowlist
+# Every channel registered in init.js must be in preload.js allowed array
+```
+
+### Manual Checks (test in the running app)
+- [ ] **App launches** — `npm start` opens the window, no blank screen
+- [ ] **Console** — logs appear, level filters work, search works, Cmd+K clears
+- [ ] **Network** — requests appear, detail panel opens/closes, search works, Cmd+K clears
+- [ ] **Redux** — actions appear, state diff shows correctly, Cmd+K clears, works after disconnect/reconnect
+- [ ] **GA4** — events appear, summary tab works, color toggle works
+- [ ] **Storage** — keys appear, values render, search works
+- [ ] **Performance** — Record button toggles, graphs render when data arrives
+- [ ] **Memory** — heap values display when device connected
+- [ ] **Native Logs** — Connect button works for Android/iOS, logs stream, Cmd+K clears
+- [ ] **Settings** — theme switch works, font size changes, tab visibility toggles, version history loads
+- [ ] **React Tree** — connect button shows
+- [ ] **Device disconnect** — `freeMemory()` fires after 3s, panels still work after reconnect
+- [ ] **Device reconnect** — cancel disconnect timer, new events flow immediately
+- [ ] **Cmd+K** — clears active tab data (test on each tab)
+- [ ] **All panels render** — switch through every tab, none show blank/white screen
+
+### SDK Checks (test in RN app)
+- [ ] **iOS simulator** — SDK connects with `127.0.0.1`, console/network/storage data flows
+- [ ] **Android emulator** — SDK connects with `10.0.2.2` (after `adb reverse`), all data flows
+- [ ] **Redux** — actions appear in Redux tab AND console (if showRedux enabled)
+- [ ] **Hot reload** — reload RN app, SDK reconnects, no duplicate data/timers
+
+### Setup Script Checks
+- [ ] `npx reactoradar setup` — copies SDK, patches index.js, detects store file
+- [ ] Redux auto-patch — adds `reduxMiddleware` to middleware array
+- [ ] `npx reactoradar remove` — cleans up SDK and patches
+- [ ] `adb reverse` — ports forwarded for Android
 
 ---
 
-## Testing Checklist (after any change)
-
-- [ ] Console: logs appear, level filters work, search works, Cmd+K clears
-- [ ] Network: requests appear, detail panel opens, HAR export works
-- [ ] Redux: actions appear, state diff shows, Cmd+K clears
-- [ ] GA4: events appear, summary works, color toggle works
-- [ ] Storage: keys appear, values render, search works
-- [ ] Performance: FPS/JS/UI graphs render when recording
-- [ ] Memory: heap values appear
-- [ ] Native Logs: connect to adb/xcrun, logs stream, Cmd+K clears
-- [ ] Settings: theme switch, font size, tab visibility, version history loads
-- [ ] Device disconnect: `freeMemory()` fires after 3s, panels still work after reconnect
-- [ ] Device reconnect: cancel disconnect timer, new events flow immediately
-- [ ] Cmd+K: clears active tab (all tabs including native)
-- [ ] App quit: `devtoolsWindow` closed, bridges closed, no crash
+## Known Limitations
+
+1. **Sources panel** — `panel-sources` div does not exist in `index.html`. `initSourcesPanel()` is not called. Panel is dormant.
+2. **`npx reactoradar setup` store detection** — if store is in an unusual file (not `App.tsx`, not `store.*`), setup may not find it
+3. **iOS real device** — requires manually setting `HOST_OVERRIDE` in the SDK
+4. **`adb reverse` drops** — if Android emulator restarts, `adb reverse` must be re-run
+5. **Performance `jsThread` metric** — currently uses `performance.now() % 16.67` which is approximate

package/README.md

@@ -53,6 +53,17 @@
 | **React** | Component tree and props inspector via `react-devtools-core` relay |
 | **Settings** | 9 color themes, font family/size, configurable panel visibility with drag-to-reorder, Metro port config, keyboard shortcuts, auto-update, support link |
 
+### What's New in v1.6.11
+
+- **Auto-clear on reconnect** — All tabs reset automatically when the RN app relaunches (fresh session, no stale data)
+- **No more `[object Object]`** — Safe string serialization everywhere in Console, Network, and Redux panels
+- **SDK auto-detects platform** — Android emulator (`10.0.2.2`) and iOS simulator (`127.0.0.1`) detected at runtime. No manual HOST editing.
+- **Setup auto-patches legacy `createStore`** — Detects `const middleware = []` pattern and wires `reduxMiddleware` automatically
+- **SDK hardened** — BigInt/circular-safe JSON, Redux state >1MB truncated, binary response guard, reconnect backoff, console try/catch
+- **Version rollback** — Settings > Version History shows all releases with download/install buttons
+- **Panel-per-file architecture** — Each panel in its own file under `panels/`. Safer, easier to maintain.
+- **Null guards everywhere** — All panel init functions, badge updates, and DOM access null-safe
+
 ### What's New in v1.6.0
 
 - **Auto-Update** — `.dmg` builds auto-download updates from GitHub Releases. Settings shows "Restart & Update" when ready.
@@ -134,7 +145,7 @@ Console, Network, Redux, GA4, AsyncStorage data flows automatically. No config n
 | Android real device (USB) | `10.0.2.2` | `adb reverse` tunnels over USB (auto-configured) |
 | iOS real device (USB/WiFi) | Mac's LAN IP | Auto-detected. Device must be on same WiFi as Mac. |
 
-`npx reactoradar setup` auto-detects your platform and sets the correct HOST.
+The SDK auto-detects the platform at runtime. For iOS real devices, set `HOST_OVERRIDE` in `src/debug/RNDebugSDK.js` to your Mac's LAN IP. `npx reactoradar setup` handles this automatically.
 
 ### Uninstall
 
@@ -146,7 +157,7 @@ npx reactoradar remove
 
 | ReactoRadar | React Native | Engine | Architecture |
 |---|---|---|---|
-| v1.6+ | 0.74 — 0.81+ | Hermes | Old & New Architecture |
+| v1.6.11+ | 0.74 — 0.81+ | Hermes | Old & New Architecture |
 
 ## Network Inspector
 
@@ -203,13 +214,26 @@ export const store = configureStore({
 });
 ```
 
-**Legacy Redux (createStore):**
+**Legacy Redux (createStore with middleware array):**
+```js
+const middleware = [];
+// ... your existing middleware (saga, thunk, etc.)
+if (__DEV__) {
+  try {
+    const { reduxMiddleware } = require('./debug/RNDebugSDK');
+    if (reduxMiddleware) middleware.push(reduxMiddleware);
+  } catch {}
+}
+const store = createStore(rootReducer, applyMiddleware(...middleware));
+```
+
+**Legacy Redux (createStore without middleware):**
 ```js
 import { reduxEnhancer } from '../debug/RNDebugSDK';
 const store = createStore(reducer, __DEV__ ? reduxEnhancer : undefined);
 ```
 
-> **Note:** The import path is relative from your store file to `src/debug/RNDebugSDK`. Run `npx reactoradar setup` to auto-detect the correct path.
+> **Note:** `npx reactoradar setup` auto-detects your store file and patches it. If it can't, follow the examples above. The import path is relative from your store file to `src/debug/RNDebugSDK`.
 
 ## Settings
 
@@ -293,7 +317,8 @@ const store = createStore(reducer, __DEV__ ? reduxEnhancer : undefined);
 | Network tab empty | Run Metro with `--reset-cache` |
 | Blank screen after long use | Click "Clear All Data" on the memory warning banner, or restart the app |
 | Redux shows "No actions dispatched" | Verify `reduxMiddleware` is wired in your store. Run `npx reactoradar setup` to auto-detect. |
-| Real device not connecting | Ensure HOST in `src/debug/RNDebugSDK.js` matches your Mac's LAN IP. Re-run `npx reactoradar setup`. |
+| Android emulator not connecting | Run `adb reverse tcp:9090 tcp:9090 && adb reverse tcp:9091 tcp:9091 && adb reverse tcp:9092 tcp:9092`. Re-run after emulator restart. |
+| Real device not connecting | Set `HOST_OVERRIDE` in `src/debug/RNDebugSDK.js` to your Mac's LAN IP. Re-run `npx reactoradar setup`. |
 | `XHRInterceptor.js` warning | Set `networking: false` in ReactotronConfig.js |
 | GA4 events not showing | Restart Metro with `--reset-cache` after setup |
 | Port conflict | Run `kill $(lsof -ti :9092)` to free the port, then restart |

package/app.js

@@ -46,6 +46,14 @@ const esc = s => s == null ? '' : String(s)
   .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
 const ts = ms => new Date(ms).toLocaleTimeString('en',{hour12:false,hour:'2-digit',minute:'2-digit',second:'2-digit'});
 
+// Safe string conversion — never returns [object Object]
+function safeStr(val) {
+  if (val == null) return '';
+  if (typeof val === 'string') return val;
+  if (typeof val === 'number' || typeof val === 'boolean') return String(val);
+  try { return JSON.stringify(val); } catch { return '[Complex object]'; }
+}
+
 
 function pretty(val) {
   if (val == null) return '';
@@ -64,10 +72,12 @@ function syntaxHighlight(json) {
 }
 
 function renderJSON(val) {
+  if (val == null) return '<span style="color:var(--text-dim)">Empty response</span>';
   try {
     const str = typeof val === 'string' ? val : JSON.stringify(val, null, 2);
+    if (!str || str === '{}' || str === '""') return '<span style="color:var(--text-dim)">Empty response body</span>';
     return syntaxHighlight(esc(str));
-  } catch { return esc(typeof val === 'object' ? JSON.stringify(val) : String(val)); }
+  } catch { try { return esc(JSON.stringify(val)); } catch { return esc('[Unserializable data]'); } }
 }
 
 function tryURL(url) { try { return new URL(url); } catch { return null; } }

package/bin/setup.js

@@ -181,6 +181,7 @@ function findStoreFile(projectDir) {
   ];
   const storeNames = ['store.ts', 'store.js', 'store.tsx', 'store.jsx', 'index.ts', 'index.js', 'index.tsx'];
 
+  // 1. Check common store file locations
   for (const dir of searchDirs) {
     for (const name of storeNames) {
       const p = path.join(projectDir, dir, name);
@@ -193,18 +194,32 @@ function findStoreFile(projectDir) {
     }
   }
 
-  // Deep search: recursively find any file with configureStore/createStore
+  // 2. Check App.tsx / App.js (common pattern: store created in root component)
+  const rootAppFiles = ['src/App.tsx', 'src/App.js', 'App.tsx', 'App.js', 'app/App.tsx', 'app/App.js'];
+  for (const f of rootAppFiles) {
+    const p = path.join(projectDir, f);
+    if (fileExists(p)) {
+      const content = fs.readFileSync(p, 'utf8');
+      if (content.includes('configureStore') || content.includes('createStore')) {
+        return f;
+      }
+    }
+  }
+
+  // 3. Deep search: recursively find files with actual createStore()/configureStore() calls
+  //    Skip files that merely reference configureStore as a parameter/type name
   try {
     const glob = (dir, depth) => {
       if (depth > 4) return null;
       let entries;
       try { entries = fs.readdirSync(path.join(projectDir, dir), { withFileTypes: true }); } catch { return null; }
       for (const e of entries) {
-        if (e.name === 'node_modules' || e.name.startsWith('.')) continue;
+        if (e.name === 'node_modules' || e.name.startsWith('.') || e.name === 'debug') continue;
         const rel = path.join(dir, e.name);
-        if (e.isFile() && /\.(ts|js|tsx|jsx)$/.test(e.name) && /store/i.test(e.name)) {
+        if (e.isFile() && /\.(ts|js|tsx|jsx)$/.test(e.name)) {
           const content = fs.readFileSync(path.join(projectDir, rel), 'utf8');
-          if (content.includes('configureStore') || content.includes('createStore')) {
+          // Must contain actual call: configureStore({ or createStore( — not just the word as a type/param
+          if (/configureStore\s*\(/.test(content) || /createStore\s*\(/.test(content)) {
             return rel;
           }
         }
@@ -265,12 +280,20 @@ async function install(projectDir) {
     process.exit(1);
   }
 
-  // Read SDK, patch HOST
+  // Read SDK, patch HOST_OVERRIDE for real device support
+  // The SDK auto-detects Android emulator vs iOS simulator at runtime.
+  // For real devices, we set HOST_OVERRIDE to the Mac's LAN IP.
   let sdkContent = fs.readFileSync(sdkSrc, 'utf8');
-  sdkContent = sdkContent.replace(
-    /const HOST = '[^']+';/,
-    `const HOST = '${host}';`
-  );
+  const isRealDevice = reason.includes('device') || reason.includes('LAN IP');
+  if (isRealDevice && host !== '127.0.0.1' && host !== '10.0.2.2') {
+    sdkContent = sdkContent.replace(
+      /const HOST_OVERRIDE = null;/,
+      `const HOST_OVERRIDE = '${host}';`
+    );
+    log('HOST_OVERRIDE set to', C.bold + host + C.reset, '(real device LAN IP)');
+  } else {
+    log('HOST auto-detect enabled', C.dim + '(Android: 10.0.2.2, iOS: 127.0.0.1)' + C.reset);
+  }
   try {
     fs.writeFileSync(sdkDest, sdkContent);
   } catch (e) {
@@ -360,36 +383,75 @@ ${SDK_MARKER_END}
          } else {
            log('Redux store already has RNDebugSDK wired correctly — skipping');
          }
-       } else if (storeContent.includes('configureStore')) {
-         // RTK configureStore
-         // Try to add middleware to configureStore
-         if (storeContent.includes('middleware:') || storeContent.includes('middleware :')) {
-           warn('Redux store found at', C.bold + storeFile + C.reset, '— has custom middleware');
-           console.log(C.dim + '    Add manually to your middleware:' + C.reset);
-           console.log(C.dim + `      import { reduxMiddleware } from '${relSDK}';` + C.reset);
-           console.log(C.dim + '      middleware: (getDefault) => __DEV__' + C.reset);
-           console.log(C.dim + '        ? getDefault().concat(reduxMiddleware)' + C.reset);
-           console.log(C.dim + '        : getDefault(),' + C.reset);
-         } else {
-           // Add middleware field to configureStore
-           const patched = storeContent.replace(
-             /(configureStore\s*\(\s*\{)/,
-             `$1\n  middleware: (getDefaultMiddleware) =>\n    __DEV__\n      ? getDefaultMiddleware().concat(require('${relSDK}').reduxMiddleware)\n      : getDefaultMiddleware(),`
-           );
-           if (patched !== storeContent) {
-             fs.writeFileSync(storePath, patched);
-             log('Patched', C.bold + storeFile + C.reset, '— Redux middleware wired');
-           } else {
-             warn('Could not auto-patch', storeFile, '— wire Redux manually');
+        } else if (/createStore\s*\(/.test(storeContent)) {
+          // Legacy createStore (check this BEFORE configureStore — a file may have both
+          // if the user named their wrapper function "configureStore" but uses Redux's createStore inside)
+          // Legacy createStore — try to auto-patch by adding reduxMiddleware to middleware array
+          let patched = storeContent;
+          let didPatch = false;
+
+          // Pattern 1: middleware array exists — push reduxMiddleware into it
+          // e.g. const middleware = []; or const middleware = [sagaMiddleware];
+          if (/(?:const|let|var)\s+middleware\s*=\s*\[/.test(storeContent) && !storeContent.includes('reduxMiddleware') && !storeContent.includes('RNDebugSDK')) {
+            // Add the require + push after the middleware array declaration
+            patched = patched.replace(
+              /((?:const|let|var)\s+middleware\s*=\s*\[[^\]]*\];?)/,
+              `$1\n  if (__DEV__) { try { const { reduxMiddleware } = require('${relSDK}'); if (reduxMiddleware) middleware.push(reduxMiddleware); } catch {} }`
+            );
+            if (patched !== storeContent) {
+              didPatch = true;
+            }
+          }
+
+          // Pattern 2: applyMiddleware(...middleware) exists but no middleware array — inject inline
+          if (!didPatch && storeContent.includes('applyMiddleware') && !storeContent.includes('reduxMiddleware') && !storeContent.includes('RNDebugSDK')) {
+            // Find the if (__DEV__) block near middleware setup and add there
+            // Or add before the createStore call
+            const createStoreMatch = storeContent.match(/createStore\s*\(/);
+            if (createStoreMatch) {
+              const idx = storeContent.indexOf(createStoreMatch[0]);
+              const insertPoint = storeContent.lastIndexOf('\n', idx);
+              if (insertPoint > 0) {
+                patched = storeContent.slice(0, insertPoint) +
+                  `\n  if (__DEV__) { try { const { reduxMiddleware } = require('${relSDK}'); if (reduxMiddleware) middleware.push(reduxMiddleware); } catch {} }` +
+                  storeContent.slice(insertPoint);
+                if (patched !== storeContent) didPatch = true;
+              }
+            }
+          }
+
+          if (didPatch) {
+            fs.writeFileSync(storePath, patched);
+            log('Patched', C.bold + storeFile + C.reset, '— Redux middleware wired (legacy createStore)');
+          } else {
+            warn('Legacy createStore found at', C.bold + storeFile + C.reset);
+            console.log(C.dim + '    Could not auto-patch. Add manually:' + C.reset);
+            console.log(C.dim + `      if (__DEV__) { try { const { reduxMiddleware } = require('${relSDK}'); middleware.push(reduxMiddleware); } catch {} }` + C.reset);
+            console.log(C.dim + '    Add this BEFORE the createStore() call in your middleware setup.' + C.reset);
            }
+         } else if (/configureStore\s*\(\s*\{/.test(storeContent)) {
+          // RTK configureStore({ ... }) — actual Redux Toolkit usage
+          if (storeContent.includes('middleware:') || storeContent.includes('middleware :')) {
+            warn('Redux store found at', C.bold + storeFile + C.reset, '— has custom middleware');
+            console.log(C.dim + '    Add manually to your middleware:' + C.reset);
+            console.log(C.dim + `      import { reduxMiddleware } from '${relSDK}';` + C.reset);
+            console.log(C.dim + '      middleware: (getDefault) => __DEV__' + C.reset);
+            console.log(C.dim + '        ? getDefault().concat(reduxMiddleware)' + C.reset);
+            console.log(C.dim + '        : getDefault(),' + C.reset);
+          } else {
+            const patched = storeContent.replace(
+              /(configureStore\s*\(\s*\{)/,
+              `$1\n  middleware: (getDefaultMiddleware) =>\n    __DEV__\n      ? getDefaultMiddleware().concat(require('${relSDK}').reduxMiddleware)\n      : getDefaultMiddleware(),`
+            );
+            if (patched !== storeContent) {
+              fs.writeFileSync(storePath, patched);
+              log('Patched', C.bold + storeFile + C.reset, '— Redux middleware wired (RTK)');
+            } else {
+              warn('Could not auto-patch', storeFile, '— wire Redux manually');
+            }
+          }
          }
-       } else if (storeContent.includes('createStore')) {
-         warn('Legacy createStore found at', C.bold + storeFile + C.reset);
-         console.log(C.dim + '    Add manually:' + C.reset);
-         console.log(C.dim + `      import { reduxEnhancer } from '${relSDK}';` + C.reset);
-         console.log(C.dim + '      const store = createStore(reducer, __DEV__ ? reduxEnhancer : undefined);' + C.reset);
-       }
-     } else {
+      } else {
        warn('Redux detected but store file not found automatically');
        console.log(C.dim + '    Add to your store setup:' + C.reset);
        console.log(C.dim + '      import { reduxMiddleware } from \'./src/debug/RNDebugSDK\';' + C.reset);

package/init.js

@@ -47,21 +47,32 @@ if (window.electronAPI) {
 
   window.electronAPI.on('clear-all-ui', clearAll);
 
-  // When all device bridges disconnect, release heavy memory but keep logs visible.
-  // Debounced to avoid data loss during hot reloads or flaky connections.
+  // Device disconnect → debounced freeMemory. Reconnect → clearAll (fresh session).
   let _disconnectTimer = null;
+  let _wasDisconnected = false;
+
   window.electronAPI.on('device-all-disconnected', () => {
+    _wasDisconnected = true;
     clearTimeout(_disconnectTimer);
     _disconnectTimer = setTimeout(() => {
       console.log('[App] All devices disconnected — freeing memory');
       freeMemory();
     }, 3000);
   });
-  // Cancel pending free if a device reconnects
-  const _cancelDisconnectTimer = () => { clearTimeout(_disconnectTimer); _disconnectTimer = null; };
-  window.electronAPI.on('redux-connected', on => { if (on) _cancelDisconnectTimer(); updateDeviceBanner('redux', on); });
-  window.electronAPI.on('network-connected', on => { if (on) _cancelDisconnectTimer(); updateDeviceBanner('network', on); });
-  window.electronAPI.on('storage-connected', on => { if (on) _cancelDisconnectTimer(); updateDeviceBanner('storage', on); });
+
+  const _handleReconnect = () => {
+    clearTimeout(_disconnectTimer);
+    _disconnectTimer = null;
+    if (_wasDisconnected) {
+      _wasDisconnected = false;
+      console.log('[App] Device reconnected — clearing old session data');
+      clearAll();
+    }
+  };
+
+  window.electronAPI.on('redux-connected', on => { if (on) _handleReconnect(); updateDeviceBanner('redux', on); });
+  window.electronAPI.on('network-connected', on => { if (on) _handleReconnect(); updateDeviceBanner('network', on); });
+  window.electronAPI.on('storage-connected', on => { if (on) _handleReconnect(); updateDeviceBanner('storage', on); });
   window.electronAPI.on('react-dt-status', on => { updateDeviceBanner('reactDT', on); });
 
   // Cmd+F — focus the search input for the active panel

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactoradar",
   "productName": "ReactoRadar",
-  "version": "1.6.8",
+  "version": "1.6.11",
   "description": "macOS debugger for React Native — Console, Sources, Network, Performance, Memory, Redux, AsyncStorage, React tree. Supports RN 0.74+ with Hermes and New Architecture.",
   "main": "main.js",
   "bin": {

package/panels/console.js

@@ -401,7 +401,8 @@ function primitivePreview(val) {
   if (typeof val === 'number' || typeof val === 'boolean') return String(val);
   if (Array.isArray(val)) return `Array(${val.length})`;
   if (typeof val === 'object') return `{...}`;
-  return String(val);
+  if (typeof val === 'function') return `[Function: ${val.name || 'anonymous'}]`;
+  return safeStr(val);
 }
 
 function createTreeNode(key, val, startCollapsed) {
@@ -505,7 +506,7 @@ function _safeStr(val) {
   if (val === undefined) return 'undefined';
   if (typeof val === 'string') return val;
   if (typeof val === 'number' || typeof val === 'boolean') return String(val);
-  try { return JSON.stringify(val, null, 2); } catch { return String(val); }
+  try { return JSON.stringify(val, null, 2); } catch { return '[Complex object]'; }
 }
 
 function createPrimitiveSpan(val) {
@@ -561,7 +562,7 @@ function buildLogBody(logEntry) {
     });
   } else if (logEntry.message != null) {
     // Legacy / flat message — try to parse JSON objects out of it
-    const msg = String(logEntry.message);
+    const msg = safeStr(logEntry.message);
     // Try parsing the whole message as JSON
     try {
       const parsed = JSON.parse(msg);
@@ -691,7 +692,7 @@ function buildLogRow(l) {
       items.push({ label: 'Copy as JSON', action: () => {
         const json = l.args.map(a => {
           if (a.t === 'object' || a.t === 'array') return JSON.stringify(a.v, null, 2);
-          return String(a.v);
+          return safeStr(a.v);
         }).join(' ');
         navigator.clipboard.writeText(json);
       }});

package/panels/network.js

@@ -203,13 +203,13 @@ function initNetworkPanel() {
           method: r.method || 'GET',
           url: r.url || '',
           headers: Object.entries(r.requestHeaders || {}).map(([n, v]) => ({ name: n, value: v })),
-          postData: r.requestBody ? { mimeType: 'application/json', text: typeof r.requestBody === 'object' ? JSON.stringify(r.requestBody) : String(r.requestBody) } : undefined,
+          postData: r.requestBody ? { mimeType: 'application/json', text: typeof r.requestBody === 'object' ? JSON.stringify(r.requestBody) : safeStr(r.requestBody) } : undefined,
         },
         response: {
           status: r.status || 0,
           statusText: r.statusText || '',
           headers: Object.entries(r.responseHeaders || {}).map(([n, v]) => ({ name: n, value: v })),
-          content: { size: -1, mimeType: 'application/json', text: r.responseBody ? (typeof r.responseBody === 'object' ? JSON.stringify(r.responseBody) : String(r.responseBody)) : '' },
+          content: { size: -1, mimeType: 'application/json', text: r.responseBody ? (typeof r.responseBody === 'object' ? JSON.stringify(r.responseBody) : safeStr(r.responseBody)) : '' },
         },
         timings: { send: 0, wait: r.duration || 0, receive: 0 },
       };
@@ -835,7 +835,7 @@ function renderNetDetailContent(r) {
       if (!keys.length) return `<div class="section-label">${title}</div><span style="color:var(--text-dim)">none</span>`;
       return `<div class="section-label">${title}</div><div class="kv-grid">${keys.map(k => {
         let val = h[k];
-        if (val && typeof val === 'object') { try { val = JSON.stringify(val); } catch { val = String(val); } }
+        if (val && typeof val === 'object') { try { val = JSON.stringify(val); } catch { val = '[Complex object]'; } }
         return `<span class="kv-key">${esc(k)}</span><span class="kv-val">${esc(val)}</span>`;
       }).join('')}</div>`;
     };
@@ -870,6 +870,7 @@ function renderNetDetailContent(r) {
     const isErrStatus = _isHttpError(r);
     if (r.phase === 'error' && !r.responseBody) { body.innerHTML = `<span style="color:var(--red)">${esc(r.error || 'Request failed')}</span>`; return; }
     if (!r.responseBody && r.phase !== 'response') { body.innerHTML = '<span style="color:var(--text-dim)">Pending...</span>'; return; }
+    if (r.responseBody == null || r.responseBody === '') { body.innerHTML = '<span style="color:var(--text-dim)">Empty response body</span>'; return; }
     // Render as collapsible JSON tree with right-click copy
     const val = r.responseBody;
     let treeData = val;
@@ -896,13 +897,14 @@ function renderNetDetailContent(r) {
       });
     } else {
       body.innerHTML = isErrStatus
-        ? `<span style="color:var(--red)">${esc(String(r.responseBody))}</span>`
+        ? `<span style="color:var(--red)">${esc(safeStr(r.responseBody))}</span>`
         : '<span style="color:var(--text-dim)">No preview available</span>';
     }
   } else if (tab === 'response') {
     const isErrStatus = _isHttpError(r);
     if (r.phase === 'error' && !r.responseBody) { body.innerHTML = `<span style="color:var(--red)">${esc(r.error || 'Request failed')}</span>`; return; }
     if (!r.responseBody && r.phase !== 'response') { body.innerHTML = '<span style="color:var(--text-dim)">Pending...</span>'; return; }
+    if (r.responseBody == null || r.responseBody === '') { body.innerHTML = '<span style="color:var(--text-dim)">Empty response body</span>'; return; }
     if (isErrStatus) {
       const errBanner = document.createElement('div');
       errBanner.style.cssText = 'color:var(--red);font-weight:600;padding:4px 0 8px;font-size:11px;border-bottom:1px solid rgba(255,94,114,.15);margin-bottom:8px';

package/sdk/RNDebugSDK.js

@@ -19,8 +19,20 @@ if (typeof __DEV__ === 'undefined' || !__DEV__) {
 } else {
 
 // ─── Config ───────────────────────────────────────────────────────────────────
-// Android emulator → 10.0.2.2  |  iOS sim → 127.0.0.1  |  Device → your LAN IP
-const HOST = '10.0.2.2';
+// Auto-detect platform: Android emulator → 10.0.2.2  |  iOS sim → 127.0.0.1
+// For real devices: Android uses adb reverse (so 10.0.2.2 works via port forwarding),
+// iOS real device needs the Mac's LAN IP — override HOST_OVERRIDE below if needed.
+const HOST_OVERRIDE = null; // Set to your Mac's LAN IP for iOS real device, e.g. '192.168.1.100'
+
+function _detectHost() {
+  if (HOST_OVERRIDE) return HOST_OVERRIDE;
+  try {
+    const { Platform } = require('react-native');
+    if (Platform.OS === 'android') return '10.0.2.2';
+    return '127.0.0.1'; // iOS simulator
+  } catch { return '127.0.0.1'; }
+}
+const HOST = _detectHost();
 
 const PORTS = {
   NETWORK_AND_CONSOLE: 9092, // unified feed for network + console