aidenybai · aidenybai · Feb 28, 2026 · Feb 28, 2026 · Feb 28, 2026 · Feb 28, 2026
diff --git a/packages/react-grab/src/components/context-menu.tsx b/packages/react-grab/src/components/context-menu.tsx
@@ -305,7 +305,10 @@ export const ContextMenu: Component<ContextMenuProps> = (props) => {
             />
           </div>
           <BottomSection>
-            <div ref={highlightContainerRef} class="relative flex flex-col w-[calc(100%+16px)] -mx-2 -my-1.5">
+            <div
+              ref={highlightContainerRef}
+              class="relative flex flex-col w-[calc(100%+16px)] -mx-2 -my-1.5"
+            >
               <div
                 ref={highlightRef}
                 class="pointer-events-none absolute bg-black/5 opacity-0 transition-[top,left,width,height,opacity] duration-75 ease-out"

diff --git a/packages/react-grab/src/components/renderer.tsx b/packages/react-grab/src/components/renderer.tsx
@@ -214,6 +214,9 @@ export const ReactGrabRenderer: Component<ReactGrabRendererProps> = (props) => {
           onToggleMenu={props.onToggleMenu}
           isMenuOpen={Boolean(props.toolbarMenuPosition)}
           isClearPromptOpen={Boolean(props.clearPromptPosition)}
+          eventContextTrailCount={props.eventContextTrailCount}
+          eventContextCopyStatus={props.eventContextCopyStatus}
+          onCopyEventContext={props.onCopyEventContext}
         />
       </Show>
 

diff --git a/packages/react-grab/src/components/toolbar/index.tsx b/packages/react-grab/src/components/toolbar/index.tsx
@@ -20,6 +20,7 @@ import { IconSelect } from "../icons/icon-select.jsx";
 import { IconChevron } from "../icons/icon-chevron.jsx";
 import { IconClock } from "../icons/icon-clock.jsx";
 import { IconCopy } from "../icons/icon-copy.jsx";
+import { IconCheck } from "../icons/icon-check.jsx";
 import { IconEllipsis } from "../icons/icon-ellipsis.jsx";
 import {
   createSafePolygonTracker,
@@ -89,6 +90,9 @@ interface ToolbarProps {
   toolbarActions?: ToolbarMenuAction[];
   onToggleMenu?: () => void;
   isMenuOpen?: boolean;
+  eventContextTrailCount?: number;
+  eventContextCopyStatus?: "idle" | "copied";
+  onCopyEventContext?: () => void;
 }
 
 interface FreezeHandlersOptions {
@@ -162,6 +166,7 @@ export const Toolbar: Component<ToolbarProps> = (props) => {
   const [isMenuTooltipVisible, setIsMenuTooltipVisible] = createSignal(false);
   const [isCopyAllTooltipVisible, setIsCopyAllTooltipVisible] =
     createSignal(false);
+  const [isTrailTooltipVisible, setIsTrailTooltipVisible] = createSignal(false);
   let clockFlashRef: HTMLSpanElement | undefined;
 
   const hasToolbarActions = () => (props.toolbarActions ?? []).length > 0;
@@ -171,6 +176,11 @@ export const Toolbar: Component<ToolbarProps> = (props) => {
     return count > 0 ? `History (${count})` : "History";
   };
 
+  const trailTooltipLabel = () => {
+    const count = props.eventContextTrailCount ?? 0;
+    return count > 0 ? `Copy trail (${count})` : "Copy trail";
+  };
+
   const historyIconClass = () =>
     cn(
       "transition-colors",
@@ -688,6 +698,10 @@ export const Toolbar: Component<ToolbarProps> = (props) => {
 
   const handleCopyAll = createDragAwareHandler(() => props.onCopyAll?.());
 
+  const handleCopyTrail = createDragAwareHandler(() =>
+    props.onCopyEventContext?.(),
+  );
+
   const handleToggleMenu = createDragAwareHandler(() => props.onToggleMenu?.());
 
   const handleToggleCollapse = createDragAwareHandler(() => {
@@ -777,6 +791,9 @@ export const Toolbar: Component<ToolbarProps> = (props) => {
           if (child.querySelector("[data-react-grab-toolbar-copy-all]")) {
             return Boolean(props.isHistoryDropdownOpen);
           }
+          if (child.querySelector("[data-react-grab-toolbar-trail]")) {
+            return (props.eventContextTrailCount ?? 0) > 0;
+          }
           if (child.querySelector("[data-react-grab-toolbar-menu]")) {
             return hasMenuActions;
           }
@@ -1486,9 +1503,7 @@ export const Toolbar: Component<ToolbarProps> = (props) => {
         "transform-origin": getTransformOrigin(),
       }}
       onPointerDown={handlePointerDown}
-      onMouseEnter={() =>
-        !isCollapsed() && props.onSelectHoverChange?.(true)
-      }
+      onMouseEnter={() => !isCollapsed() && props.onSelectHoverChange?.(true)}
       onMouseLeave={() => props.onSelectHoverChange?.(false)}
     >
       <div
@@ -1564,7 +1579,9 @@ export const Toolbar: Component<ToolbarProps> = (props) => {
                     data-react-grab-ignore-events
                     data-react-grab-toolbar-toggle
                     aria-label={
-                      props.isActive ? "Stop selecting element" : "Select element"
+                      props.isActive
+                        ? "Stop selecting element"
+                        : "Select element"
                     }
                     aria-pressed={Boolean(props.isActive)}
                     class={cn(
@@ -1731,6 +1748,74 @@ export const Toolbar: Component<ToolbarProps> = (props) => {
                   </Tooltip>
                 </div>
               </div>
+              <div
+                class={cn(
+                  "grid",
+                  !isRapidRetoggle() && gridTransitionClass(),
+                  expandGridClass(
+                    Boolean(props.enabled) &&
+                      (props.eventContextTrailCount ?? 0) > 0,
+                    "pointer-events-none",
+                  ),
+                )}
+              >
+                <div
+                  class={cn("relative overflow-visible", minDimensionClass())}
+                >
+                  <button
+                    data-react-grab-ignore-events
+                    data-react-grab-toolbar-trail
+                    aria-label={`Copy interaction trail (${props.eventContextTrailCount ?? 0} items)`}
+                    class={cn(
+                      "contain-layout flex items-center justify-center cursor-pointer interactive-scale touch-hitbox",
+                      buttonSpacingClass(),
+                      hitboxConstraintClass(),
+                    )}
+                    on:pointerdown={(event) => {
+                      stopEventPropagation(event);
+                      handlePointerDown(event);
+                    }}
+                    on:mousedown={stopEventPropagation}
+                    onClick={(event) => {
+                      setIsTrailTooltipVisible(false);
+                      handleCopyTrail(event);
+                    }}
+                    {...createFreezeHandlers(setIsTrailTooltipVisible, {
+                      shouldFreezeInteractions: false,
+                    })}
+                  >
+                    <span class="inline-flex relative">
+                      <Show
+                        when={props.eventContextCopyStatus === "copied"}
+                        fallback={
+                          <IconCopy
+                            size={14}
+                            class="text-[#B3B3B3] transition-colors"
+                          />
+                        }
+                      >
+                        <IconCheck size={14} class="text-black" />
+                      </Show>
+                      <Show
+                        when={
+                          (props.eventContextTrailCount ?? 0) > 0 &&
+                          props.eventContextCopyStatus !== "copied"
+                        }
+                      >
+                        <span class="absolute -top-0.5 -right-1.5 text-[8px] font-medium text-black/40 tabular-nums leading-none">
+                          {props.eventContextTrailCount}
+                        </span>
+                      </Show>
+                    </span>
+                  </button>
+                  <Tooltip
+                    visible={isTrailTooltipVisible() && isTooltipAllowed()}
+                    position={tooltipPosition()}
+                  >
+                    {trailTooltipLabel()}
+                  </Tooltip>
+                </div>
+              </div>
               <div
                 class={cn(
                   "grid",

diff --git a/packages/react-grab/src/constants.ts b/packages/react-grab/src/constants.ts
@@ -163,6 +163,12 @@ export const NEXTJS_REVALIDATION_DELAY_MS = 1000;
 export const IME_COMPOSING_KEY_CODE = 229;
 export const SELECTION_LABEL_OFFSCREEN_PX = -9999;
 
+export const MAX_EVENT_CONTEXT_ENTRIES = 10;
+export const AMBIENT_HOVER_DWELL_MS = 400;
+export const AMBIENT_DEDUP_THRESHOLD_MS = 100;
+export const AMBIENT_TRAIL_STALENESS_MS = 60_000;
+export const AMBIENT_COPY_FEEDBACK_MS = 1500;
+
 export const RELEVANT_CSS_PROPERTIES = new Set([
   "display",
   "position",