perf(web): lazy editor + vendor-split + meta description

packages/web/index.html

@@ -4,6 +4,11 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Animated data-flow diagrams your AI agent can write. One SKILL.md plugs OpenHop into Claude Code, Cursor, Codex, and 11+ other clients."
+    />
+    <meta name="theme-color" content="#0a1f0e" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet" />

packages/web/src/App.tsx

@@ -1,9 +1,12 @@
-import { useState, useEffect, useMemo, useCallback, useRef } from 'react'
+import { lazy, Suspense, useState, useEffect, useMemo, useCallback, useRef } from 'react'
 import YAML from 'yaml'
 import { Sidebar } from './components/Sidebar'
 import { FlowCanvas } from './components/FlowCanvas'
 import { DataInspectionPanel, BookmarkTab, type DockSide } from './components/DataInspectionPanel'
-import { FlowEditorModal } from './components/FlowEditorModal'
+// Lazy — see AppFragment.tsx for rationale (CodeMirror chunk weight).
+const FlowEditorModal = lazy(() =>
+  import('./components/FlowEditorModal').then((m) => ({ default: m.FlowEditorModal }))
+)
 import { buildStarterYaml } from './lib/starter-yaml'
 import { isMobileViewport } from './lib/mobile'
 import { useFlowList, useFlowData } from './hooks/useFlowPolling'
@@ -536,16 +539,22 @@ function App() {
         </div>
       </div>
 
-      {/* Editor modal — overlays everything when open */}
-      <FlowEditorModal
-        open={editor.mode !== 'closed'}
-        title={editor.mode === 'edit' ? 'Edit flow' : 'New flow'}
-        initialYaml={editor.mode === 'closed' ? '' : editor.initialYaml}
-        saving={mutations.inFlight}
-        serverError={mutations.error}
-        onSave={handleEditorSave}
-        onCancel={handleEditorCancel}
-      />
+      {/* Editor modal — overlays everything when open. Mount-on-open
+          so the lazy chunk only downloads when the user actually opens
+          the editor. */}
+      {editor.mode !== 'closed' && (
+        <Suspense fallback={null}>
+          <FlowEditorModal
+            open
+            title={editor.mode === 'edit' ? 'Edit flow' : 'New flow'}
+            initialYaml={editor.initialYaml}
+            saving={mutations.inFlight}
+            serverError={mutations.error}
+            onSave={handleEditorSave}
+            onCancel={handleEditorCancel}
+          />
+        </Suspense>
+      )}
     </div>
   )
 }

packages/web/src/AppFragment.tsx

@@ -1,9 +1,15 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import YAML from 'yaml'
 import { parseFlowYaml } from '@openhop/shared'
 import { FlowCanvas } from './components/FlowCanvas'
 import { DataInspectionPanel, BookmarkTab, type DockSide } from './components/DataInspectionPanel'
-import { FlowEditorModal } from './components/FlowEditorModal'
+// FlowEditorModal pulls in CodeMirror + the YAML language pack — together
+// the heaviest unused chunk on first paint. Defer the import until the
+// user actually opens the editor (+ New flow / Edit). React.lazy needs a
+// default export; the .then() unwraps the named export.
+const FlowEditorModal = lazy(() =>
+  import('./components/FlowEditorModal').then((m) => ({ default: m.FlowEditorModal }))
+)
 import { Sidebar } from './components/Sidebar'
 import { buildStarterYaml } from './lib/starter-yaml'
 import { buildShareUrl, decodeFragment, encodeFragment } from './lib/share-url'
@@ -498,16 +504,25 @@ export default function AppFragment() {
         </div>
       </div>
 
-      <FlowEditorModal
-        open={editor.mode !== 'closed'}
-        title={editor.mode === 'edit' ? 'Edit flow (copy share URL)' : 'New flow (copy share URL)'}
-        initialYaml={editor.mode === 'closed' ? '' : editor.initialYaml}
-        saving={copying}
-        serverError={null}
-        onSave={handleEditorSave}
-        onCancel={handleEditorCancel}
-        mode="fragment"
-      />
+      {/* Mount the modal only when actually open — keeps the lazy
+          chunk request on the click, not on first paint. Suspense is a
+          no-op fallback because the modal is opaque while loading. */}
+      {editor.mode !== 'closed' && (
+        <Suspense fallback={null}>
+          <FlowEditorModal
+            open
+            title={
+              editor.mode === 'edit' ? 'Edit flow (copy share URL)' : 'New flow (copy share URL)'
+            }
+            initialYaml={editor.initialYaml}
+            saving={copying}
+            serverError={null}
+            onSave={handleEditorSave}
+            onCancel={handleEditorCancel}
+            mode="fragment"
+          />
+        </Suspense>
+      )}
 
       {toast && (
         <div

packages/web/vite.config.ts

@@ -34,6 +34,29 @@ export default defineConfig({
     // in the browser bundle, so we mark it external to keep rolldown happy.
     rollupOptions: {
       external: ['web-worker'],
+      output: {
+        // Split heavy vendor deps out of the entry bundle so the app
+        // shell hits the network as fewer bytes and the browser can
+        // parallelize downloads. The single-chunk build shipped
+        // ~2.5 MB on first paint; splitting drops the entry chunk and
+        // moves rarely-changing vendor code into separate
+        // cache-friendly chunks. CodeMirror is also lazy-loaded at
+        // the React layer (see App*.tsx), so its chunk only fetches
+        // when the editor opens.
+        //
+        // Function form because rolldown's `manualChunks` doesn't
+        // accept the object form the older rollup API used.
+        manualChunks(id) {
+          if (!id.includes('node_modules')) return undefined
+          if (id.includes('/elkjs/') || id.includes('/@xyflow/')) return 'flow'
+          if (id.includes('/@codemirror/') || id.includes('/@uiw/react-codemirror/'))
+            return 'codemirror'
+          if (id.includes('/yaml/') || id.includes('/lz-string/')) return 'yaml'
+          if (id.includes('/react/') || id.includes('/react-dom/') || id.includes('/scheduler/'))
+            return 'react'
+          return undefined
+        },
+      },
     },
   },
 })