From 133949f9a9fcad8ea2d0bec90235e1a24083af9f Mon Sep 17 00:00:00 2001
From: Jonathan Liebig <jonathan.liebig@gmail.com>
Date: Wed, 8 Jul 2026 12:26:23 +0200
Subject: [PATCH] Split Vite dashboard chunks

---
 src/App.jsx    | 117 ++++++++++++++++++++++++++-----------------------
 vite.config.js |   1 +
 2 files changed, 63 insertions(+), 55 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 5907bd5..c2c3a81 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,14 +1,15 @@
-import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import React, { Suspense, lazy, useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { api } from './api';
-import Overview from './components/Overview';
-import Repos from './components/Repos';
-import Models from './components/Models';
-import DailyUsage from './components/DailyUsage';
-import Sessions from './components/Sessions';
-import OverviewVideoExport from './components/OverviewVideoExport';
 import { buildLiveDataEnvelope, buildLiveStateFromSettled, chooseLiveEnvelope, mergeLiveEvent, shouldUseLiveData } from './live-state';
 import { debugLive, summarizeLivePayload, summarizeLiveState } from './utils/liveDebug';
 
+const Overview = lazy(() => import('./components/Overview'));
+const Repos = lazy(() => import('./components/Repos'));
+const Models = lazy(() => import('./components/Models'));
+const DailyUsage = lazy(() => import('./components/DailyUsage'));
+const Sessions = lazy(() => import('./components/Sessions'));
+const OverviewVideoExport = lazy(() => import('./components/OverviewVideoExport'));
+
 const TABS = ['Overview', 'Repos', 'Models', 'Daily', 'Sessions'];
 
 const RANGES = [
@@ -53,7 +54,11 @@ export default function App() {
   const exportMode = search?.get('export');
   const exportJobId = search?.get('job');
   if (exportMode === 'overview-video' && exportJobId) {
-    return <OverviewVideoExport jobId={exportJobId} />;
+    return (
+      <Suspense fallback={null}>
+        <OverviewVideoExport jobId={exportJobId} />
+      </Suspense>
+    );
   }
 
   const [progress, setProgress] = useState(null);
@@ -719,53 +724,55 @@ export default function App() {
           </div>
         </nav>
 
-        <div className="main-content">
-          {tab === 'Overview' && (
-            <Overview
-              data={overviewData}
-              heatmap={overviewHeatmap}
-              daily={overviewDaily}
-              families={overviewFamilies}
-              repos={overviewRepos}
-              models={overviewModels}
-              range={range}
-              onPresentationSettledChange={setOverviewPresentationSettled}
-              ingestProgress={overviewIngestProgress}
-              isIngestActive={overviewIngestActive}
-              currentDateBucket={progress?.current_date_bucket || null}
-              onDailyDebugStatsChange={setDailyDebugStats}
-              onPresentationDateRangeChange={setOverviewPresentationDateRange}
-              onNavigateToDailyDay={handleNavigateToDailyDay}
-              onNavigateToRepo={handleNavigateToRepo}
-              onNavigateToModel={handleNavigateToModel}
-            />
-          )}
-          {tab === 'Repos' && (
-            <Repos
-              data={tabRepos}
-              range={range}
-              focusRequest={reposFocusRequest}
-              onFocusRequestConsumed={() => setReposFocusRequest(null)}
-            />
-          )}
-          {tab === 'Models' && (
-            <Models
-              data={tabModels}
-              range={range}
-              focusRequest={modelsFocusRequest}
-              onFocusRequestConsumed={() => setModelsFocusRequest(null)}
-            />
-          )}
-          {tab === 'Daily' && (
-            <DailyUsage
-              data={tabDaily}
-              range={range}
-              navigateToDayRequest={dailyNavigateRequest}
-              onNavigateToDayConsumed={() => setDailyNavigateRequest(null)}
-            />
-          )}
-          {tab === 'Sessions' && <Sessions data={data.sessions} />}
-        </div>
+        <Suspense fallback={null}>
+          <div className="main-content">
+            {tab === 'Overview' && (
+              <Overview
+                data={overviewData}
+                heatmap={overviewHeatmap}
+                daily={overviewDaily}
+                families={overviewFamilies}
+                repos={overviewRepos}
+                models={overviewModels}
+                range={range}
+                onPresentationSettledChange={setOverviewPresentationSettled}
+                ingestProgress={overviewIngestProgress}
+                isIngestActive={overviewIngestActive}
+                currentDateBucket={progress?.current_date_bucket || null}
+                onDailyDebugStatsChange={setDailyDebugStats}
+                onPresentationDateRangeChange={setOverviewPresentationDateRange}
+                onNavigateToDailyDay={handleNavigateToDailyDay}
+                onNavigateToRepo={handleNavigateToRepo}
+                onNavigateToModel={handleNavigateToModel}
+              />
+            )}
+            {tab === 'Repos' && (
+              <Repos
+                data={tabRepos}
+                range={range}
+                focusRequest={reposFocusRequest}
+                onFocusRequestConsumed={() => setReposFocusRequest(null)}
+              />
+            )}
+            {tab === 'Models' && (
+              <Models
+                data={tabModels}
+                range={range}
+                focusRequest={modelsFocusRequest}
+                onFocusRequestConsumed={() => setModelsFocusRequest(null)}
+              />
+            )}
+            {tab === 'Daily' && (
+              <DailyUsage
+                data={tabDaily}
+                range={range}
+                navigateToDayRequest={dailyNavigateRequest}
+                onNavigateToDayConsumed={() => setDailyNavigateRequest(null)}
+              />
+            )}
+            {tab === 'Sessions' && <Sessions data={data.sessions} />}
+          </div>
+        </Suspense>
         {overviewIngestActive && dailyDebugStats && (
           <div className="app-footer-debug">
             Daily Usage presentation: {dailyDebugStats.speedDaysPerSecond.toFixed(1)} days/s
diff --git a/vite.config.js b/vite.config.js
index ef6471e..13c5718 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -10,6 +10,7 @@ export default defineConfig({
   build: {
     outDir: 'dist',
     emptyOutDir: true,
+    chunkSizeWarningLimit: 600,
   },
   server: {
     watch: {