fix: Prevent permission request from stealing focus across cells (#1545)

## Problem

ActionSelector unconditionally auto-focuses on mount, stealing focus from the active cell's editor when a permission request arrives in another command center cell.

Closes #1503

## Changes

  1. Add isUserInInteractiveElement() guard to skip auto-focus when user is in an input/editor
  2. Add autoFocus option to restoreStepAnswer to conditionally skip its focus call on mount
  3. Guard both mount-time focus paths so only idle panels auto-focus

## How did you test this?

Manually

Author: charlesvien

apps/code/src/renderer/components/action-selector/useActionSelectorState.ts

@@ -1,3 +1,4 @@
+import type React from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   filterOtherOptions,
@@ -12,6 +13,29 @@ function needsCustomInput(option: SelectorOption): boolean {
   return option.customInput === true || isOtherOption(option.id);
 }
 
+function isInteractiveElementInDifferentCell(
+  containerRef: React.RefObject<HTMLDivElement | null>,
+): boolean {
+  const el = document.activeElement;
+  if (!(el instanceof HTMLElement)) return false;
+
+  const isInteractive =
+    el.tagName === "INPUT" ||
+    el.tagName === "TEXTAREA" ||
+    el.tagName === "SELECT" ||
+    el.getAttribute("contenteditable") === "true";
+  if (!isInteractive) return false;
+
+  const activeCell = el.closest("[data-grid-cell]");
+  const ownCell = containerRef.current?.closest("[data-grid-cell]");
+
+  // Outside a grid (single-task mode): block focus steal from any interactive element.
+  // Inside a grid: only block when the interactive element is in a different cell.
+  if (!activeCell || !ownCell) return true;
+
+  return activeCell !== ownCell;
+}
+
 interface UseActionSelectorStateProps {
   options: SelectorOption[];
   multiSelect: boolean;
@@ -51,6 +75,7 @@ export function useActionSelectorState({
     () => new Map(),
   );
   const containerRef = useRef<HTMLDivElement>(null);
+  const prevActiveStepRef = useRef(currentStep);
 
   const activeStep = internalStep;
   const hasSteps = steps !== undefined && steps.length > 1;
@@ -76,7 +101,9 @@ export function useActionSelectorState({
     isEditing && selectedOption && needsCustomInput(selectedOption);
 
   useEffect(() => {
-    containerRef.current?.focus();
+    if (!isInteractiveElementInDifferentCell(containerRef)) {
+      containerRef.current?.focus();
+    }
   }, []);
 
   useEffect(() => {
@@ -107,7 +134,7 @@ export function useActionSelectorState({
   }, [activeStep, checkedOptions, customInput, onStepAnswer]);
 
   const restoreStepAnswer = useCallback(
-    (step: number) => {
+    (step: number, { autoFocus = true }: { autoFocus?: boolean } = {}) => {
       const saved = stepAnswers.get(step);
       if (saved) {
         setCheckedOptions(new Set(saved.selectedIds));
@@ -121,13 +148,19 @@ export function useActionSelectorState({
       }
       setSelectedIndex(0);
       setIsEditing(false);
-      containerRef.current?.focus();
+      if (autoFocus) {
+        containerRef.current?.focus();
+      }
     },
     [initialSelections, stepAnswers],
   );
 
   useEffect(() => {
-    restoreStepAnswer(activeStep);
+    if (activeStep === prevActiveStepRef.current) return;
+    prevActiveStepRef.current = activeStep;
+    restoreStepAnswer(activeStep, {
+      autoFocus: !isInteractiveElementInDifferentCell(containerRef),
+    });
   }, [activeStep, restoreStepAnswer]);
 
   useEffect(() => {

apps/code/src/renderer/features/command-center/components/CommandCenterGrid.tsx

@@ -103,6 +103,7 @@ function GridCell({
     // biome-ignore lint/a11y/useKeyWithClickEvents lint/a11y/noStaticElementInteractions: click delegates focus to ActionSelector within
     <div
       ref={cellRef}
+      data-grid-cell
       className="relative overflow-hidden bg-gray-1"
       onClick={handleCellClick}
       onPointerDownCapture={handleCellPointerDownCapture}