perf(graph): lazy-load optional editor UI and styles

src/App.css

@@ -1,5 +1,4 @@
 @import "tailwindcss";
-@import "@xyflow/react/dist/style.css";
 
 @theme {
   --color-bg: #1f2326;

src/components/GraphCanvasEditor.tsx

@@ -15,6 +15,7 @@ import {
   type ReactFlowInstance,
   type Viewport,
 } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
 import {
   Boxes,
   Check,

src/components/Pane.tsx

@@ -26,6 +26,8 @@ import {
   X,
 } from "lucide-react";
 import {
+  Suspense,
+  lazy,
   useCallback,
   useMemo,
   useRef,
@@ -39,7 +41,6 @@ import { FileViewer } from "./FileViewer";
 import { mediaKindFromPath } from "../lib/mediaFiles";
 import { writeClipboardText } from "../lib/clipboardText";
 import { ChatPane } from "./ChatPane";
-import { GraphSessionView } from "./GraphSessionView";
 import { WorkSummaryView } from "./WorkSummaryView";
 import { api } from "../lib/api";
 import {
@@ -123,6 +124,11 @@ import {
   type WorkspaceTabDragSession,
 } from "../lib/workspaceTabDrag";
 
+const GraphSessionView = lazy(async () => {
+  const module = await import("./GraphSessionView");
+  return { default: module.GraphSessionView };
+});
+
 const SESSION_STATUS_TONE: Record<SessionStatus, StatusTone> = {
   ready: "neutral",
   working: "accent",
@@ -606,7 +612,9 @@ export function Pane({ paneId }: PaneProps) {
           a frontend-owned file tab instead of a PTY session.
         */}
         {activeSession?.graph ? (
-          <GraphSessionView session={activeSession} isActive={isFocused} />
+          <Suspense fallback={null}>
+            <GraphSessionView session={activeSession} isActive={isFocused} />
+          </Suspense>
         ) : activeSession?.mode === "chat" ? (
           <ChatPane
             sessionId={activeSession.id}

src/components/Sidebar.tsx

@@ -32,6 +32,8 @@ import {
 import { homeDir } from "@tauri-apps/api/path";
 import { openUrl } from "@tauri-apps/plugin-opener";
 import {
+  Suspense,
+  lazy,
   useCallback,
   useEffect,
   useMemo,
@@ -179,7 +181,6 @@ import type {
   SessionStatusReason,
 } from "../lib/types";
 import { AutonomousGoalDialog } from "./AutonomousGoalDialog";
-import { GraphSessionDialog } from "./GraphSessionDialog";
 import { ContextMenu, type ContextMenuItem } from "./ContextMenu";
 import { AddExistingProjectDialog } from "./AddExistingProjectDialog";
 import { NewProjectDialog } from "./NewProjectDialog";
@@ -221,6 +222,11 @@ const ACTIVITY_MIN_HEIGHT = 96;
 const ACTIVITY_MAX_HEIGHT = 420;
 const ACTIVITY_KEYBOARD_STEP = 16;
 
+const GraphSessionDialog = lazy(async () => {
+  const module = await import("./GraphSessionDialog");
+  return { default: module.GraphSessionDialog };
+});
+
 const PROJECT_DRAG_PREFIX = "project:";
 const FOLDER_DRAG_PREFIX = "folder:";
 const SESSION_DRAG_PREFIX = "session:";
@@ -1584,14 +1590,18 @@ export function Sidebar() {
         open={addProjectOpen}
         onClose={() => setAddProjectOpen(false)}
       />
-      <GraphSessionDialog
-        open={graphSessionOpen}
-        scope={graphSessionScope}
-        onClose={() => {
-          setGraphSessionOpen(false);
-          setGraphSessionScope(null);
-        }}
-      />
+      {graphSessionOpen ? (
+        <Suspense fallback={null}>
+          <GraphSessionDialog
+            open
+            scope={graphSessionScope}
+            onClose={() => {
+              setGraphSessionOpen(false);
+              setGraphSessionScope(null);
+            }}
+          />
+        </Suspense>
+      ) : null}
       <NewProjectDialog
         open={newProjectOpen}
         onClose={() => setNewProjectOpen(false)}