fix: update frontend dependencies and improve router configuration

- Upgrade Vite to version 8 and TypeScript to version 6
- Update react-router-dom and web-vitals versions
- Adjust router configuration to remove fallback element
- Add TypeScript declarations for react-syntax-highlighter ESM imports

Author: MarkusNeusinger

.github/copilot-instructions.md

@@ -112,7 +112,7 @@ Examples: `scatter-basic`, `scatter-color-mapped`, `bar-grouped-horizontal`, `he
   - **`core/database/types.py`**: Custom SQLAlchemy types (PostgreSQL + SQLite compatibility)
   - **`core/database/repositories.py`**: Data access layer
 - **`api/`**: FastAPI backend (routers, schemas, dependencies, cache, analytics, MCP server)
-- **`app/`**: React frontend (React 19 + TypeScript 5 + Vite 7 + MUI 7)
+- **`app/`**: React frontend (React 19 + TypeScript 6 + Vite 8 + MUI 7)
 - **`agentic/`**: AI workflow layer (composable phases, prompt templates, runtime state)
 - **`automation/`**: CI/CD helper scripts (workflow_cli, label_manager, sync_to_postgres)
 - **`tests/unit/`**: Unit tests with mocked dependencies
@@ -213,7 +213,7 @@ plt.savefig('plot.png', dpi=300, bbox_inches='tight')
 ## Tech Stack
 
 - **Backend**: FastAPI, SQLAlchemy (async), PostgreSQL, Python 3.14+
-- **Frontend**: React 19, TypeScript 5, Vite 7, MUI 7
+- **Frontend**: React 19, TypeScript 6, Vite 8, MUI 7
 - **Package Manager**: uv (Python), yarn (Node.js)
 - **Linting**: Ruff (Python), ESLint (TypeScript)
 

.serena/memories/project_overview.md

@@ -8,7 +8,7 @@ matplotlib, seaborn, plotly, bokeh, altair, plotnine, pygal, highcharts, lets-pl
 
 ## Tech Stack
 - **Backend**: Python 3.14+, FastAPI, SQLAlchemy async, asyncpg, PostgreSQL
-- **Frontend**: React 19, Vite 7, TypeScript 5, MUI 7, Emotion CSS-in-JS
+- **Frontend**: React 19, Vite 8, TypeScript 6, MUI 7, Emotion CSS-in-JS
 - **Package Managers**: uv (Python), yarn (frontend)
 - **Infrastructure**: Google Cloud Run, Cloud SQL, Cloud Storage (GCS)
 - **AI**: Claude (code generation, quality review, spec creation)

agentic/docs/project-guide.md

@@ -163,7 +163,7 @@ Example: `plots/scatter-basic/` contains everything for the basic scatter plot.
   - **`core/database/types.py`**: Custom SQLAlchemy types (PostgreSQL + SQLite compatibility)
   - **`core/database/repositories.py`**: Data access layer
 - **`api/`**: FastAPI backend (routers, schemas, dependencies, cache, analytics, MCP server)
-- **`app/`**: React frontend (Vite 7 + TypeScript 5 + MUI 7)
+- **`app/`**: React frontend (Vite 8 + TypeScript 6 + MUI 7)
 - **`agentic/`**: AI workflow layer (composable phases, prompt templates, runtime state)
   - **`agentic/workflows/`**: Click CLI scripts (plan, build, test, review + orchestrators)
   - **`agentic/commands/`**: Markdown prompt templates
@@ -316,7 +316,7 @@ gs://pyplots-images/
 ## Tech Stack
 
 - **Backend**: FastAPI, SQLAlchemy (async), PostgreSQL, Python 3.14+
-- **Frontend**: React 19, Vite 7, TypeScript 5, MUI 7
+- **Frontend**: React 19, Vite 8, TypeScript 6, MUI 7
 - **Plotting**: matplotlib, seaborn, plotly, bokeh, altair, plotnine, pygal, highcharts, lets-plot
 - **Package Manager**: uv (fast Python installer)
 - **Infrastructure**: Google Cloud Run, Cloud SQL, Cloud Storage

app/package.json

@@ -26,9 +26,9 @@
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-helmet-async": "^3.0.0",
-    "react-router-dom": "^7.13.2",
+    "react-router-dom": "^7.14.0",
     "react-syntax-highlighter": "^16.1.1",
-    "web-vitals": "^5.1.0"
+    "web-vitals": "^5.2.0"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
@@ -39,17 +39,17 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.1.7",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "@typescript-eslint/eslint-plugin": "^8.57.0",
-    "@typescript-eslint/parser": "^8.57.0",
-    "@vitejs/plugin-react-swc": "^4.2.3",
-    "@vitest/coverage-v8": "^4.0.18",
-    "eslint": "^10.0.3",
+    "@typescript-eslint/eslint-plugin": "^8.58.0",
+    "@typescript-eslint/parser": "^8.58.0",
+    "@vitejs/plugin-react-swc": "^4.3.0",
+    "@vitest/coverage-v8": "^4.1.2",
+    "eslint": "^10.1.0",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "jsdom": "^29.0.1",
-    "typescript": "^5.9.2",
-    "vite": "^7.3.1",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.3",
     "vite-plugin-compression2": "^2.5.3",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.2"
   }
 }

app/src/router.tsx

@@ -17,6 +17,7 @@ const router = createBrowserRouter([
   {
     path: '/',
     element: <Layout />,
+    HydrateFallback: LazyFallback,
     children: [
       { index: true, element: <HomePage /> },
       { path: 'catalog', lazy: () => import('./pages/CatalogPage').then(m => ({ Component: m.CatalogPage, HydrateFallback: LazyFallback })) },
@@ -39,7 +40,7 @@ export function AppRouter() {
     <HelmetProvider>
       <ErrorBoundary>
         <AppDataProvider>
-          <RouterProvider router={router} fallbackElement={<LazyFallback />} />
+          <RouterProvider router={router} />
         </AppDataProvider>
       </ErrorBoundary>
     </HelmetProvider>

app/src/vite-env.d.ts

@@ -7,3 +7,8 @@ interface ImportMetaEnv {
 interface ImportMeta {
   readonly env: ImportMetaEnv;
 }
+
+// Deep ESM imports not covered by @types/react-syntax-highlighter
+declare module 'react-syntax-highlighter/dist/esm/prism-light';
+declare module 'react-syntax-highlighter/dist/esm/styles/prism';
+declare module 'react-syntax-highlighter/dist/esm/languages/prism/python';