feat: modernize Electron build process with Vite-based CSS injection

- Replace manual CSS injection hack with Vite plugin
- Configure Vite to handle both main process and renderer builds
- Update build scripts to work with proper Vite output structure
- Remove fix-inject-css.js post-build script
- Update BUILDING.md documentation
- Add build-modernization-context.md for future reference

Technical changes:
- vite.config.electron.mts: Add electron-css-injection plugin and proper output config
- scripts/build-electron.js: Simplify to work with Vite-generated files
- BUILDING.md: Update Electron build documentation
- doc/build-modernization-context.md: Document context and decisions

Security/maintenance improvements:
- Eliminate manual file manipulation hacks
- Ensure deterministic, reproducible builds
- Centralize build logic in Vite configuration
- Improve developer experience and CI/CD compatibility

Author: Matthew Raymer

vite.config.electron.mts

@@ -10,14 +10,30 @@ export default defineConfig(async () => {
       outDir: 'dist-electron',
       rollupOptions: {
         input: {
+          // Main process entry points
           main: path.resolve(__dirname, 'src/electron/main.ts'),
           preload: path.resolve(__dirname, 'src/electron/preload.js'),
+          // Renderer process entry point (the web app)
+          app: path.resolve(__dirname, 'index.html'),
         },
         external: ['electron'],
         output: {
           format: 'cjs',
-          entryFileNames: '[name].js',
-          assetFileNames: 'assets/[name].[ext]',
+          entryFileNames: (chunkInfo) => {
+            // Use different formats for main process vs renderer
+            if (chunkInfo.name === 'main' || chunkInfo.name === 'preload') {
+              return '[name].js';
+            }
+            return 'assets/[name].[hash].js';
+          },
+          assetFileNames: (assetInfo) => {
+            // Keep main process files in root, others in assets
+            if (assetInfo.name === 'main.js' || assetInfo.name === 'preload.js') {
+              return '[name].[ext]';
+            }
+            return 'assets/[name].[hash].[ext]';
+          },
+          chunkFileNames: 'assets/[name].[hash].js',
         },
       },
       target: 'node18',
@@ -93,6 +109,40 @@ export default defineConfig(async () => {
           }
           return null;
         }
+      },
+      {
+        name: 'electron-css-injection',
+        enforce: 'post',
+        generateBundle(options, bundle) {
+          // Find the main CSS file
+          const cssAsset = Object.values(bundle).find(
+            (asset: any) => asset.type === 'asset' && asset.fileName?.endsWith('.css')
+          ) as any;
+          
+          if (cssAsset) {
+            // Find the HTML file and inject CSS link
+            const htmlAsset = Object.values(bundle).find(
+              (asset: any) => asset.type === 'asset' && asset.fileName?.endsWith('.html')
+            ) as any;
+            
+            if (htmlAsset) {
+              const cssHref = `./${cssAsset.fileName}`;
+              const cssLink = `    <link rel="stylesheet" href="${cssHref}">\n`;
+              
+              // Check if CSS link already exists
+              if (!htmlAsset.source.includes(cssHref)) {
+                // Inject CSS link after the title tag
+                htmlAsset.source = htmlAsset.source.replace(
+                  /(<title>.*?<\/title>)/,
+                  `$1\n${cssLink}`
+                );
+                console.log(`[electron-css-injection] Injected CSS link: ${cssHref}`);
+              } else {
+                console.log(`[electron-css-injection] CSS link already present: ${cssHref}`);
+              }
+            }
+          }
+        }
       }
     ],
     ssr: {