chore: cleanup for user input visualization PR

- Remove unused Snapshot import from backend index
- Fix snapShot.ts JSDoc (fiberRoot param)
- Shorten content script comments and reference implementation doc

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: Agboolafeyikemi

src/backend/index.ts

@@ -10,7 +10,7 @@ import linkFiber from './routers/linkFiber';
 // timeJumpInitialization (actually uses the function timeJumpInitiation but is labeled here as linkFiberInitialization, returns a function) returns a function that sets jumping to false and handles timetravel feature
 import timeJumpInitialization from './controllers/timeJump';
 import { initUserEventCapture } from './controllers/userEventCapture';
-import { Snapshot, Status, MsgData } from './types/backendTypes';
+import { Status, MsgData } from './types/backendTypes';
 import routes from './models/routes';
 
 // -------------------------INITIALIZE MODE--------------------------

src/backend/routers/snapShot.ts

@@ -6,13 +6,10 @@ import { getLastUserEvent } from '../controllers/userEventCapture';
 
 // -------------------------UPDATE & SEND TREE SNAP SHOT------------------------
 /**
- * This function creates a new `snapShot` fiber tree with the provided `fiberRoot`, then send the updated snapshot to front end.
- * This runs after every Fiber commit if mode is not jumping.
- * This
- * @param snapshot The current snapshot of the fiber tree
- * @param fiberRoot The `fiberRootNode`, which is the root node of the fiber tree is stored in the current property of the fiber root object which we can use to traverse the tree
+ * Creates a new snapshot of the fiber tree and sends it to the front end.
+ * Runs after every Fiber commit when not in jumping mode.
+ * @param fiberRoot - The fiber root; the root node is in its `current` property.
  */
-// updating tree depending on current mode on the panel (pause, etc)
 export default function updateAndSendSnapShotTree(fiberRoot: FiberRoot): void {
   // This is the currently active root fiber(the mutable root of the tree)
   const { current } = fiberRoot;

src/extension/contentScript.ts

@@ -146,7 +146,7 @@ const REACTIME_POINTER_STYLES_ID = 'reactime-pointer-styles';
 function getOrCreatePointerOverlay() {
   let overlay = document.getElementById(REACTIME_POINTER_OVERLAY_ID);
   if (!overlay) {
-    // Inject styles once – pointer designed to draw attention (larger, ripple, glow)
+    // Inject styles once for pointer overlay (dot + ripple, high contrast)
     if (!document.getElementById(REACTIME_POINTER_STYLES_ID)) {
       const style = document.createElement('style');
       style.id = REACTIME_POINTER_STYLES_ID;
@@ -177,28 +177,35 @@ function getOrCreatePointerOverlay() {
           opacity: 0;
         }
         #${REACTIME_POINTER_OVERLAY_ID}.reactime-pointer-visible .reactime-pointer-dot {
-          animation: reactime-dot-in 0.25s ease-out;
+          animation: reactime-dot-pulse 2s ease-in-out;
+          animation-iteration-count: infinite;
         }
         #${REACTIME_POINTER_OVERLAY_ID}.reactime-pointer-visible .reactime-pointer-ripple {
-          animation: reactime-ripple 0.8s ease-out 1;
+          animation: reactime-ripple 1.2s ease-out;
+          animation-iteration-count: infinite;
         }
-        @keyframes reactime-dot-in {
-          from { transform: translate(-50%, -50%) scale(0); opacity: 0; }
-          to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
+        @keyframes reactime-dot-pulse {
+          0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; box-shadow: 0 0 0 1px rgba(0,0,0,0.2), 0 0 20px 4px rgba(13,148,136,0.5); }
+          10% { transform: translate(-50%, -50%) scale(1); opacity: 1; box-shadow: 0 0 0 1px rgba(0,0,0,0.2), 0 0 20px 4px rgba(13,148,136,0.5); }
+          50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; box-shadow: 0 0 0 1px rgba(0,0,0,0.2), 0 0 28px 8px rgba(13,148,136,0.7); }
         }
         @keyframes reactime-ripple {
-          0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.8; }
+          0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.7; }
           100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
         }
         @media (prefers-reduced-motion: reduce) {
-          #${REACTIME_POINTER_OVERLAY_ID}.reactime-pointer-visible .reactime-pointer-dot,
-          #${REACTIME_POINTER_OVERLAY_ID}.reactime-pointer-visible .reactime-pointer-ripple {
-            animation: none;
+          #${REACTIME_POINTER_OVERLAY_ID}.reactime-pointer-visible .reactime-pointer-dot {
+            animation: reactime-dot-in 0.25s ease-out;
           }
           #${REACTIME_POINTER_OVERLAY_ID}.reactime-pointer-visible .reactime-pointer-ripple {
+            animation: none;
             opacity: 0;
           }
         }
+        @keyframes reactime-dot-in {
+          from { transform: translate(-50%, -50%) scale(0); opacity: 0; }
+          to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
+        }
       `;
       (document.head || document.documentElement).appendChild(style);
     }