fix(command-center): scope session hotkeys to active task (#1309)

Author: CaioDGallo

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

@@ -46,19 +46,32 @@ function GridCell({
   cell,
   zoom,
   isDragActive,
+  activeTaskId,
 }: {
   cell: CommandCenterCellData;
   zoom: number;
   isDragActive: boolean;
+  activeTaskId: string | null;
 }) {
   const cellRef = useRef<HTMLDivElement>(null);
   const [isDragOver, setIsDragOver] = useState(false);
+  const setActiveTask = useCommandCenterStore((s) => s.setActiveTask);
+  const isActive = !!cell.taskId && activeTaskId === cell.taskId;
 
   const handleCellClick = useCallback(() => {
+    setActiveTask(cell.taskId);
     const actionSelector =
       cellRef.current?.querySelector<HTMLElement>("[tabindex='0']");
     actionSelector?.focus();
-  }, []);
+  }, [cell.taskId, setActiveTask]);
+
+  const handleCellPointerDownCapture = useCallback(() => {
+    setActiveTask(cell.taskId);
+  }, [cell.taskId, setActiveTask]);
+
+  const handleCellFocusCapture = useCallback(() => {
+    setActiveTask(cell.taskId);
+  }, [cell.taskId, setActiveTask]);
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
     if (e.dataTransfer.types.includes("text/x-task-id")) {
@@ -88,16 +101,20 @@ function GridCell({
     // 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"
+      className={`relative overflow-hidden bg-gray-1 focus-within:ring-2 focus-within:ring-accent-9 focus-within:ring-inset ${
+        isActive ? "ring-2 ring-accent-9 ring-inset" : ""
+      }`}
       onClick={handleCellClick}
+      onPointerDownCapture={handleCellPointerDownCapture}
+      onFocusCapture={handleCellFocusCapture}
     >
       <div
         className="h-full w-full origin-top-left"
         style={{
           zoom: zoom !== 1 ? zoom : undefined,
         }}
       >
-        <CommandCenterPanel cell={cell} />
+        <CommandCenterPanel cell={cell} isActiveSession={isActive} />
       </div>
       {isDragActive && (
         // biome-ignore lint/a11y/noStaticElementInteractions: transparent overlay to capture drag events over session content
@@ -119,6 +136,7 @@ function GridCell({
 export function CommandCenterGrid({ layout, cells }: CommandCenterGridProps) {
   const { cols, rows } = getGridDimensions(layout);
   const zoom = useCommandCenterStore((s) => s.zoom);
+  const activeTaskId = useCommandCenterStore((s) => s.activeTaskId);
   const isDragActive = useTaskDragActive();
 
   return (
@@ -137,6 +155,7 @@ export function CommandCenterGrid({ layout, cells }: CommandCenterGridProps) {
           cell={cell}
           zoom={zoom}
           isDragActive={isDragActive}
+          activeTaskId={activeTaskId}
         />
       ))}
     </div>

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

@@ -11,6 +11,7 @@ import { TaskSelector } from "./TaskSelector";
 
 interface CommandCenterPanelProps {
   cell: CommandCenterCellData;
+  isActiveSession: boolean;
 }
 
 function EmptyCell({ cellIndex }: { cellIndex: number }) {
@@ -43,8 +44,10 @@ function EmptyCell({ cellIndex }: { cellIndex: number }) {
 
 function PopulatedCell({
   cell,
+  isActiveSession,
 }: {
   cell: CommandCenterCellData & { task: Task };
+  isActiveSession: boolean;
 }) {
   const navigateToTask = useNavigationStore((s) => s.navigateToTask);
   const removeTask = useCommandCenterStore((s) => s.removeTask);
@@ -101,18 +104,28 @@ function PopulatedCell({
       </Flex>
 
       <Flex direction="column" className="min-h-0 flex-1">
-        <CommandCenterSessionView taskId={cell.task.id} task={cell.task} />
+        <CommandCenterSessionView
+          taskId={cell.task.id}
+          task={cell.task}
+          isActiveSession={isActiveSession}
+        />
       </Flex>
     </Flex>
   );
 }
 
-export function CommandCenterPanel({ cell }: CommandCenterPanelProps) {
+export function CommandCenterPanel({
+  cell,
+  isActiveSession,
+}: CommandCenterPanelProps) {
   if (!cell.taskId || !cell.task) {
     return <EmptyCell cellIndex={cell.cellIndex} />;
   }
 
   return (
-    <PopulatedCell cell={cell as CommandCenterCellData & { task: Task }} />
+    <PopulatedCell
+      cell={cell as CommandCenterCellData & { task: Task }}
+      isActiveSession={isActiveSession}
+    />
   );
 }

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

@@ -10,11 +10,13 @@ import { useEffect } from "react";
 interface CommandCenterSessionViewProps {
   taskId: string;
   task: Task;
+  isActiveSession: boolean;
 }
 
 export function CommandCenterSessionView({
   taskId,
   task,
+  isActiveSession,
 }: CommandCenterSessionViewProps) {
   const { requestFocus } = useDraftStore((s) => s.actions);
 
@@ -67,6 +69,7 @@ export function CommandCenterSessionView({
         onNewSession={isCloud ? undefined : handleNewSession}
         isInitializing={isInitializing}
         compact
+        isActiveSession={isActiveSession}
       />
     </Flex>
   );

apps/code/src/renderer/features/command-center/stores/commandCenterStore.ts

@@ -22,11 +22,13 @@ function getCellCount(preset: LayoutPreset): number {
 interface CommandCenterStoreState {
   layout: LayoutPreset;
   cells: (string | null)[];
+  activeTaskId: string | null;
   zoom: number;
 }
 
 interface CommandCenterStoreActions {
   setLayout: (preset: LayoutPreset) => void;
+  setActiveTask: (taskId: string | null) => void;
   assignTask: (cellIndex: number, taskId: string) => void;
   removeTask: (cellIndex: number) => void;
   removeTaskById: (taskId: string) => void;
@@ -60,14 +62,22 @@ export const useCommandCenterStore = create<CommandCenterStore>()(
     (set) => ({
       layout: "2x2",
       cells: [null, null, null, null],
+      activeTaskId: null,
       zoom: 1,
 
       setLayout: (preset) =>
         set((state) => ({
+          activeTaskId: resizeCells(state.cells, getCellCount(preset)).includes(
+            state.activeTaskId,
+          )
+            ? state.activeTaskId
+            : null,
           layout: preset,
           cells: resizeCells(state.cells, getCellCount(preset)),
         })),
 
+      setActiveTask: (taskId) => set({ activeTaskId: taskId }),
+
       assignTask: (cellIndex, taskId) =>
         set((state) => {
           if (cellIndex < 0 || cellIndex >= state.cells.length) return state;
@@ -77,14 +87,21 @@ export const useCommandCenterStore = create<CommandCenterStore>()(
             cells[existingIndex] = null;
           }
           cells[cellIndex] = taskId;
-          return { cells };
+          return { cells, activeTaskId: taskId };
         }),
 
       removeTask: (cellIndex) =>
         set((state) => {
           const cells = [...state.cells];
+          const removedTaskId = cells[cellIndex];
           cells[cellIndex] = null;
-          return { cells };
+          return {
+            cells,
+            activeTaskId:
+              removedTaskId && state.activeTaskId === removedTaskId
+                ? null
+                : state.activeTaskId,
+          };
         }),
 
       removeTaskById: (taskId) =>
@@ -93,11 +110,16 @@ export const useCommandCenterStore = create<CommandCenterStore>()(
           if (index === -1) return state;
           const cells = [...state.cells];
           cells[index] = null;
-          return { cells };
+          return {
+            cells,
+            activeTaskId:
+              state.activeTaskId === taskId ? null : state.activeTaskId,
+          };
         }),
 
       clearAll: () =>
         set((state) => ({
+          activeTaskId: null,
           cells: state.cells.map(() => null),
         })),
 
@@ -113,6 +135,7 @@ export const useCommandCenterStore = create<CommandCenterStore>()(
       partialize: (state) => ({
         layout: state.layout,
         cells: state.cells,
+        activeTaskId: state.activeTaskId,
         zoom: state.zoom,
       }),
     },

apps/code/src/renderer/features/message-editor/components/MessageEditor.tsx

@@ -133,6 +133,7 @@ interface MessageEditorProps {
   onModeChange?: () => void;
   onFocus?: () => void;
   onBlur?: () => void;
+  isActiveSession?: boolean;
 }
 
 export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
@@ -150,6 +151,7 @@ export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
       onModeChange,
       onFocus,
       onBlur,
+      isActiveSession = true,
     },
     ref,
   ) => {
@@ -235,6 +237,7 @@ export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
       "escape",
       (e) => {
         if (hasOpenOverlay()) return;
+        if (!isActiveSession) return;
         if (isLoading && onCancel) {
           e.preventDefault();
           onCancel();
@@ -245,7 +248,7 @@ export const MessageEditor = forwardRef<EditorHandle, MessageEditorProps>(
         enableOnContentEditable: true,
         enabled: isLoading && !!onCancel,
       },
-      [isLoading, onCancel],
+      [isActiveSession, isLoading, onCancel],
     );
 
     const handleContainerClick = (e: React.MouseEvent) => {

apps/code/src/renderer/features/sessions/components/SessionView.tsx

@@ -60,6 +60,7 @@ interface SessionViewProps {
   isInitializing?: boolean;
   slackThreadUrl?: string;
   compact?: boolean;
+  isActiveSession?: boolean;
 }
 
 const DEFAULT_ERROR_MESSAGE =
@@ -88,6 +89,7 @@ export function SessionView({
   isInitializing = false,
   slackThreadUrl,
   compact = false,
+  isActiveSession = true,
 }: SessionViewProps) {
   const showRawLogs = useShowRawLogs();
   const { setShowRawLogs } = useSessionViewActions();
@@ -161,9 +163,16 @@ export function SessionView({
     {
       enableOnFormTags: true,
       enableOnContentEditable: true,
-      enabled: isRunning && !!modeOption,
+      enabled: isRunning && !!modeOption && isActiveSession,
     },
-    [taskId, currentModeId, isRunning, modeOption, allowBypassPermissions],
+    [
+      taskId,
+      currentModeId,
+      isRunning,
+      modeOption,
+      allowBypassPermissions,
+      isActiveSession,
+    ],
   );
 
   const latestPlan = useMemo((): Plan | null => {
@@ -352,7 +361,7 @@ export function SessionView({
     editorRef.current?.focus();
   }, []);
 
-  useAutoFocusOnTyping(editorRef);
+  useAutoFocusOnTyping(editorRef, !isActiveSession);
 
   return (
     <ContextMenu.Root>
@@ -538,6 +547,7 @@ export function SessionView({
                         onCancel={onCancelPrompt}
                         modeOption={modeOption}
                         onModeChange={modeOption ? handleModeChange : undefined}
+                        isActiveSession={isActiveSession}
                       />
                     </Box>
                   </Box>