feat(roadmap): M-A foundation — ghost-type purge, leaky-Set fix, perf-budget gate, lifecycle module (recovery of #39)

.github/workflows/ci.yml

@@ -23,6 +23,12 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Type check (src)
+        run: npm run typecheck
+
+      - name: Type check (node/vite)
+        run: npm run typecheck:node
+
       - name: Build extension
         run: npm run build
 

.gitignore

@@ -3,4 +3,8 @@ dist
 .sisyphus
 .agent
 worker
-node_modules
+node_modules
+*.tsbuildinfo
+
+# macOS noise
+.DS_Store

package.json

@@ -38,7 +38,10 @@
   "test": "vitest",
   "test:run": "vitest run",
   "test:coverage": "vitest run --coverage",
-  "fixture:basic:dev": "npm --prefix test/fixtures/basic run dev"
+  "fixture:basic:dev": "npm --prefix test/fixtures/basic run dev",
+  "typecheck": "tsc --noEmit",
+  "typecheck:node": "tsc -p tsconfig.node.json --noEmit",
+  "bench": "vitest bench --run"
 },
   "devDependencies": {
     "@resvg/resvg-js": "^2.6.2",

src/__tests__/IssueCard.test.tsx

@@ -36,7 +36,7 @@
 
 const mockInfoIssue: Issue = {
   id: 'issue-3',
-  type: 'DEV_MODE_IN_PROD',
+  type: 'SLOW_RENDER',
   severity: 'info',
   component: 'App',
   message: 'React is running in development mode',
@@ -138,7 +138,7 @@
       const header = screen.getByText('Missing Key in List').closest('.issue-header');
       if (header) fireEvent.click(header);
 
       expect(screen.getByText('💡 Suggestion:')).toBeInTheDocument();
       expect(screen.getByText(/Add a unique key prop/)).toBeInTheDocument();
     });
   });
@@ -194,7 +194,7 @@
       const header = screen.getByText('Stale Closure Detected').closest('.issue-header');
       if (header) fireEvent.click(header);
 
       expect(screen.getByText('🔍 Closure Timeline:')).toBeInTheDocument();
     });
 
     it('shows created and executed render numbers', () => {
@@ -253,7 +253,7 @@
       const header = screen.getByText('Missing Key in List').closest('.issue-header');
       if (header) fireEvent.click(header);
 
       expect(screen.getByText('📚 Learn more')).toBeInTheDocument();
     });
 
     it('link opens in new tab', () => {
@@ -262,7 +262,7 @@
       const header = screen.getByText('Missing Key in List').closest('.issue-header');
       if (header) fireEvent.click(header);
 
       const link = screen.getByText('📚 Learn more');
       expect(link.getAttribute('target')).toBe('_blank');
       expect(link.getAttribute('rel')).toBe('noopener noreferrer');
     });

src/__tests__/UIStateTab.test.tsx

@@ -44,12 +44,11 @@ const mockUIIssues: Issue[] = [
   },
   {
     id: 'issue-3',
-    type: 'DIRECT_STATE_MUTATION',
+    type: 'MISSING_KEY',
     severity: 'error',
     component: 'Counter',
-    message: 'State object was mutated directly',
-    suggestion: 'Use setState with a new object or spread operator',
-    code: 'state.count++ // Wrong!\nsetState({ count: state.count + 1 }) // Correct',
+    message: 'Counter list items are missing key props',
+    suggestion: 'Add unique key prop to each counter item',
     timestamp: Date.now(),
   },
 ];
@@ -105,17 +104,18 @@ describe('UIStateTab', () => {
 
     it('filters MISSING_KEY issues', () => {
       render(<UIStateTab issues={mockUIIssues} onClear={mockOnClear} />);
-      expect(screen.getByText('Missing Key in List')).toBeInTheDocument();
+      expect(screen.getAllByText('Missing Key in List').length).toBeGreaterThan(0);
     });
 
     it('filters INDEX_AS_KEY issues', () => {
       render(<UIStateTab issues={mockUIIssues} onClear={mockOnClear} />);
       expect(screen.getByText('Index Used as Key')).toBeInTheDocument();
     });
 
-    it('filters DIRECT_STATE_MUTATION issues', () => {
-      render(<UIStateTab issues={mockUIIssues} onClear={mockOnClear} />);
-      expect(screen.getByText('Direct State Mutation')).toBeInTheDocument();
+    it('filters MISSING_KEY issues (from multiple fixtures)', () => {
+      const singleIssue = [mockUIIssues[0]];
+      render(<UIStateTab issues={singleIssue} onClear={mockOnClear} />);
+      expect(screen.getByText('Missing Key in List')).toBeInTheDocument();
     });
   });
 

src/__tests__/debugging-scenarios.tsx

@@ -338,10 +338,10 @@ const OptimizedChild = React.memo(function OptimizedChild({
  * Scenario 2: INDEX_AS_KEY warning in UI & State tab
  * Scenario 3: STALE_CLOSURE warning in Side Effects tab
  * Scenario 4: MISSING_CLEANUP warning in Side Effects tab
- * Scenario 5: UNNECESSARY_RERENDER in Performance tab
+ * Scenario 5: (removed ghost type) in Performance tab
  * Scenario 6: SLOW_RENDER (>16ms) in Performance tab
  * Scenario 7: Memory growth in Memory tab
- * Scenario 8: DIRECT_STATE_MUTATION in UI & State tab
+ * Scenario 8: (removed ghost type) in UI & State tab
  * Scenario 9: INFINITE_LOOP_RISK in Side Effects tab
  * Scenario 10: Clean - no warnings (reference for good code)
  */

src/inject/index.ts

@@ -1,6 +1,8 @@
 // @ts-ignore: WeakRef is available in all modern browsers (ES2021+)
 declare class WeakRef<T extends object> { constructor(target: T); deref(): T | undefined; }
 
+import { installCleanupInterval, uninstallCleanupInterval } from './lifecycle';
+
 (function() {
   'use strict';
 
@@ -11,10 +13,6 @@ declare class WeakRef<T extends object> { constructor(target: T); deref(): T | u
   // Global debugger enable/disable flag (default: OFF for performance)
   let debuggerEnabled = false;
 
-  // Grace period: skip fiber commits for first N ms after enabling debugger
-  let navigationStartTime = 0;
-  const NAVIGATION_GRACE_MS = 3000;
-
   let extensionAlive = true;
   let messageQueue: Array<{type: string; payload?: unknown}> = [];
   let flushTimeout: number | null = null;
@@ -24,6 +22,7 @@ declare class WeakRef<T extends object> { constructor(target: T); deref(): T | u
   let currentThrottle = 100;
   const MAX_BATCH_SIZE = 100;
   const MAX_QUEUE_SIZE = 500;
+  const LEAKY_SET_TTL_MS = 5 * 60 * 1000;
 
   function getAdaptiveThrottle(): number {
     const now = Date.now();
@@ -335,9 +334,9 @@ declare class WeakRef<T extends object> { constructor(target: T); deref(): T | u
   const renderCounts = new Map<string, number>();
   const lastRenderTimes = new Map<string, number>();
   const recentRenderTimestamps = new Map<string, number[]>();
-  const reportedEffectIssues = new Set<string>();
-  const reportedExcessiveRerenders = new Set<string>();
-  const reportedSlowRenders = new Set<string>();
+  const reportedEffectIssues = new Map<string, number>();
+  const reportedExcessiveRerenders = new Map<string, number>();
+  const reportedSlowRenders = new Map<string, number>();
 
   const EXCESSIVE_RENDER_THRESHOLD = 10;
   const EXCESSIVE_RENDER_WINDOW_MS = 1000;
@@ -700,7 +699,7 @@ declare class WeakRef<T extends object> { constructor(target: T); deref(): T | u
       if (needsCleanup && destroyFn === undefined) {
         const issueKey = `${componentName}_MISSING_CLEANUP_${effectIndex}`;
         if (!reportedEffectIssues.has(issueKey)) {
-          reportedEffectIssues.add(issueKey);
+          reportedEffectIssues.set(issueKey, Date.now());
           let resourceType = 'resource';
           if (hasTimerPattern) resourceType = 'timer (setInterval/setTimeout)';
           else if (hasEventListenerPattern) resourceType = 'event listener';
@@ -731,7 +730,7 @@ declare class WeakRef<T extends object> { constructor(target: T); deref(): T | u
         if (!hasTimerPattern && !hasEventListenerPattern) {
           const issueKey = `${componentName}_INFINITE_LOOP_RISK_${effectIndex}`;
           if (!reportedEffectIssues.has(issueKey)) {
-            reportedEffectIssues.add(issueKey);
+            reportedEffectIssues.set(issueKey, Date.now());
             issues.push({
               id: generateId(),
               type: 'INFINITE_LOOP_RISK',
@@ -755,7 +754,7 @@ declare class WeakRef<T extends object> { constructor(target: T); deref(): T | u
         if (usesPropsOrState) {
           const issueKey = `${componentName}_MISSING_DEP_${effectIndex}`;
           if (!reportedEffectIssues.has(issueKey)) {
-            reportedEffectIssues.add(issueKey);
+            reportedEffectIssues.set(issueKey, Date.now());
             issues.push({
               id: generateId(),
               type: 'MISSING_DEP',
@@ -1588,7 +1587,7 @@ declare class WeakRef<T extends object> { constructor(target: T); deref(): T | u
       if (rendersInLastSecond >= EXCESSIVE_RENDER_THRESHOLD) {
         const issueKey = `excessive_${fiberId}`;
         if (!reportedExcessiveRerenders.has(issueKey)) {
-          reportedExcessiveRerenders.add(issueKey);
+          reportedExcessiveRerenders.set(issueKey, Date.now());
         }
         issues.push({
           id: issueKey,
@@ -1604,7 +1603,7 @@ declare class WeakRef<T extends object> { constructor(target: T); deref(): T | u
 
       if (actualDuration > 16) {
         if (!reportedSlowRenders.has(fiberId)) {
-          reportedSlowRenders.add(fiberId);
+          reportedSlowRenders.set(fiberId, Date.now());
           issues.push({
             id: generateId(),
             type: 'SLOW_RENDER',
@@ -2901,10 +2900,7 @@ declare class WeakRef<T extends object> { constructor(target: T); deref(): T | u
 
   function stopAllMonitoring(): void {
     // Fix 5: Stop periodic cleanup
-    if ((window as any).__REACT_DEBUGGER_CLEANUP_INTERVAL__) {
-      clearInterval((window as any).__REACT_DEBUGGER_CLEANUP_INTERVAL__);
-      (window as any).__REACT_DEBUGGER_CLEANUP_INTERVAL__ = null;
-    }
+    uninstallCleanupInterval();
     stopMemoryMonitoring();
     toggleScan(false);
     reduxSearchStopped = true;
@@ -2963,6 +2959,24 @@ declare class WeakRef<T extends object> { constructor(target: T); deref(): T | u
     if (pathCache.size > PATH_CACHE_LIMIT) {
       clearPathCache();
     }
+
+    for (const [key, ts] of reportedEffectIssues) {
+      if (now - ts > LEAKY_SET_TTL_MS) {
+        reportedEffectIssues.delete(key);
+      }
+    }
+
+    for (const [key, ts] of reportedExcessiveRerenders) {
+      if (now - ts > LEAKY_SET_TTL_MS) {
+        reportedExcessiveRerenders.delete(key);
+      }
+    }
+
+    for (const [key, ts] of reportedSlowRenders) {
+      if (now - ts > LEAKY_SET_TTL_MS) {
+        reportedSlowRenders.delete(key);
+      }
+    }
   }
 
   (window as any).__REACT_DEBUGGER_MEMORY__ = {
@@ -3222,7 +3236,6 @@ declare class WeakRef<T extends object> { constructor(target: T); deref(): T | u
         return;
       }
       debuggerEnabled = true;
-      navigationStartTime = Date.now();
       // Re-send REACT_DETECTED since inject.js may have loaded after React initialized
       const hook = (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__;
       if (hook?.renderers?.size > 0) {
@@ -3239,9 +3252,7 @@ declare class WeakRef<T extends object> { constructor(target: T); deref(): T | u
         forceReanalyze();
       }, 500);
       // Start periodic cleanup (inside ENABLE_DEBUGGER, not on every message)
-      if (!(window as any).__REACT_DEBUGGER_CLEANUP_INTERVAL__) {
-        (window as any).__REACT_DEBUGGER_CLEANUP_INTERVAL__ = window.setInterval(periodicCleanup, 60000);
-      }
+      installCleanupInterval(periodicCleanup);
       sendFromPage('DEBUGGER_STATE_CHANGED', { enabled: true });
       log('Debugger enabled');
     }

src/inject/lifecycle.ts

@@ -0,0 +1,89 @@
+/**
+ * src/inject/lifecycle.ts
+ *
+ * Leaf module that owns the install/uninstall of named lifecycle intervals
+ * for the React Debugger inject script.
+ *
+ * Design constraints (M-A consolidation):
+ *  - This file MUST NOT import anything from src/inject/index.ts (no circular
+ *    dependency). It is a pure leaf: it accepts callbacks/values as parameters
+ *    and manipulates the window namespace directly.
+ *  - Callers pass callbacks (e.g. periodicCleanup) rather than this module
+ *    closing over inject internals.
+ *  - The (window as any) casts are intentional: they follow the existing
+ *    host-page-window-namespace pattern used throughout inject/index.ts.
+ *
+ * M-A scope (T5): cleanup-interval pair only.
+ *   Memory monitor + closure tracking extractions are deferred to M-B, where
+ *   a full install(flags)/uninstall()/toggle() API will be introduced together
+ *   with a hook registry.
+ */
+
+/**
+ * Default interval duration for the periodic cleanup timer (ms).
+ * Matches the hardcoded 60000 previously inlined at inject/index.ts:3262.
+ */
+const DEFAULT_CLEANUP_INTERVAL_MS = 60_000;
+
+/**
+ * Install the periodic cleanup interval on the host-page window.
+ *
+ * Consolidates the pattern previously inlined at inject/index.ts lines 3261-3263
+ * (inside the ENABLE_DEBUGGER message handler):
+ *
+ *   ```ts
+ *   if (!(window as any).__REACT_DEBUGGER_CLEANUP_INTERVAL__) {
+ *     (window as any).__REACT_DEBUGGER_CLEANUP_INTERVAL__ =
+ *       window.setInterval(periodicCleanup, 60000);
+ *   }
+ *   ```
+ *
+ * The window-namespace guard prevents double-install (idempotent). The window
+ * key is set to the interval ID so that uninstallCleanupInterval() can clear it.
+ *
+ * Future intent (M-B): this function will become part of lifecycle.install(flags)
+ * and will be driven by the hook registry rather than called ad-hoc.
+ *
+ * @param periodicCleanup - The cleanup callback to run on each interval tick.
+ *   Defined and closed-over inside inject/index.ts; passed here as a parameter
+ *   to keep this module free of inject internals.
+ * @param intervalMs - Interval duration in milliseconds.
+ *   Defaults to DEFAULT_CLEANUP_INTERVAL_MS (60 000).
+ */
+export function installCleanupInterval(
+  periodicCleanup: () => void,
+  intervalMs: number = DEFAULT_CLEANUP_INTERVAL_MS,
+): void {
+  if (!(window as any).__REACT_DEBUGGER_CLEANUP_INTERVAL__) {
+    (window as any).__REACT_DEBUGGER_CLEANUP_INTERVAL__ = window.setInterval(
+      periodicCleanup,
+      intervalMs,
+    );
+  }
+}
+
+/**
+ * Clear the periodic cleanup interval and remove the window-namespace key.
+ *
+ * Consolidates the pattern previously inlined at inject/index.ts lines 2905-2908
+ * (inside stopAllMonitoring()):
+ *
+ *   ```ts
+ *   if ((window as any).__REACT_DEBUGGER_CLEANUP_INTERVAL__) {
+ *     clearInterval((window as any).__REACT_DEBUGGER_CLEANUP_INTERVAL__);
+ *     (window as any).__REACT_DEBUGGER_CLEANUP_INTERVAL__ = null;
+ *   }
+ *   ```
+ *
+ * Safe to call multiple times (idempotent): the guard skips the clearInterval
+ * call if the key is already null/undefined.
+ *
+ * Future intent (M-B): will become part of lifecycle.uninstall() driven by the
+ * hook registry, with reverse-priority ordering.
+ */
+export function uninstallCleanupInterval(): void {
+  if ((window as any).__REACT_DEBUGGER_CLEANUP_INTERVAL__) {
+    clearInterval((window as any).__REACT_DEBUGGER_CLEANUP_INTERVAL__);
+    (window as any).__REACT_DEBUGGER_CLEANUP_INTERVAL__ = null;
+  }
+}

src/panel/Panel.tsx

@@ -331,9 +331,9 @@ export function Panel() {
   const getBadge = (tabId: TabId): number | undefined => {
     switch (tabId) {
       case 'ui-state':
-        return getIssueCount(['DIRECT_STATE_MUTATION', 'MISSING_KEY', 'INDEX_AS_KEY', 'DUPLICATE_KEY']) || undefined;
+        return getIssueCount(['MISSING_KEY', 'INDEX_AS_KEY']) || undefined;
       case 'performance':
-        return getIssueCount(['EXCESSIVE_RERENDERS', 'UNNECESSARY_RERENDER']) || undefined;
+        return getIssueCount(['EXCESSIVE_RERENDERS']) || undefined;
       case 'side-effects':
         return getIssueCount(['MISSING_CLEANUP', 'MISSING_DEP', 'INFINITE_LOOP_RISK']) || undefined;
       case 'cls':

src/panel/components/IssueCard.tsx

@@ -12,11 +12,6 @@ const SEVERITY_CONFIG = {
 };
 
 const ISSUE_INFO: Record<string, { title: string; why: string; learnUrl?: string }> = {
-  DIRECT_STATE_MUTATION: {
-    title: 'Direct State Mutation',
-    why: 'React cannot detect direct state mutations and will not re-render the component.',
-    learnUrl: 'https://react.dev/learn/updating-objects-in-state',
-  },
   MISSING_KEY: {
     title: 'Missing Key in List',
     why: 'Keys help React identify which items have changed, are added, or removed.',
@@ -27,11 +22,6 @@ const ISSUE_INFO: Record<string, { title: string; why: string; learnUrl?: string
     why: 'Using index as key can cause issues when list items are reordered or filtered.',
     learnUrl: 'https://react.dev/learn/rendering-lists#why-does-react-need-keys',
   },
-  DUPLICATE_KEY: {
-    title: 'Duplicate Keys',
-    why: 'Duplicate keys will cause React to incorrectly update and render components.',
-    learnUrl: 'https://react.dev/learn/rendering-lists',
-  },
   MISSING_CLEANUP: {
     title: 'Missing Effect Cleanup',
     why: 'Effects with subscriptions, timers, or event listeners need cleanup to prevent memory leaks.',
@@ -42,11 +32,6 @@ const ISSUE_INFO: Record<string, { title: string; why: string; learnUrl?: string
     why: 'Missing dependencies can cause stale closures and bugs.',
     learnUrl: 'https://react.dev/reference/react/useEffect#specifying-reactive-dependencies',
   },
-  EXTRA_DEP: {
-    title: 'Unnecessary Dependencies',
-    why: 'Extra dependencies can cause effects to run more often than needed.',
-    learnUrl: 'https://react.dev/reference/react/useEffect#removing-unnecessary-dependencies',
-  },
   INFINITE_LOOP_RISK: {
     title: 'Infinite Loop Risk',
     why: 'This effect may cause infinite re-renders if state is updated without proper guards.',
@@ -57,16 +42,6 @@ const ISSUE_INFO: Record<string, { title: string; why: string; learnUrl?: string
     why: 'Too many re-renders can cause performance issues and poor user experience.',
     learnUrl: 'https://react.dev/reference/react/memo',
   },
-  UNNECESSARY_RERENDER: {
-    title: 'Unnecessary Re-render',
-    why: 'Component re-rendered when its props and state did not change.',
-    learnUrl: 'https://react.dev/reference/react/useMemo',
-  },
-  DEV_MODE_IN_PROD: {
-    title: 'Development Mode in Production',
-    why: 'Running React in development mode significantly impacts performance.',
-    learnUrl: 'https://react.dev/learn/react-developer-tools#development-vs-production-builds',
-  },
   STALE_CLOSURE: {
     title: 'Stale Closure Detected',
     why: 'This callback was created in an earlier render and may be using outdated state or props values. This is one of the most common and hard-to-debug React bugs.',