rn-backstage 1.0.0 → 1.2.0

package/lib/typescript/types.d.ts

@@ -14,6 +14,28 @@ export interface LogEntry {
     data?: unknown;
     timestamp: number;
 }
+export declare enum NetworkState {
+    pending = "pending",
+    completed = "completed",
+    error = "error"
+}
+export interface NetworkEntry {
+    id: string;
+    method: string;
+    url: string;
+    startTime: number;
+    endTime?: number;
+    duration?: number;
+    status?: number;
+    statusText?: string;
+    requestHeaders?: Record<string, string>;
+    responseHeaders?: Record<string, string>;
+    requestBody?: string;
+    responseBody?: string;
+    responseSize?: number;
+    error?: string;
+    state: NetworkState;
+}
 export interface AppInfoItem {
     label: string;
     value: string;
@@ -26,6 +48,16 @@ export interface QuickAction {
     destructive?: boolean;
     testID?: string;
 }
+export interface FeatureFlag {
+    /** Unique key for this flag */
+    key: string;
+    /** Display label */
+    label: string;
+    /** Current value */
+    value: boolean;
+    /** Optional description shown below the label */
+    description?: string;
+}
 export interface BackstageTab {
     key: string;
     title: string;
@@ -67,6 +99,10 @@ export interface BackstageProps {
     state?: Record<string, unknown>;
     /** Custom action buttons in the Info tab */
     quickActions?: QuickAction[];
+    /** Feature flags to display with toggle switches */
+    featureFlags?: FeatureFlag[];
+    /** Callback when a feature flag is toggled */
+    onToggleFeatureFlag?: (key: string, value: boolean) => void;
     /** Maximum number of logs to retain in memory. Default: 500 */
     maxLogs?: number;
     /** Log messages containing these strings will be excluded */
@@ -85,6 +121,16 @@ export interface BackstageProps {
     initialY?: number;
     /** Text displayed on the floating pill. Defaults to appVersion or "DEV" */
     pillText?: string;
+    /** Whether to enable network request interception. Default: true */
+    enableNetworkInspector?: boolean;
+    /** Maximum number of network entries to retain in memory. Default: 500 */
+    maxNetworkEntries?: number;
+    /** Maximum body size (bytes) to capture per request/response. Default: 65536 (64KB) */
+    maxNetworkBodySize?: number;
+    /** URL substrings to exclude from network capture */
+    networkFilters?: string[];
+    /** Auto-filter console.logs from network callbacks (e.g., Axios interceptors) out of the Logs tab. Default: true */
+    autoFilterNetworkLogs?: boolean;
 }
 export interface BackstageStyleOverrides {
     pillStyle?: StyleProp<ViewStyle>;

package/lib/typescript/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-backstage",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "A zero-dependency developer/QA debug panel for React Native apps",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/Backstage.tsx

@@ -7,11 +7,16 @@ import React, {
   useState,
 } from 'react'
 import { StyleSheet, View } from 'react-native'
-import { DEFAULT_MAX_LOGS } from './constants'
+import { DEFAULT_MAX_LOGS, DEFAULT_MAX_NETWORK_ENTRIES } from './constants'
 import { installInterceptor, LogBuffer, uninstallInterceptor } from './log-interceptor'
+import {
+  installNetworkInterceptor,
+  NetworkBuffer,
+  uninstallNetworkInterceptor,
+} from './network-interceptor'
 import { FloatingPill } from './components/FloatingPill'
 import { BackstagePanel } from './components/BackstagePanel'
-import type { BackstageProps, BackstageRef, LogEntry } from './types'
+import type { BackstageProps, BackstageRef, LogEntry, NetworkEntry } from './types'
 
 // ─── Component ───────────────────────────────────────────────────────────────
 
@@ -25,6 +30,8 @@ export const Backstage = forwardRef<BackstageRef, BackstageProps>(
       deviceInfo,
       state,
       quickActions,
+      featureFlags,
+      onToggleFeatureFlag,
       maxLogs = DEFAULT_MAX_LOGS,
       logFilters,
       onCopyLogs,
@@ -34,21 +41,29 @@ export const Backstage = forwardRef<BackstageRef, BackstageProps>(
       initialX,
       initialY,
       pillText,
+      enableNetworkInspector = true,
+      maxNetworkEntries = DEFAULT_MAX_NETWORK_ENTRIES,
+      maxNetworkBodySize,
+      networkFilters,
+      autoFilterNetworkLogs = true,
     },
     ref,
   ) => {
     const [panelVisible, setPanelVisible] = useState(false)
     const [hasError, setHasError] = useState(false)
     const [logs, setLogs] = useState<LogEntry[]>([])
+    const [networkEntries, setNetworkEntries] = useState<NetworkEntry[]>([])
 
     const logBuffer = useRef(new LogBuffer(maxLogs))
+    const networkBuffer = useRef(new NetworkBuffer(maxNetworkEntries))
 
     // ── Panel controls ────────────────────────────────────────
 
     const openPanel = useCallback(() => {
       setPanelVisible(true)
-      // Sync logs when opening panel
+      // Sync logs and network entries when opening panel
       setLogs(logBuffer.current.getAll())
+      setNetworkEntries(networkBuffer.current.getAll())
     }, [])
 
     const closePanel = useCallback(() => {
@@ -61,12 +76,23 @@ export const Backstage = forwardRef<BackstageRef, BackstageProps>(
       setHasError(false)
     }, [])
 
-    // ── Refresh logs ──────────────────────────────────────────
+    // ── Refresh logs ──────────────────────────────────────────────────
 
     const refreshLogs = useCallback(() => {
       setLogs(logBuffer.current.getAll())
     }, [])
 
+    // ── Network controls ──────────────────────────────────────────────
+
+    const refreshNetwork = useCallback(() => {
+      setNetworkEntries(networkBuffer.current.getAll())
+    }, [])
+
+    const clearNetwork = useCallback(() => {
+      networkBuffer.current.clear()
+      setNetworkEntries([])
+    }, [])
+
     // ── Install console interceptor ───────────────────────────
 
     useEffect(() => {
@@ -79,12 +105,38 @@ export const Backstage = forwardRef<BackstageRef, BackstageProps>(
         }
       }
 
-      installInterceptor(handleLogEntry, logFilters)
+      installInterceptor(handleLogEntry, logFilters, {
+        autoFilterNetworkLogs: enableNetworkInspector && autoFilterNetworkLogs,
+      })
 
       return () => {
         uninstallInterceptor()
       }
-    }, [logFilters])
+    }, [logFilters, enableNetworkInspector, autoFilterNetworkLogs])
+
+    // ── Install network interceptor ───────────────────────────────
+
+    useEffect(() => {
+      if (!enableNetworkInspector) return
+
+      const handleNetworkEntry = (entry: NetworkEntry) => {
+        networkBuffer.current.upsert(entry)
+
+        // Auto-refresh if panel is open
+        if (panelVisible) {
+          setNetworkEntries(networkBuffer.current.getAll())
+        }
+      }
+
+      installNetworkInterceptor(handleNetworkEntry, {
+        filters: networkFilters,
+        maxBodySize: maxNetworkBodySize,
+      })
+
+      return () => {
+        uninstallNetworkInterceptor()
+      }
+    }, [enableNetworkInspector, networkFilters, maxNetworkBodySize, panelVisible])
 
     // ── Expose ref methods ────────────────────────────────────
 
@@ -119,9 +171,15 @@ export const Backstage = forwardRef<BackstageRef, BackstageProps>(
           deviceInfo={deviceInfo}
           state={state}
           quickActions={quickActions}
+          featureFlags={featureFlags}
+          onToggleFeatureFlag={onToggleFeatureFlag}
           logs={logs}
           onRefreshLogs={refreshLogs}
           onCopyLogs={onCopyLogs}
+          networkEntries={networkEntries}
+          onRefreshNetwork={refreshNetwork}
+          onClearNetwork={clearNetwork}
+          onCopyNetwork={onCopyLogs}
           extraTabs={extraTabs}
           styles={propStyles}
         >

package/src/components/BackstagePanel.tsx

@@ -12,11 +12,15 @@ import { DarkTheme, MonospaceFont, TestIDs } from '../constants'
 import { TabBar } from './TabBar'
 import { InfoTab } from './InfoTab'
 import { LogsTab } from './LogsTab'
+import { NetworkTab } from './NetworkTab'
+import { FlagsTab } from './FlagsTab'
 import type {
   AppInfoItem,
   BackstageStyleOverrides,
   BackstageTab,
+  FeatureFlag,
   LogEntry,
+  NetworkEntry,
   QuickAction,
 } from '../types'
 
@@ -33,12 +37,20 @@ interface BackstagePanelProps {
   deviceInfo?: AppInfoItem[]
   state?: Record<string, unknown>
   quickActions?: QuickAction[]
+  featureFlags?: FeatureFlag[]
+  onToggleFeatureFlag?: (key: string, value: boolean) => void
 
   // Logs tab props
   logs: LogEntry[]
   onRefreshLogs: () => void
   onCopyLogs?: (logs: string) => void
 
+  // Network tab props
+  networkEntries: NetworkEntry[]
+  onRefreshNetwork: () => void
+  onClearNetwork: () => void
+  onCopyNetwork?: (text: string) => void
+
   // Extensibility
   extraTabs?: BackstageTab[]
 
@@ -47,13 +59,17 @@ interface BackstagePanelProps {
   children?: React.ReactNode
 }
 
-// ─── Built-in Tab Definitions ────────────────────────────────────────────────
+// ─── Built-in Tab Definitions ────────────────────────────────────────────
 
-const BUILT_IN_TABS = [
+const ALWAYS_ON_TABS = [
   { key: 'info', title: 'Info', icon: 'ℹ️' },
-  { key: 'logs', title: 'Logs', icon: '📋' },
+  { key: 'network', title: 'Network', icon: '🌐' },
 ]
 
+const FLAGS_TAB = { key: 'flags', title: 'Flags', icon: '🎚' }
+
+const LOGS_TAB = { key: 'logs', title: 'Logs', icon: '📋' }
+
 // ─── Component ───────────────────────────────────────────────────────────────
 
 export const BackstagePanel: React.FC<BackstagePanelProps> = ({
@@ -65,18 +81,27 @@ export const BackstagePanel: React.FC<BackstagePanelProps> = ({
   deviceInfo,
   state,
   quickActions,
+  featureFlags,
+  onToggleFeatureFlag,
   logs,
   onRefreshLogs,
   onCopyLogs,
+  networkEntries,
+  onRefreshNetwork,
+  onClearNetwork,
+  onCopyNetwork,
   extraTabs = [],
   styles: propStyles,
   children,
 }) => {
   const [activeTab, setActiveTab] = useState('info')
 
-  // Compose all tabs: built-in + extra
+  // Compose all tabs: built-in (conditionally including Flags) + extra
+  const hasFlags = featureFlags && featureFlags.length > 0
   const allTabs = [
-    ...BUILT_IN_TABS,
+    ...ALWAYS_ON_TABS,
+    ...(hasFlags ? [FLAGS_TAB] : []),
+    LOGS_TAB,
     ...extraTabs.map(t => ({ key: t.key, title: t.title, icon: t.icon })),
   ]
 
@@ -98,6 +123,22 @@ export const BackstagePanel: React.FC<BackstagePanelProps> = ({
             {children}
           </InfoTab>
         )
+      case 'flags':
+        return (
+          <FlagsTab
+            flags={featureFlags ?? []}
+            onToggle={onToggleFeatureFlag}
+          />
+        )
+      case 'network':
+        return (
+          <NetworkTab
+            entries={networkEntries}
+            onRefresh={onRefreshNetwork}
+            onClear={onClearNetwork}
+            onCopy={onCopyNetwork}
+          />
+        )
       case 'logs':
         return (
           <LogsTab

package/src/components/FlagsTab.tsx

@@ -0,0 +1,249 @@
+import React, { useMemo, useState } from 'react'
+import { ScrollView, StyleSheet, Switch, Text, TextInput, View } from 'react-native'
+import { DarkTheme, MonospaceFont } from '../constants'
+import type { FeatureFlag } from '../types'
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface FlagsTabProps {
+  flags: FeatureFlag[]
+  onToggle?: (key: string, value: boolean) => void
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export const FlagsTab: React.FC<FlagsTabProps> = ({ flags, onToggle }) => {
+  const [searchText, setSearchText] = useState('')
+
+  const filteredFlags = useMemo(() => {
+    if (!searchText.trim()) return flags
+    const query = searchText.toLowerCase()
+    return flags.filter(
+      f =>
+        f.label.toLowerCase().includes(query) ||
+        f.key.toLowerCase().includes(query) ||
+        (f.description && f.description.toLowerCase().includes(query)),
+    )
+  }, [flags, searchText])
+
+  // Stats
+  const enabledCount = flags.filter(f => f.value).length
+
+  return (
+    <View style={styles.container}>
+      {/* Search Bar */}
+      <View style={styles.searchContainer}>
+        <View style={styles.searchInputWrapper}>
+          <Text style={styles.searchIcon}>⌕</Text>
+          <TextInput
+            style={styles.searchInput}
+            placeholder="Filter flags..."
+            placeholderTextColor={DarkTheme.textMuted}
+            value={searchText}
+            onChangeText={setSearchText}
+            autoCapitalize="none"
+            autoCorrect={false}
+            clearButtonMode="while-editing"
+            returnKeyType="search"
+          />
+        </View>
+      </View>
+
+      {/* Stats Bar */}
+      <View style={styles.statsBar}>
+        <Text style={styles.statText}>
+          {filteredFlags.length === flags.length
+            ? `${flags.length} flag${flags.length !== 1 ? 's' : ''}`
+            : `${filteredFlags.length} of ${flags.length}`}
+        </Text>
+        <Text style={styles.statText}>
+          <Text style={styles.statEnabled}>{enabledCount} on</Text>
+          {' · '}
+          <Text style={styles.statDisabled}>{flags.length - enabledCount} off</Text>
+        </Text>
+      </View>
+
+      {/* Flag List */}
+      <ScrollView
+        style={styles.list}
+        contentContainerStyle={
+          filteredFlags.length === 0 ? styles.emptyContainer : styles.listContent
+        }
+        showsVerticalScrollIndicator={false}
+      >
+        {filteredFlags.length === 0 ? (
+          <View style={styles.emptyState}>
+            <Text style={styles.emptyIcon}>🎚</Text>
+            <Text style={styles.emptyTitle}>No flags match</Text>
+            <Text style={styles.emptySubtitle}>Try adjusting your search</Text>
+          </View>
+        ) : (
+          filteredFlags.map((flag, index) => (
+            <View key={flag.key}>
+              <View style={styles.flagRow}>
+                <View style={styles.flagInfo}>
+                  <View style={styles.flagHeader}>
+                    <Text style={styles.flagLabel}>{flag.label}</Text>
+                    <Text style={[styles.flagKey, flag.value && styles.flagKeyActive]}>
+                      {flag.key}
+                    </Text>
+                  </View>
+                  {flag.description && (
+                    <Text style={styles.flagDescription}>{flag.description}</Text>
+                  )}
+                </View>
+                <Switch
+                  testID={`backstage.flag.${flag.key}`}
+                  value={flag.value}
+                  onValueChange={(newValue: boolean) => onToggle?.(flag.key, newValue)}
+                  trackColor={{ false: DarkTheme.border, true: DarkTheme.accent }}
+                  thumbColor={flag.value ? '#FFFFFF' : DarkTheme.textMuted}
+                  ios_backgroundColor={DarkTheme.border}
+                />
+              </View>
+              {index < filteredFlags.length - 1 && <View style={styles.divider} />}
+            </View>
+          ))
+        )}
+      </ScrollView>
+    </View>
+  )
+}
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  searchContainer: {
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: DarkTheme.border,
+  },
+  searchInputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: DarkTheme.surfaceElevated,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: DarkTheme.border,
+    paddingHorizontal: 12,
+    height: 38,
+  },
+  searchIcon: {
+    fontSize: 16,
+    color: DarkTheme.textMuted,
+    marginRight: 8,
+  },
+  searchInput: {
+    flex: 1,
+    fontFamily: MonospaceFont,
+    fontSize: 13,
+    color: DarkTheme.text,
+    padding: 0,
+  },
+  statsBar: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 6,
+    backgroundColor: DarkTheme.surface,
+  },
+  statText: {
+    fontFamily: MonospaceFont,
+    fontSize: 11,
+    color: DarkTheme.textMuted,
+  },
+  statEnabled: {
+    color: DarkTheme.success,
+    fontWeight: '700',
+  },
+  statDisabled: {
+    color: DarkTheme.textMuted,
+  },
+  list: {
+    flex: 1,
+  },
+  listContent: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+  },
+  emptyContainer: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  emptyState: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 40,
+  },
+  emptyIcon: {
+    fontSize: 48,
+    marginBottom: 16,
+    opacity: 0.5,
+  },
+  emptyTitle: {
+    fontFamily: MonospaceFont,
+    fontSize: 16,
+    fontWeight: '700',
+    color: DarkTheme.textSecondary,
+    marginBottom: 8,
+  },
+  emptySubtitle: {
+    fontFamily: MonospaceFont,
+    fontSize: 13,
+    color: DarkTheme.textMuted,
+    textAlign: 'center',
+  },
+  flagRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 14,
+    paddingHorizontal: 4,
+  },
+  flagInfo: {
+    flex: 1,
+    marginRight: 16,
+  },
+  flagHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  flagLabel: {
+    fontFamily: MonospaceFont,
+    fontSize: 14,
+    color: DarkTheme.text,
+    fontWeight: '600',
+  },
+  flagKey: {
+    fontFamily: MonospaceFont,
+    fontSize: 10,
+    color: DarkTheme.textMuted,
+    backgroundColor: DarkTheme.surfaceElevated,
+    borderRadius: 4,
+    paddingHorizontal: 6,
+    paddingVertical: 1,
+    overflow: 'hidden',
+  },
+  flagKeyActive: {
+    color: DarkTheme.accent,
+    backgroundColor: DarkTheme.accentDim,
+  },
+  flagDescription: {
+    fontFamily: MonospaceFont,
+    fontSize: 12,
+    color: DarkTheme.textMuted,
+    marginTop: 4,
+    lineHeight: 18,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: DarkTheme.border,
+    marginHorizontal: 4,
+  },
+})

package/src/components/InfoTab.tsx

@@ -148,7 +148,7 @@ export const InfoTab: React.FC<InfoTabProps> = ({
         </View>
       )}
 
-      {/* ── Quick Actions Section ───────────────────────────────── */}
+      {/* ── Quick Actions Section ─────────────────────────────────────── */}
       {quickActions.length > 0 && (
         <View style={styles.section}>
           <SectionHeader title="QUICK ACTIONS" titleStyle={propStyles?.sectionTitleStyle} />