@plannotator/ui 0.30.0 → 0.31.0

package/components/html-viewer/composerYield.ts

@@ -1,51 +1 @@
-/**
- * Composer-yield state machine for shift-click multi-select.
- *
- * While Shift is held during an HTML pinpoint draft, the comment composer must
- * get out of the way of the pointer: fade to ~40% as the pointer approaches,
- * and to near-zero + click-through (pointer-events: none) when the pointer is
- * over it — the DOM equivalent of Codex's setIgnoreMouseEvents click-through
- * popup, so the shift-click lands on the iframe beneath.
- *
- * Restoration uses hysteresis so the composer doesn't flicker at the border:
- * once 'over', the pointer must clear the composer by OVER_EXIT px before the
- * state drops back, and 'near' persists until NEAR_EXIT px (> NEAR_ENTER).
- */
-
-export type ComposerYieldState = "none" | "near" | "over";
-
-/** Distance (px from the composer rect) at which the composer starts fading. */
-export const COMPOSER_YIELD_NEAR_ENTER_PX = 80;
-/** Distance the pointer must exceed before a faded composer fully restores. */
-export const COMPOSER_YIELD_NEAR_EXIT_PX = 96;
-/** Distance the pointer must clear a click-through composer by to restore. */
-export const COMPOSER_YIELD_OVER_EXIT_PX = 48;
-
-/** Shortest distance from a point to a rect's edge; <= 0 means inside. */
-export function distanceToRect(
-  x: number,
-  y: number,
-  rect: { left: number; top: number; right: number; bottom: number },
-): number {
-  const dx = Math.max(rect.left - x, 0, x - rect.right);
-  const dy = Math.max(rect.top - y, 0, y - rect.bottom);
-  if (dx === 0 && dy === 0) return 0;
-  return Math.hypot(dx, dy);
-}
-
-/** Next yield state for a pointer at `distance` px from the composer rect. */
-export function computeComposerYield(
-  prev: ComposerYieldState,
-  distance: number,
-): ComposerYieldState {
-  if (distance <= 0) return "over";
-  if (prev === "over") {
-    // Hysteresis: don't restore until the pointer has moved well away.
-    if (distance <= COMPOSER_YIELD_OVER_EXIT_PX) return "over";
-    return distance <= COMPOSER_YIELD_NEAR_EXIT_PX ? "near" : "none";
-  }
-  if (prev === "near") {
-    return distance <= COMPOSER_YIELD_NEAR_EXIT_PX ? "near" : "none";
-  }
-  return distance <= COMPOSER_YIELD_NEAR_ENTER_PX ? "near" : "none";
-}
+export * from '../../utils/composerYield';

package/components/html-viewer/useHtmlAnnotation.ts

@@ -18,6 +18,14 @@ function nextHtmlAnnId(): string {
   return `html-ann-${Date.now().toString(36)}-${(htmlAnnSeq++).toString(36)}`;
 }
 
+function htmlCommentDraftKey(
+  text: string,
+  anchor?: HtmlElementAnchor | null,
+  targetKey?: string,
+): string {
+  return `html-selection:${targetKey ?? JSON.stringify(anchor ?? null)}:${text}`;
+}
+
 interface BridgeSelectionMessage {
   type: `${typeof PREFIX}selection`;
   text: string;
@@ -66,7 +74,30 @@ type BridgeMessage =
   | { type: `${typeof PREFIX}keytype`; key: string }
   | { type: `${typeof PREFIX}mark-click`; id: string }
   | { type: `${typeof PREFIX}unanchored`; ids: string[] }
-  | { type: `${typeof PREFIX}resize`; height: number };
+  | { type: `${typeof PREFIX}resize`; height: number }
+  | { type: `${typeof PREFIX}page-change`; pageUrl: string };
+
+/** Live proxied-app session credentials: the proxy origin messages must come
+ * from, and the per-session token every message must echo. */
+export interface HtmlLiveSession {
+  origin: string;
+  token: string;
+}
+
+/** Cap for live-mode page identity strings (mirrors the bridge's slice). */
+export const MAX_PAGE_URL_LENGTH = 2048;
+
+/** True when a live-session message event fails the origin or token check.
+ * Exported for protocol tests. */
+export function rejectsLiveMessage(
+  live: HtmlLiveSession,
+  origin: string,
+  data: unknown,
+): boolean {
+  if (origin !== live.origin) return true;
+  if (!isRecord(data) || data.token !== live.token) return true;
+  return false;
+}
 
 /** Dependencies and callbacks for the sandboxed HTML annotation bridge. */
 export interface UseHtmlAnnotationOptions {
@@ -79,6 +110,12 @@ export interface UseHtmlAnnotationOptions {
   selectedAnnotationId: string | null;
   mode: EditorMode;
   onResize?: (height: number) => void;
+  /** Live proxied-app session: reject messages that fail the origin or token
+   *  check before parsing, and stamp token + concrete targetOrigin on every
+   *  outbound post. Absent for srcdoc sessions (behavior unchanged). */
+  live?: HtmlLiveSession;
+  /** Live-mode page navigation reports (validated, capped at 2048 chars). */
+  onPageChange?: (pageUrl: string) => void;
   /** Validated pointer positions relayed from inside the iframe while a
    *  pinpoint draft is open (iframe-local viewport coordinates), with the
    *  Shift state observed by the iframe (the parent cannot see modifiers
@@ -94,7 +131,23 @@ export interface UseHtmlAnnotationOptions {
   onUnanchoredChange?: (ids: string[]) => void;
 }
 
-function postToIframe(iframe: HTMLIFrameElement | null, msg: Record<string, unknown>) {
+function postToIframe(
+  iframe: HTMLIFrameElement | null,
+  msg: Record<string, unknown>,
+  live?: HtmlLiveSession | null,
+) {
+  if (live) {
+    // Live proxied-app sessions: token on every message, concrete targetOrigin.
+    // Browsers silently DROP a post whose targetOrigin does not match the
+    // receiving window (mid-navigation frames); some DOM environments throw
+    // instead, so align with the browser semantics explicitly.
+    try {
+      iframe?.contentWindow?.postMessage({ ...msg, token: live.token }, live.origin);
+    } catch {
+      // Dropped, matching browser behavior for unmatched target origins.
+    }
+    return;
+  }
   iframe?.contentWindow?.postMessage(msg, "*");
 }
 
@@ -282,6 +335,13 @@ export function parseBridgeMessage(value: unknown): BridgeMessage | null {
       return typeof value.height === "number" && Number.isFinite(value.height)
         ? { type: value.type, height: value.height }
         : null;
+    case `${PREFIX}page-change`:
+      // Live-mode SPA navigation report. Bounded like every bridge string.
+      return typeof value.pageUrl === "string"
+        && value.pageUrl.length > 0
+        && value.pageUrl.length <= MAX_PAGE_URL_LENGTH
+        ? { type: value.type, pageUrl: value.pageUrl }
+        : null;
     default:
       return null;
   }
@@ -301,6 +361,8 @@ export function useHtmlAnnotation({
   selectedAnnotationId,
   mode,
   onResize,
+  live,
+  onPageChange,
   onBridgePointer,
   onUnanchoredChange,
 }: UseHtmlAnnotationOptions): Omit<
@@ -351,9 +413,22 @@ export function useHtmlAnnotation({
   onSelectRef.current = onSelectAnnotation;
   const onUnanchoredChangeRef = useRef(onUnanchoredChange);
   onUnanchoredChangeRef.current = onUnanchoredChange;
+  const liveRef = useRef<HtmlLiveSession | null>(live ?? null);
+  liveRef.current = live ?? null;
+  const onPageChangeRef = useRef(onPageChange);
+  onPageChangeRef.current = onPageChange;
 
   const anchorRef = useRef<HTMLDivElement | null>(null);
 
+  /** Post into the iframe with the live token + targetOrigin when a live
+   *  session is active; srcdoc posts keep targetOrigin "*" and no token. */
+  const post = useCallback(
+    (msg: Record<string, unknown>) => {
+      postToIframe(iframeRef.current, msg, liveRef.current);
+    },
+    [iframeRef],
+  );
+
   /**
    * Remove one draft target. Removing the primary promotes the next remaining
    * target (the composer's context text and pending anchor follow it);
@@ -368,7 +443,7 @@ export function useHtmlAnnotation({
       const targets = draftTargetsRef.current;
       const index = targets.findIndex((t) => t.key === key);
       if (index < 0) return;
-      postToIframe(iframeRef.current, { type: `${PREFIX}remove-target`, key });
+      post({ type: `${PREFIX}remove-target`, key });
       const remaining = targets.filter((t) => t.key !== key);
       if (remaining.length === 0) {
         // Final target removed — the draft is cancelled (bridge side already
@@ -392,7 +467,7 @@ export function useHtmlAnnotation({
       setDraftTargets(remaining);
       setComposerFocusToken((t) => t + 1);
     },
-    [iframeRef],
+    [post],
   );
 
   const getOrCreateAnchor = useCallback(() => {
@@ -429,6 +504,11 @@ export function useHtmlAnnotation({
   useEffect(() => {
     function handler(e: MessageEvent<unknown>) {
       if (e.source !== iframeRef.current?.contentWindow) return;
+      // Live sessions verify origin + session token BEFORE parsing. The
+      // existing caps stay exactly as they are: live content is friendlier
+      // but the trust boundary does not relax.
+      const liveSession = liveRef.current;
+      if (liveSession && rejectsLiveMessage(liveSession, e.origin, e.data)) return;
       const message = parseBridgeMessage(e.data);
       if (!message) return;
 
@@ -439,6 +519,8 @@ export function useHtmlAnnotation({
         && type !== `${PREFIX}mark-click`
         && type !== `${PREFIX}unanchored`
         && type !== `${PREFIX}resize`
+        // Page identity is navigation state, not an annotation mutation.
+        && type !== `${PREFIX}page-change`
       ) {
         return;
       }
@@ -450,25 +532,20 @@ export function useHtmlAnnotation({
         const anchor = positionAnchor(message.rect);
         if (!anchor) return;
 
-        const currentMode = message.modeOverride ?? modeRef.current;
-
-        if (currentMode === "redline") {
-          const id = nextHtmlAnnId();
-          postToIframe(iframeRef.current, { type: `${PREFIX}create-mark`, id, annotationType: "deletion" });
-          onAddRef.current?.({
-            id,
-            blockId: "",
-            startOffset: 0,
-            endOffset: 0,
-            type: AnnotationType.DELETION,
-            originalText: message.text,
-            author: getIdentity(),
-            createdA: Date.now(),
-            htmlAnchor: message.anchor,
-          });
-          pendingTextRef.current = "";
-          pendingAnchorRef.current = null;
-        } else if (
+        // HTML and live-app surfaces are COMMENT-ONLY: redline (auto-DELETION)
+        // and quickLabel are markdown-surface features, so both the host's
+        // mode and any bridge-posted modeOverride clamp to the plain selection
+        // flow here (a hostile page can post modeOverride, so the clamp sits
+        // at the trust boundary, not in the host). Persisted DELETION
+        // annotations still restore through applyAnnotations — only CREATION
+        // is comment-only.
+        const requestedMode = message.modeOverride ?? modeRef.current;
+        const currentMode =
+          requestedMode === "redline" || requestedMode === "quickLabel"
+            ? "selection"
+            : requestedMode;
+
+        if (
           currentMode === "comment"
           // Pinpoint click-to-pin: the click already chose the target, so skip
           // the intermediate toolbar and go straight to the comment composer.
@@ -481,6 +558,7 @@ export function useHtmlAnnotation({
             anchorEl: anchor,
             contextText: message.text,
             selectedText: message.text,
+            draftKey: htmlCommentDraftKey(message.text, message.anchor, message.targetKey),
           });
           // Pinpoint drafts arm shift-click multi-select: the clicked element
           // becomes the primary target of the (single) draft comment. The
@@ -496,16 +574,11 @@ export function useHtmlAnnotation({
                 anchor: message.anchor ?? null,
               },
             ]);
-            postToIframe(iframeRef.current, {
+            post({
               type: `${PREFIX}arm-multi-select`,
               key: message.targetKey,
             });
           }
-        } else if (currentMode === "quickLabel") {
-          setQuickLabelPicker({
-            anchorEl: anchor,
-            cursorHint: { x: parseFloat(anchor.style.left), y: parseFloat(anchor.style.top) },
-          });
         } else {
           setToolbarState({
             element: anchor,
@@ -585,7 +658,13 @@ export function useHtmlAnnotation({
         // the typing) — otherwise the iframe keeps focus and the bridge eats keys.
         iframeRef.current?.blur();
         setToolbarState(null);
-        setCommentPopover({ anchorEl: anchor, contextText: text, selectedText: text, initialText: key });
+        setCommentPopover({
+          anchorEl: anchor,
+          contextText: text,
+          selectedText: text,
+          initialText: key,
+          draftKey: htmlCommentDraftKey(text, pendingAnchorRef.current),
+        });
       }
 
       if (type === `${PREFIX}mark-click`) {
@@ -599,6 +678,10 @@ export function useHtmlAnnotation({
       if (type === `${PREFIX}resize`) {
         onResize?.(message.height);
       }
+
+      if (type === `${PREFIX}page-change`) {
+        onPageChangeRef.current?.(message.pageUrl);
+      }
     }
 
     window.addEventListener("message", handler);
@@ -609,7 +692,7 @@ export function useHtmlAnnotation({
         anchorRef.current = null;
       }
     };
-  }, [iframeRef, positionAnchor, onResize, getOrCreateAnchor, applyTargetRemoval]);
+  }, [post, iframeRef, positionAnchor, onResize, getOrCreateAnchor, applyTargetRemoval]);
 
   useEffect(() => {
     if (enabled) return;
@@ -621,22 +704,22 @@ export function useHtmlAnnotation({
     pendingAnchorRef.current = null;
     anchorRef.current?.remove();
     anchorRef.current = null;
-    postToIframe(iframeRef.current, { type: `${PREFIX}cancel-selection` });
-  }, [enabled, iframeRef]);
+    post({ type: `${PREFIX}cancel-selection` });
+  }, [enabled, post]);
 
   useEffect(() => {
     if (selectedAnnotationId) {
-      postToIframe(iframeRef.current, {
+      post({
         type: `${PREFIX}scroll-to`,
         id: selectedAnnotationId,
       });
     } else {
-      postToIframe(iframeRef.current, {
+      post({
         type: `${PREFIX}focus-mark`,
         id: null,
       });
     }
-  }, [selectedAnnotationId, iframeRef]);
+  }, [selectedAnnotationId, post]);
 
   const handleAnnotate = useCallback(
     (type: AnnotationType) => {
@@ -645,7 +728,7 @@ export function useHtmlAnnotation({
       if (!text || type !== AnnotationType.DELETION) return;
 
       const id = nextHtmlAnnId();
-      postToIframe(iframeRef.current, { type: `${PREFIX}create-mark`, id, annotationType: "deletion" });
+      post({ type: `${PREFIX}create-mark`, id, annotationType: "deletion" });
       onAddRef.current?.({
         id,
         blockId: "",
@@ -662,7 +745,7 @@ export function useHtmlAnnotation({
       pendingTextRef.current = "";
       pendingAnchorRef.current = null;
     },
-    [iframeRef],
+    [post],
   );
 
   const handleRequestComment = useCallback(
@@ -672,7 +755,13 @@ export function useHtmlAnnotation({
       if (!text) return;
       const anchor = anchorRef.current ?? getOrCreateAnchor();
       setToolbarState(null);
-      setCommentPopover({ anchorEl: anchor, contextText: text, selectedText: text, initialText: initialChar });
+      setCommentPopover({
+        anchorEl: anchor,
+        contextText: text,
+        selectedText: text,
+        initialText: initialChar,
+        draftKey: htmlCommentDraftKey(text, pendingAnchorRef.current),
+      });
     },
     [getOrCreateAnchor],
   );
@@ -697,7 +786,7 @@ export function useHtmlAnnotation({
           : undefined;
 
       const id = nextHtmlAnnId();
-      postToIframe(iframeRef.current, { type: `${PREFIX}create-mark`, id, annotationType: "comment" });
+      post({ type: `${PREFIX}create-mark`, id, annotationType: "comment" });
       onAddRef.current?.({
         id,
         blockId: "",
@@ -718,16 +807,16 @@ export function useHtmlAnnotation({
       pendingTextRef.current = "";
       pendingAnchorRef.current = null;
     },
-    [iframeRef],
+    [post],
   );
 
   const handleCommentClose = useCallback(() => {
-    postToIframe(iframeRef.current, { type: `${PREFIX}cancel-selection` });
+    post({ type: `${PREFIX}cancel-selection` });
     setCommentPopover(null);
     setDraftTargets([]);
     pendingTextRef.current = "";
     pendingAnchorRef.current = null;
-  }, [iframeRef]);
+  }, [post]);
 
   const removeDraftTarget = useCallback(
     (key: string) => {
@@ -739,17 +828,17 @@ export function useHtmlAnnotation({
 
   const flashDraftTarget = useCallback(
     (key: string) => {
-      postToIframe(iframeRef.current, { type: `${PREFIX}flash-target`, key });
+      post({ type: `${PREFIX}flash-target`, key });
     },
-    [iframeRef],
+    [post],
   );
 
   const handleToolbarClose = useCallback(() => {
-    postToIframe(iframeRef.current, { type: `${PREFIX}cancel-selection` });
+    post({ type: `${PREFIX}cancel-selection` });
     setToolbarState(null);
     pendingTextRef.current = "";
     pendingAnchorRef.current = null;
-  }, [iframeRef]);
+  }, [post]);
 
   const applyQuickLabel = useCallback(
     (label: QuickLabel, clearState: () => void) => {
@@ -757,7 +846,7 @@ export function useHtmlAnnotation({
       const text = pendingTextRef.current;
       if (!text) return;
       const id = nextHtmlAnnId();
-      postToIframe(iframeRef.current, { type: `${PREFIX}create-mark`, id, annotationType: "comment" });
+      post({ type: `${PREFIX}create-mark`, id, annotationType: "comment" });
       onAddRef.current?.({
         id,
         blockId: "",
@@ -776,7 +865,7 @@ export function useHtmlAnnotation({
       pendingTextRef.current = "";
       pendingAnchorRef.current = null;
     },
-    [iframeRef],
+    [post],
   );
 
   const handleQuickLabel = useCallback(
@@ -790,22 +879,22 @@ export function useHtmlAnnotation({
   );
 
   const handleQuickLabelPickerDismiss = useCallback(() => {
-    postToIframe(iframeRef.current, { type: `${PREFIX}cancel-selection` });
+    post({ type: `${PREFIX}cancel-selection` });
     setQuickLabelPicker(null);
     pendingTextRef.current = "";
     pendingAnchorRef.current = null;
-  }, [iframeRef]);
+  }, [post]);
 
   const removeHighlight = useCallback(
     (id: string) => {
-      postToIframe(iframeRef.current, { type: `${PREFIX}remove-mark`, id });
+      post({ type: `${PREFIX}remove-mark`, id });
     },
-    [iframeRef],
+    [post],
   );
 
   const clearAllHighlights = useCallback(() => {
-    postToIframe(iframeRef.current, { type: `${PREFIX}clear-marks` });
-  }, [iframeRef]);
+    post({ type: `${PREFIX}clear-marks` });
+  }, [post]);
 
   const applyAnnotations = useCallback(
     (anns: Annotation[]) => {
@@ -818,7 +907,7 @@ export function useHtmlAnnotation({
           .map((t) => t.anchor)
           .filter((a): a is HtmlElementAnchor => !!a)
           .slice(0, MAX_ADDITIONAL_TARGETS);
-        postToIframe(iframeRef.current, {
+        post({
           type: `${PREFIX}find-and-mark`,
           id: ann.id,
           originalText: ann.originalText,
@@ -830,7 +919,7 @@ export function useHtmlAnnotation({
         });
       }
     },
-    [iframeRef],
+    [post],
   );
 
   return {

package/components/plan-diff/PlanCleanDiffView.tsx

@@ -330,6 +330,7 @@ export const PlanCleanDiffView: React.FC<PlanCleanDiffViewProps> = ({
           contextText={commentPopover.contextText}
           isGlobal={false}
           initialText={commentPopover.initialText}
+          draftKey={`plan-diff:${commentPopover.index}:${commentPopover.diffContext}:${commentPopover.contextText}`}
           onSubmit={handleCommentSubmit}
           onClose={handleCommentClose}
           skillReferences

package/components/sidebar/FileBrowser.tsx

@@ -27,6 +27,8 @@ interface FileBrowserProps {
   annotationCounts?: Map<string, number>;
   highlightedFiles?: Set<string>;
   editStatuses?: Map<string, FileEditStatus>;
+  /** Prevent competing destination changes while a document is activating. */
+  selectionPending?: boolean;
 }
 
 export interface FileEditStatus {
@@ -246,7 +248,8 @@ const TreeNode: React.FC<{
   editStatuses?: Map<string, FileEditStatus>;
   workspaceStatus?: WorkspaceStatusPayload;
   forceExpandFolders?: boolean;
-}> = ({ node, depth, dirPath, expandedFolders, onToggleFolder, onSelectFile, activeFile, annotationCounts, highlightedFiles, editStatuses, workspaceStatus, forceExpandFolders = false }) => {
+  selectionPending?: boolean;
+}> = ({ node, depth, dirPath, expandedFolders, onToggleFolder, onSelectFile, activeFile, annotationCounts, highlightedFiles, editStatuses, workspaceStatus, forceExpandFolders = false, selectionPending = false }) => {
   const folderKey = `${dirPath}:${node.path}`;
   const absolutePath = `${dirPath}/${node.path}`;
   const isExpanded = forceExpandFolders || expandedFolders.has(folderKey);
@@ -305,6 +308,7 @@ const TreeNode: React.FC<{
             editStatuses={editStatuses}
             workspaceStatus={workspaceStatus}
             forceExpandFolders={forceExpandFolders}
+            selectionPending={selectionPending}
           />
         ))}
       </>
@@ -347,7 +351,8 @@ const TreeNode: React.FC<{
       onClick={() => {
         if (!isSelectionDisabled) onSelectFile(absolutePath, dirPath);
       }}
-      disabled={isSelectionDisabled}
+      disabled={isSelectionDisabled || selectionPending}
+      aria-busy={isActive && selectionPending ? true : undefined}
       className={`file-tree-item w-full text-left group ${isActive ? "active" : ""} ${fileCount > 0 ? "has-annotations" : ""} ${isHighlighted ? 'file-annotation-flash' : ''} ${isSelectionDisabled ? 'opacity-70 cursor-default' : ''}`}
       style={{ paddingLeft: paddingLeft + 15 }}
       title={isDeleted ? `${node.path} (${editStatus?.status === "missing" ? "missing on disk" : "deleted on disk"})` : node.path}
@@ -357,6 +362,9 @@ const TreeNode: React.FC<{
       </svg>
       <span className={`truncate flex-1 min-w-0 ${isDeleted ? "line-through" : ""}`}>{displayName}</span>
       <div className="ml-auto flex flex-shrink-0 items-center gap-1.5 text-[10px]">
+        {isActive && selectionPending && (
+          <span className="text-primary">Opening…</span>
+        )}
         {editMarker && (
           <span
             className={`inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[9px] font-semibold leading-none ${editMarker.className}`}
@@ -393,7 +401,8 @@ const DirSection: React.FC<{
   highlightedFiles?: Set<string>;
   editStatuses?: Map<string, FileEditStatus>;
   forceExpandFolders?: boolean;
-}> = ({ dir, expandedFolders, onToggleFolder, onSelectFile, activeFile, onRetry, annotationCounts, highlightedFiles, editStatuses, forceExpandFolders = false }) => {
+  selectionPending?: boolean;
+}> = ({ dir, expandedFolders, onToggleFolder, onSelectFile, activeFile, onRetry, annotationCounts, highlightedFiles, editStatuses, forceExpandFolders = false, selectionPending = false }) => {
   const workspaceStatus = React.useMemo(() => normalizeWorkspaceStatus(dir.workspaceStatus), [dir.workspaceStatus]);
 
   if (dir.isLoading) {
@@ -443,6 +452,7 @@ const DirSection: React.FC<{
           editStatuses={editStatuses}
           workspaceStatus={workspaceStatus}
           forceExpandFolders={forceExpandFolders}
+          selectionPending={selectionPending}
         />
       ))}
     </div>
@@ -462,6 +472,7 @@ export const FileBrowser: React.FC<FileBrowserProps> = ({
   annotationCounts,
   highlightedFiles,
   editStatuses,
+  selectionPending = false,
 }) => {
   const [isFilterOpen, setIsFilterOpen] = React.useState(false);
   const [filterQuery, setFilterQuery] = React.useState("");
@@ -528,7 +539,7 @@ export const FileBrowser: React.FC<FileBrowserProps> = ({
         {showFilterInput ? (
           <div
             onBlur={handleFilterBlur}
-            className="flex h-6 items-center gap-1.5 rounded-sm bg-muted/25 px-1.5 text-muted-foreground focus-within:bg-muted/40"
+            className="file-browser-filter-field flex h-6 items-center gap-1.5 rounded-sm bg-muted/25 px-1.5 text-muted-foreground focus-within:bg-muted/40"
           >
             <Search size={12} className="shrink-0 text-muted-foreground/55" aria-hidden="true" />
             <input
@@ -556,7 +567,7 @@ export const FileBrowser: React.FC<FileBrowserProps> = ({
                   setFilterQuery("");
                   inputRef.current?.focus();
                 }}
-                className="flex h-5 w-5 shrink-0 items-center justify-center rounded-sm text-muted-foreground/55 hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:bg-muted"
+                className="file-browser-filter-clear flex h-5 w-5 shrink-0 items-center justify-center rounded-sm text-muted-foreground/55 hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:bg-muted"
                 aria-label="Clear file filter"
                 title="Clear file filter"
               >
@@ -617,6 +628,7 @@ export const FileBrowser: React.FC<FileBrowserProps> = ({
                 highlightedFiles={highlightedFiles}
                 editStatuses={editStatuses}
                 forceExpandFolders={isFiltering}
+                selectionPending={selectionPending}
               />
             )}
           </div>