Improve workspace navigation and render isolation

packages/app/src/screens/workspace/workspace-pane-content.tsx

@@ -1,6 +1,11 @@
-import type { ComponentType } from "react";
+import React, { useMemo, type ComponentType } from "react";
 import invariant from "tiny-invariant";
-import { PaneProvider, type PaneContextValue } from "@/panels/pane-context";
+import {
+  createPaneFocusContextValue,
+  PaneFocusProvider,
+  PaneProvider,
+  type PaneContextValue,
+} from "@/panels/pane-context";
 import { getPanelRegistration } from "@/panels/panel-registry";
 import { ensurePanelsRegistered } from "@/panels/register-panels";
 import type { WorkspaceTabDescriptor } from "@/screens/workspace/workspace-tabs-types";
@@ -15,7 +20,6 @@ export interface BuildWorkspacePaneContentModelInput {
   tab: WorkspaceTabDescriptor;
   normalizedServerId: string;
   normalizedWorkspaceId: string;
-  isPaneFocused: boolean;
   onOpenTab: (target: WorkspaceTabDescriptor["target"]) => void;
   onCloseCurrentTab: () => void;
   onRetargetCurrentTab: (target: WorkspaceTabDescriptor["target"]) => void;
@@ -26,7 +30,6 @@ export function buildWorkspacePaneContentModel({
   tab,
   normalizedServerId,
   normalizedWorkspaceId,
-  isPaneFocused,
   onOpenTab,
   onCloseCurrentTab,
   onRetargetCurrentTab,
@@ -42,7 +45,6 @@ export function buildWorkspacePaneContentModel({
       serverId: normalizedServerId,
       workspaceId: normalizedWorkspaceId,
       tabId: tab.tabId,
-      isPaneFocused,
       target: tab.target,
       openTab: onOpenTab,
       closeCurrentTab: onCloseCurrentTab,
@@ -54,14 +56,30 @@ export function buildWorkspacePaneContentModel({
 
 export interface WorkspacePaneContentProps {
   content: WorkspacePaneContentModel;
+  isWorkspaceFocused: boolean;
+  isPaneFocused: boolean;
 }
 
-export function WorkspacePaneContent({ content }: WorkspacePaneContentProps) {
+export function WorkspacePaneContent({
+  content,
+  isWorkspaceFocused,
+  isPaneFocused,
+}: WorkspacePaneContentProps) {
   const { Component, key, paneContextValue } = content;
+  const paneFocusValue = useMemo(
+    () =>
+      createPaneFocusContextValue({
+        isWorkspaceFocused,
+        isPaneFocused,
+      }),
+    [isPaneFocused, isWorkspaceFocused],
+  );
 
   return (
     <PaneProvider value={paneContextValue}>
-      <Component key={key} />
+      <PaneFocusProvider value={paneFocusValue}>
+        <Component key={key} />
+      </PaneFocusProvider>
     </PaneProvider>
   );
 }