fix(code): keep focus in popovers opened from command center cells

[VojtechBartos]

Summary

• GridCell's onClick redirected focus to the cell's first [tabindex='0'] element on every click, breaking popovers opened from a TaskInput cell (BranchSelector, GitHubRepoPicker, FolderPicker, WorkspaceModeSelect). React's synthetic events bubble through portals, so clicks inside the popover content reached the grid handler and pulled focus to the cell's workspace mode selector.
• TaskInput now also focuses its prompt editor when you click empty space inside a cell. The shared FOCUSABLE_SELECTOR constant lives in @utils/overlay.
• The active-cell indicator (red border) now follows activeCellIndex instead of activeTaskId, so empty and creating cells light up too.

Showcase

code-focus.mov

---

Created with PostHog Code

[greptile-apps]

Prompt To Fix All With AI

This is a comment left during a code review.
Path: apps/code/src/renderer/features/command-center/components/CommandCenterGrid.tsx
Line: 10-11

Comment:
**`[tabindex]` missing from focusable selector**

`FOCUSABLE_SELECTOR` doesn't include `[tabindex]`, so custom interactive elements that rely solely on `tabindex="0"` (e.g. a `<div tabindex="0">` acting as a focusable control) won't be caught by the guard. If such an element is the *second* `[tabindex="0"]` node inside a cell, a click on it would still redirect focus to the *first* `[tabindex="0"]` instead. Adding `[tabindex]:not([tabindex="-1"])` to the selector closes that gap defensively.

```suggestion
const FOCUSABLE_SELECTOR =
  'button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]), [role="button"], [role="link"], [role="combobox"], [role="menuitem"], [contenteditable="true"], [data-interactive]';
```

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (1): Last reviewed commit: "fix(code): keep focus in popovers opened..." | Re-trigger Greptile}

[greptile-apps]

[tabindex] missing from focusable selector

FOCUSABLE_SELECTOR doesn't include [tabindex], so custom interactive elements that rely solely on tabindex="0" (e.g. a <div tabindex="0"> acting as a focusable control) won't be caught by the guard. If such an element is the second [tabindex="0"] node inside a cell, a click on it would still redirect focus to the first [tabindex="0"] instead. Adding [tabindex]:not([tabindex="-1"]) to the selector closes that gap defensively.

Suggested change

	const FOCUSABLE_SELECTOR =
	'button, a, input, textarea, select, [role="button"], [role="link"], [role="combobox"], [role="menuitem"], [contenteditable="true"], [data-interactive]';
	const FOCUSABLE_SELECTOR =
	'button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]), [role="button"], [role="link"], [role="combobox"], [role="menuitem"], [contenteditable="true"], [data-interactive]';

Prompt To Fix With AI

This is a comment left during a code review.
Path: apps/code/src/renderer/features/command-center/components/CommandCenterGrid.tsx
Line: 10-11

Comment:
**`[tabindex]` missing from focusable selector**

`FOCUSABLE_SELECTOR` doesn't include `[tabindex]`, so custom interactive elements that rely solely on `tabindex="0"` (e.g. a `<div tabindex="0">` acting as a focusable control) won't be caught by the guard. If such an element is the *second* `[tabindex="0"]` node inside a cell, a click on it would still redirect focus to the *first* `[tabindex="0"]` instead. Adding `[tabindex]:not([tabindex="-1"])` to the selector closes that gap defensively.

```suggestion
const FOCUSABLE_SELECTOR =
  'button, a, input, textarea, select, [tabindex]:not([tabindex="-1"]), [role="button"], [role="link"], [role="combobox"], [role="menuitem"], [contenteditable="true"], [data-interactive]';
```

How can I resolve this? If you propose a fix, please make it concise.

[greptile-apps]

Comments Outside Diff (1)

1. apps/code/src/renderer/features/command-center/stores/commandCenterStore.ts, line 102-116 (link)

   activeCellIndex not updated in assignTask

   assignTask sets activeTaskId but leaves activeCellIndex unchanged, so the red-border active indicator can point to a different cell than the one that just received the task. This affects all callers that don't previously invoke setActiveCell: the sidebar (SidebarMenu.assignTaskToCommandCenter), TaskSelector, and the drag-and-drop handler in CommandCenterGrid. After any of those code paths, the highlighted cell and the "active task" cell diverge.

   Consider updating activeCellIndex inside assignTask to keep them in sync:

   assignTask: (cellIndex, taskId) =>
     set((state) => {
       if (cellIndex < 0 || cellIndex >= state.cells.length) return state;
       const cells = [...state.cells];
       const existingIndex = cells.indexOf(taskId);
       if (existingIndex !== -1) {
         cells[existingIndex] = null;
       }
       cells[cellIndex] = taskId;
       return {
         cells,
         activeTaskId: taskId,
         activeCellIndex: cellIndex,
         creatingCells: state.creatingCells.filter((i) => i !== cellIndex),
       };
     }),

   Prompt To Fix With AI

   This is a comment left during a code review.
   Path: apps/code/src/renderer/features/command-center/stores/commandCenterStore.ts
   Line: 102-116
   
   Comment:
   **`activeCellIndex` not updated in `assignTask`**
   
   `assignTask` sets `activeTaskId` but leaves `activeCellIndex` unchanged, so the red-border active indicator can point to a different cell than the one that just received the task. This affects all callers that don't previously invoke `setActiveCell`: the sidebar (`SidebarMenu.assignTaskToCommandCenter`), `TaskSelector`, and the drag-and-drop handler in `CommandCenterGrid`. After any of those code paths, the highlighted cell and the "active task" cell diverge.
   
   Consider updating `activeCellIndex` inside `assignTask` to keep them in sync:
   
   ```ts
   assignTask: (cellIndex, taskId) =>
     set((state) => {
       if (cellIndex < 0 || cellIndex >= state.cells.length) return state;
       const cells = [...state.cells];
       const existingIndex = cells.indexOf(taskId);
       if (existingIndex !== -1) {
         cells[existingIndex] = null;
       }
       cells[cellIndex] = taskId;
       return {
         cells,
         activeTaskId: taskId,
         activeCellIndex: cellIndex,
         creatingCells: state.creatingCells.filter((i) => i !== cellIndex),
       };
     }),
   ```
   
   How can I resolve this? If you propose a fix, please make it concise.

Prompt To Fix All With AI

This is a comment left during a code review.
Path: apps/code/src/renderer/features/command-center/stores/commandCenterStore.ts
Line: 102-116

Comment:
**`activeCellIndex` not updated in `assignTask`**

`assignTask` sets `activeTaskId` but leaves `activeCellIndex` unchanged, so the red-border active indicator can point to a different cell than the one that just received the task. This affects all callers that don't previously invoke `setActiveCell`: the sidebar (`SidebarMenu.assignTaskToCommandCenter`), `TaskSelector`, and the drag-and-drop handler in `CommandCenterGrid`. After any of those code paths, the highlighted cell and the "active task" cell diverge.

Consider updating `activeCellIndex` inside `assignTask` to keep them in sync:

```ts
assignTask: (cellIndex, taskId) =>
  set((state) => {
    if (cellIndex < 0 || cellIndex >= state.cells.length) return state;
    const cells = [...state.cells];
    const existingIndex = cells.indexOf(taskId);
    if (existingIndex !== -1) {
      cells[existingIndex] = null;
    }
    cells[cellIndex] = taskId;
    return {
      cells,
      activeTaskId: taskId,
      activeCellIndex: cellIndex,
      creatingCells: state.creatingCells.filter((i) => i !== cellIndex),
    };
  }),
```

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (2): Last reviewed commit: "fix(code): show active cell indicator fo..." | Re-trigger Greptile}