feat: Scope action selector keyboard events to focused panel (#1246)

1. Skip keyboard event handling when ActionSelector container is not focused
2. Add focus ring styling to grid cells on focus-within
3. Delegate click on grid cell to focus its ActionSelector

Author: charlesvien

apps/code/src/renderer/components/action-selector/ActionSelector.tsx

@@ -118,6 +118,15 @@ export function ActionSelector({
       if (showInlineEdit || document.activeElement?.tagName === "TEXTAREA")
         return;
 
+      const container = containerRef.current;
+      if (
+        container &&
+        container !== document.activeElement &&
+        !container.contains(document.activeElement)
+      ) {
+        return;
+      }
+
       switch (e.key) {
         case "ArrowUp":
           e.preventDefault();
@@ -186,7 +195,7 @@ export function ActionSelector({
     document.addEventListener("keydown", handler, { capture: true });
     return () =>
       document.removeEventListener("keydown", handler, { capture: true });
-  }, []);
+  }, [containerRef.current]);
 
   const getSubmitLabel = () => {
     return hasSteps && activeStep < numSteps - 1 ? "Next" : "Submit";

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import type { CommandCenterCellData } from "../hooks/useCommandCenterData";
 import {
   getGridDimensions,
@@ -51,8 +51,15 @@ function GridCell({
   zoom: number;
   isDragActive: boolean;
 }) {
+  const cellRef = useRef<HTMLDivElement>(null);
   const [isDragOver, setIsDragOver] = useState(false);
 
+  const handleCellClick = useCallback(() => {
+    const actionSelector =
+      cellRef.current?.querySelector<HTMLElement>("[tabindex='0']");
+    actionSelector?.focus();
+  }, []);
+
   const handleDragOver = useCallback((e: React.DragEvent) => {
     if (e.dataTransfer.types.includes("text/x-task-id")) {
       e.preventDefault();
@@ -78,7 +85,12 @@ function GridCell({
   );
 
   return (
-    <div className="relative overflow-hidden bg-gray-1">
+    // biome-ignore lint/a11y/useKeyWithClickEvents lint/a11y/noStaticElementInteractions: click delegates focus to ActionSelector within
+    <div
+      ref={cellRef}
+      className="relative overflow-hidden bg-gray-1 focus-within:ring-2 focus-within:ring-accent-9 focus-within:ring-inset"
+      onClick={handleCellClick}
+    >
       <div
         className="h-full w-full origin-top-left"
         style={{