Improve workspace navigation and render isolation

packages/app/src/panels/pane-context.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, type ReactNode } from "react";
+import React, { createContext, useContext, type ReactNode } from "react";
 import invariant from "tiny-invariant";
 import type { WorkspaceTabTarget } from "@/stores/workspace-tabs-store";
 
@@ -6,7 +6,6 @@ export interface PaneContextValue {
   serverId: string;
   workspaceId: string;
   tabId: string;
-  isPaneFocused: boolean;
   target: WorkspaceTabTarget;
   openTab(target: WorkspaceTabTarget): void;
   closeCurrentTab(): void;
@@ -14,7 +13,25 @@ export interface PaneContextValue {
   openFileInWorkspace(filePath: string): void;
 }
 
+export interface PaneFocusContextValue {
+  isWorkspaceFocused: boolean;
+  isPaneFocused: boolean;
+  isInteractive: boolean;
+}
+
 const PaneContext = createContext<PaneContextValue | null>(null);
+const PaneFocusContext = createContext<PaneFocusContextValue | null>(null);
+
+export function createPaneFocusContextValue(input: {
+  isWorkspaceFocused: boolean;
+  isPaneFocused: boolean;
+}): PaneFocusContextValue {
+  return {
+    isWorkspaceFocused: input.isWorkspaceFocused,
+    isPaneFocused: input.isPaneFocused,
+    isInteractive: input.isWorkspaceFocused && input.isPaneFocused,
+  };
+}
 
 export function PaneProvider({
   value,
@@ -26,8 +43,24 @@ export function PaneProvider({
   return <PaneContext.Provider value={value}>{children}</PaneContext.Provider>;
 }
 
+export function PaneFocusProvider({
+  value,
+  children,
+}: {
+  value: PaneFocusContextValue;
+  children: ReactNode;
+}) {
+  return <PaneFocusContext.Provider value={value}>{children}</PaneFocusContext.Provider>;
+}
+
 export function usePaneContext(): PaneContextValue {
   const value = useContext(PaneContext);
   invariant(value, "PaneContext is required");
   return value;
 }
+
+export function usePaneFocus(): PaneFocusContextValue {
+  const value = useContext(PaneFocusContext);
+  invariant(value, "PaneFocusContext is required");
+  return value;
+}