RolnickLab · annavik · Jun 2, 2026 · May 29, 2026 · May 29, 2026 · May 29, 2026
diff --git a/compose/local/ui/Dockerfile b/compose/local/ui/Dockerfile
@@ -1,5 +1,5 @@
 # Node version should always match the version in `ui/.nvmrc`
-FROM node:18
+FROM node:22
 
 # Set the working directory in the container
 WORKDIR /app

diff --git a/ui/.nvmrc b/ui/.nvmrc
@@ -1,3 +1,3 @@
-v18.12.0
+v22.12.0
 
 # This should always match the version in `local/ui/Dockerfile`
diff --git a/ui/README.md b/ui/README.md
@@ -50,7 +50,7 @@ Now you can navigate to the following URL: http://localhost:3000
 
 ### Configuration
 
-By default this will try to connect to http://localhost:8000 for the backend API. Use the env var `API_PROXY_TARGET` to change this. You can create multiple `.env` files in the `ui/` directory for different environments or configurations. For example, use `yarn start --mode staging` to load `.env.staging` and point the `API_PROXY_TARGET` to a remote backend.
+By default the app will try to connect to http://localhost:8000 for the backend API. Use the env var `API_PROXY_TARGET` to change this. You can create multiple `.env` files in the `ui/` directory for different environments or configurations. For example, use `yarn start --mode staging` to load `.env.staging` and point the `API_PROXY_TARGET` to a remote backend.
 
 ## Nova UI Kit
 
@@ -127,11 +127,11 @@ Text styles are defined using SCSS mixins in `nova-ui-kit/mixins.scss` with the
 
 ```scss
 .some-title {
-  @include heading-large();
+  @include heading-large;
 }
 
 .some-text {
-  @include body-base();
+  @include body-base;
 }
 ```
 

diff --git a/ui/package.json b/ui/package.json
@@ -2,6 +2,7 @@
   "name": "ami-platform",
   "version": "0.1.0",
   "private": true,
+  "type": "module",
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.3",
@@ -18,19 +19,13 @@
     "@sentry/react": "^7.81.1",
     "@tanstack/react-query": "^4.29.5",
     "@tanstack/react-query-devtools": "^4.29.6",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^13.0.0",
-    "@types/node": "^16.7.13",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "@vitejs/plugin-react": "^4.1.1",
-    "axios": "1.14.0",
+    "axios": "^1.16.0",
     "class-variance-authority": "^0.7.1",
     "classnames": "^2.3.2",
     "clsx": "^2.1.1",
     "cmdk": "^0.2.0",
     "leaflet": "^1.9.3",
-    "lodash": "^4.17.21",
+    "lodash": "^4.18.1",
     "lucide-react": "^1.0.1",
     "plotly.js": "^2.25.2",
     "react": "^18.2.0",
@@ -43,10 +38,7 @@
     "react-markdown": "^9.0.1",
     "react-plotly.js": "^2.6.0",
     "react-router-dom": "^6.8.2",
-    "tailwind-merge": "^3.6.0",
-    "typescript": "^4.4.2",
-    "vite": "^4.5.3",
-    "vite-tsconfig-paths": "^4.2.1"
+    "tailwind-merge": "^3.6.0"
   },
   "scripts": {
     "start": "vite",
@@ -80,21 +72,31 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.0.0",
     "@types/leaflet": "^1.9.3",
     "@types/lodash": "^4",
+    "@types/node": "^16.7.13",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@types/react-plotly.js": "^2.6.0",
     "@typescript-eslint/eslint-plugin": "^6.11.0",
     "@typescript-eslint/parser": "^6.11.0",
+    "@vitejs/plugin-react": "4.3.4",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.53.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "postcss": "^8.4.47",
+    "postcss": "^8.5.10",
     "prettier": "2.8.4",
     "sass": "^1.58.3",
     "tailwindcss": "^3.4.14",
     "ts-jest": "^29.1.1",
+    "typescript": "^4.4.2",
+    "vite": "6",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-svgr": "^4.1.0"
-  }
+    "vite-plugin-svgr": "^4.1.0",
+    "vite-tsconfig-paths": "^4.2.1"
+  },
+  "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
 }
diff --git a/ui/postcss.config.js → ui/postcss.config.cjs b/ui/postcss.config.js → ui/postcss.config.cjs
diff --git a/ui/src/components/blueprint-collection/blueprint-collection.module.scss b/ui/src/components/blueprint-collection/blueprint-collection.module.scss
@@ -47,7 +47,7 @@
     color: var(--color-foreground);
     padding: 8px;
     box-sizing: border-box;
-    @include body-small();
+    @include body-small;
     line-height: 12px;
 
     span {

diff --git a/ui/src/components/breadcrumbs/breadcrumbs.module.scss b/ui/src/components/breadcrumbs/breadcrumbs.module.scss
@@ -9,7 +9,7 @@
 
 .breadcrumb {
   display: block;
-  @include body-small();
+  @include body-small;
   font-weight: 500;
   color: var(--color-foreground);
 

diff --git a/ui/src/components/cookie-dialog/cookie-dialog.module.scss b/ui/src/components/cookie-dialog/cookie-dialog.module.scss
@@ -12,7 +12,7 @@
   z-index: 50;
 
   h1 {
-    @include body-xlarge();
+    @include body-xlarge;
     margin: 0;
 
     &:not(:last-child) {
@@ -21,7 +21,7 @@
   }
 
   p {
-    @include body-small();
+    @include body-small;
     margin: 0;
 
     &:not(:last-child) {

diff --git a/ui/src/components/fetch-info/fetch-info.module.scss b/ui/src/components/fetch-info/fetch-info.module.scss
@@ -10,7 +10,7 @@
   }
 
   span {
-    @include body-small();
+    @include body-small;
     font-weight: 600;
     color: var(--color-muted-foreground);
   }

diff --git a/ui/src/components/form/layout/layout.module.scss b/ui/src/components/form/layout/layout.module.scss
@@ -16,15 +16,15 @@
 }
 
 .sectionTitle {
-  @include body-large();
+  @include body-large;
   color: var(--color-foreground);
   font-weight: 600;
   margin: 0;
 }
 
 .sectionDescription {
   display: block;
-  @include body-small();
+  @include body-small;
   color: var(--color-muted-foreground);
   font-style: italic;
   word-break: break-word;

diff --git a/ui/src/components/header/user-info-dialog/user-info-dialog.module.scss b/ui/src/components/header/user-info-dialog/user-info-dialog.module.scss
@@ -7,7 +7,7 @@
   justify-content: center;
   border-radius: 50%;
   outline: none;
-  @include body-small();
+  @include body-small;
   font-weight: 600;
   color: var(--color-primary);
   text-transform: uppercase;

diff --git a/ui/src/components/header/version-info/version-info.module.scss b/ui/src/components/header/version-info/version-info.module.scss
@@ -6,7 +6,7 @@
 }
 
 .version {
-  @include body-small();
+  @include body-small;
   color: var(--color-foreground);
   white-space: nowrap;
 }
diff --git a/ui/src/components/info-page/info-page.module.scss b/ui/src/components/info-page/info-page.module.scss
@@ -30,7 +30,7 @@
   margin: 0 auto;
 
   h1 {
-    @include heading-small();
+    @include heading-small;
     margin: 0;
 
     &:not(:last-child) {
@@ -39,7 +39,7 @@
   }
 
   h2 {
-    @include body-xlarge();
+    @include body-xlarge;
     margin: 0;
 
     &:not(:last-child) {
@@ -48,7 +48,7 @@
   }
 
   h3 {
-    @include body-base();
+    @include body-base;
     font-weight: 600;
     margin: 0;
 
@@ -58,7 +58,7 @@
   }
 
   p {
-    @include body-base();
+    @include body-base;
     margin: 0;
 
     &:not(:last-child) {
@@ -81,7 +81,7 @@
 
     li {
       display: list-item;
-      @include body-base();
+      @include body-base;
 
       &:not(:last-child) {
         margin-bottom: 8px;
@@ -97,7 +97,7 @@
 
     li {
       display: list-item;
-      @include body-base();
+      @include body-base;
 
       &:not(:last-child) {
         margin-bottom: 8px;
@@ -108,7 +108,7 @@
       margin: 0 0 8px;
 
       li {
-        @include body-xlarge();
+        @include body-xlarge;
 
         h2 {
           display: inline;

diff --git a/ui/src/components/navigation/navigation-bar.module.scss b/ui/src/components/navigation/navigation-bar.module.scss
@@ -59,15 +59,15 @@
 
 .itemCount {
   display: block;
-  @include body-xlarge();
+  @include body-xlarge;
   font-weight: 600;
   color: var(--color-primary);
   white-space: nowrap;
 }
 
 .itemTitle {
   display: block;
-  @include body-overline-small();
+  @include body-overline-small;
   font-weight: 600;
   color: var(--color-muted-foreground);
   white-space: nowrap;

diff --git a/ui/src/components/terms-of-service-info/terms-of-service-info.module.scss b/ui/src/components/terms-of-service-info/terms-of-service-info.module.scss
@@ -2,15 +2,15 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  @include body-small();
+  @include body-small;
   padding: 8px 16px;
   border-radius: 4px;
   background-color: var(--color-green-100);
   color: var(--color-success-700);
   margin-bottom: 16px;
 
   p {
-    @include body-small();
+    @include body-small;
     margin: 0;
   }
 

diff --git a/ui/src/nova-ui-kit/components/badge/badge.module.scss b/ui/src/nova-ui-kit/components/badge/badge.module.scss
@@ -4,7 +4,7 @@
   background-color: var(--color-green-100);
   color: var(--color-success-700);
   text-align: center;
-  @include body-overline-small();
+  @include body-overline-small;
   font-weight: 600;
 
   &.deprecated {

diff --git a/ui/src/nova-ui-kit/components/card/card.module.scss b/ui/src/nova-ui-kit/components/card/card.module.scss
@@ -46,11 +46,11 @@
   word-break: break-word;
 
   &.medium {
-    @include body-small();
+    @include body-small;
   }
 
   &.large {
-    @include body-base();
+    @include body-base;
 
     &:not(:last-child) {
       margin-bottom: 2px;
@@ -62,10 +62,10 @@
   color: var(--color-neutral-600);
 
   &.medium {
-    @include body-small();
+    @include body-small;
   }
 
   &.large {
-    @include body-small();
+    @include body-small;
   }
 }
diff --git a/ui/src/nova-ui-kit/components/checkbox/checkbox.module.scss b/ui/src/nova-ui-kit/components/checkbox/checkbox.module.scss
@@ -42,7 +42,7 @@
 }
 
 .label {
-  @include body-small();
+  @include body-small;
   color: var(--color-muted-foreground);
   margin-left: 6px;
 

diff --git a/ui/src/nova-ui-kit/components/combo-box/styles.module.scss b/ui/src/nova-ui-kit/components/combo-box/styles.module.scss
@@ -26,7 +26,7 @@ $accessory-wrapper-size: 38px;
   width: 100%;
   border-radius: 4px;
   padding: 8px 12px;
-  @include body-small();
+  @include body-small;
   color: var(--color-foreground);
   border: 1px solid var(--color-border);
   box-sizing: border-box;
@@ -61,7 +61,7 @@ $accessory-wrapper-size: 38px;
   justify-content: flex-start;
   padding: 8px 12px;
   border-radius: 4px;
-  @include body-small();
+  @include body-small;
   color: var(--color-foreground);
   box-sizing: border-box;
 
@@ -101,7 +101,7 @@ $accessory-wrapper-size: 38px;
   }
 
   .details {
-    @include body-small();
+    @include body-small;
     color: var(--color-muted-foreground);
     padding: 0 8px 0 32px;
   }

diff --git a/ui/src/nova-ui-kit/components/dialog/dialog.module.scss b/ui/src/nova-ui-kit/components/dialog/dialog.module.scss
@@ -73,7 +73,7 @@ $dialog-padding-medium: 32px;
 .dialogTitle {
   all: unset;
   display: block;
-  @include body-xlarge();
+  @include body-xlarge;
   font-weight: 600;
   color: var(--color-foreground);
   padding-top: 2px;

diff --git a/ui/src/nova-ui-kit/components/form-stepper/form-stepper.module.scss b/ui/src/nova-ui-kit/components/form-stepper/form-stepper.module.scss
@@ -15,7 +15,7 @@
   span {
     padding: 0 32px;
     white-space: nowrap;
-    @include body-overline-small();
+    @include body-overline-small;
     font-weight: 600;
     color: var(--color-muted-foreground);
   }

diff --git a/ui/src/nova-ui-kit/components/image-carousel/image-carousel.module.scss b/ui/src/nova-ui-kit/components/image-carousel/image-carousel.module.scss
@@ -68,7 +68,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  @include body-small();
+  @include body-small;
   color: var(--color-foreground);
   text-align: center;
 

diff --git a/ui/src/nova-ui-kit/components/info-block/info-block.module.scss b/ui/src/nova-ui-kit/components/info-block/info-block.module.scss
@@ -1,5 +1,5 @@
 .bubble {
-  @include bubble-label();
+  @include bubble-label;
 
   @media not print {
     margin: 4px 0;