PR 5: Preview mode (#113)

Summary:
- Implements a robust preview mechanism to temporarily show `Kernel Overview` or `IR Code` for either side without mutating App-global data.
- Resolves issues of swapped sides or lost selections when returning from preview.

#### Key Changes
- Extends `FileDiffSession` with `preview` state and uses it in `App.tsx` to conditionally render preview targets.
- Defers tab switching in `gotoOverview/gotoIRCode` using `setTimeout(0)` to let Monaco unmount cleanly.
- Adds dynamic `key` props to `KernelOverview` and `CodeView` when previewing to force remount and proper default IR selection.

Pull Request resolved: #113

Reviewed By: sfzhu93

Differential Revision: D82745908

Pulled By: FindHao

fbshipit-source-id: 6fbd8baa6fa881951262e53ff9be4c59c4a0b836

Author: FindHao

website/src/App.tsx

@@ -16,12 +16,14 @@ import DataSourceSelector from "./components/DataSourceSelector";
 import WelcomeScreen from "./components/WelcomeScreen";
 import ExternalLink from "./components/ExternalLink";
 import { mapLanguageToHighlighter } from "./components/CodeViewer";
+import { useFileDiffSession } from "./context/FileDiffSession";
 
 /**
  * Main application component that handles data loading,
  * state management, and rendering different views.
  */
 function App() {
+  const sess = useFileDiffSession();
   // Store processed kernel data from log file
   const [kernels, setKernels] = useState<ProcessedKernel[]>([]);
   // Track loading state for displaying loading indicator
@@ -279,6 +281,13 @@ function App() {
     }
   };
 
+  // Register app controls for FileDiffSession navigation
+  useEffect(() => {
+    sess.registerAppControls({
+      setActiveTab,
+    });
+  }, [sess, setActiveTab]);
+
   // Show loading indicator while data is being fetched
   if (loading) {
     return (
@@ -324,6 +333,27 @@ function App() {
           onBack={handleBackFromIRView}
         />
       );
+    } else if (sess.preview.active) {
+      const side = sess.preview.side === 'left' ? sess.left : sess.right;
+      const idx = side.selectedIdx ?? 0;
+      const kernelsSrc = side.kernels ?? [];
+      if (!kernelsSrc || kernelsSrc.length === 0) {
+        return <div className="text-red-600">Error: Preview kernel data not available.</div>;
+      }
+      if (sess.preview.view === 'overview') {
+        return (
+          <KernelOverview
+            kernels={kernelsSrc}
+            onViewIR={handleViewSingleIR}
+            selectedKernel={idx}
+            onSelectKernel={() => {}}
+          />
+        );
+      }
+      if (sess.preview.view === 'ir') {
+        return <CodeView kernels={kernelsSrc} selectedKernel={idx} />;
+      }
+      return null;
     } else if (!dataLoaded) {
       // Show welcome screen if no data is loaded
       return (