perf: lazy-load diff dialog (#217)

* perf: lazy-load diff dialog

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: share diff dialog props type

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: centdix

frontend/src/App.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount } from "svelte";
+  import { onMount, type Component } from "svelte";
   import WorktreeList from "./lib/WorktreeList.svelte";
   import TopBar from "./lib/TopBar.svelte";
   import Terminal from "./lib/Terminal.svelte";
@@ -8,7 +8,6 @@
   import SettingsDialog from "./lib/SettingsDialog.svelte";
   import CiDetailsDialog from "./lib/CiDetailsDialog.svelte";
   import CommentReviewDialog from "./lib/CommentReviewDialog.svelte";
-  import DiffDialog from "./lib/DiffDialog.svelte";
   import PaneBar from "./lib/PaneBar.svelte";
   import ToastStack from "./lib/ToastStack.svelte";
   import LinearPanel from "./lib/LinearPanel.svelte";
@@ -20,6 +19,7 @@
     AppConfig,
     AppNotification,
     CreateWorktreeRequest,
+    DiffDialogProps,
     PrEntry,
     LinearIssueAvailability,
     LinearIssue,
@@ -81,6 +81,7 @@
   let ciDetailsPr = $state<PrEntry | null>(null);
   let commentReviewPr = $state<PrEntry | null>(null);
   let showDiffDialog = $state(false);
+  let DiffDialogComponent = $state<Component<DiffDialogProps> | null>(null);
   let pullMainConfirm = $state(false);
   let pullMainLoading = $state(false);
   let pullMainError = $state("");
@@ -114,6 +115,7 @@
   let availableBranchRequests: Partial<Record<BranchCacheKey, Promise<AvailableBranch[]>>> = {};
   let baseBranchCache: AvailableBranch[] | null = null;
   let baseBranchRequest: Promise<AvailableBranch[]> | null = null;
+  let diffDialogLoad: Promise<void> | null = null;
 
   // Linear integration
   let linearIssues = $state<LinearIssue[]>([]);
@@ -229,6 +231,34 @@
     }, AUTO_DISMISS_MS);
   }
 
+  function ensureDiffDialogLoaded(): Promise<void> {
+    if (DiffDialogComponent) return Promise.resolve();
+    if (diffDialogLoad) return diffDialogLoad;
+
+    diffDialogLoad = import("./lib/DiffDialog.svelte")
+      .then(({ default: component }) => {
+        DiffDialogComponent = component;
+      })
+      .finally(() => {
+        diffDialogLoad = null;
+      });
+
+    return diffDialogLoad;
+  }
+
+  async function openDiffDialog(): Promise<void> {
+    try {
+      await ensureDiffDialogLoaded();
+      showDiffDialog = true;
+    } catch (err: unknown) {
+      showToast({
+        tone: "error",
+        message: "Failed to load changes view.",
+        detail: errorMessage(err),
+      });
+    }
+  }
+
   function handleInitialNotification(n: AppNotification): void {
     if (notificationHistory.some((x) => x.id === n.id)) return;
     notificationHistory = [n, ...notificationHistory].slice(0, MAX_HISTORY);
@@ -1068,7 +1098,7 @@
         if (selectedBranch) removeBranch = selectedBranch;
       }}
       onsettings={() => (showSettingsDialog = true)}
-      ondirtyclick={() => (showDiffDialog = true)}
+      ondirtyclick={openDiffDialog}
       onCiClick={(pr) => (ciDetailsPr = pr)}
       onReviewsClick={(pr) => (commentReviewPr = pr)}
       onbellopen={handleBellOpen}
@@ -1240,8 +1270,8 @@
   />
 {/if}
 
-{#if showDiffDialog && selectedBranch}
-  <DiffDialog
+{#if showDiffDialog && selectedBranch && DiffDialogComponent}
+  <DiffDialogComponent
     branch={selectedBranch}
     cursorUrl={makeCursorUrl(selectedWorktree?.dir, sshHost)}
     onclose={() => (showDiffDialog = false)}

frontend/src/lib/DiffDialog.svelte

@@ -2,7 +2,7 @@
   import { html as diff2html } from "diff2html";
   import { ColorSchemeType } from "diff2html/lib/types";
   import "diff2html/bundles/css/diff2html.min.css";
-  import type { UnpushedCommit } from "./types";
+  import type { DiffDialogProps, UnpushedCommit } from "./types";
   import { api } from "./api";
   import { errorMessage } from "./utils";
   import BaseDialog from "./BaseDialog.svelte";
@@ -13,11 +13,7 @@
     branch,
     cursorUrl = null,
     onclose,
-  }: {
-    branch: string;
-    cursorUrl?: string | null;
-    onclose: () => void;
-  } = $props();
+  }: DiffDialogProps = $props();
 
   let uncommitted = $state("");
   let uncommittedTruncated = $state(false);

frontend/src/lib/types.ts

@@ -46,6 +46,12 @@ export interface FileUploadResult {
   files: Array<{ path: string }>;
 }
 
+export interface DiffDialogProps {
+  branch: string;
+  cursorUrl?: string | null;
+  onclose: () => void;
+}
+
 export interface WorktreeInfo {
   branch: string;
   baseBranch?: string;

frontend/vite.config.ts

@@ -9,6 +9,17 @@ const port = parseInt(process.env.FRONTEND_PORT || "5112");
 
 export default defineConfig({
   plugins: [svelte(), tailwindcss()],
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes("node_modules/@xterm/")) {
+            return "vendor-xterm";
+          }
+        },
+      },
+    },
+  },
   server: {
     port,
     proxy: {