feat(client): modernize frontend to Vite, React 19 and a maintained stack

Full frontend overhaul with the HTTP API the client consumes kept identical.

Build/tooling:
- Parcel -> Vite 8 (Go index.html template + ./assets/ layout preserved)
- yarn -> npm; TypeScript -> 7; ESLint -> oxlint (typescript-eslint is
  incompatible with the native TS compiler); Jest -> Vitest; Node 24
- pin exact dependency versions

Libraries:
- redux + redux-observable + rxjs + io-ts/fp-ts -> TanStack Query + zod
- React 16 -> 19 (createRoot), react-router 5 -> 7, antd 4 -> 6,
  CodeMirror 5 -> 6, mermaid 8 -> 11, lodash -> es-toolkit
- drop axios and react-hot-loader

Verified: tsc --noEmit, vite build, vitest, oxlint all green.

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

Author: gwleclerc

.eslintignore

@@ -1,5 +1,4 @@
 .DS_Store
-.parcel-cache/
 .vscode/
 build/
 coverage/
@@ -8,4 +7,6 @@ sessions
 !tests/sessions
 smocker
 smocker.test
-yarn-error.log
+# Playwright E2E artifacts
+test-results/
+playwright-report/

.eslintrc.yml

@@ -1 +1 @@
-16
+24

.gitignore

@@ -1,73 +1,73 @@
 import { GithubFilled, ReadOutlined } from "@ant-design/icons";
 import { Layout } from "antd";
-import * as React from "react";
-import { hot } from "react-hot-loader";
-import { Provider } from "react-redux";
-import { BrowserRouter, Redirect, Route, Switch } from "react-router-dom";
-import { applyMiddleware, createStore } from "redux";
-import { composeWithDevTools } from "redux-devtools-extension";
-import { createEpicMiddleware } from "redux-observable";
-import { Actions } from "../modules/actions";
-import rootEpic from "../modules/epics";
-import rootReducer from "../modules/reducers";
+import "antd/dist/reset.css";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
+import { SessionProvider } from "../modules/session";
 import "./App.scss";
 import History from "./History";
 import Mocks from "./Mocks";
 import Navbar from "./Navbar";
 import Sidebar from "./Sidebar";
 import Visualize from "./Visualize";
 
-const epicMiddleware = createEpicMiddleware<Actions>();
-
-const store = createStore(
-  rootReducer,
-  composeWithDevTools(applyMiddleware(epicMiddleware))
-);
-
-epicMiddleware.run(rootEpic);
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: false,
+    },
+  },
+});
 
 const App = () => (
-  <Provider store={store}>
-    <BrowserRouter basename={window.basePath}>
-      <Layout className="layout">
-        <Navbar />
+  <QueryClientProvider client={queryClient}>
+    <SessionProvider>
+      <BrowserRouter basename={window.basePath}>
         <Layout className="layout">
-          <Sidebar />
-          <Layout className="scrollable layout">
-            <Layout.Content className="not-scrollable">
-              <Switch>
-                <Route exact path="/pages/history" component={History} />
-                <Route exact path="/pages/mocks" component={Mocks} />
-                <Route exact path="/pages/mocks/:mock_id" component={Mocks} />
-                <Route exact path="/pages/visualize" component={Visualize} />
-                <Redirect to="/pages/history" />
-              </Switch>
-            </Layout.Content>
-            <Layout.Footer style={{ textAlign: "center" }}>
-              Smocker version {window.version} &ndash; MIT Licensed
-              <br />
-              <a
-                href="https://github.com/smocker-dev/smocker"
-                title="Smocker on GitHub"
-                target="_blank"
-                rel="noreferrer"
-              >
-                <GithubFilled />
-              </a>
-              &nbsp;
-              <a
-                href="https://smocker.dev"
-                title="Smocker Documentation"
-                target="_blank"
-                rel="noreferrer"
-              >
-                <ReadOutlined />
-              </a>
-            </Layout.Footer>
+          <Navbar />
+          <Layout className="layout">
+            <Sidebar />
+            <Layout className="scrollable layout">
+              <Layout.Content className="not-scrollable">
+                <Routes>
+                  <Route path="/pages/history" element={<History />} />
+                  <Route path="/pages/mocks" element={<Mocks />} />
+                  <Route path="/pages/mocks/:mock_id" element={<Mocks />} />
+                  <Route path="/pages/visualize" element={<Visualize />} />
+                  <Route
+                    path="*"
+                    element={<Navigate to="/pages/history" replace />}
+                  />
+                </Routes>
+              </Layout.Content>
+              <Layout.Footer style={{ textAlign: "center" }}>
+                Smocker version {window.version} &ndash; MIT Licensed
+                <br />
+                <a
+                  href="https://github.com/smocker-dev/smocker"
+                  title="Smocker on GitHub"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <GithubFilled />
+                </a>
+                &nbsp;
+                <a
+                  href="https://smocker.dev"
+                  title="Smocker Documentation"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <ReadOutlined />
+                </a>
+              </Layout.Footer>
+            </Layout>
           </Layout>
         </Layout>
-      </Layout>
-    </BrowserRouter>
-  </Provider>
+      </BrowserRouter>
+    </SessionProvider>
+  </QueryClientProvider>
 );
-export default hot(module)(App);
+
+export default App;

.nvmrc

@@ -1,24 +1,25 @@
 .code-editor {
-  .CodeMirror {
-    position: relative;
+  border-radius: 3px;
+  overflow: hidden;
+
+  .cm-editor {
     height: auto;
-    overflow-y: hidden;
-    padding: 0.5em 0 0.5em 0.5em;
-    margin: 0;
+    padding: 0.5em 0 0.5em 0;
     border-radius: 3px;
 
-    .CodeMirror-scroll {
+    .cm-scroller {
       height: auto;
+      overflow-y: hidden;
+      font-size: 12px;
+      line-height: 1.5;
     }
 
-    .CodeMirror-line {
-      line-height: 12px;
+    .cm-gutters {
       font-size: 12px;
     }
+  }
 
-    .CodeMirror-gutter-elt {
-      line-height: 12px;
-      font-size: 14px;
-    }
+  .cm-editor.cm-focused {
+    outline: none;
   }
 }