react-native-debug-toolkit 2.3.0 → 3.1.2

package/node/mcp/src/tools.js

@@ -0,0 +1,84 @@
+'use strict';
+
+const { getDaemonOrigin, readDevice, readDevices } = require('./daemonClient');
+const { KNOWN_LOG_TYPES, createToolPayload } = require('./logs');
+
+const getAppLogsTool = {
+  name: 'get_app_logs',
+  description: 'Read React Native Debug Toolkit logs from the local daemon. Tip: if you have shell access, curl http://127.0.0.1:3799/devices/latest is more efficient.',
+  inputSchema: {
+    type: 'object',
+    properties: {
+      deviceId: { type: 'string' },
+      logType: {
+        type: 'string',
+        enum: KNOWN_LOG_TYPES,
+      },
+      limit: { type: 'number', default: 50 },
+      failedOnly: { type: 'boolean', default: false },
+      includeBodies: { type: 'boolean', default: true },
+    },
+  },
+};
+
+const listAppDevicesTool = {
+  name: 'list_app_devices',
+  description: 'List React Native Debug Toolkit devices available in the local daemon. Tip: if you have shell access, curl http://127.0.0.1:3799/devices is more efficient.',
+  inputSchema: {
+    type: 'object',
+    properties: {},
+  },
+};
+
+const tools = [getAppLogsTool, listAppDevicesTool];
+
+async function callTool(name, args = {}, context = {}) {
+  const ensureDaemon = context.ensureDaemon || (async () => ({ ok: true, origin: getDaemonOrigin() }));
+  const daemon = await ensureDaemon();
+  if (!daemon.ok) {
+    return {
+      ok: false,
+      error: daemon.error || 'Debug toolkit daemon is not available',
+      origin: daemon.origin,
+    };
+  }
+
+  try {
+    if (name === listAppDevicesTool.name) {
+      const readDevicesImpl = context.readDevices || readDevices;
+      const result = await readDevicesImpl(daemon.origin);
+      const devices = Array.isArray(result.devices) ? result.devices : [];
+      return {
+        ok: true,
+        origin: daemon.origin,
+        devices,
+        count: devices.length,
+      };
+    }
+
+    if (name !== getAppLogsTool.name) {
+      throw new Error(`Unknown tool: ${name}`);
+    }
+
+    const device = await readDevice(daemon.origin, args.deviceId);
+    return createToolPayload(device, {
+      logType: args.logType,
+      limit: args.limit,
+      failedOnly: args.failedOnly,
+      includeBodies: args.includeBodies,
+    });
+  } catch (error) {
+    return {
+      ok: false,
+      error: error.message || 'Failed to read debug toolkit logs',
+      origin: daemon.origin,
+    };
+  }
+}
+
+module.exports = {
+  callTool,
+  getAppLogsTool,
+  listAppDevicesTool,
+  tools,
+};

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "react-native-debug-toolkit",
-  "version": "2.3.0",
-  "description": "A dev-only floating debug panel for React Native with network, console, Zustand, navigation, and event logs",
+  "version": "3.1.2",
+  "description": "A local-first React Native debugging bridge with in-app logs, desktop daemon, Web Console, HTTP API, and MCP support",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "types": "lib/typescript/src/index.d.ts",
   "files": [
     "src",
     "lib",
+    "bin",
+    "node",
     "README.md",
     "LICENSE",
     "!**/__tests__",
@@ -19,9 +21,12 @@
     "typescript": "npm run typecheck",
     "test": "jest",
     "build": "bob build",
-    "lint": "eslint \"src/**/*.{js,ts,tsx}\"",
+    "lint": "eslint \"src/**/*.{js,ts,tsx}\" \"node/**/*.js\" \"bin/**/*.js\"",
     "prepare": "bob build"
   },
+  "bin": {
+    "debug-toolkit": "bin/debug-toolkit.js"
+  },
   "keywords": [
     "react-native",
     "debug",

package/src/core/initialize.ts

@@ -11,10 +11,16 @@ import { createTrackFeature } from '../features/track';
 import type { TrackFeatureConfig } from '../features/track';
 import { createEnvironmentFeature } from '../features/environment';
 import { createClipboardFeature } from '../features/clipboard';
+import { daemonClient, restoreDaemonStreaming } from '../utils/DaemonClient';
+import { _addDaemonEndpointToNetworkBlacklist } from '../features/network';
 import type { AnyDebugFeature, BuiltInFeatureName } from '../types';
 
 const isDebugMode = __DEV__;
 
+daemonClient.setEndpointDetector((url) => {
+  _addDaemonEndpointToNetworkBlacklist(url);
+});
+
 /** Feature-specific configuration map */
 export interface FeatureConfigs {
   network?: boolean | NetworkFeatureConfig;
@@ -114,6 +120,8 @@ export function initializeDebugToolkit(
       DebugToolkit.hideLauncher();
     }
 
+    restoreDaemonStreaming().catch(() => {});
+
     return DebugToolkit;
   } catch (error) {
     console.error('[DebugToolkit] Initialization failed:', error);

package/src/features/network/index.ts

@@ -9,8 +9,7 @@ import {
   startXMLHttpRequest,
   resetInterceptors,
 } from './networkInterceptor';
-
-type NetworkLogPayload = Omit<NetworkLogEntry, 'id'>;
+import type { NetworkLogPayload } from './networkInterceptor';
 
 // ─── Utilities ────────────────────────────────────────
 
@@ -37,6 +36,7 @@ function emitNetworkLog(entry: NetworkLogPayload): void {
 // ─── Feature factory ──────────────────────────────────
 
 const DEFAULT_MAX_LOGS = 200;
+const daemonEndpointBlacklist: Array<string | RegExp> = [];
 
 export interface NetworkFeatureConfig {
   /** Maximum number of network logs to keep (default: 200) */
@@ -57,7 +57,7 @@ export const createNetworkFeature = (config?: NetworkFeatureConfig): DebugFeatur
   let stopXhrFn: (() => void) | null = null;
 
   const handleLog = (entry: NetworkLogPayload) => {
-    if (isUrlBlacklisted(entry.request.url, blacklist)) {
+    if (isUrlBlacklisted(entry.request.url, [...blacklist, ...daemonEndpointBlacklist])) {
       return;
     }
     logStore.push({ ...entry, id: logStore.nextId() }, maxLogs);
@@ -95,8 +95,35 @@ export const createNetworkFeature = (config?: NetworkFeatureConfig): DebugFeatur
   };
 };
 
+function normalizeDaemonEndpoint(endpoint: string): string {
+  const trimmed = endpoint.trim().replace(/\/+$/, '');
+  if (!trimmed) {
+    return trimmed;
+  }
+
+  try {
+    const url = new URL(trimmed);
+    return `${url.origin}${url.pathname === '/' ? '' : url.pathname}`;
+  } catch {
+    return trimmed;
+  }
+}
+
+export function _addDaemonEndpointToNetworkBlacklist(endpoint: string): void {
+  const normalized = normalizeDaemonEndpoint(endpoint);
+  if (!normalized || daemonEndpointBlacklist.includes(normalized)) {
+    return;
+  }
+  daemonEndpointBlacklist.push(normalized);
+}
+
+export function _isNetworkUrlBlacklistedForTesting(url: string): boolean {
+  return isUrlBlacklisted(url, daemonEndpointBlacklist);
+}
+
 /** Reset module-level state for testing */
 export function _resetNetworkForTesting(): void {
   networkChannel = createEventChannel<NetworkLogPayload>();
+  daemonEndpointBlacklist.splice(0, daemonEndpointBlacklist.length);
   resetInterceptors();
 }

package/src/features/network/networkInterceptor.ts

@@ -3,6 +3,8 @@ import { urlRewriter } from '../../utils/urlRewriterRegistry';
 
 type NetworkLogPayload = Omit<NetworkLogEntry, 'id'>;
 
+export type { NetworkLogPayload };
+
 // Intercepts React Native's XMLHttpRequest transport layer.
 // RN fetch and axios (default adapter) both go through XHR — one hook captures everything.
 
@@ -113,6 +115,15 @@ function safeRead<T>(read: () => T): T | undefined {
   }
 }
 
+// URLs matching these patterns are skipped (Metro dev server internals).
+const IGNORED_URL_PATTERNS = [
+  /\/symbolicate$/,
+];
+
+function shouldIgnoreUrl(url: string): boolean {
+  return IGNORED_URL_PATTERNS.some((p) => p.test(url));
+}
+
 function getGlobalXMLHttpRequest(): XMLHttpRequestConstructorLike | undefined {
   return (globalThis as { XMLHttpRequest?: XMLHttpRequestConstructorLike }).XMLHttpRequest;
 }
@@ -183,6 +194,9 @@ export function startXMLHttpRequest(
     ...args: unknown[]
   ) {
     const rewrittenUrl = urlRewriter.get() ? rewriteUrl(url) : url;
+    if (shouldIgnoreUrl(rewrittenUrl)) {
+      return originalXhrOpen!.call(this, method, rewrittenUrl, ...args);
+    }
     pendingXhrRequests.set(this, {
       method: (method || 'GET').toUpperCase(),
       url: rewrittenUrl,
@@ -209,12 +223,11 @@ export function startXMLHttpRequest(
     body?: unknown,
   ) {
     const that = this;
-    const state = pendingXhrRequests.get(that) ?? {
-      method: 'GET',
-      url: '',
-      headers: {},
-      timestamp: Date.now(),
-    };
+    const existingState = pendingXhrRequests.get(that);
+    if (!existingState) {
+      return originalXhrSend!.call(that, body);
+    }
+    const state = existingState;
     state.body = body;
     state.timestamp = Date.now();
     pendingXhrRequests.set(that, state);

package/src/index.ts

@@ -28,6 +28,28 @@ export { useNavigationLogger } from './features/navigation/useNavigationLogger';
 export { safeStringify } from './utils/safeStringify';
 export { copyToComputer, logToComputer, fmt } from './utils/copyToComputer';
 export type { CopyResult, CopyOptions, CopyMethod } from './utils/copyToComputer';
+export { createDebugDeviceReport } from './utils/deviceReport';
+export type { DebugDeviceReport, DebugDeviceReportOptions } from './utils/deviceReport';
+export { DaemonClient, daemonClient } from './utils/DaemonClient';
+export type {
+  DaemonSettings,
+  DaemonConnectionMode,
+  DaemonConnectionFailureReason,
+  DaemonConnectionOptions,
+  DaemonConnectionResult,
+  StreamStatus,
+  StreamToDaemonOptions,
+  ReportResult,
+  ReportToDaemonOptions,
+} from './utils/DaemonClient';
+export {
+  getDefaultDaemonEndpoint,
+  reportDebugDeviceToDaemon,
+  checkDaemonConnection,
+  startStreaming,
+  stopStreaming,
+  isStreaming,
+} from './utils/DaemonClient';
 
 // Types
 export type {

package/src/ui/panel/DebugPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
   View,
   Text,
@@ -10,6 +10,7 @@ import {
   useWindowDimensions,
 } from 'react-native';
 import { Colors } from '../theme/colors';
+import { StreamingSettingsModal } from './StreamingSettingsModal';
 
 interface DebugPanelProps {
   onClose: () => void;
@@ -21,6 +22,7 @@ export function DebugPanel({ onClose, onClearAll, children }: DebugPanelProps) {
   const { height: screenHeight } = useWindowDimensions();
   const panelTranslateY = useRef(new Animated.Value(screenHeight)).current;
   const backdropOpacity = useRef(new Animated.Value(0)).current;
+  const [settingsVisible, setSettingsVisible] = useState(false);
 
   useEffect(() => {
     requestAnimationFrame(() => {
@@ -101,6 +103,13 @@ export function DebugPanel({ onClose, onClearAll, children }: DebugPanelProps) {
           <View style={styles.header}>
             <Text style={styles.headerTitle}>Debug Toolkit</Text>
             <View style={styles.headerButtons}>
+              <TouchableOpacity
+                onPress={() => setSettingsVisible(true)}
+                style={styles.settingsButton}
+                activeOpacity={0.6}
+              >
+                <Text style={styles.settingsButtonText}>⚙</Text>
+              </TouchableOpacity>
               <TouchableOpacity
                 onPress={() => {
                   onClearAll();
@@ -119,6 +128,7 @@ export function DebugPanel({ onClose, onClearAll, children }: DebugPanelProps) {
         </View>
         <View style={styles.panelContent}>{children}</View>
       </Animated.View>
+      <StreamingSettingsModal visible={settingsVisible} onClose={() => setSettingsVisible(false)} />
     </View>
   );
 }
@@ -198,6 +208,18 @@ const styles = StyleSheet.create({
     fontSize: 14,
     fontWeight: '500',
   },
+  settingsButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: Colors.background,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  settingsButtonText: {
+    fontSize: 16,
+    color: Colors.textSecondary,
+  },
   closeButton: {
     width: 30,
     height: 30,

package/src/ui/panel/FloatPanelView.tsx

@@ -4,8 +4,6 @@ import {
   Text,
   StyleSheet,
   Animated,
-  PanResponder,
-  Easing,
 } from 'react-native';
 import type { AnyDebugFeature } from '../../types';
 import { getPreference, setPreference, KEYS } from '../../utils/debugPreferences';
@@ -13,6 +11,7 @@ import { FloatIcon } from '../floating/FloatIcon';
 import { DebugPanel } from './DebugPanel';
 import { FeatureTabBar } from './FeatureTabBar';
 import type { TabItem } from './FeatureTabBar';
+import { useTabAnimation } from './useTabAnimation';
 
 // ─── Error Boundary ────────────────────────────────────
 interface ErrorBoundaryState {
@@ -66,34 +65,14 @@ export function FloatPanelView({ features, panelOpen, onOpenPanel, onClosePanel,
     return () => { mounted = false; };
   }, []);
 
-  // Content slide animation
-  const contentOpacity = useRef(new Animated.Value(1)).current;
-  const contentTranslateX = useRef(new Animated.Value(0)).current;
-  const isSwitchingTab = useRef(false);
-
-  // Refs to avoid stale closures in PanResponder
-  const activeTabRef = useRef(0);
-  activeTabRef.current = activeTab;
-  const featuresLengthRef = useRef(features.length);
-  featuresLengthRef.current = features.length;
-  const switchTabRef = useRef<(index: number) => void>(() => {});
-
-  // Swipe-to-switch responder
-  const swipeResponder = useRef(
-    PanResponder.create({
-      onStartShouldSetPanResponder: () => false,
-      onMoveShouldSetPanResponder: (_, gs) => {
-        if (isSwitchingTab.current) return false;
-        return Math.abs(gs.dx) > 25 && Math.abs(gs.dx) > Math.abs(gs.dy) * 2.5;
-      },
-      onPanResponderRelease: (_, gs) => {
-        const tab = activeTabRef.current;
-        if (gs.dx < -40 && tab < featuresLengthRef.current - 1) switchTabRef.current(tab + 1);
-        else if (gs.dx > 40 && tab > 0) switchTabRef.current(tab - 1);
-      },
-      onPanResponderTerminationRequest: () => true,
-    }),
-  ).current;
+  const { contentOpacity, contentTranslateX, panHandlers, switchTab } = useTabAnimation({
+    activeTab,
+    tabCount: features.length,
+    onTabChange: useCallback((index: number) => {
+      setActiveTab(index);
+      setPreference(KEYS.lastTab, String(index));
+    }, []),
+  });
 
   // Feature subscription → re-render on data changes
   const [, setTick] = useState(0);
@@ -122,43 +101,6 @@ export function FloatPanelView({ features, panelOpen, onOpenPanel, onClosePanel,
     }
   }, [features.length, activeTab]);
 
-  // Tab switching with content animation
-  const switchTab = useCallback(
-    (index: number) => {
-      if (isSwitchingTab.current || index === activeTabRef.current) return;
-      isSwitchingTab.current = true;
-      const direction = index > activeTabRef.current ? 1 : -1;
-
-      Animated.parallel([
-        Animated.timing(contentOpacity, { toValue: 0, duration: 80, useNativeDriver: true }),
-        Animated.timing(contentTranslateX, {
-          toValue: -direction * 40,
-          duration: 80,
-          useNativeDriver: true,
-        }),
-      ]).start(() => {
-        setActiveTab(index);
-        setPreference(KEYS.lastTab, String(index));
-        contentTranslateX.setValue(direction * 40);
-        Animated.parallel([
-          Animated.timing(contentOpacity, { toValue: 1, duration: 150, useNativeDriver: true }),
-          Animated.timing(contentTranslateX, {
-            toValue: 0,
-            duration: 200,
-            easing: Easing.out(Easing.cubic),
-            useNativeDriver: true,
-          }),
-        ]).start(() => {
-          isSwitchingTab.current = false;
-        });
-      });
-    },
-    [contentOpacity, contentTranslateX],
-  );
-
-  // Keep ref in sync
-  switchTabRef.current = switchTab;
-
   // Badge (first feature that returns one)
   const envBadge = features.map((f) => f.badge?.()).find((b) => b != null) ?? null;
   const tabs: TabItem[] = features.map((f) => ({ label: f.label, id: f.name }));
@@ -195,7 +137,7 @@ export function FloatPanelView({ features, panelOpen, onOpenPanel, onClosePanel,
                 styles.contentContainer,
                 { opacity: contentOpacity, transform: [{ translateX: contentTranslateX }] },
               ]}
-              {...swipeResponder.panHandlers}
+              {...panHandlers}
             >
               {renderFeatureContent()}
             </Animated.View>