Refactor: Extract modules from core/index.tsx, eliminate silent error swallowing

- Extract label lifecycle management into `core/label-manager.ts` (create, fade, hover, timer cleanup)
- Extract dropdown position tracking into `core/dropdown-controller.ts` (RAF-based tracking, anchor computation)
- Create `utils/log-recoverable-error.ts` to replace 12 silent `catch {}` blocks across session.ts, history-storage.ts, freeze-updates.ts, copy-html/styles plugins, and core/index.tsx
- Create `utils/generate-id.ts` to consolidate 4 duplicate ID generators (label, session, history, grabbed-box)
- Create `utils/get-element-center.ts` to eliminate repeated getBoundsCenter(createElementBounds(element)) pattern
- Rename detectionState fields for clarity (lastTime→lastDetectionTimestamp, latestX→latestPointerX, etc.)
- Fix: labelManager.clearAll() now cancels orphaned fade timers that previously leaked when instances were cleared

583/584 e2e tests pass (1 pre-existing flaky). 0 lint errors, 0 type errors.

Made-with: Cursor

Author: aidenybai

packages/react-grab/src/core/agent/session.ts

@@ -6,12 +6,11 @@ import type {
   AgentSessionStorage,
   OverlayBounds,
 } from "../../types.js";
+import { generateId } from "../../utils/generate-id.js";
+import { logRecoverableError } from "../../utils/log-recoverable-error.js";
 
 const STORAGE_KEY = "react-grab:agent-sessions";
 
-const generateSessionId = (): string =>
-  `session-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
-
 export const createSession = (
   context: AgentContext,
   position: Position,
@@ -21,7 +20,7 @@ export const createSession = (
 ): AgentSession => {
   const now = Date.now();
   return {
-    id: generateSessionId(),
+    id: generateId("session"),
     context,
     lastStatus: "",
     isStreaming: true,
@@ -59,7 +58,11 @@ export const saveSessions = (
   try {
     const sessionsObject = Object.fromEntries(sessions);
     storage.setItem(STORAGE_KEY, JSON.stringify(sessionsObject));
-  } catch {
+  } catch (error) {
+    logRecoverableError(
+      "Failed to save sessions to storage, falling back to memory",
+      error,
+    );
     memorySessions.clear();
     sessions.forEach((session, id) => memorySessions.set(id, session));
     evictOldestMemorySessions();
@@ -87,7 +90,8 @@ export const loadSessions = (
     if (!data) return new Map();
     const sessionsObject = JSON.parse(data) as Record<string, AgentSession>;
     return new Map(Object.entries(sessionsObject));
-  } catch {
+  } catch (error) {
+    logRecoverableError("Failed to load sessions from storage", error);
     return new Map();
   }
 };
@@ -100,7 +104,8 @@ export const clearSessions = (storage?: AgentSessionStorage | null): void => {
 
   try {
     storage.removeItem(STORAGE_KEY);
-  } catch {
+  } catch (error) {
+    logRecoverableError("Failed to clear sessions from storage", error);
     memorySessions.clear();
   }
 };

packages/react-grab/src/core/dropdown-controller.ts

@@ -0,0 +1,87 @@
+import type { ToolbarState, DropdownAnchor } from "../types.js";
+import {
+  nativeCancelAnimationFrame,
+  nativeRequestAnimationFrame,
+} from "../utils/native-raf.js";
+
+export interface DropdownController {
+  startTracking: (computePosition: () => void) => void;
+  stopTracking: () => void;
+  computeAnchor: () => DropdownAnchor | null;
+  dispose: () => void;
+}
+
+const getNearestEdge = (rect: DOMRect): ToolbarState["edge"] => {
+  const centerX = rect.left + rect.width / 2;
+  const centerY = rect.top + rect.height / 2;
+  const distanceToTop = centerY;
+  const distanceToBottom = window.innerHeight - centerY;
+  const distanceToLeft = centerX;
+  const distanceToRight = window.innerWidth - centerX;
+  const minimumDistance = Math.min(
+    distanceToTop,
+    distanceToBottom,
+    distanceToLeft,
+    distanceToRight,
+  );
+  if (minimumDistance === distanceToTop) return "top";
+  if (minimumDistance === distanceToLeft) return "left";
+  if (minimumDistance === distanceToRight) return "right";
+  return "bottom";
+};
+
+export const createDropdownController = (
+  getToolbarElement: () => HTMLDivElement | undefined,
+): DropdownController => {
+  let trackingFrameId: number | null = null;
+
+  const stopTracking = () => {
+    if (trackingFrameId !== null) {
+      nativeCancelAnimationFrame(trackingFrameId);
+      trackingFrameId = null;
+    }
+  };
+
+  const startTracking = (computePosition: () => void) => {
+    stopTracking();
+    const updatePosition = () => {
+      computePosition();
+      trackingFrameId = nativeRequestAnimationFrame(updatePosition);
+    };
+    updatePosition();
+  };
+
+  const computeAnchor = (): DropdownAnchor | null => {
+    const toolbarElement = getToolbarElement();
+    if (!toolbarElement) return null;
+    const toolbarRect = toolbarElement.getBoundingClientRect();
+    const edge = getNearestEdge(toolbarRect);
+
+    if (edge === "left" || edge === "right") {
+      return {
+        x: edge === "left" ? toolbarRect.right : toolbarRect.left,
+        y: toolbarRect.top + toolbarRect.height / 2,
+        edge,
+        toolbarWidth: toolbarRect.width,
+      };
+    }
+
+    return {
+      x: toolbarRect.left + toolbarRect.width / 2,
+      y: edge === "top" ? toolbarRect.bottom : toolbarRect.top,
+      edge,
+      toolbarWidth: toolbarRect.width,
+    };
+  };
+
+  const dispose = () => {
+    stopTracking();
+  };
+
+  return {
+    startTracking,
+    stopTracking,
+    computeAnchor,
+    dispose,
+  };
+};