Misc fixes

.github/workflows/test-frontend.yaml

@@ -88,7 +88,7 @@ jobs:
         uses: mxschmitt/action-tmate@v3
 
       - name: Install Playwright
-        run: bun run install-playwright-ci
+        run: bun run install-playwright
 
       - name: Run test
         run: bun run test:e2e

frontend/.gitignore

@@ -28,5 +28,6 @@ dist-ssr
 /playwright-report/
 /blob-report/
 /playwright/.cache/
-tsconfig.tsbuildinfo
 /lighthouse-report/
+tsconfig.tsbuildinfo
+tsconfig.*.tsbuildinfo

frontend/.prettierrc

@@ -1,21 +1,31 @@
 {
-  "plugins": [
-    "@ianvs/prettier-plugin-sort-imports",
-    "./node_modules/prettier-plugin-jsdoc/dist/index.js",
-    "prettier-plugin-css-order",
-    "prettier-plugin-tailwindcss"
-  ],
-  "importOrder": [
-    "^react",
-    "^[a-zA-Z]",
-    "^@[a-zA-Z]",
-    "^@/",
-    "^/",
-    "^./",
-    "^../"
-  ],
-  "importOrderParserPlugins": ["typescript", "jsx", "importAssertions"],
-  "cssDeclarationSorterOrder": "smacss",
-  "jsdocCapitalizeDescription": false,
-  "htmlWhitespaceSensitivity": "strict"
+  "overrides": [
+    {
+      "files": "*.css",
+      "options": {
+        "plugins": ["prettier-plugin-tailwindcss"]
+      }
+    },
+    {
+      "files": "*.!(css)",
+      "options": {
+        "plugins": [
+          "@ianvs/prettier-plugin-sort-imports",
+          "prettier-plugin-jsdoc"
+        ],
+        "importOrder": [
+          "^react",
+          "^@[a-zA-Z]",
+          "^[a-zA-Z]",
+          "^@/",
+          "^/",
+          "^./",
+          "^../"
+        ],
+        "importOrderParserPlugins": ["typescript", "jsx", "importAssertions"],
+        "jsdocCapitalizeDescription": false,
+        "htmlWhitespaceSensitivity": "strict"
+      }
+    }
+  ]
 }

frontend/cloud/issue/index.js

@@ -1,11 +1,9 @@
+/* eslint-disable */
+
 const functions = require("@google-cloud/functions-framework");
 const { Octokit } = require("octokit");
 
-/**
- * token permissions:
- * contents, read/write
- * pull requests, read/write
- */
+/** token permissions: contents, read/write pull requests, read/write */
 const auth = process.env.GITHUB_TOKEN;
 
 /** entry point */

frontend/eslint.config.mjs

@@ -1,41 +1,58 @@
+import eslintJs from "@eslint/js";
+import eslintPluginBetterTailwindcss from "eslint-plugin-better-tailwindcss";
 import eslintPluginJsxA11y from "eslint-plugin-jsx-a11y";
-import eslintPluginPrettier from "eslint-plugin-prettier";
 import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
 import eslintPluginReactHooks from "eslint-plugin-react-hooks";
-import eslintPluginReactRefresh from "eslint-plugin-react-refresh";
+import { defineConfig, globalIgnores } from "eslint/config";
 import globals from "globals";
 import typescriptEslint from "typescript-eslint";
-import js from "@eslint/js";
 
-export default typescriptEslint.config(
+export default defineConfig([
+  globalIgnores(["dist", "public"]),
+  eslintJs.configs.recommended,
+  typescriptEslint.configs.recommended,
+  eslintPluginPrettierRecommended,
+  eslintPluginReactHooks.configs.flat.recommended,
+  eslintPluginJsxA11y.flatConfigs.recommended,
   {
-    ignores: ["dist", "dist", "**/mockServiceWorker.js"],
-  },
-  {
-    extends: [
-      js.configs.recommended,
-      ...typescriptEslint.configs.recommended,
-      eslintPluginPrettierRecommended,
-      eslintPluginJsxA11y.flatConfigs.recommended,
-    ],
-    files: ["**/*.{ts,tsx}"],
+    plugins: {
+      "better-tailwindcss": eslintPluginBetterTailwindcss,
+    },
     languageOptions: {
+      ecmaVersion: 2020,
       globals: globals.browser,
     },
-    plugins: {
-      "react-hooks": eslintPluginReactHooks,
-      "react-refresh": eslintPluginReactRefresh,
-      prettier: eslintPluginPrettier,
-    },
     rules: {
-      ...eslintPluginReactHooks.configs.recommended.rules,
-      "prettier/prettier": "warn",
+      /** GENERAL */
       "prefer-const": ["error", { destructuring: "all" }],
+
+      /** TYPESCRIPT */
       "@typescript-eslint/no-unused-vars": ["warn", { caughtErrors: "none" }],
       "@typescript-eslint/consistent-type-definitions": ["error", "type"],
       "@typescript-eslint/consistent-type-imports": "error",
-      "react-refresh/only-export-components": ["off"],
-      "jsx-a11y/no-noninteractive-tabindex": ["error", { tags: ["pre"] }],
+
+      /** ACCESSIBILITY */
+      /** https://github.com/dequelabs/axe-core/issues/4566 */
+      "jsx-a11y/no-noninteractive-tabindex": ["off"],
+      /**
+       * allow <label>some text<AnyComponent/></label> but still catch
+       * <label>just text</label>
+       */
+      "jsx-a11y/label-has-associated-control": [
+        "error",
+        { controlComponents: ["*"] },
+      ],
+
+      /** FORMATTING */
+      "prettier/prettier": "warn",
+      ...eslintPluginBetterTailwindcss.configs["recommended-warn"].rules,
+      /** https://github.com/schoero/eslint-plugin-better-tailwindcss/issues/302 */
+      "better-tailwindcss/enforce-consistent-line-wrapping": [
+        "warn",
+        { strictness: "loose" },
+      ],
+      "better-tailwindcss/no-unknown-classes": ["warn", { ignore: ["dark"] }],
     },
+    settings: { "better-tailwindcss": { entryPoint: "src/styles.css" } },
   },
-);
+]);

frontend/fixtures/index.ts

@@ -31,7 +31,7 @@ export const handlers = [
 
   http.post("*molevolvr-feedback*.run.app", async ({ request }) => {
     await delay();
-    if ((await request.clone().json())?.body?.includes("fake error"))
+    if ((await request.clone().text()).includes("fake error"))
       return new HttpResponse(null, { status: 500 });
     return HttpResponse.json({
       html_url: import.meta.env.VITE_REPO + "/issues",

frontend/index.html

@@ -26,7 +26,7 @@
       Sorry, this website doesn't work without JavaScript enabled.
     </noscript>
 
-    <div id="app"></div>
+    <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

frontend/package.json

@@ -1,96 +1,92 @@
 {
   "type": "module",
   "scripts": {
-    "build": "vite build",
     "dev": "vite --open",
+    "build": "vite build",
     "preview": "vite preview",
-    "lint": "eslint . --fix && prettier **/*.{tsx,ts,module.css,css,html,md,json,yaml} --write --no-error-on-unmatched-pattern",
-    "test:lint": "eslint . && prettier **/*.{tsx,ts,module.css,css,html,md,json,yaml} --check --no-error-on-unmatched-pattern",
-    "test:types": "tsc",
-    "install-playwright": "bunx playwright install --with-deps",
-    "install-playwright-ci": "bunx playwright install chromium --with-deps",
+    "lint": "eslint . --fix",
+    "format": "prettier --write .",
+    "test:types": "tsc -b",
+    "test:lint": "eslint .",
+    "test:format": "prettier --check .",
     "test:e2e": "playwright test",
     "test": "bun run test:lint && bun run test:types && bun run test:e2e",
-    "test:spelling": "bunx cspell src/**/*.{tsx,ts}",
+    "install-playwright": "bunx playwright install chromium --with-deps",
     "clean": "rm -rf node_modules dist bun.lock && bun pm cache rm"
   },
   "dependencies": {
     "@fontsource-variable/jetbrains-mono": "^5.2.8",
     "@fontsource/poppins": "^5.2.7",
-    "@headlessui/react": "^2.2.4",
-    "@radix-ui/react-popover": "^1.1.14",
-    "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-tooltip": "^1.2.7",
-    "@reactuses/core": "^6.0.5",
+    "@headlessui/react": "^2.2.9",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@reactuses/core": "^6.1.11",
     "@tailwindcss/vite": "^4.1.18",
-    "@tanstack/react-query": "^5.81.5",
-    "@tanstack/react-table": "8.21.3",
+    "@tanstack/react-query": "^5.90.19",
+    "@tanstack/react-table": "^8.21.3",
     "clsx": "^2.1.1",
-    "csv-parse": "^5.6.0",
-    "csv-stringify": "^6.5.2",
-    "cytoscape": "^3.32.0",
+    "csv-parse": "^6.1.0",
+    "csv-stringify": "^6.6.0",
+    "cytoscape": "^3.33.1",
     "cytoscape-avsdf": "^1.0.0",
     "cytoscape-cola": "^2.5.1",
-    "cytoscape-d3-force": "^1.1.4",
     "cytoscape-dagre": "^2.5.0",
     "cytoscape-fcose": "^2.2.0",
     "cytoscape-klay": "^3.1.4",
     "cytoscape-spread": "^3.0.0",
     "d3": "^7.9.0",
-    "gsap": "^3.13.0",
+    "gsap": "^3.14.2",
     "html-to-image": "^1.11.13",
-    "javascript-time-ago": "^2.5.11",
-    "jotai": "^2.12.5",
-    "lodash": "^4.17.21",
-    "react": "^19.1.0",
-    "react-aria-components": "^1.10.1",
+    "javascript-time-ago": "^2.5.12",
+    "jotai": "^2.16.2",
+    "lodash": "^4.17.23",
+    "react": "^19.2.3",
+    "react-aria-components": "^1.14.0",
     "react-children-utilities": "^2.10.0",
-    "react-dom": "^19.1.0",
+    "react-dom": "^19.2.3",
     "react-icons": "^5.5.0",
-    "react-router": "^7.6.3",
-    "react-time-ago": "^7.3.3",
+    "react-router": "^7.12.0",
+    "react-time-ago": "^7.3.5",
     "seedrandom": "^3.0.5",
     "tailwindcss": "^4.1.18",
-    "ua-parser-js": "^2.0.4"
+    "ua-parser-js": "^2.0.8"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.10.2",
-    "@eslint/js": "^9.30.1",
-    "@ianvs/prettier-plugin-sort-imports": "^4.4.2",
-    "@octokit/types": "^14.1.0",
-    "@playwright/test": "^1.53.2",
-    "@types/cytoscape": "^3.21.9",
-    "@types/cytoscape-avsdf": "^1.0.3",
-    "@types/cytoscape-dagre": "^2.3.3",
-    "@types/cytoscape-fcose": "^2.2.4",
-    "@types/cytoscape-klay": "^3.1.4",
+    "@axe-core/playwright": "^4.11.0",
+    "@eslint/js": "^9.39.2",
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
+    "@octokit/types": "^16.0.0",
+    "@playwright/test": "^1.57.0",
+    "@types/cytoscape-avsdf": "^1.0.4",
+    "@types/cytoscape-dagre": "^2.3.4",
+    "@types/cytoscape-fcose": "^2.2.5",
+    "@types/cytoscape-klay": "^3.1.5",
     "@types/d3": "^7.4.3",
-    "@types/lodash": "^4.17.20",
-    "@types/node": "^24.0.10",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
+    "@types/lodash": "^4.17.23",
+    "@types/node": "^25.0.10",
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
     "@types/seedrandom": "^3.0.8",
-    "@vitejs/plugin-react": "^4.6.0",
-    "eslint-config-prettier": "^10.1.5",
+    "@vitejs/plugin-react": "^5.1.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-better-tailwindcss": "^4.0.1",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^5.5.1",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "get-port": "^7.1.0",
-    "globals": "^16.3.0",
-    "lighthouse": "^12.7.1",
-    "msw": "^2.10.2",
+    "globals": "^17.0.0",
+    "lighthouse": "^13.0.1",
+    "msw": "^2.12.7",
     "playwright-lighthouse": "^4.0.0",
-    "postcss": "^8.5.6",
-    "prettier": "^3.6.2",
-    "prettier-plugin-css-order": "^2.1.2",
-    "prettier-plugin-jsdoc": "^1.3.3",
+    "prettier": "^3.8.1",
+    "prettier-plugin-jsdoc": "^1.8.0",
     "prettier-plugin-tailwindcss": "^0.7.2",
-    "type-fest": "^4.41.0",
-    "typescript": "^5.8.3",
-    "typescript-eslint": "^8.35.1",
-    "vite": "^7.0.0",
-    "vite-plugin-svgr": "^4.3.0"
+    "type-fest": "^5.4.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.53.1",
+    "vite": "^7.3.1",
+    "vite-plugin-svgr": "^4.5.0"
   },
   "msw": {
     "workerDirectory": "public"

frontend/playwright.config.ts

@@ -3,8 +3,6 @@ import { defineConfig, devices } from "@playwright/test";
 const port = 1234;
 const url = `http://localhost:${port}`;
 
-const { CI } = process.env;
-
 export default defineConfig({
   testDir: "./tests",
   fullyParallel: true,
@@ -14,9 +12,9 @@ export default defineConfig({
 
   projects: [
     { name: "chromium", use: { ...devices["Desktop Chrome"] } },
-    !CI && { name: "webkit", use: { ...devices["Desktop Safari"] } },
-    !CI && { name: "firefox", use: { ...devices["Desktop Firefox"] } },
-  ].filter(Boolean),
+    // { name: "webkit", use: { ...devices["Desktop Safari"] } },
+    // { name: "firefox", use: { ...devices["Desktop Firefox"] } },
+  ],
 
   webServer: {
     /** dev mode penalizes lighthouse performance checks */