94 files changed, 810 insertions, 1032 deletions

diff --git a/subprojects/frontend/.eslintrc.cjs b/subprojects/frontend/.eslintrc.cjs
index 8a7b474a..25b86a83 100644
--- a/subprojects/frontend/.eslintrc.cjs
+++ b/subprojects/frontend/.eslintrc.cjs
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 const path = require('node:path');
 
 // Allow the Codium ESLint plugin to find `tsconfig.json` from the repository root.
@@ -43,6 +49,15 @@ module.exports = {
     // In typescript, some class methods implementing an inderface do not use `this`:
     // https://github.com/typescript-eslint/typescript-eslint/issues/1103
     'class-methods-use-this': 'off',
+    // Disable rules with a high performance cost.
+    // See https://typescript-eslint.io/linting/troubleshooting/performance-troubleshooting/
+    'import/default': 'off',
+    'import/extensions': 'off',
+    'import/named': 'off',
+    'import/namespace': 'off',
+    'import/no-named-as-default': 'off',
+    'import/no-named-as-default-member': 'off',
+    '@typescript-eslint/indent': 'off',
     // Make sure every import can be resolved by `eslint-import-resolver-typescript`.
     'import/no-unresolved': 'error',
     // Organize imports automatically.
@@ -90,6 +105,7 @@ module.exports = {
       files: [
         '.eslintrc.cjs',
         'config/*.ts',
+        'config/*.cjs',
         'prettier.config.cjs',
         'vite.config.ts',
       ],
@@ -103,6 +119,8 @@ module.exports = {
           'error',
           { devDependencies: true },
         ],
+        // Allow writing to the console in ad-hoc scripts.
+        'no-console': 'off',
         // Access to the environment in configuration files.
         'no-process-env': 'off',
       },
diff --git a/subprojects/frontend/assets-src/favicon.svg.license b/subprojects/frontend/assets-src/favicon.svg.license
new file mode 100644
index 00000000..e5db6ccd
--- /dev/null
+++ b/subprojects/frontend/assets-src/favicon.svg.license
@@ -0,0 +1,3 @@
+SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+
+SPDX-License-Identifier: EPL-2.0
diff --git a/subprojects/frontend/assets-src/icon.svg.license b/subprojects/frontend/assets-src/icon.svg.license
new file mode 100644
index 00000000..e5db6ccd
--- /dev/null
+++ b/subprojects/frontend/assets-src/icon.svg.license
@@ -0,0 +1,3 @@
+SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+
+SPDX-License-Identifier: EPL-2.0
diff --git a/subprojects/frontend/assets-src/mask-icon.svg.license b/subprojects/frontend/assets-src/mask-icon.svg.license
new file mode 100644
index 00000000..e5db6ccd
--- /dev/null
+++ b/subprojects/frontend/assets-src/mask-icon.svg.license
@@ -0,0 +1,3 @@
+SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+
+SPDX-License-Identifier: EPL-2.0
diff --git a/subprojects/frontend/build.gradle b/subprojects/frontend/build.gradle
deleted file mode 100644
index 4cc2c5d7..00000000
--- a/subprojects/frontend/build.gradle
+++ /dev/null
@@ -1,131 +0,0 @@
-plugins {
-        id 'refinery-frontend-workspace'
-        id 'refinery-sonarqube'
-}
-
-import org.siouan.frontendgradleplugin.infrastructure.gradle.RunYarn
-
-def viteOutputDir = "${buildDir}/vite"
-def productionResources = file("${viteOutputDir}/production")
-
-frontend {
-        assembleScript = 'run build'
-}
-
-configurations {
-        productionAssets {
-                canBeConsumed = true
-                canBeResolved = false
-        }
-}
-
-def installFrontend = tasks.named('installFrontend')
-
-def sourcesWithoutTypegen = fileTree('src') {
-        exclude '**/*.typegen.ts'
-}
-
-def assembleFrontend = tasks.named('assembleFrontend')
-assembleFrontend.configure {
-        dependsOn generateXStateTypes
-        inputs.dir 'public'
-        inputs.files sourcesWithoutTypegen
-        inputs.file 'index.html'
-        inputs.files('package.json', 'tsconfig.json', 'tsconfig.base.json', 'vite.config.ts')
-        inputs.file rootProject.file('yarn.lock')
-        outputs.dir productionResources
-}
-
-artifacts {
-        productionAssets(productionResources) {
-                builtBy assembleFrontend
-        }
-}
-
-def generateXStateTypes = tasks.register('generateXStateTypes', RunYarn) {
-        dependsOn installFrontend
-        inputs.files sourcesWithoutTypegen
-        inputs.file 'package.json'
-        inputs.file rootProject.file('yarn.lock')
-        outputs.dir 'src'
-        script = 'run typegen'
-        description = 'Generate TypeScript typings for XState state machines.'
-}
-
-def typecheckFrontend = tasks.register('typecheckFrontend', RunYarn) {
-        dependsOn installFrontend
-        dependsOn generateXStateTypes
-        inputs.dir 'src'
-        inputs.dir 'types'
-        inputs.files('package.json', 'tsconfig.json', 'tsconfig.base.json', 'tsconfig.node.json')
-        inputs.file rootProject.file('yarn.lock')
-        outputs.dir "${buildDir}/typescript"
-        script = 'run typecheck'
-        group = 'verification'
-        description = 'Check for TypeScript type errors.'
-}
-
-def lintFrontend = tasks.register('lintFrontend', RunYarn) {
-        dependsOn installFrontend
-        dependsOn generateXStateTypes
-        dependsOn typecheckFrontend
-        inputs.dir 'src'
-        inputs.dir 'types'
-        inputs.files('.eslintrc.cjs', 'prettier.config.cjs')
-        inputs.files('package.json', 'tsconfig.json', 'tsconfig.base.json', 'tsconfig.node.json')
-        inputs.file rootProject.file('yarn.lock')
-        if (project.hasProperty('ci')) {
-                outputs.file "${buildDir}/eslint.json"
-                script = 'run lint:ci'
-        } else {
-                script = 'run lint'
-        }
-        group = 'verification'
-        description = 'Check for TypeScript lint errors and warnings.'
-}
-
-def prettier = tasks.register('fixFrontend', RunYarn) {
-        dependsOn installFrontend
-        dependsOn generateXStateTypes
-        dependsOn typecheckFrontend
-        inputs.dir 'src'
-        inputs.dir 'types'
-        inputs.files('.eslintrc.cjs', 'prettier.config.cjs')
-        inputs.files('package.json', 'tsconfig.json', 'tsconfig.base.json', 'tsconfig.node.json')
-        inputs.file rootProject.file('yarn.lock')
-        script = 'run lint:fix'
-        group = 'verification'
-        description = 'Fix TypeScript lint errors and warnings.'
-}
-
-tasks.named('check') {
-        dependsOn(typecheckFrontend)
-        dependsOn(lintFrontend)
-}
-
-tasks.register('serveFrontend', RunYarn) {
-        dependsOn installFrontend
-        dependsOn generateXStateTypes
-        inputs.dir 'public'
-        inputs.files sourcesWithoutTypegen
-        inputs.file 'index.html'
-        inputs.files('package.json', 'tsconfig.json', 'tsconfig.base.json', 'vite.config.ts')
-        inputs.file rootProject.file('yarn.lock')
-        outputs.dir "${viteOutputDir}/development"
-        script = 'run serve'
-        group = 'run'
-        description = 'Start a Vite dev server with hot module replacement.'
-}
-
-tasks.named('clean') {
-        delete 'dev-dist'
-        delete fileTree('src') {
-                include '**/*.typegen.ts'
-        }
-}
-
-sonarqube.properties {
-        properties['sonar.sources'] = 'src'
-        property 'sonar.nodejs.executable', "${frontend.nodeInstallDirectory.get()}/bin/node"
-        property 'sonar.eslint.reportPaths', "${buildDir}/eslint.json"
-}
diff --git a/subprojects/frontend/build.gradle.kts b/subprojects/frontend/build.gradle.kts
new file mode 100644
index 00000000..d0839371
--- /dev/null
+++ b/subprojects/frontend/build.gradle.kts
@@ -0,0 +1,144 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import org.siouan.frontendgradleplugin.infrastructure.gradle.RunYarn
+import tools.refinery.gradle.utils.SonarPropertiesUtils
+
+plugins {
+        id("tools.refinery.gradle.frontend-workspace")
+        id("tools.refinery.gradle.sonarqube")
+}
+
+frontend {
+        assembleScript.set("run build")
+}
+
+val viteOutputDir = "$buildDir/vite"
+
+val productionResources = file("$viteOutputDir/production")
+
+val productionAssets: Configuration by configurations.creating {
+        isCanBeConsumed = true
+        isCanBeResolved = false
+}
+
+val sourcesWithoutTypes = fileTree("src") {
+        exclude("**/*.typegen.ts")
+}
+
+val sourcesWithTypes: FileCollection = fileTree("src") + fileTree("types")
+
+val buildScripts: FileCollection = fileTree("config") + files(
+                ".eslintrc.cjs",
+                "prettier.config.cjs",
+                "vite.config.ts",
+)
+
+val installationState = files(
+                rootProject.file("yarn.lock"),
+                rootProject.file("package.json"),
+                "package.json",
+)
+
+val sharedConfigFiles: FileCollection = installationState + files(
+                "tsconfig.json",
+                "tsconfig.base.json",
+                "tsconfig.node.json",
+                "tsconfig.shared.json",
+)
+
+val assembleConfigFiles = sharedConfigFiles + file("vite.config.ts") + fileTree("config") {
+        include("**/*.ts")
+}
+
+val assembleSources = sourcesWithTypes + fileTree("public") + file("index.html")
+
+val assembleFiles = assembleSources + assembleConfigFiles
+
+val lintingFiles: FileCollection = sourcesWithTypes + buildScripts + sharedConfigFiles
+
+tasks {
+        val generateXStateTypes by registering(RunYarn::class) {
+                dependsOn(installFrontend)
+                inputs.files(sourcesWithoutTypes)
+                inputs.files(installationState)
+                outputs.dir("src")
+                script.set("run typegen")
+                description = "Generate TypeScript typings for XState state machines."
+        }
+
+        assembleFrontend {
+                dependsOn(generateXStateTypes)
+                inputs.files(assembleFiles)
+                outputs.dir(productionResources)
+        }
+
+
+        val typeCheckFrontend by registering(RunYarn::class) {
+                dependsOn(installFrontend)
+                dependsOn(generateXStateTypes)
+                inputs.files(lintingFiles)
+                outputs.dir("$buildDir/typescript")
+                script.set("run typecheck")
+                group = "verification"
+                description = "Check for TypeScript type errors."
+        }
+
+        val lintFrontend by registering(RunYarn::class) {
+                dependsOn(installFrontend)
+                dependsOn(generateXStateTypes)
+                dependsOn(typeCheckFrontend)
+                inputs.files(lintingFiles)
+                outputs.file("$buildDir/eslint.json")
+                script.set("run lint")
+                group = "verification"
+                description = "Check for TypeScript lint errors and warnings."
+        }
+
+        register<RunYarn>("fixFrontend") {
+                dependsOn(installFrontend)
+                dependsOn(generateXStateTypes)
+                dependsOn(typeCheckFrontend)
+                inputs.files(lintingFiles)
+                script.set("run lint:fix")
+                group = "verification"
+                description = "Fix TypeScript lint errors and warnings."
+        }
+
+        check {
+                dependsOn(typeCheckFrontend)
+                dependsOn(lintFrontend)
+        }
+
+        register<RunYarn>("serveFrontend") {
+                dependsOn(installFrontend)
+                dependsOn(generateXStateTypes)
+                inputs.files(assembleFiles)
+                outputs.dir("$viteOutputDir/development")
+                script.set("run serve")
+                group = "run"
+                description = "Start a Vite dev server with hot module replacement."
+        }
+
+        clean {
+                delete("dev-dist")
+                delete(fileTree("src") {
+                        include("**/*.typegen.ts")
+                })
+        }
+}
+
+artifacts {
+        add("productionAssets", productionResources) {
+                builtBy(tasks.assembleFrontend)
+        }
+}
+
+sonarqube.properties {
+        SonarPropertiesUtils.addToList(properties, "sonar.sources", "src")
+        property("sonar.nodejs.executable", "${frontend.nodeInstallDirectory.get()}/bin/node")
+        property("sonar.eslint.reportPaths", "$buildDir/eslint.json")
+}
diff --git a/subprojects/frontend/config/backendConfigVitePlugin.ts b/subprojects/frontend/config/backendConfigVitePlugin.ts
index 7a6bc3db..3bffce3a 100644
--- a/subprojects/frontend/config/backendConfigVitePlugin.ts
+++ b/subprojects/frontend/config/backendConfigVitePlugin.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type { PluginOption } from 'vite';
 
 import type BackendConfig from '../src/xtext/BackendConfig';
diff --git a/subprojects/frontend/config/detectDevModeOptions.ts b/subprojects/frontend/config/detectDevModeOptions.ts
index b3696241..665204dc 100644
--- a/subprojects/frontend/config/detectDevModeOptions.ts
+++ b/subprojects/frontend/config/detectDevModeOptions.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type { PluginOption, ServerOptions } from 'vite';
 
 import backendConfigVitePlugin, {
diff --git a/subprojects/frontend/config/eslintReport.cjs b/subprojects/frontend/config/eslintReport.cjs
new file mode 100644
index 00000000..7c4b7bd6
--- /dev/null
+++ b/subprojects/frontend/config/eslintReport.cjs
@@ -0,0 +1,58 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+const { writeFile } = require('node:fs/promises');
+const path = require('node:path');
+const { Readable } = require('node:stream');
+const { pipeline } = require('node:stream/promises');
+
+const { ESLint } = require('eslint');
+
+const rootDir = path.join(__dirname, '..');
+
+/**
+ * Write ESLint report to console.
+ *
+ * @param cli {import('eslint').ESLint} The ESLint CLI.
+ * @param report {import('eslint').ESLint.LintResult[]} The ESLint report.
+ * @return {Promise<void>} A promise that resolves when the report is finished.
+ */
+async function reportToConsole(cli, report) {
+  const stylishFormatter = await cli.loadFormatter('stylish');
+  const output = new Readable();
+  output.push(await stylishFormatter.format(report));
+  output.push(null);
+  return pipeline(output, process.stdout);
+}
+
+/**
+ * Write ESLint report to the <code>build</code> directory.
+ *
+ * @param cli {import('eslint').ESLint} The ESLint CLI.
+ * @param report {import('eslint').ESLint.LintResult[]} The ESLint report.
+ * @return {Promise<void>} A promise that resolves when the report is finished.
+ */
+async function reportToJson(cli, report) {
+  const jsonFormatter = await cli.loadFormatter('json');
+  const json = await jsonFormatter.format(report);
+  const reportPath = path.join(rootDir, 'build', 'eslint.json');
+  return writeFile(reportPath, json, 'utf-8');
+}
+
+async function createReport() {
+  const cli = new ESLint({
+    useEslintrc: true,
+    cwd: rootDir,
+  });
+  const report = await cli.lintFiles('.');
+  await Promise.all([reportToConsole(cli, report), reportToJson(cli, report)]);
+
+  if (report.some((entry) => entry.errorCount > 0)) {
+    process.exitCode = 1;
+  }
+}
+
+createReport().catch(console.error);
diff --git a/subprojects/frontend/config/fetchPackageMetadata.ts b/subprojects/frontend/config/fetchPackageMetadata.ts
index 50807b03..02e16d57 100644
--- a/subprojects/frontend/config/fetchPackageMetadata.ts
+++ b/subprojects/frontend/config/fetchPackageMetadata.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { readFile } from 'node:fs/promises';
 import path from 'node:path';
 
diff --git a/subprojects/frontend/config/manifest.ts b/subprojects/frontend/config/manifest.ts
index 3cec777c..1822dc7c 100644
--- a/subprojects/frontend/config/manifest.ts
+++ b/subprojects/frontend/config/manifest.ts
@@ -1,10 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type { ManifestOptions } from 'vite-plugin-pwa';
 
 const manifest: Partial<ManifestOptions> = {
   lang: 'en-US',
   name: 'Refinery',
   short_name: 'Refinery',
-  description: 'An efficient graph sovler for generating well-formed models',
+  description: 'An efficient graph solver for generating well-formed models',
   theme_color: '#f5f5f5',
   display_override: ['window-controls-overlay'],
   display: 'standalone',
diff --git a/subprojects/frontend/config/minifyHTMLVitePlugin.ts b/subprojects/frontend/config/minifyHTMLVitePlugin.ts
index 18336d4d..7c08c488 100644
--- a/subprojects/frontend/config/minifyHTMLVitePlugin.ts
+++ b/subprojects/frontend/config/minifyHTMLVitePlugin.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { minify, type Options as TerserOptions } from 'html-minifier-terser';
 import type { PluginOption } from 'vite';
 
diff --git a/subprojects/frontend/config/preloadFontsVitePlugin.ts b/subprojects/frontend/config/preloadFontsVitePlugin.ts
index bc6f8eaf..5c04477a 100644
--- a/subprojects/frontend/config/preloadFontsVitePlugin.ts
+++ b/subprojects/frontend/config/preloadFontsVitePlugin.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import micromatch from 'micromatch';
 import type { PluginOption } from 'vite';
 
diff --git a/subprojects/frontend/index.html b/subprojects/frontend/index.html
index 8b6814eb..1bf3472e 100644
--- a/subprojects/frontend/index.html
+++ b/subprojects/frontend/index.html
@@ -1,4 +1,9 @@
 <!DOCTYPE html>
+<!--
+  SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+
+  SPDX-License-Identifier: EPL-2.0
+-->
 <html lang="en-US">
   <head>
     <meta charset="utf-8">
@@ -13,9 +18,9 @@
     <meta name="theme-color" media="(prefers-color-scheme:light)" content="#f5f5f5">
     <meta name="theme-color" media="(prefers-color-scheme:dark)" content="#21252b">
     <style>
-      @import '@fontsource/inter/variable.css';
-      @import '@fontsource/jetbrains-mono/variable.css';
-      @import '@fontsource/jetbrains-mono/variable-italic.css';
+      @import '@fontsource-variable/inter/wght.css';
+      @import '@fontsource-variable/jetbrains-mono/wght.css';
+      @import '@fontsource-variable/jetbrains-mono/wght-italic.css';
     </style>
   </head>
   <body>
diff --git a/subprojects/frontend/package.json b/subprojects/frontend/package.json
index a9153cd4..ba8a0a58 100644
--- a/subprojects/frontend/package.json
+++ b/subprojects/frontend/package.json
@@ -1,94 +1,99 @@
 {
+  "//": [
+    "SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>",
+    "",
+    "SPDX-License-Identifier: EPL-2.0"
+  ],
   "name": "@refinery/frontend",
   "version": "0.0.0",
   "description": "Web frontend for Refinery",
+  "type": "module",
   "private": true,
   "scripts": {
     "build": "cross-env MODE=production vite build",
     "serve": "cross-env MODE=development vite serve",
     "typegen": "xstate typegen \"src/**/*.ts?(x)\"",
     "typecheck": "tsc -p tsconfig.shared.json && tsc -p tsconfig.node.json && tsc -p tsconfig.json",
-    "lint": "eslint .",
-    "lint:ci": "eslint -f json -o build/eslint.json .",
+    "lint": "node config/eslintReport.cjs",
     "lint:fix": "yarn run lint --fix"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/graphs4value/refinery.git"
   },
-  "author": "Refinery authors",
+  "author": "The Refinery Authors <https://refinery.tools/>",
   "license": "EPL-2.0",
   "bugs": {
-    "url": "https://github.com/graphs4value/issues"
+    "url": "https://github.com/graphs4value/refinery/issues"
   },
   "homepage": "https://refinery.tools",
   "dependencies": {
-    "@codemirror/autocomplete": "^6.4.0",
-    "@codemirror/commands": "^6.2.0",
-    "@codemirror/language": "^6.4.0",
-    "@codemirror/lint": "^6.1.0",
-    "@codemirror/search": "^6.2.3",
-    "@codemirror/state": "^6.2.0",
-    "@codemirror/view": "^6.7.3",
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@fontsource/inter": "^4.5.15",
-    "@fontsource/jetbrains-mono": "^4.5.12",
-    "@lezer/common": "^1.0.2",
-    "@lezer/highlight": "^1.1.3",
-    "@lezer/lr": "^1.3.3",
+    "@codemirror/autocomplete": "^6.8.0",
+    "@codemirror/commands": "^6.2.4",
+    "@codemirror/language": "^6.8.0",
+    "@codemirror/lint": "^6.2.2",
+    "@codemirror/search": "^6.5.0",
+    "@codemirror/state": "^6.2.1",
+    "@codemirror/view": "^6.13.2",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource-variable/inter": "^5.0.3",
+    "@fontsource-variable/jetbrains-mono": "^5.0.3",
+    "@lezer/common": "^1.0.3",
+    "@lezer/highlight": "^1.1.6",
+    "@lezer/lr": "^1.3.6",
     "@material-icons/svg": "^1.0.33",
-    "@mui/icons-material": "5.11.0",
-    "@mui/material": "5.11.7",
-    "@vitejs/plugin-react-swc": "^3.1.0",
+    "@mui/icons-material": "5.11.16",
+    "@mui/material": "5.13.5",
+    "@vitejs/plugin-react-swc": "^3.3.2",
     "ansi-styles": "^6.2.1",
+    "csstype": "^3.1.2",
     "escape-string-regexp": "^5.0.0",
     "lodash-es": "^4.17.21",
     "loglevel": "^1.8.1",
     "loglevel-plugin-prefix": "^0.8.4",
-    "mobx": "^6.7.0",
-    "mobx-react-lite": "^3.4.0",
+    "mobx": "^6.9.0",
+    "mobx-react-lite": "^3.4.3",
     "ms": "^2.1.3",
-    "nanoid": "^4.0.0",
-    "notistack": "^2.0.8",
+    "nanoid": "^4.0.2",
+    "notistack": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "xstate": "^4.35.4",
-    "zod": "^3.20.2"
+    "xstate": "^4.37.2",
+    "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@lezer/generator": "^1.2.2",
-    "@tsconfig/node18-strictest-esm": "^1.0.1",
-    "@types/eslint": "^8.21.0",
+    "@lezer/generator": "^1.3.0",
+    "@types/eslint": "^8.40.2",
     "@types/html-minifier-terser": "^7.0.0",
-    "@types/lodash-es": "^4.17.6",
+    "@types/lodash-es": "^4.17.7",
     "@types/micromatch": "^4.0.2",
     "@types/ms": "^0.7.31",
-    "@types/node": "^18.11.18",
-    "@types/prettier": "^2.7.2",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@typescript-eslint/eslint-plugin": "^5.50.0",
-    "@typescript-eslint/parser": "^5.50.0",
-    "@xstate/cli": "^0.4.2",
+    "@types/node": "^18.16.18",
+    "@types/prettier": "^2.7.3",
+    "@types/react": "^18.2.12",
+    "@types/react-dom": "^18.2.5",
+    "@typescript-eslint/eslint-plugin": "^5.59.11",
+    "@typescript-eslint/parser": "^5.59.11",
+    "@xstate/cli": "^0.5.1",
     "cross-env": "^7.0.3",
-    "eslint": "^8.33.0",
+    "eslint": "^8.43.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-prettier": "^8.6.0",
-    "eslint-import-resolver-typescript": "^3.5.3",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-mobx": "^0.0.9",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "html-minifier-terser": "^7.1.0",
+    "html-minifier-terser": "^7.2.0",
     "micromatch": "^4.0.5",
-    "prettier": "^2.8.3",
-    "typescript": "4.9.5",
-    "vite": "^4.1.1",
-    "vite-plugin-pwa": "^0.14.1",
-    "workbox-window": "^6.5.4"
+    "prettier": "^2.8.8",
+    "typescript": "5.1.3",
+    "vite": "^4.3.9",
+    "vite-plugin-pwa": "^0.16.4",
+    "workbox-window": "^7.0.0"
   }
 }
diff --git a/subprojects/frontend/prettier.config.cjs b/subprojects/frontend/prettier.config.cjs
index 75f5c54d..6f9ff7ad 100644
--- a/subprojects/frontend/prettier.config.cjs
+++ b/subprojects/frontend/prettier.config.cjs
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 /** @type {import('prettier').Config} */
 module.exports = {
   singleQuote: true,
diff --git a/subprojects/frontend/public/apple-touch-icon.png.license b/subprojects/frontend/public/apple-touch-icon.png.license
new file mode 100644
index 00000000..e5db6ccd
--- /dev/null
+++ b/subprojects/frontend/public/apple-touch-icon.png.license
@@ -0,0 +1,3 @@
+SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+
+SPDX-License-Identifier: EPL-2.0
diff --git a/subprojects/frontend/public/favicon-96x96.png.license b/subprojects/frontend/public/favicon-96x96.png.license
new file mode 100644
index 00000000..e5db6ccd
--- /dev/null
+++ b/subprojects/frontend/public/favicon-96x96.png.license
@@ -0,0 +1,3 @@
+SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+
+SPDX-License-Identifier: EPL-2.0
diff --git a/subprojects/frontend/public/favicon.png.license b/subprojects/frontend/public/favicon.png.license
new file mode 100644
index 00000000..e5db6ccd
--- /dev/null
+++ b/subprojects/frontend/public/favicon.png.license
@@ -0,0 +1,3 @@
+SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+
+SPDX-License-Identifier: EPL-2.0
diff --git a/subprojects/frontend/public/favicon.svg.license b/subprojects/frontend/public/favicon.svg.license
new file mode 100644
index 00000000..e5db6ccd
--- /dev/null
+++ b/subprojects/frontend/public/favicon.svg.license
@@ -0,0 +1,3 @@
+SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+
+SPDX-License-Identifier: EPL-2.0
diff --git a/subprojects/frontend/public/icon-192x192.png.license b/subprojects/frontend/public/icon-192x192.png.license
new file mode 100644
index 00000000..e5db6ccd
--- /dev/null
+++ b/subprojects/frontend/public/icon-192x192.png.license
@@ -0,0 +1,3 @@
+SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+
+SPDX-License-Identifier: EPL-2.0
diff --git a/subprojects/frontend/public/icon-512x512.png.license b/subprojects/frontend/public/icon-512x512.png.license
new file mode 100644
index 00000000..e5db6ccd
--- /dev/null
+++ b/subprojects/frontend/public/icon-512x512.png.license
@@ -0,0 +1,3 @@
+SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+
+SPDX-License-Identifier: EPL-2.0
diff --git a/subprojects/frontend/public/icon-any.svg.license b/subprojects/frontend/public/icon-any.svg.license
new file mode 100644
index 00000000..e5db6ccd
--- /dev/null
+++ b/subprojects/frontend/public/icon-any.svg.license
@@ -0,0 +1,3 @@
+SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+
+SPDX-License-Identifier: EPL-2.0
diff --git a/subprojects/frontend/public/mask-icon.svg.license b/subprojects/frontend/public/mask-icon.svg.license
new file mode 100644
index 00000000..e5db6ccd
--- /dev/null
+++ b/subprojects/frontend/public/mask-icon.svg.license
@@ -0,0 +1,3 @@
+SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+
+SPDX-License-Identifier: EPL-2.0
diff --git a/subprojects/frontend/public/robots.txt b/subprojects/frontend/public/robots.txt
index c2a49f4f..e7c73099 100644
--- a/subprojects/frontend/public/robots.txt
+++ b/subprojects/frontend/public/robots.txt
@@ -1,2 +1,6 @@
+# SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+#
+# SPDX-License-Identifier: CC0-1.0
+
 User-agent: *
 Allow: /
diff --git a/subprojects/frontend/src/App.tsx b/subprojects/frontend/src/App.tsx
index cd394345..7f242529 100644
--- a/subprojects/frontend/src/App.tsx
+++ b/subprojects/frontend/src/App.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import Box from '@mui/material/Box';
 import CssBaseline from '@mui/material/CssBaseline';
 import { throttle } from 'lodash-es';
diff --git a/subprojects/frontend/src/Loading.tsx b/subprojects/frontend/src/Loading.tsx
index 489563e0..adee4f0e 100644
--- a/subprojects/frontend/src/Loading.tsx
+++ b/subprojects/frontend/src/Loading.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import CircularProgress from '@mui/material/CircularProgress';
 import { styled } from '@mui/material/styles';
 
diff --git a/subprojects/frontend/src/PWAStore.ts b/subprojects/frontend/src/PWAStore.ts
index e9f99e2a..a1b3ffd9 100644
--- a/subprojects/frontend/src/PWAStore.ts
+++ b/subprojects/frontend/src/PWAStore.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { makeAutoObservable, observable } from 'mobx';
 import ms from 'ms';
 // eslint-disable-next-line import/no-unresolved -- Importing virtual module.
diff --git a/subprojects/frontend/src/Refinery.tsx b/subprojects/frontend/src/Refinery.tsx
index 93a82ee1..b5ff94e1 100644
--- a/subprojects/frontend/src/Refinery.tsx
+++ b/subprojects/frontend/src/Refinery.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import Grow from '@mui/material/Grow';
 import Stack from '@mui/material/Stack';
 import { SnackbarProvider } from 'notistack';
@@ -8,7 +14,6 @@ import EditorPane from './editor/EditorPane';
 
 export default function Refinery(): JSX.Element {
   return (
-    // @ts-expect-error -- notistack has problems with `exactOptionalPropertyTypes
     <SnackbarProvider TransitionComponent={Grow}>
       <UpdateNotification />
       <Stack direction="column" height="100%" overflow="auto">
diff --git a/subprojects/frontend/src/RootStore.ts b/subprojects/frontend/src/RootStore.ts
index 2e76d66d..b84c0ce0 100644
--- a/subprojects/frontend/src/RootStore.ts
+++ b/subprojects/frontend/src/RootStore.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { getLogger } from 'loglevel';
 import { makeAutoObservable, runInAction } from 'mobx';
 
diff --git a/subprojects/frontend/src/RootStoreProvider.tsx b/subprojects/frontend/src/RootStoreProvider.tsx
index 2c11a0f9..7cb89af1 100644
--- a/subprojects/frontend/src/RootStoreProvider.tsx
+++ b/subprojects/frontend/src/RootStoreProvider.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { type ReactNode, createContext, useContext } from 'react';
 
 import type RootStore from './RootStore';
diff --git a/subprojects/frontend/src/ToggleDarkModeButton.tsx b/subprojects/frontend/src/ToggleDarkModeButton.tsx
index 59714f20..7a835e61 100644
--- a/subprojects/frontend/src/ToggleDarkModeButton.tsx
+++ b/subprojects/frontend/src/ToggleDarkModeButton.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import IconButton from '@mui/material/IconButton';
diff --git a/subprojects/frontend/src/TopBar.tsx b/subprojects/frontend/src/TopBar.tsx
index 5a825512..f2542b14 100644
--- a/subprojects/frontend/src/TopBar.tsx
+++ b/subprojects/frontend/src/TopBar.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import GitHubIcon from '@mui/icons-material/GitHub';
 import AppBar from '@mui/material/AppBar';
 import Button from '@mui/material/Button';
diff --git a/subprojects/frontend/src/UpdateNotification.tsx b/subprojects/frontend/src/UpdateNotification.tsx
index 07f7f5f7..d86c0703 100644
--- a/subprojects/frontend/src/UpdateNotification.tsx
+++ b/subprojects/frontend/src/UpdateNotification.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import Button from '@mui/material/Button';
 import { observer } from 'mobx-react-lite';
 import { useEffect } from 'react';
@@ -32,14 +38,14 @@ export default observer(function UpdateNotification(): null {
       return enqueueLater('Failed to download update', {
         variant: 'error',
         action: (
-          <>
+          <ContrastThemeProvider>
             <Button color="inherit" onClick={() => pwaStore.checkForUpdates()}>
               Try again
             </Button>
             <Button color="inherit" onClick={() => pwaStore.dismissError()}>
               Dismiss
             </Button>
-          </>
+          </ContrastThemeProvider>
         ),
       });
     }
diff --git a/subprojects/frontend/src/WindowControlsOverlayColor.tsx b/subprojects/frontend/src/WindowControlsOverlayColor.tsx
index 14eda566..cfa468ea 100644
--- a/subprojects/frontend/src/WindowControlsOverlayColor.tsx
+++ b/subprojects/frontend/src/WindowControlsOverlayColor.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { useTheme } from '@mui/material/styles';
 import { useEffect } from 'react';
 
diff --git a/subprojects/frontend/src/editor/AnimatedButton.tsx b/subprojects/frontend/src/editor/AnimatedButton.tsx
index f75d4617..dbbda618 100644
--- a/subprojects/frontend/src/editor/AnimatedButton.tsx
+++ b/subprojects/frontend/src/editor/AnimatedButton.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import { styled, type SxProps, type Theme } from '@mui/material/styles';
diff --git a/subprojects/frontend/src/editor/ConnectButton.tsx b/subprojects/frontend/src/editor/ConnectButton.tsx
index e2d251f3..eed6fbc7 100644
--- a/subprojects/frontend/src/editor/ConnectButton.tsx
+++ b/subprojects/frontend/src/editor/ConnectButton.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import CloudIcon from '@mui/icons-material/Cloud';
 import CloudOffIcon from '@mui/icons-material/CloudOff';
 import SyncIcon from '@mui/icons-material/Sync';
diff --git a/subprojects/frontend/src/editor/ConnectionStatusNotification.tsx b/subprojects/frontend/src/editor/ConnectionStatusNotification.tsx
index 9b27f45c..b7b962ab 100644
--- a/subprojects/frontend/src/editor/ConnectionStatusNotification.tsx
+++ b/subprojects/frontend/src/editor/ConnectionStatusNotification.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import Button from '@mui/material/Button';
 import { observer } from 'mobx-react-lite';
 import { useEffect } from 'react';
diff --git a/subprojects/frontend/src/editor/DiagnosticValue.ts b/subprojects/frontend/src/editor/DiagnosticValue.ts
index b4e0b165..20478262 100644
--- a/subprojects/frontend/src/editor/DiagnosticValue.ts
+++ b/subprojects/frontend/src/editor/DiagnosticValue.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type { Diagnostic } from '@codemirror/lint';
 import { RangeValue } from '@codemirror/state';
 
diff --git a/subprojects/frontend/src/editor/EditorArea.tsx b/subprojects/frontend/src/editor/EditorArea.tsx
index cfb988b2..905fa2ec 100644
--- a/subprojects/frontend/src/editor/EditorArea.tsx
+++ b/subprojects/frontend/src/editor/EditorArea.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import Box from '@mui/material/Box';
 import { useTheme } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
diff --git a/subprojects/frontend/src/editor/EditorButtons.tsx b/subprojects/frontend/src/editor/EditorButtons.tsx
index 53b06e23..9b187e5c 100644
--- a/subprojects/frontend/src/editor/EditorButtons.tsx
+++ b/subprojects/frontend/src/editor/EditorButtons.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type { Diagnostic } from '@codemirror/lint';
 import CheckIcon from '@mui/icons-material/Check';
 import ErrorIcon from '@mui/icons-material/Error';
diff --git a/subprojects/frontend/src/editor/EditorPane.tsx b/subprojects/frontend/src/editor/EditorPane.tsx
index f7f8241a..87f408fe 100644
--- a/subprojects/frontend/src/editor/EditorPane.tsx
+++ b/subprojects/frontend/src/editor/EditorPane.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import Box from '@mui/material/Box';
 import Skeleton from '@mui/material/Skeleton';
 import Stack from '@mui/material/Stack';
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts
index 0a0d885d..b98f085e 100644
--- a/subprojects/frontend/src/editor/EditorStore.ts
+++ b/subprojects/frontend/src/editor/EditorStore.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type {
   CompletionContext,
   CompletionResult,
diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts
index 01b65a7e..e057ce18 100644
--- a/subprojects/frontend/src/editor/EditorTheme.ts
+++ b/subprojects/frontend/src/editor/EditorTheme.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import errorSVG from '@material-icons/svg/svg/error/baseline.svg?raw';
 import expandMoreSVG from '@material-icons/svg/svg/expand_more/baseline.svg?raw';
 import infoSVG from '@material-icons/svg/svg/info/baseline.svg?raw';
@@ -8,32 +14,6 @@ function svgURL(svg: string): string {
   return `url('data:image/svg+xml;utf8,${svg}')`;
 }
 
-function radialShadowTheme(
-  origin: string,
-  scaleX: boolean,
-  scaleY: boolean,
-): CSSObject {
-  function radialGradient(opacity: number, scale: string): string {
-    return `radial-gradient(
-        farthest-side at ${origin},
-        rgba(0, 0, 0, ${opacity}),
-        rgba(0, 0, 0, 0)
-      )
-      ${origin} /
-      ${scaleX ? scale : '100%'}
-      ${scaleY ? scale : '100%'}
-      no-repeat`;
-  }
-
-  return {
-    background: `
-      ${radialGradient(0.2, '40%')},
-      ${radialGradient(0.14, '50%')},
-      ${radialGradient(0.12, '100%')}
-    `,
-  };
-}
-
 export default styled('div', {
   name: 'EditorTheme',
   shouldForwardProp: (propName) =>
@@ -52,98 +32,13 @@ export default styled('div', {
     },
   };
 
-  const scrollerThumbOpacity = theme.palette.mode === 'dark' ? 0.16 : 0.28;
-
   const generalStyle: CSSObject = {
     background: theme.palette.background.default,
     '&, .cm-editor': {
       height: '100%',
     },
-    '.cm-scroller-holder': {
-      display: 'flex',
-      position: 'relative',
-      flexDirection: 'column',
-      overflow: 'hidden',
-      flex: '1 1',
-    },
-    '.cm-scroller-spacer': {
-      position: 'sticky',
-      flexShrink: 0,
-      zIndex: 300,
-      width: 1,
-      marginRight: -1,
-      pointerEvents: 'none',
-    },
     '.cm-scroller': {
       color: theme.palette.text.secondary,
-      scrollbarWidth: 'none',
-      MsOverflowStyle: 'none',
-      '&::-webkit-scrollbar': {
-        width: 0,
-        height: 0,
-        background: 'transparent',
-      },
-    },
-    '.cm-scroller-track': {
-      position: 'absolute',
-      zIndex: 300,
-      touchAction: 'none',
-    },
-    '.cm-scroller-thumb': {
-      position: 'absolute',
-      background: theme.palette.text.secondary,
-      opacity: scrollerThumbOpacity,
-      transition: theme.transitions.create('opacity', {
-        duration: theme.transitions.duration.shortest,
-      }),
-      touchAction: 'none',
-      WebkitTapHighlightColor: 'transparent',
-      '&:hover': {
-        opacity: 0.75,
-        '@media (hover: none)': {
-          opacity: scrollerThumbOpacity,
-        },
-      },
-      '&.active': {
-        opacity: 1,
-        pointerEvents: 'none',
-        userSelect: 'none',
-      },
-    },
-    '.cm-scroller-track-y, .cm-scroller-thumb-y': {
-      top: 0,
-      right: 0,
-      width: 12,
-    },
-    '.cm-scroller-track-x, .cm-scroller-thumb-x': {
-      left: 0,
-      bottom: 0,
-      height: 12,
-    },
-    '.cm-scroller-track-x': {
-      right: 12,
-    },
-    '.cm-scroller-gutter-decoration': {
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      left: 0,
-      width: 0,
-      transition: theme.transitions.create('width', {
-        duration: theme.transitions.duration.shortest,
-      }),
-      ...radialShadowTheme('0 50%', true, false),
-    },
-    '.cm-scroller-top-decoration': {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      height: 0,
-      transition: theme.transitions.create('height', {
-        duration: theme.transitions.duration.shortest,
-      }),
-      ...radialShadowTheme('50% 0', false, true),
     },
     '.cm-gutters': {
       background: theme.palette.background.default,
@@ -162,7 +57,6 @@ export default styled('div', {
       background: 'transparent',
     },
     '.cm-cursor, .cm-cursor-primary': {
-      marginLeft: -1,
       borderLeft: `2px solid ${theme.palette.info.main}`,
     },
     '.cm-selectionBackground': {
@@ -175,7 +69,6 @@ export default styled('div', {
       },
     },
     '.cm-line': {
-      position: 'relative', // For indentation highlights
       padding: '0 12px 0 0px',
     },
   };
@@ -265,13 +158,6 @@ export default styled('div', {
     '.cm-searchMatch-selected': {
       background: theme.palette.highlight.search.selected,
     },
-    '.cm-indentation-marker': {
-      display: 'inline-block',
-      boxShadow: `1px 0 0 ${theme.palette.text.disabled} inset`,
-      '&.active': {
-        boxShadow: `1px 0 0 ${theme.palette.text.primary} inset`,
-      },
-    },
     '.cm-scroller-selection': {
       position: 'absolute',
       right: 0,
@@ -452,11 +338,11 @@ export default styled('div', {
 
   const foldStyle = {
     '.cm-foldGutter': {
-      width: 17,
+      width: 16,
     },
     '.problem-editor-foldMarker': {
       display: 'block',
-      margin: '4px 1px 4px 0',
+      margin: '4px 0 4px 0',
       padding: 0,
       maskImage: svgURL(expandMoreSVG),
       maskSize: '16px 16px',
@@ -467,7 +353,7 @@ export default styled('div', {
       cursor: 'pointer',
       WebkitTapHighlightColor: 'transparent',
       [theme.breakpoints.down('sm')]: {
-        margin: '2px 1px 2px 0',
+        margin: '2px 0 2px 0',
       },
     },
     '.problem-editor-foldMarker-open': {
diff --git a/subprojects/frontend/src/editor/GenerateButton.tsx b/subprojects/frontend/src/editor/GenerateButton.tsx
index 2036fc28..3837ef8e 100644
--- a/subprojects/frontend/src/editor/GenerateButton.tsx
+++ b/subprojects/frontend/src/editor/GenerateButton.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import DangerousOutlinedIcon from '@mui/icons-material/DangerousOutlined';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import Button from '@mui/material/Button';
diff --git a/subprojects/frontend/src/editor/LintPanelStore.ts b/subprojects/frontend/src/editor/LintPanelStore.ts
index 502f9c59..f81587fa 100644
--- a/subprojects/frontend/src/editor/LintPanelStore.ts
+++ b/subprojects/frontend/src/editor/LintPanelStore.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { closeLintPanel, openLintPanel } from '@codemirror/lint';
 
 import type EditorStore from './EditorStore';
diff --git a/subprojects/frontend/src/editor/PanelStore.ts b/subprojects/frontend/src/editor/PanelStore.ts
index 4f827280..25ef8b6c 100644
--- a/subprojects/frontend/src/editor/PanelStore.ts
+++ b/subprojects/frontend/src/editor/PanelStore.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type { Command } from '@codemirror/view';
 import { action, makeObservable, observable } from 'mobx';
 
diff --git a/subprojects/frontend/src/editor/SearchPanel.ts b/subprojects/frontend/src/editor/SearchPanel.ts
index c9df41b7..b63d5eed 100644
--- a/subprojects/frontend/src/editor/SearchPanel.ts
+++ b/subprojects/frontend/src/editor/SearchPanel.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import {
   type EditorView,
   type Panel,
diff --git a/subprojects/frontend/src/editor/SearchPanelPortal.tsx b/subprojects/frontend/src/editor/SearchPanelPortal.tsx
index 5cf1c90e..b4b07c74 100644
--- a/subprojects/frontend/src/editor/SearchPanelPortal.tsx
+++ b/subprojects/frontend/src/editor/SearchPanelPortal.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import Portal from '@mui/material/Portal';
 import { observer } from 'mobx-react-lite';
 
diff --git a/subprojects/frontend/src/editor/SearchPanelStore.ts b/subprojects/frontend/src/editor/SearchPanelStore.ts
index 65d595a8..6a97baf1 100644
--- a/subprojects/frontend/src/editor/SearchPanelStore.ts
+++ b/subprojects/frontend/src/editor/SearchPanelStore.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import {
   closeSearchPanel,
   findNext,
diff --git a/subprojects/frontend/src/editor/SearchToolbar.tsx b/subprojects/frontend/src/editor/SearchToolbar.tsx
index 54f3dba7..4ae7e893 100644
--- a/subprojects/frontend/src/editor/SearchToolbar.tsx
+++ b/subprojects/frontend/src/editor/SearchToolbar.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import CloseIcon from '@mui/icons-material/Close';
 import FindReplaceIcon from '@mui/icons-material/FindReplace';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
diff --git a/subprojects/frontend/src/editor/createEditorState.ts b/subprojects/frontend/src/editor/createEditorState.ts
index ce1efa4f..67b8fb9e 100644
--- a/subprojects/frontend/src/editor/createEditorState.ts
+++ b/subprojects/frontend/src/editor/createEditorState.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import {
   closeBrackets,
   closeBracketsKeymap,
@@ -38,8 +44,6 @@ import type EditorStore from './EditorStore';
 import SearchPanel from './SearchPanel';
 import exposeDiagnostics from './exposeDiagnostics';
 import findOccurrences from './findOccurrences';
-import indentationMarkerViewPlugin from './indentationMarkerViewPlugin';
-import scrollbarViewPlugin from './scrollbarViewPlugin';
 import semanticHighlighting from './semanticHighlighting';
 
 export default function createEditorState(
@@ -64,7 +68,6 @@ export default function createEditorState(
       highlightSpecialChars(),
       history(),
       indentOnInput(),
-      indentationMarkerViewPlugin(),
       rectangularSelection(),
       search({
         createPanel(view) {
@@ -123,7 +126,6 @@ export default function createEditorState(
         ...defaultKeymap,
       ]),
       problemLanguageSupport(),
-      scrollbarViewPlugin(store),
     ],
   });
 }
diff --git a/subprojects/frontend/src/editor/defineDecorationSetExtension.ts b/subprojects/frontend/src/editor/defineDecorationSetExtension.ts
index d9c7bc7d..0887c92e 100644
--- a/subprojects/frontend/src/editor/defineDecorationSetExtension.ts
+++ b/subprojects/frontend/src/editor/defineDecorationSetExtension.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { StateEffect, StateField, TransactionSpec } from '@codemirror/state';
 import { EditorView, Decoration, DecorationSet } from '@codemirror/view';
 
diff --git a/subprojects/frontend/src/editor/exposeDiagnostics.ts b/subprojects/frontend/src/editor/exposeDiagnostics.ts
index 82f24c93..c4dcbb87 100644
--- a/subprojects/frontend/src/editor/exposeDiagnostics.ts
+++ b/subprojects/frontend/src/editor/exposeDiagnostics.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { setDiagnosticsEffect } from '@codemirror/lint';
 import {
   StateField,
diff --git a/subprojects/frontend/src/editor/findOccurrences.ts b/subprojects/frontend/src/editor/findOccurrences.ts
index 08c078c2..00dffc96 100644
--- a/subprojects/frontend/src/editor/findOccurrences.ts
+++ b/subprojects/frontend/src/editor/findOccurrences.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import {
   type Range,
   RangeSet,
diff --git a/subprojects/frontend/src/editor/indentationMarkerViewPlugin.ts b/subprojects/frontend/src/editor/indentationMarkerViewPlugin.ts
deleted file mode 100644
index 730fa6e3..00000000
--- a/subprojects/frontend/src/editor/indentationMarkerViewPlugin.ts
+++ /dev/null
@@ -1,341 +0,0 @@
-/**
- * @file CodeMirror plugin to highlight indentation
- *
- * This file is based on the
- * [@replit/codemirror-indentation-markers](https://github.com/replit/codemirror-indentation-markers)
- * package, which is available under the
- * [MIT License](https://github.com/replit/codemirror-indentation-markers/blob/543cc508ca5cef5d8350af23973eb1425e31525c/LICENSE).
- *
- * The highlighting heuristics were adjusted to make them more suitable
- * for logic programming.
- *
- * @see https://github.com/replit/codemirror-indentation-markers/blob/543cc508ca5cef5d8350af23973eb1425e31525c/src/index.ts
- */
-
-import { getIndentUnit } from '@codemirror/language';
-import { Text, RangeSet, EditorState } from '@codemirror/state';
-import {
-  ViewPlugin,
-  Decoration,
-  EditorView,
-  WidgetType,
-  PluginValue,
-} from '@codemirror/view';
-
-export const INDENTATION_MARKER_CLASS = 'cm-indentation-marker';
-
-export const INDENTATION_MARKER_ACTIVE_CLASS = 'active';
-
-const indentationMark = Decoration.mark({
-  class: INDENTATION_MARKER_CLASS,
-  tagName: 'span',
-});
-
-const activeIndentationMark = Decoration.mark({
-  class: `${INDENTATION_MARKER_CLASS} ${INDENTATION_MARKER_ACTIVE_CLASS}`,
-  tagName: 'span',
-});
-
-/**
- * Widget used to simulate N indentation markers on empty lines.
- */
-class IndentationWidget extends WidgetType {
-  constructor(
-    readonly numIndent: number,
-    readonly indentSize: number,
-    readonly activeIndent?: number,
-  ) {
-    super();
-  }
-
-  override eq(other: IndentationWidget) {
-    return (
-      this.numIndent === other.numIndent &&
-      this.indentSize === other.indentSize &&
-      this.activeIndent === other.activeIndent
-    );
-  }
-
-  override toDOM(view: EditorView) {
-    const indentSize = getIndentUnit(view.state);
-
-    const wrapper = document.createElement('span');
-    wrapper.style.top = '0';
-    wrapper.style.left = '0';
-    wrapper.style.position = 'absolute';
-    wrapper.style.pointerEvents = 'none';
-
-    for (let indent = 0; indent < this.numIndent; indent += 1) {
-      const element = document.createElement('span');
-      element.className = INDENTATION_MARKER_CLASS;
-      element.classList.toggle(
-        INDENTATION_MARKER_ACTIVE_CLASS,
-        indent === this.activeIndent,
-      );
-      element.innerHTML = ' '.repeat(indentSize);
-      wrapper.appendChild(element);
-    }
-
-    return wrapper;
-  }
-}
-
-/**
- * Returns the number of indentation markers a non-empty line should have
- * based on the text in the line and the size of the indent.
- */
-function getNumIndentMarkersForNonEmptyLine(
-  text: string,
-  indentSize: number,
-  onIndentMarker?: (pos: number) => void,
-) {
-  let numIndents = 0;
-  let numConsecutiveSpaces = 0;
-  let prevChar: string | undefined;
-
-  for (let char = 0; char < text.length; char += 1) {
-    // Bail if we encounter a non-whitespace character
-    if (text[char] !== ' ' && text[char] !== '\t') {
-      // We still increment the indentation level if we would
-      // have added a marker here had this been a space or tab.
-      if (numConsecutiveSpaces % indentSize === 0 && char !== 0) {
-        numIndents += 1;
-      }
-
-      return numIndents;
-    }
-
-    // Every tab and N space has an indentation marker
-    const shouldAddIndent =
-      prevChar === '\t' || numConsecutiveSpaces % indentSize === 0;
-
-    if (shouldAddIndent) {
-      numIndents += 1;
-
-      if (onIndentMarker) {
-        onIndentMarker(char);
-      }
-    }
-
-    if (text[char] === ' ') {
-      numConsecutiveSpaces += 1;
-    } else {
-      numConsecutiveSpaces = 0;
-    }
-
-    prevChar = text[char];
-  }
-
-  return numIndents;
-}
-
-/**
- * Returns the number of indent markers an empty line should have
- * based on the number of indent markers of the previous
- * and next non-empty lines.
- */
-function getNumIndentMarkersForEmptyLine(prev: number, next: number) {
-  const min = Math.min(prev, next);
-  const max = Math.max(prev, next);
-
-  // If only one side is non-zero, we omit markers,
-  // because in logic programming, a block often ends with an empty line.
-  if (min === 0 && max > 0) {
-    return 0;
-  }
-
-  // Else, default to the minimum of the two
-  return min;
-}
-
-/**
- * Returns the next non-empty line and its indent level.
- */
-function findNextNonEmptyLineAndIndentLevel(
-  doc: Text,
-  startLine: number,
-  indentSize: number,
-): [number, number] {
-  const numLines = doc.lines;
-  let lineNo = startLine;
-
-  while (lineNo <= numLines) {
-    const { text } = doc.line(lineNo);
-
-    if (text.trim().length === 0) {
-      lineNo += 1;
-    } else {
-      const indent = getNumIndentMarkersForNonEmptyLine(text, indentSize);
-      return [lineNo, indent];
-    }
-  }
-
-  // Reached the end of the doc
-  return [numLines + 1, 0];
-}
-
-interface IndentationMarkerDesc {
-  lineNumber: number;
-  from: number;
-  to: number;
-  create(activeIndentIndex?: number): Decoration;
-}
-
-/**
- * Returns a range of lines with an active indent marker.
- */
-function getLinesWithActiveIndentMarker(
-  state: EditorState,
-  indentMap: Map<number, number>,
-): { start: number; end: number; activeIndent: number } {
-  const currentLine = state.doc.lineAt(state.selection.main.head);
-  const currentIndent = indentMap.get(currentLine.number);
-  const currentLineNo = currentLine.number;
-
-  if (!currentIndent) {
-    return { start: -1, end: -1, activeIndent: NaN };
-  }
-
-  let start: number;
-  let end: number;
-
-  for (start = currentLineNo; start >= 0; start -= 1) {
-    const indent = indentMap.get(start - 1);
-    if (!indent || indent < currentIndent) {
-      break;
-    }
-  }
-
-  for (end = currentLineNo; ; end += 1) {
-    const indent = indentMap.get(end + 1);
-    if (!indent || indent < currentIndent) {
-      break;
-    }
-  }
-
-  return { start, end, activeIndent: currentIndent };
-}
-/**
- * Adds indentation markers to all lines within view.
- */
-function addIndentationMarkers(view: EditorView) {
-  const indentSize = getIndentUnit(view.state);
-  const indentSizeMap = new Map</* lineNumber */ number, number>();
-  const decorations: Array<IndentationMarkerDesc> = [];
-
-  view.visibleRanges.forEach(({ from, to }) => {
-    let pos = from;
-
-    let prevIndentMarkers = 0;
-    let nextIndentMarkers = 0;
-    let nextNonEmptyLine = 0;
-
-    while (pos <= to) {
-      const line = view.state.doc.lineAt(pos);
-      const { text } = line;
-
-      // If a line is empty, we match the indentation according
-      // to a heuristic based on the indentations of the
-      // previous and next non-empty lines.
-      if (text.trim().length === 0) {
-        // To retrieve the next non-empty indentation level,
-        // we perform a lookahead and cache the result.
-        if (nextNonEmptyLine < line.number) {
-          const [nextLine, nextIndent] = findNextNonEmptyLineAndIndentLevel(
-            view.state.doc,
-            line.number + 1,
-            indentSize,
-          );
-
-          nextNonEmptyLine = nextLine;
-          nextIndentMarkers = nextIndent;
-        }
-
-        const numIndentMarkers = getNumIndentMarkersForEmptyLine(
-          prevIndentMarkers,
-          nextIndentMarkers,
-        );
-
-        // Add the indent widget and move on to next line
-        indentSizeMap.set(line.number, numIndentMarkers);
-        decorations.push({
-          from: pos,
-          to: pos,
-          lineNumber: line.number,
-          create: (activeIndentIndex) =>
-            Decoration.widget({
-              widget: new IndentationWidget(
-                numIndentMarkers,
-                indentSize,
-                activeIndentIndex,
-              ),
-            }),
-        });
-      } else {
-        const indices: Array<number> = [];
-
-        prevIndentMarkers = getNumIndentMarkersForNonEmptyLine(
-          text,
-          indentSize,
-          (char) => indices.push(char),
-        );
-
-        indentSizeMap.set(line.number, indices.length);
-        decorations.push(
-          ...indices.map(
-            (char, i): IndentationMarkerDesc => ({
-              from: line.from + char,
-              to: line.from + char + 1,
-              lineNumber: line.number,
-              create: (activeIndentIndex) =>
-                activeIndentIndex === i
-                  ? activeIndentationMark
-                  : indentationMark,
-            }),
-          ),
-        );
-      }
-
-      // Move on to the next line
-      pos = line.to + 1;
-    }
-  });
-
-  const activeBlockRange = getLinesWithActiveIndentMarker(
-    view.state,
-    indentSizeMap,
-  );
-
-  return RangeSet.of<Decoration>(
-    Array.from(decorations).map(({ lineNumber, from, to, create }) => {
-      const activeIndent =
-        lineNumber >= activeBlockRange.start &&
-        lineNumber <= activeBlockRange.end
-          ? activeBlockRange.activeIndent - 1
-          : undefined;
-
-      return { from, to, value: create(activeIndent) };
-    }),
-    true,
-  );
-}
-
-export default function indentationMarkerViewPlugin() {
-  return ViewPlugin.define<PluginValue & { decorations: RangeSet<Decoration> }>(
-    (view) => ({
-      decorations: addIndentationMarkers(view),
-      update(update) {
-        if (
-          update.docChanged ||
-          update.viewportChanged ||
-          update.selectionSet
-        ) {
-          this.decorations = addIndentationMarkers(update.view);
-        }
-      },
-    }),
-    {
-      decorations: (v) => v.decorations,
-    },
-  );
-}
diff --git a/subprojects/frontend/src/editor/scrollbarViewPlugin.ts b/subprojects/frontend/src/editor/scrollbarViewPlugin.ts
deleted file mode 100644
index f54251a9..00000000
--- a/subprojects/frontend/src/editor/scrollbarViewPlugin.ts
+++ /dev/null
@@ -1,358 +0,0 @@
-import { EditorSelection } from '@codemirror/state';
-import {
-  type EditorView,
-  type PluginValue,
-  ViewPlugin,
-} from '@codemirror/view';
-import { reaction } from 'mobx';
-
-import type EditorStore from './EditorStore';
-import { getDiagnostics } from './exposeDiagnostics';
-import findOccurrences from './findOccurrences';
-
-export const HOLDER_CLASS = 'cm-scroller-holder';
-export const SPACER_CLASS = 'cm-scroller-spacer';
-export const TRACK_CLASS = 'cm-scroller-track';
-export const THUMB_CLASS = 'cm-scroller-thumb';
-export const THUMB_ACTIVE_CLASS = 'active';
-export const GUTTER_DECORATION_CLASS = 'cm-scroller-gutter-decoration';
-export const TOP_DECORATION_CLASS = 'cm-scroller-top-decoration';
-export const ANNOTATION_SELECTION_CLASS = 'cm-scroller-selection';
-export const ANNOTATION_DIAGNOSTIC_CLASS = 'cm-scroller-diagnostic';
-export const ANNOTATION_OCCURRENCE_CLASS = 'cm-scroller-occurrence';
-export const SHADOW_WIDTH = 10;
-export const SCROLLBAR_WIDTH = 12;
-export const ANNOTATION_WIDTH = SCROLLBAR_WIDTH / 2;
-export const MIN_ANNOTATION_HEIGHT = 1;
-
-function createScrollbar(
-  holder: HTMLElement,
-  direction: 'x' | 'y',
-  touchCallback: (offsetX: number, offsetY: number) => void,
-  moveCallback: (movementX: number, movementY: number) => void,
-): { track: HTMLElement; thumb: HTMLElement } {
-  const track = holder.ownerDocument.createElement('div');
-  track.className = `${TRACK_CLASS} ${TRACK_CLASS}-${direction}`;
-  holder.appendChild(track);
-
-  const thumb = holder.ownerDocument.createElement('div');
-  thumb.className = `${THUMB_CLASS} ${THUMB_CLASS}-${direction}`;
-  track.appendChild(thumb);
-
-  let pointerId: number | undefined;
-  track.addEventListener('pointerdown', (event) => {
-    if (pointerId !== undefined) {
-      event.preventDefault();
-      return;
-    }
-    ({ pointerId } = event);
-    thumb.classList.add(THUMB_ACTIVE_CLASS);
-    if (event.target === thumb) {
-      // Prevent implicit pointer capture on mobile.
-      thumb.releasePointerCapture(pointerId);
-    } else {
-      touchCallback(event.offsetX, event.offsetY);
-    }
-    track.setPointerCapture(pointerId);
-  });
-
-  track.addEventListener('pointermove', (event) => {
-    if (event.pointerId !== pointerId) {
-      return;
-    }
-    moveCallback(event.movementX, event.movementY);
-    event.preventDefault();
-  });
-
-  function scrollEnd(event: PointerEvent) {
-    if (event.pointerId !== pointerId) {
-      return;
-    }
-    pointerId = undefined;
-    thumb.classList.remove(THUMB_ACTIVE_CLASS);
-  }
-
-  track.addEventListener('pointerup', scrollEnd, { passive: true });
-  track.addEventListener('pointercancel', scrollEnd, { passive: true });
-
-  return { track, thumb };
-}
-
-function rebuildAnnotations(
-  view: EditorView,
-  scrollHeight: number,
-  trackYHeight: number,
-  holder: HTMLElement,
-  annotations: HTMLDivElement[],
-) {
-  const { state } = view;
-  const overlayAnnotationsHeight =
-    (view.contentHeight / scrollHeight) * trackYHeight;
-  const lineHeight = overlayAnnotationsHeight / state.doc.lines;
-
-  let i = 0;
-
-  function getOrCreateAnnotation(from: number, to?: number): HTMLDivElement {
-    const startLine = state.doc.lineAt(from).number;
-    const endLine = to === undefined ? startLine : state.doc.lineAt(to).number;
-    const top = (startLine - 1) * lineHeight;
-    const height = Math.max(
-      MIN_ANNOTATION_HEIGHT,
-      Math.max(1, endLine - startLine) * lineHeight,
-    );
-
-    let annotation: HTMLDivElement | undefined;
-    if (i < annotations.length) {
-      annotation = annotations[i];
-    }
-    if (annotation === undefined) {
-      annotation = holder.ownerDocument.createElement('div');
-      annotations.push(annotation);
-      holder.appendChild(annotation);
-    }
-    i += 1;
-
-    annotation.style.top = `${top}px`;
-    annotation.style.height = `${height}px`;
-
-    return annotation;
-  }
-
-  state.selection.ranges.forEach(({ head }) => {
-    const selectionAnnotation = getOrCreateAnnotation(head);
-    selectionAnnotation.className = ANNOTATION_SELECTION_CLASS;
-    selectionAnnotation.style.width = `${SCROLLBAR_WIDTH}px`;
-  });
-
-  const diagnosticsIter = getDiagnostics(state).iter();
-  while (diagnosticsIter.value !== null) {
-    const diagnosticAnnotation = getOrCreateAnnotation(
-      diagnosticsIter.from,
-      diagnosticsIter.to,
-    );
-    diagnosticAnnotation.className = `${ANNOTATION_DIAGNOSTIC_CLASS} ${ANNOTATION_DIAGNOSTIC_CLASS}-${diagnosticsIter.value.severity}`;
-    diagnosticAnnotation.style.width = `${ANNOTATION_WIDTH}px`;
-    diagnosticsIter.next();
-  }
-
-  const occurrences = view.state.field(findOccurrences);
-  const occurrencesIter = occurrences.iter();
-  while (occurrencesIter.value !== null) {
-    const occurrenceAnnotation = getOrCreateAnnotation(
-      occurrencesIter.from,
-      occurrencesIter.to,
-    );
-    occurrenceAnnotation.className = ANNOTATION_OCCURRENCE_CLASS;
-    occurrenceAnnotation.style.width = `${ANNOTATION_WIDTH}px`;
-    occurrenceAnnotation.style.right = `${ANNOTATION_WIDTH}px`;
-    occurrencesIter.next();
-  }
-
-  annotations
-    .splice(i)
-    .forEach((staleAnnotation) => holder.removeChild(staleAnnotation));
-}
-
-export default function scrollbarViewPlugin(
-  editorStore: EditorStore,
-): ViewPlugin<PluginValue> {
-  return ViewPlugin.define((view) => {
-    const { scrollDOM } = view;
-    const { ownerDocument, parentElement: parentDOM } = scrollDOM;
-    if (parentDOM === null) {
-      return {};
-    }
-
-    const holder = ownerDocument.createElement('div');
-    holder.className = HOLDER_CLASS;
-    parentDOM.replaceChild(holder, scrollDOM);
-    holder.appendChild(scrollDOM);
-
-    const spacer = ownerDocument.createElement('div');
-    spacer.className = SPACER_CLASS;
-    scrollDOM.insertBefore(spacer, scrollDOM.firstChild);
-
-    let gutterWidth = 0;
-
-    scrollDOM.addEventListener('click', (event) => {
-      const scrollX = scrollDOM.scrollLeft + event.offsetX;
-      const scrollY = scrollDOM.scrollTop + event.offsetY;
-      if (scrollX > gutterWidth && scrollY > view.contentHeight) {
-        event.preventDefault();
-        view.focus();
-        editorStore.dispatch({
-          scrollIntoView: true,
-          selection: EditorSelection.create([
-            EditorSelection.cursor(view.state.doc.length),
-          ]),
-        });
-      }
-    });
-
-    let factorY = 1;
-    let factorX = 1;
-
-    const { track: trackY, thumb: thumbY } = createScrollbar(
-      holder,
-      'y',
-      (_offsetX, offsetY) => {
-        const scaledOffset = offsetY / factorY;
-        const { height: scrollerHeight } = scrollDOM.getBoundingClientRect();
-        const target = Math.max(0, scaledOffset - scrollerHeight / 2);
-        scrollDOM.scrollTo({ top: target });
-      },
-      (_movementX, movementY) => {
-        scrollDOM.scrollBy({ top: movementY / factorY });
-      },
-    );
-
-    const { track: trackX, thumb: thumbX } = createScrollbar(
-      holder,
-      'x',
-      (offsetX) => {
-        const scaledOffset = offsetX / factorX;
-        const { width: scrollerWidth } = scrollDOM.getBoundingClientRect();
-        const target = Math.max(0, scaledOffset - scrollerWidth / 2);
-        scrollDOM.scrollTo({ left: target });
-      },
-      (movementX) => {
-        scrollDOM.scrollBy({ left: movementX / factorX });
-      },
-    );
-
-    const gutterDecoration = ownerDocument.createElement('div');
-    gutterDecoration.className = GUTTER_DECORATION_CLASS;
-    holder.appendChild(gutterDecoration);
-
-    const topDecoration = ownerDocument.createElement('div');
-    topDecoration.className = TOP_DECORATION_CLASS;
-    holder.appendChild(topDecoration);
-
-    const disposePanelReaction = reaction(
-      () => editorStore.searchPanel.state,
-      (panelOpen) => {
-        topDecoration.style.display = panelOpen ? 'none' : 'block';
-      },
-      { fireImmediately: true },
-    );
-
-    let gutters: Element | undefined;
-
-    let firstRun = true;
-    let firstRunTimeout: number | undefined;
-    let requested = false;
-    let rebuildRequested = false;
-
-    const annotations: HTMLDivElement[] = [];
-
-    let observer: ResizeObserver | undefined;
-
-    function update() {
-      requested = false;
-
-      if (gutters === undefined) {
-        gutters = scrollDOM.querySelector('.cm-gutters') ?? undefined;
-        if (gutters !== undefined && observer !== undefined) {
-          observer.observe(gutters);
-        }
-      }
-
-      const { height: scrollerHeight, width: scrollerWidth } =
-        scrollDOM.getBoundingClientRect();
-      const { scrollTop, scrollLeft, scrollWidth } = scrollDOM;
-      const scrollHeight =
-        view.contentHeight + scrollerHeight - view.defaultLineHeight;
-      if (firstRun) {
-        if (firstRunTimeout !== undefined) {
-          clearTimeout(firstRunTimeout);
-        }
-        // @ts-expect-error `@types/node` typings should not be in effect here.
-        firstRunTimeout = setTimeout(() => {
-          spacer.style.minHeight = `${scrollHeight}px`;
-          firstRun = false;
-        }, 0);
-      } else {
-        spacer.style.minHeight = `${scrollHeight}px`;
-      }
-      gutterWidth = gutters?.clientWidth ?? 0;
-      let trackYHeight = scrollerHeight;
-
-      // Prevent spurious horizontal scrollbar by rounding up to the nearest pixel.
-      if (scrollWidth > Math.ceil(scrollerWidth)) {
-        // Leave space for horizontal scrollbar.
-        trackYHeight -= SCROLLBAR_WIDTH;
-        // Alwalys leave space for annotation in the vertical scrollbar.
-        const trackXWidth = scrollerWidth - gutterWidth - SCROLLBAR_WIDTH;
-        const thumbWidth = trackXWidth * (scrollerWidth / scrollWidth);
-        factorX = (trackXWidth - thumbWidth) / (scrollWidth - scrollerWidth);
-        trackY.style.bottom = `${SCROLLBAR_WIDTH}px`;
-        trackX.style.display = 'block';
-        trackX.style.left = `${gutterWidth}px`;
-        thumbX.style.width = `${thumbWidth}px`;
-        thumbX.style.left = `${scrollLeft * factorX}px`;
-        scrollDOM.style.overflowX = 'scroll';
-      } else {
-        trackY.style.bottom = '0px';
-        trackX.style.display = 'none';
-        scrollDOM.style.overflowX = 'hidden';
-      }
-
-      const thumbHeight = trackYHeight * (scrollerHeight / scrollHeight);
-      factorY = (trackYHeight - thumbHeight) / (scrollHeight - scrollerHeight);
-      thumbY.style.display = 'block';
-      thumbY.style.height = `${thumbHeight}px`;
-      thumbY.style.top = `${scrollTop * factorY}px`;
-
-      gutterDecoration.style.left = `${gutterWidth}px`;
-      gutterDecoration.style.width = `${Math.max(
-        0,
-        Math.min(scrollLeft, SHADOW_WIDTH),
-      )}px`;
-
-      topDecoration.style.height = `${Math.max(
-        0,
-        Math.min(scrollTop, SHADOW_WIDTH),
-      )}px`;
-
-      if (rebuildRequested) {
-        rebuildAnnotations(
-          view,
-          scrollHeight,
-          trackYHeight,
-          holder,
-          annotations,
-        );
-        rebuildRequested = false;
-      }
-    }
-
-    function requestUpdate() {
-      if (!requested) {
-        requested = true;
-        view.requestMeasure({ read: update });
-      }
-    }
-
-    function requestRebuild() {
-      requestUpdate();
-      rebuildRequested = true;
-    }
-
-    observer = new ResizeObserver(requestRebuild);
-    observer.observe(holder);
-
-    scrollDOM.addEventListener('scroll', requestUpdate);
-
-    requestRebuild();
-
-    return {
-      update: requestRebuild,
-      destroy() {
-        disposePanelReaction();
-        observer?.disconnect();
-        scrollDOM.removeEventListener('scroll', requestUpdate);
-        parentDOM.replaceChild(holder, holder);
-      },
-    };
-  });
-}
diff --git a/subprojects/frontend/src/editor/semanticHighlighting.ts b/subprojects/frontend/src/editor/semanticHighlighting.ts
index 2c1bd67d..1f2e564c 100644
--- a/subprojects/frontend/src/editor/semanticHighlighting.ts
+++ b/subprojects/frontend/src/editor/semanticHighlighting.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { RangeSet, type TransactionSpec } from '@codemirror/state';
 import { Decoration } from '@codemirror/view';
 
diff --git a/subprojects/frontend/src/index.tsx b/subprojects/frontend/src/index.tsx
index 29b2b196..cb11e6c3 100644
--- a/subprojects/frontend/src/index.tsx
+++ b/subprojects/frontend/src/index.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { configure } from 'mobx';
 import { type Root, createRoot } from 'react-dom/client';
 
diff --git a/subprojects/frontend/src/language/folding.ts b/subprojects/frontend/src/language/folding.ts
index 4dabfa27..b4d4ca22 100644
--- a/subprojects/frontend/src/language/folding.ts
+++ b/subprojects/frontend/src/language/folding.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type { EditorState } from '@codemirror/state';
 import type { SyntaxNode } from '@lezer/common';
 
diff --git a/subprojects/frontend/src/language/indentation.ts b/subprojects/frontend/src/language/indentation.ts
index a0f7032d..8446d7fa 100644
--- a/subprojects/frontend/src/language/indentation.ts
+++ b/subprojects/frontend/src/language/indentation.ts
@@ -1,3 +1,10 @@
+/*
+ * Copyright (C) 2018-2021 by Marijn Haverbeke <marijnh@gmail.com> and others
+ * Copyright (C) 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: MIT OR EPL-2.0
+ */
+
 import type { TreeIndentContext } from '@codemirror/language';
 
 /**
diff --git a/subprojects/frontend/src/language/problem.grammar b/subprojects/frontend/src/language/problem.grammar
index 704badab..a7b1fb0a 100644
--- a/subprojects/frontend/src/language/problem.grammar
+++ b/subprojects/frontend/src/language/problem.grammar
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 @detectDelim
 
 @external prop implicitCompletion from './props'
diff --git a/subprojects/frontend/src/language/problemLanguageSupport.ts b/subprojects/frontend/src/language/problemLanguageSupport.ts
index c3ae7ed9..2121e05f 100644
--- a/subprojects/frontend/src/language/problemLanguageSupport.ts
+++ b/subprojects/frontend/src/language/problemLanguageSupport.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import {
   foldInside,
   foldNodeProp,
diff --git a/subprojects/frontend/src/language/props.ts b/subprojects/frontend/src/language/props.ts
index 65392e75..aa67145a 100644
--- a/subprojects/frontend/src/language/props.ts
+++ b/subprojects/frontend/src/language/props.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 /* eslint-disable import/prefer-default-export -- Lezer needs non-default exports */
 
 import { NodeProp } from '@lezer/common';
diff --git a/subprojects/frontend/src/theme/ThemeProvider.tsx b/subprojects/frontend/src/theme/ThemeProvider.tsx
index 7bda1ede..78146f25 100644
--- a/subprojects/frontend/src/theme/ThemeProvider.tsx
+++ b/subprojects/frontend/src/theme/ThemeProvider.tsx
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import {
   alpha,
   createTheme,
@@ -6,7 +12,6 @@ import {
   type ThemeOptions,
   ThemeProvider as MaterialUiThemeProvider,
   type TypographyStyle,
-  useTheme,
   type CSSObject,
 } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
@@ -70,7 +75,7 @@ function createResponsiveTheme(
     ...options,
     typography: {
       fontFamily:
-        '"InterVariable", "Inter", "Roboto", "Helvetica", "Arial", sans-serif',
+        '"Inter Variable", "Inter", "Roboto", "Helvetica", "Arial", sans-serif',
       fontWeightMedium: 600,
       fontWeightEditorNormal: 400,
       fontWeightEditorBold: 700,
@@ -80,7 +85,7 @@ function createResponsiveTheme(
       },
       editor: {
         fontFamily:
-          '"JetBrains MonoVariable", "JetBrains Mono", "Cascadia Code", "Fira Code", monospace',
+          '"JetBrains Mono Variable", "JetBrains Mono", "Cascadia Code", "Fira Code", monospace',
         fontFeatureSettings: '"liga", "calt"',
         // `rem` for JetBrains MonoVariable make the text too large in Safari.
         fontSize: '16px',
@@ -350,15 +355,14 @@ export function ContrastThemeProvider({
 }: {
   children?: ReactNode;
 }): JSX.Element {
-  const theme = useTheme();
   const contrastTheme = useContext(ContrastThemeContext);
   if (!contrastTheme) {
     throw new Error('ContrastThemeProvider must be used within ThemeProvider');
   }
   return (
-    <ThemeAndContrastThemeProvider theme={contrastTheme} contrastTheme={theme}>
+    <MaterialUiThemeProvider theme={contrastTheme}>
       {children}
-    </ThemeAndContrastThemeProvider>
+    </MaterialUiThemeProvider>
   );
 }
 
@@ -378,7 +382,7 @@ const ThemeProvider = observer(function ThemeProvider({
   return (
     <ThemeAndContrastThemeProvider
       theme={darkMode ? darkTheme : lightTheme}
-      contrastTheme={darkMode ? lightTheme : darkTheme}
+      contrastTheme={darkTheme}
     >
       {children}
     </ThemeAndContrastThemeProvider>
diff --git a/subprojects/frontend/src/theme/ThemeStore.ts b/subprojects/frontend/src/theme/ThemeStore.ts
index e09d8d99..7c657449 100644
--- a/subprojects/frontend/src/theme/ThemeStore.ts
+++ b/subprojects/frontend/src/theme/ThemeStore.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { makeAutoObservable } from 'mobx';
 
 export enum ThemePreference {
diff --git a/subprojects/frontend/src/utils/CancelledError.ts b/subprojects/frontend/src/utils/CancelledError.ts
index ee23676f..96b67af7 100644
--- a/subprojects/frontend/src/utils/CancelledError.ts
+++ b/subprojects/frontend/src/utils/CancelledError.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 export default class CancelledError extends Error {
   constructor(message = 'Operation cancelled') {
     super(message);
diff --git a/subprojects/frontend/src/utils/PendingTask.ts b/subprojects/frontend/src/utils/PendingTask.ts
index fd52cef1..80d1a346 100644
--- a/subprojects/frontend/src/utils/PendingTask.ts
+++ b/subprojects/frontend/src/utils/PendingTask.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import TimeoutError from './TimeoutError';
 import getLogger from './getLogger';
 
@@ -20,7 +26,6 @@ export default class PendingTask<T> {
   ) {
     this.resolveCallback = resolveCallback;
     this.rejectCallback = rejectCallback;
-    // @ts-expect-error See https://github.com/mobxjs/mobx/issues/3582 on `@types/node` pollution
     this.timeout = setTimeout(() => {
       if (!this.resolved) {
         this.reject(new TimeoutError());
diff --git a/subprojects/frontend/src/utils/PriorityMutex.ts b/subprojects/frontend/src/utils/PriorityMutex.ts
index 78736141..c1215c76 100644
--- a/subprojects/frontend/src/utils/PriorityMutex.ts
+++ b/subprojects/frontend/src/utils/PriorityMutex.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import CancelledError from './CancelledError';
 import PendingTask from './PendingTask';
 import getLogger from './getLogger';
diff --git a/subprojects/frontend/src/utils/TimeoutError.ts b/subprojects/frontend/src/utils/TimeoutError.ts
index eb800f40..21365502 100644
--- a/subprojects/frontend/src/utils/TimeoutError.ts
+++ b/subprojects/frontend/src/utils/TimeoutError.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 export default class TimeoutError extends Error {
   constructor() {
     super('Operation timed out');
diff --git a/subprojects/frontend/src/utils/getLogger.ts b/subprojects/frontend/src/utils/getLogger.ts
index 301fd76d..09b0b17f 100644
--- a/subprojects/frontend/src/utils/getLogger.ts
+++ b/subprojects/frontend/src/utils/getLogger.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import styles, { type CSPair } from 'ansi-styles';
 import log from 'loglevel';
 import prefix from 'loglevel-plugin-prefix';
diff --git a/subprojects/frontend/src/utils/useDelayedSnackbar.ts b/subprojects/frontend/src/utils/useDelayedSnackbar.ts
index 54716c0c..3d6df3e3 100644
--- a/subprojects/frontend/src/utils/useDelayedSnackbar.ts
+++ b/subprojects/frontend/src/utils/useDelayedSnackbar.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import {
   useSnackbar,
   type SnackbarKey,
@@ -21,7 +27,6 @@ export default function useDelayedSnackbar(
       delay = defaultDelay,
     ) => {
       let key: SnackbarKey | undefined;
-      // @ts-expect-error See https://github.com/mobxjs/mobx/issues/3582 on `@types/node` pollution
       let timeout: number | undefined = setTimeout(() => {
         timeout = undefined;
         key = enqueueSnackbar(message, options);
diff --git a/subprojects/frontend/src/xtext/BackendConfig.ts b/subprojects/frontend/src/xtext/BackendConfig.ts
index 41737c0b..4c7eac5f 100644
--- a/subprojects/frontend/src/xtext/BackendConfig.ts
+++ b/subprojects/frontend/src/xtext/BackendConfig.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 /* eslint-disable @typescript-eslint/no-redeclare -- Declare types with their companion objects */
 
 import { z } from 'zod';
diff --git a/subprojects/frontend/src/xtext/ContentAssistService.ts b/subprojects/frontend/src/xtext/ContentAssistService.ts
index 78f61c06..fd30c4f9 100644
--- a/subprojects/frontend/src/xtext/ContentAssistService.ts
+++ b/subprojects/frontend/src/xtext/ContentAssistService.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type {
   Completion,
   CompletionContext,
diff --git a/subprojects/frontend/src/xtext/HighlightingService.ts b/subprojects/frontend/src/xtext/HighlightingService.ts
index a126ee40..447f1401 100644
--- a/subprojects/frontend/src/xtext/HighlightingService.ts
+++ b/subprojects/frontend/src/xtext/HighlightingService.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type EditorStore from '../editor/EditorStore';
 import type { IHighlightRange } from '../editor/semanticHighlighting';
 
diff --git a/subprojects/frontend/src/xtext/OccurrencesService.ts b/subprojects/frontend/src/xtext/OccurrencesService.ts
index fc72ead2..c9c6c699 100644
--- a/subprojects/frontend/src/xtext/OccurrencesService.ts
+++ b/subprojects/frontend/src/xtext/OccurrencesService.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type { Transaction } from '@codemirror/state';
 import { debounce } from 'lodash-es';
 import ms from 'ms';
diff --git a/subprojects/frontend/src/xtext/UpdateService.ts b/subprojects/frontend/src/xtext/UpdateService.ts
index 63e28652..ee5ebde2 100644
--- a/subprojects/frontend/src/xtext/UpdateService.ts
+++ b/subprojects/frontend/src/xtext/UpdateService.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type { ChangeDesc, Transaction } from '@codemirror/state';
 import { debounce } from 'lodash-es';
 import { nanoid } from 'nanoid';
diff --git a/subprojects/frontend/src/xtext/UpdateStateTracker.ts b/subprojects/frontend/src/xtext/UpdateStateTracker.ts
index 5d4ce49e..4ce93ed6 100644
--- a/subprojects/frontend/src/xtext/UpdateStateTracker.ts
+++ b/subprojects/frontend/src/xtext/UpdateStateTracker.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import {
   type ChangeDesc,
   ChangeSet,
diff --git a/subprojects/frontend/src/xtext/ValidationService.ts b/subprojects/frontend/src/xtext/ValidationService.ts
index 72414590..64fb63eb 100644
--- a/subprojects/frontend/src/xtext/ValidationService.ts
+++ b/subprojects/frontend/src/xtext/ValidationService.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type { Diagnostic } from '@codemirror/lint';
 
 import type EditorStore from '../editor/EditorStore';
diff --git a/subprojects/frontend/src/xtext/XtextClient.ts b/subprojects/frontend/src/xtext/XtextClient.ts
index 14fb2430..e8181af0 100644
--- a/subprojects/frontend/src/xtext/XtextClient.ts
+++ b/subprojects/frontend/src/xtext/XtextClient.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import type {
   CompletionContext,
   CompletionResult,
diff --git a/subprojects/frontend/src/xtext/XtextWebSocketClient.ts b/subprojects/frontend/src/xtext/XtextWebSocketClient.ts
index 6b734546..6bb7eec8 100644
--- a/subprojects/frontend/src/xtext/XtextWebSocketClient.ts
+++ b/subprojects/frontend/src/xtext/XtextWebSocketClient.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import { createAtom, makeAutoObservable, observable } from 'mobx';
 import ms from 'ms';
 import { nanoid } from 'nanoid';
diff --git a/subprojects/frontend/src/xtext/fetchBackendConfig.ts b/subprojects/frontend/src/xtext/fetchBackendConfig.ts
index 15e976d8..71ff2e63 100644
--- a/subprojects/frontend/src/xtext/fetchBackendConfig.ts
+++ b/subprojects/frontend/src/xtext/fetchBackendConfig.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import BackendConfig, { ENDPOINT } from './BackendConfig';
 
 export default async function fetchBackendConfig(): Promise<BackendConfig> {
diff --git a/subprojects/frontend/src/xtext/webSocketMachine.ts b/subprojects/frontend/src/xtext/webSocketMachine.ts
index 216ed86a..2fb1f52f 100644
--- a/subprojects/frontend/src/xtext/webSocketMachine.ts
+++ b/subprojects/frontend/src/xtext/webSocketMachine.ts
@@ -1,5 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import ms from 'ms';
-import { actions, assign, createMachine, RaiseAction } from 'xstate';
+import { actions, assign, createMachine } from 'xstate';
 
 const { raise } = actions;
 
@@ -217,16 +223,15 @@ export default createMachine(
         ...context,
         errors: [],
       })),
-      // Workaround from https://github.com/statelyai/xstate/issues/1414#issuecomment-699972485
       raiseTimeoutError: raise({
         type: 'ERROR',
         message: 'Open timeout',
-      }) as RaiseAction<WebSocketEvent>,
+      }),
       raisePromiseRejectionError: (_context, { data }) =>
-        raise({
+        raise<WebSocketContext, WebSocketEvent>({
           type: 'ERROR',
-          message: data,
-        }) as RaiseAction<WebSocketEvent>,
+          message: String(data),
+        }),
     },
   },
 );
diff --git a/subprojects/frontend/src/xtext/xtextMessages.ts b/subprojects/frontend/src/xtext/xtextMessages.ts
index ec7a2a31..bbbff064 100644
--- a/subprojects/frontend/src/xtext/xtextMessages.ts
+++ b/subprojects/frontend/src/xtext/xtextMessages.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 /* eslint-disable @typescript-eslint/no-redeclare -- Declare types with their companion objects */
 
 import { z } from 'zod';
diff --git a/subprojects/frontend/src/xtext/xtextServiceResults.ts b/subprojects/frontend/src/xtext/xtextServiceResults.ts
index e93c6714..d3b467ad 100644
--- a/subprojects/frontend/src/xtext/xtextServiceResults.ts
+++ b/subprojects/frontend/src/xtext/xtextServiceResults.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 /* eslint-disable @typescript-eslint/no-redeclare -- Declare types with their companion objects */
 
 import { z } from 'zod';
diff --git a/subprojects/frontend/tsconfig.base.json b/subprojects/frontend/tsconfig.base.json
index 585866f1..5ef50b5e 100644
--- a/subprojects/frontend/tsconfig.base.json
+++ b/subprojects/frontend/tsconfig.base.json
@@ -1,7 +1,41 @@
+/*
+ * Copyright (c) Microsoft Corporation.
+ * Copyright (c) 2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: MIT OR EPL-2.0
+ *
+ * This file is based on
+ * https://github.com/tsconfig/bases/blob/7db25a41bc5a9c0f66d91f6f3aa28438afcb2f18/bases/strictest.json
+ * but we moved it inside the project for better tooling support.
+ */
 {
-  "extends": "@tsconfig/node18-strictest-esm/tsconfig.json",
   "compilerOptions": {
-    "useDefineForClassFields": true,
+    "strict": true,
+    "allowUnusedLabels": false,
+    "allowUnreachableCode": false,
+    "exactOptionalPropertyTypes": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noUncheckedIndexedAccess": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    // "verbatimModuleSyntax" is incompatible with `import` syntax in modules
+    // with CommonJS import resolution, so we use "isolatedModules" only.
+    // "verbatimModuleSyntax": false,
     "isolatedModules": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    // Project-specific configuration below.
+    "module": "es2022",
+    "moduleResolution": "node",
+    "incremental": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "build/typescript"
   }
 }
diff --git a/subprojects/frontend/tsconfig.json b/subprojects/frontend/tsconfig.json
index 35abd789..06f6d8fe 100644
--- a/subprojects/frontend/tsconfig.json
+++ b/subprojects/frontend/tsconfig.json
@@ -1,8 +1,12 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
 {
   "extends": "./tsconfig.base.json",
   "compilerOptions": {
     "jsx": "react-jsx",
-    "noEmit": true,
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "types": ["vite/client", "vite-plugin-pwa/client"]
   },
diff --git a/subprojects/frontend/tsconfig.node.json b/subprojects/frontend/tsconfig.node.json
index f4908bcb..47feaf97 100644
--- a/subprojects/frontend/tsconfig.node.json
+++ b/subprojects/frontend/tsconfig.node.json
@@ -1,3 +1,8 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
 {
   "extends": "./tsconfig.base.json",
   "compilerOptions": {
@@ -10,6 +15,7 @@
   "include": [
     ".eslintrc.cjs",
     "config/*.ts",
+    "config/*.cjs",
     "prettier.config.cjs",
     "types/node",
     "vite.config.ts"
diff --git a/subprojects/frontend/tsconfig.shared.json b/subprojects/frontend/tsconfig.shared.json
index b7e1de55..154fe122 100644
--- a/subprojects/frontend/tsconfig.shared.json
+++ b/subprojects/frontend/tsconfig.shared.json
@@ -1,13 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
 {
   "extends": "./tsconfig.base.json",
   "compilerOptions": {
     "composite": true,
     "lib": ["ES2022"],
     "types": [],
-    "emitDeclarationOnly": true,
-    "outDir": "build/typescript"
   },
   "include": [
-    "src/xtext/BackendConfig.ts",
+    "src/xtext/BackendConfig.ts"
   ]
 }
diff --git a/subprojects/frontend/types/ImportMeta.d.ts b/subprojects/frontend/types/ImportMeta.d.ts
index c32b48f5..f5a32ef1 100644
--- a/subprojects/frontend/types/ImportMeta.d.ts
+++ b/subprojects/frontend/types/ImportMeta.d.ts
@@ -1,3 +1,10 @@
+/*
+ * Copyright (c) 2019-present, Yuxi (Evan) You and Vite contributors
+ * Copyright (c) 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: MIT OR EPL-2.0
+ */
+
 interface ImportMeta {
   env: {
     BASE_URL: string;
diff --git a/subprojects/frontend/types/grammar.d.ts b/subprojects/frontend/types/grammar.d.ts
index 1480085b..e7a7eebf 100644
--- a/subprojects/frontend/types/grammar.d.ts
+++ b/subprojects/frontend/types/grammar.d.ts
@@ -1,3 +1,10 @@
+/*
+ * Copyright (C) 2018 by Marijn Haverbeke <marijn@haverbeke.berlin> and others
+ * Copyright (C) 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: MIT OR EPL-2.0
+ */
+
 declare module '*.grammar' {
   import type { LRParser } from '@lezer/lr';
 
diff --git a/subprojects/frontend/types/node/@lezer-generator-rollup.d.ts b/subprojects/frontend/types/node/@lezer-generator-rollup.d.ts
index 9c1ff03e..4ef9f4e3 100644
--- a/subprojects/frontend/types/node/@lezer-generator-rollup.d.ts
+++ b/subprojects/frontend/types/node/@lezer-generator-rollup.d.ts
@@ -1,3 +1,10 @@
+/*
+ * Copyright (C) 2018 by Marijn Haverbeke <marijn@haverbeke.berlin> and others
+ * Copyright (C) 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: MIT OR EPL-2.0
+ */
+
 // We have to explicitly redeclare the type of the `./rollup` ESM export of `@lezer/generator`,
 // because TypeScript can't find it on its own even with `"moduleResolution": "Node16"`.
 declare module '@lezer/generator/rollup' {
diff --git a/subprojects/frontend/types/windowControlsOverlay.d.ts b/subprojects/frontend/types/windowControlsOverlay.d.ts
index d8f3182f..2513d620 100644
--- a/subprojects/frontend/types/windowControlsOverlay.d.ts
+++ b/subprojects/frontend/types/windowControlsOverlay.d.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 interface WindowControlsOverlayGeometryChangeEvent extends Event {
   titlebarAreaRect: DOMRect;
 
diff --git a/subprojects/frontend/vite.config.ts b/subprojects/frontend/vite.config.ts
index cd9993cc..9e08ccc4 100644
--- a/subprojects/frontend/vite.config.ts
+++ b/subprojects/frontend/vite.config.ts
@@ -1,3 +1,9 @@
+/*
+ * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';