traggo · GoliathLabs · Jul 17, 2026 · Jul 17, 2026 · Jul 17, 2026 · Jul 17, 2026
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -16,8 +16,6 @@ jobs:
       - run: make install
       - run: make generate
       - run: make build-js
-        env:
-          NODE_OPTIONS: --openssl-legacy-provider
       - run: make lint
       - run: make test
       - if: startsWith(github.ref, 'refs/tags/v')

diff --git a/docker/Dockerfile.dev b/docker/Dockerfile.dev
@@ -1,6 +1,8 @@
 FROM golang:1.18.1 as builder
 
-RUN apt-get update && apt-get install --yes nodejs npm && npm install --global yarn
+RUN apt-get update && apt-get install --yes curl && \
+    curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && \
+    apt-get install --yes nodejs && npm install --global yarn
 
 WORKDIR /app
 COPY . .

diff --git a/ui/.prettierrc b/ui/.prettierrc
@@ -6,6 +6,6 @@
   "singleQuote": true,
   "trailingComma": "es5",
   "bracketSpacing": false,
-  "jsxBracketSameLine": true,
+  "bracketSameLine": true,
   "arrowParens": "always"
 }
diff --git a/ui/codegen.yml b/ui/codegen.yml
@@ -0,0 +1,10 @@
+schema: ../schema.graphql
+documents: 'src/gql/*.ts'
+generates:
+  src/gql/__generated__/index.ts:
+    plugins:
+      - typescript
+      - typescript-operations
+    config:
+      skipTypename: false
+      enumsAsTypes: false
diff --git a/ui/eslint.config.mjs b/ui/eslint.config.mjs
@@ -0,0 +1,90 @@
+import js from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import sonarjs from 'eslint-plugin-sonarjs';
+import prettierConfig from 'eslint-config-prettier';
+import globals from 'globals';
+
+export default tseslint.config(
+    {
+        ignores: ['build/**', 'src/gql/__generated__/**', 'node_modules/**'],
+    },
+    js.configs.recommended,
+    ...tseslint.configs.recommended,
+    react.configs.flat.recommended,
+    sonarjs.configs.recommended,
+    {
+        // Only the two long-stable hook rules for now; eslint-plugin-react-hooks'
+        // newer React-Compiler-oriented checks (immutability, refs, ...) are part
+        // of a deliberate, separate ruleset expansion + code fixups, not bundled here.
+        plugins: {
+            'react-hooks': reactHooks,
+        },
+        rules: {
+            'react-hooks/rules-of-hooks': 'error',
+            'react-hooks/exhaustive-deps': 'warn',
+        },
+    },
+    prettierConfig,
+    {
+        languageOptions: {
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+            },
+        },
+        settings: {
+            react: {
+                version: '18.3',
+            },
+        },
+        rules: {
+            'react/prop-types': 'off',
+            'react/react-in-jsx-scope': 'off',
+            'react/display-name': 'off',
+            '@typescript-eslint/no-unused-vars': ['error', {argsIgnorePattern: '^_', ignoreRestSiblings: true}],
+            'no-empty': ['error', {allowEmptyCatch: true}],
+            '@typescript-eslint/no-empty-object-type': 'off',
+
+            // Mapped from the old tslint.json + tslint-sonarts ruleset (see the tslint.json
+            // that existed at this path before the tslint->ESLint migration, in git history).
+            '@typescript-eslint/no-explicit-any': 'error',
+            '@typescript-eslint/explicit-member-accessibility': 'error',
+            '@typescript-eslint/naming-convention': [
+                'error',
+                {
+                    selector: 'variableLike',
+                    format: ['camelCase', 'PascalCase', 'UPPER_CASE'],
+                    leadingUnderscore: 'allow',
+                    trailingUnderscore: 'allow',
+                },
+            ],
+            eqeqeq: ['error', 'always', {null: 'ignore'}],
+            'no-var': 'error',
+            curly: 'error',
+            'guard-for-in': 'error',
+            'default-case': 'error',
+            'no-shadow': 'off',
+            '@typescript-eslint/no-shadow': 'error',
+            'object-shorthand': 'error',
+            'no-duplicate-imports': 'error',
+            radix: 'error',
+            'use-isnan': 'error',
+            'no-debugger': 'error',
+            'no-cond-assign': 'error',
+            '@typescript-eslint/no-inferrable-types': 'error',
+            '@typescript-eslint/no-namespace': ['error', {allowDeclarations: true}],
+            'no-redeclare': 'off',
+            '@typescript-eslint/no-redeclare': 'error',
+            'no-throw-literal': 'error',
+            'no-unused-expressions': 'off',
+            '@typescript-eslint/no-unused-expressions': 'error',
+            complexity: ['error', 20],
+
+            // sonarjs's recommended preset is tuned for large codebases and disables a few
+            // rules by default (e.g. cognitive-complexity) that tslint-sonarts had enabled.
+            'sonarjs/cognitive-complexity': ['error', 20],
+        },
+    }
+);
diff --git a/ui/public/index.html → ui/index.html b/ui/public/index.html → ui/index.html
@@ -1,14 +1,14 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-        <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png" />
-        <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png" />
-        <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png" />
-        <link rel="icon" type="image/png" sizes="192x192" href="%PUBLIC_URL%/favicon-192x192.png" />
-        <link rel="icon" type="image/png" sizes="256x256" href="%PUBLIC_URL%/favicon-256x256.png" />
-        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+        <link rel="shortcut icon" href="/favicon.ico" />
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+        <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png" />
+        <link rel="icon" type="image/png" sizes="256x256" href="/favicon-256x256.png" />
+        <link rel="manifest" href="/manifest.json" />
 
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
         <meta name="theme-color" content="#000000" />
@@ -17,5 +17,6 @@
     <body>
         <noscript>You need to enable JavaScript to run this app.</noscript>
         <div id="root"></div>
+        <script type="module" src="/src/index.tsx"></script>
     </body>
 </html>
diff --git a/ui/package.json b/ui/package.json
@@ -3,80 +3,78 @@
   "version": "0.1.0",
   "private": true,
   "homepage": ".",
+  "resolutions": {
+    "@types/react": "^18.3.31",
+    "@types/react-dom": "^18.3.7"
+  },
   "dependencies": {
-    "@apollo/react-hooks": "^3.1.3",
-    "@date-io/moment": "^1.1.0",
-    "@fullcalendar/core": "^4.3.1",
-    "@fullcalendar/daygrid": "^4.3.0",
-    "@fullcalendar/interaction": "^4.3.0",
-    "@fullcalendar/moment": "^4.3.0",
-    "@fullcalendar/react": "^4.3.0",
-    "@fullcalendar/timegrid": "^4.3.0",
-    "@material-ui/core": "^4.6.1",
-    "@material-ui/icons": "^4.5.1",
-    "@material-ui/pickers": "^3.2.8",
-    "@rooks/use-interval": "^1.2.0",
-    "@rooks/use-timeout": "^3.0.1",
-    "apollo-boost": "^0.4.4",
-    "color-hash": "^1.0.3",
-    "downshift": "^3.2.10",
+    "@apollo/client": "^3.14.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@fullcalendar/core": "^6.1.21",
+    "@fullcalendar/daygrid": "^6.1.21",
+    "@fullcalendar/interaction": "^6.1.21",
+    "@fullcalendar/moment": "^6.1.21",
+    "@fullcalendar/react": "^6.1.21",
+    "@fullcalendar/timegrid": "^6.1.21",
+    "@mui/icons-material": "^5.18.0",
+    "@mui/material": "^5.18.0",
+    "@mui/styles": "^5.18.0",
+    "@mui/system": "^5.18.0",
+    "@mui/x-date-pickers": "^7.29.4",
+    "color-hash": "^2.0.2",
+    "events": "^3.3.0",
     "get-best-contrast-color": "^0.2.2",
-    "graphql": "^14.5.8",
-    "lodash.clonedeep": "^4.5.0",
+    "graphql": "^16.14.2",
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.45",
-    "notistack": "^0.6.1",
+    "notistack": "^3.0.2",
     "pretty-ms": "^5.0.0",
-    "react": "^16.12.0",
-    "react-apollo": "^3.1.3",
-    "react-color": "3.0.0-beta.3",
-    "react-dom": "^16.12.0",
-    "react-grid-layout": "^0.16.6",
-    "react-infinite": "^0.13.0",
-    "react-router": "^5.1.2",
-    "react-router-dom": "^5.1.2",
+    "react": "^18.3.1",
+    "react-colorful": "^5.6.1",
+    "react-dom": "^18.3.1",
+    "react-grid-layout": "^1.5.3",
+    "react-router-dom": "^6.30.4",
     "recharts": "^1.8.5",
     "typeface-roboto": "^0.0.54",
-    "typescript": "^3.7.2"
+    "typescript": "^5.9.3"
   },
   "devDependencies": {
-    "@types/graphql": "^14.0.7",
-    "@types/jest": "^24.0.15",
-    "@types/lodash.clonedeep": "^4.5.6",
     "@types/moment-timezone": "^0.5.12",
-    "@types/node": "11.11.3",
+    "@types/color-hash": "^2.0.0",
+    "@types/node": "^22.0.0",
     "@types/pretty-ms": "^4.0.0",
-    "@types/react": "16.8.8",
-    "@types/react-color": "^2.17.0",
-    "@types/react-dom": "^16.9.4",
-    "@types/react-grid-layout": "^0.16.7",
-    "@types/react-infinite": "^0.0.34",
-    "@types/react-router": "^5.0.1",
-    "@types/react-router-dom": "^5.1.2",
+    "@types/react": "^18.3.31",
+    "@types/react-dom": "^18.3.7",
+    "@types/react-grid-layout": "^1.3.6",
     "@types/recharts": "^1.8.3",
-    "apollo": "^2.21.0",
-    "prettier": "^1.19.1",
-    "react-scripts": "^3.2.0",
-    "tslint": "^5.20.1",
-    "tslint-sonarts": "^1.9.0"
+    "@vitejs/plugin-react": "^4.7.0",
+    "@eslint/js": "^10.0.1",
+    "@graphql-codegen/cli": "^5.0.7",
+    "@graphql-codegen/typescript": "^5.0.10",
+    "@graphql-codegen/typescript-operations": "^5.0.10",
+    "eslint": "^10.7.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-sonarjs": "^4.2.0",
+    "globals": "^17.7.0",
+    "jsdom": "^29.1.1",
+    "prettier": "^3.9.5",
+    "rimraf": "^6.1.3",
+    "typescript-eslint": "^8.64.0",
+    "vite": "^6.4.3",
+    "vitest": "^3.2.4"
   },
   "scripts": {
-    "lint": "tslint --fix --project .",
-    "lint:check": "tslint --project .",
-    "generate": "apollo client:codegen --target typescript --localSchemaFile ../schema.graphql --excludes **/*local.ts --globalTypesFile src/gql/__generated__/globalTypes.ts",
+    "lint": "eslint . --fix",
+    "lint:check": "eslint .",
+    "generate": "graphql-codegen --config codegen.yml",
     "format": "prettier \"**/*.{html,ts,tsx,css}\" --write",
     "format:check": "prettier \"**/*.{html,ts,tsx,css}\" --list-different",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start": "vite",
+    "build": "vite build",
     "postbuild": "rimraf build/**/*.map",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ],
-  "proxy": "http://localhost:3030"
+    "test": "vitest run"
+  }
 }
diff --git a/ui/serve.go b/ui/serve.go
@@ -20,11 +20,9 @@ func Register(r *mux.Router) {
 	r.Handle("/", serveFile("index.html", "text/html"))
 	r.Handle("/index.html", serveFile("index.html", "text/html"))
 	r.Handle("/manifest.json", serveFile("manifest.json", "application/json"))
-	r.Handle("/service-worker.js", serveFile("service-worker.js", "text/javascript"))
-	r.Handle("/asset-manifest.json", serveFile("asset-manifest.json", "application/json"))
 
 	fileServer := http.FileServer(http.FS(buildDir))
-	r.Handle("/static/{type}/{resource}", http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+	r.Handle("/assets/{resource}", http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 		w.Header().Set("Cache-Control", "public, max-age=31536000, immutable")
 		fileServer.ServeHTTP(w, r)
 	}))

diff --git a/ui/src/Root.tsx b/ui/src/Root.tsx
@@ -6,8 +6,8 @@ import 'typeface-roboto';
 import {ThemeProvider} from './provider/ThemeProvider';
 import {ApolloProvider} from './provider/ApolloProvider';
 import {SnackbarProvider} from './provider/SnackbarProvider';
-import {MuiPickersUtilsProvider} from '@material-ui/pickers';
-import MomentUtils from '@date-io/moment';
+import {LocalizationProvider} from '@mui/x-date-pickers';
+import {AdapterMoment} from '@mui/x-date-pickers/AdapterMoment';
 import {Router} from './Router';
 import {HashRouter} from 'react-router-dom';
 import {BootUserSettings} from './provider/UserSettingsProvider';
@@ -17,13 +17,13 @@ export const Root = () => {
         <ApolloProvider>
             <BootUserSettings>
                 <ThemeProvider>
-                    <MuiPickersUtilsProvider utils={MomentUtils}>
+                    <LocalizationProvider dateAdapter={AdapterMoment}>
                         <SnackbarProvider>
                             <HashRouter>
                                 <Router />
                             </HashRouter>
                         </SnackbarProvider>
-                    </MuiPickersUtilsProvider>
+                    </LocalizationProvider>
                 </ThemeProvider>
             </BootUserSettings>
         </ApolloProvider>